Cara Menggunakan Tabel Data di WordPress – Cara Kreatif untuk Membangun Tabel HTML Data-Diisi

Cara Menggunakan Tabel Data di WordPress – Cara Kreatif untuk Membangun Tabel HTML Data-Diisi

Cara Menggunakan Tabel Data di WordPress – Cara Kreatif untuk Membangun Tabel HTML Data-Diisi
СОДЕРЖАНИЕ
02 июня 2020

Tabel tidak pernah menjadi sesuatu yang sangat baik di WordPress. Pada dasarnya, jika Anda ingin menampilkan tabel data di WordPress, Anda kemungkinan besar akan membuat seluruh presentasi dengan tangan – menggunakan HTML dan CSS mentah untuk membuat semuanya terlihat baik.


Dan tidak, saya belum lupa tentang editor blok baru. Meskipun tentu saja membuat membuat dan menampilkan tabel lebih mudah secara keseluruhan, itu masih bukan solusi yang sempurna, terutama untuk dataset besar.

Ngomong-ngomong, karena tabel adalah sesuatu yang sudah sering kami gunakan di posting kami di sini di CodeinWP, saya ingin berbagi beberapa strategi utama kami dengan Anda hari ini.

Dalam panduan ini, saya akan menyajikan beberapa ide kreatif tentang bagaimana Anda dapat menggunakan tabel HTML / tabel data di WordPress, membuatnya terlihat asli ✨, dan juga memastikan bahwa mereka dioptimalkan untuk seluler dan ramah SEO pada saat yang sama..
Cara Menggunakan Tabel Data di WordPress

Pendekatan tiga cabang kami untuk tabel data di WordPress

Untuk meringkas pendekatan kami dengan cepat, kami telah bekerja dengan tabel data di WordPress dalam tiga cara berbeda:

(Sebuah) Menggunakan tabel responsif dan berpenampilan sederhana untuk menyajikan data dasar dan membuat bagian dari posting kami lebih mudah dicerna.

(b) Menggunakan sesuatu yang kita sebut "tabel tingkat menengah" untuk memungkinkan beberapa fitur tambahan seperti pengurutan pengguna dan penyorotan baris pada mouse hover.

Contoh langsung:

Perusahaan HostingNilai / 5 Popularitas Popularitas Popularitas Pemasaran (Alexa)
Ayo ayah3.50,41223
Bluehost3.30,261780
HostGator3.70,301872
WPEngine4.40,374065
SiteGround4.61,005708
DreamHost4.10,2210030
A2 Hosting3.80,1612709
Cloudways4.50,3918544
Kinsta4.80,2523350
Roda gila4.60,1834689

Dari survei hosting kami

(c) Menggunakan tabel penyegaran otomatis yang memungkinkan pekerjaan dalam yang lebih maju yang tidak cukup terlihat oleh pengguna di frontend. Misalnya, tabel di sini dibuat berdasarkan pada Google Sheet, dan diperbarui secara otomatis (yaitu, setiap kali kami memperbarui sheet, tabel juga diperbarui).

Contoh:demo tabel host visualizer

Inilah cara Anda meniru pendekatan kami dan membuat sendiri beberapa tabel data keren di WordPress:

Strategi # 1: Gunakan Visualizer untuk menghidupkan meja Anda

Mari kita mulai dengan pendekatan yang paling maju dari grup! Maka kita akan membuat hal-hal yang lebih sederhana ketika kita melangkah lebih jauh ke bawah posting ini.

Visualizer adalah salah satu dari plugin kami sendiri dan alat utama untuk membuat strategi pertama ini menangani tabel data di WordPress menjadi mungkin.

  • ��️ Apa itu Visualizer? Ini adalah plugin yang memungkinkan Anda membuat bagan, grafik, dan tabel, dan kemudian memasukkannya ke dalam posting blog Anda melalui kode pendek atau blok. Sangat mudah digunakan jika Anda hanya membutuhkan serangkaian fitur dasar, tetapi juga sangat kuat jika Anda ingin sedikit bermain-main di bawah tenda..

Salah satu hal keren tentang Visualizer adalah Anda dapat memuat data Anda – untuk tabel maupun grafik – dari berbagai sumber. Saat membuat tabel baru, misalnya, Anda dapat mengimpor dari:

  • file CSV,
  • sebuah URL (termasuk Google Sheets),
  • grafik lain,
  • WordPress (dengan membuat filter / alur kerja, yang kemudian meramban melalui database WordPress dan memunculkan data yang Anda inginkan),
  • database secara langsung (menggunakan kueri SQL mentah),
  • ditambah, Anda juga dapat memasukkan data secara manual.


Visualizer: Tables and Charts Manager untuk WordPress

Penulis: Selasar


Peringkat 90%


40.000 + Pemasangan


WP 3.5 + Membutuhkan

Info lebih lanjut

visualizer.zip

Versi Saat Ini: 3.4.3

Terakhir Diperbarui: 4 Mei 2020


Peringkat 90%


40.000 + Pemasangan


WP 3.5 + Membutuhkan

Halaman Plugin WordPress.org


Visualizer: Tables and Charts Manager untuk WordPress

Oke, jadi di mana membawa meja Anda untuk hidup ikut bermain di sini?

Hal yang sulit tentang tabel, secara umum, adalah membuatnya dengan tangan pada dasarnya membutuhkan waktu yang sama dengan memperbaruinya nanti. Kami lebih suka menjadikan tabel sebagai tugas satu kali dan semuanya diperbarui secara otomatis.

Dengan Visualizer, Anda dapat memilih untuk mengambil data untuk tabel Anda dari URL dan kemudian mengatur impor untuk diulang setiap jam / 12 jam / hari / tiga hari.

Apa ini secara efektif berarti bahwa Anda mendapatkan tabel yang menyegarkan sendiri secara otomatis berdasarkan pada perubahan sumber. Baca: tidak perlu kembali ke sana dan memperbaruinya dengan tangan.

Berikut adalah empat cara kreatif yang dapat Anda manfaatkan:

Selalu perbarui studi kasus atau analisis Anda (secara otomatis)

Kami telah gencar ke pasar hosting WordPress. Kami memiliki sejumlah posting tentang topik ini, dan kebanyakan dari mereka memerlukan pembaruan yang berkelanjutan.

Salah satu versi perbandingan hosting utama kami mencakup tabel langsung yang menyoroti waktu muat host yang ditampilkan. Sepertinya ini (tabel langsung):

.visualizer-41792oddTableRow {background-color: #eaeaea! important;}

(Anda mungkin tidak melihatnya beraksi jika Anda pergi ke pos itu sekarang; kami sering mengubahnya di sana, menguji banyak hal.)

Seluruh tabel ini diambil secara otomatis dari Google Sheets. Bahkan logo dan tautan disimpan di dalam Google Sheets (sebagai HTML mentah). Setiap kali kami memperbarui waktu muat, misalnya, mereka juga diperbarui dalam tabel. Belum lagi, pengguna bisa mengurutkan tabel.

Menyiapkan ini sama sekali tidak sulit:

1. Persiapkan barang-barang Google SheetStandard Anda. Ini sebuah contoh:

contoh lembar

Kemudian, "publikasikan ke web" berdasarkan panduan ini.
2. Buat tabel di VisualizerFirst, instal Visualizer plugin, duh!

Pergi ke Media → Perpustakaan Visualizer dan klik Tambah baru. Memilih Meja.

Dari jendela pengaturan, pilih Impor data dari URL, pergi ke Jadwal Impor lalu masukkan URL impor dan jadwal. Seperti itu:

jadwal impor

Simpan meja.
3. Tambahkan tabel ke posting / halaman. Sertakan tabel melalui kode pendek atau menggunakan editor blok. Itu saja, Anda memiliki tabel data di WordPress!

Sekali lagi, dengan pengaturan ini, Anda dapat mengambil data untuk tabel secara otomatis dan kemudian juga memperbarui tabel tersebut.

Terus perbarui beberapa tabel di beberapa posting (secara otomatis)

Ini terkait dengan skenario sebelumnya, tetapi sudutnya sedikit berbeda.

Pada dasarnya, tidak ada yang menghentikan Anda dari menggunakan Google Sheet yang sama dengan sumber data untuk beberapa tabel.

Artinya, Anda dapat menyertakan tabel serupa di beberapa pos / halaman dan tidak perlu khawatir mereka akan menyimpang dari waktu ke waktu (katakanlah, Anda akan memperbarui satu tetapi lupa untuk memperbarui yang lain, dll.).

Saat mengatur meja Anda di Visualizer, Anda dapat masuk ke pengaturan lanjutan dan menyesuaikan berbagai hal seperti pagination, jumlah baris, nonaktifkan / aktifkan pengurutan pengguna, aktifkan pencarian, dan sebagainya. Ini berarti bahwa tabel Anda masih dapat terlihat berbeda walaupun mereka menggunakan sumber data yang sama.

Selalu perbarui lalu lintas / pengguna / nomor penjualan Anda (secara otomatis)

Ada tren di antara bisnis web untuk berbagi berbagai angka / indikator seperti lalu lintas, penjualan, jumlah pengguna yang dilayani, dll. Di situs web mereka.

Namun, tidak semua orang ingin menanamkan layanan eksternal dan dengan demikian tidak dapat memoderasi mereka dengan cara apa pun.

Idealnya, bahkan jika Anda sangat transparan, Anda masih tidak ingin bangun dan mengetahui bahwa embed dari keranjang belanja Anda atau alat lalu lintas menunjukkan penurunan besar – sementara informasi utama Anda mungkin masih mengatakan "lihat seberapa baik yang kami lakukan!"

Jika Anda menambahkan lapisan lain dan mengimpor data ke Google Sheet terlebih dahulu, maka Anda dapat memoderasi semua perubahan sebelum masuk ke tabel lalu lintas / penjualan dan ditayangkan langsung di situs.

Penyiapannya sama dengan skenario sebelumnya. Cukup buat Google Sheet baru, impor atau masukkan nomor Anda, lalu hubungkan ke tabel atau bagan Visualizer.

Minta basis data Anda (secara otomatis)

Visualizer memiliki satu fitur keren lainnya; itu dapat mengimpor data tabel langsung dari database WordPress Anda melalui kueri SQL mentah.

Hal-hal yang cukup maju, ya, tetapi juga memberi Anda banyak kemungkinan jika Anda mau bereksperimen.

Beberapa ide cepat:

Pertama, Anda dapat dengan mudah menampilkan posting yang paling banyak dikomentari. Anda dapat menggunakan daftar tersebut tidak hanya dalam laporan transparansi tetapi juga di halaman arsip Anda. Contoh:

berkomentar pada

Untuk membangun tabel seperti itu, cukup masuk ke Visualizer, buat tabel baru, dan pilih Impor dari basis data.

Di jendela kueri, Anda dapat meletakkan sesuatu seperti ini:

SELECT post_title AS Post, COUNT (DISTINCT c.comment_ID) SEBAGAI Komentar DARI wp_posts p KIRI BERGABUNG wp_comments c PADA p.id = c.comment_post_ID KELOMPOK OLEH p.ID ORDER OLEH Komentar DESC LIMIT 10

Ini akan menampilkan tabel 10 posting Anda yang paling banyak dikomentari.

Anda dapat menyulitkan kueri untuk juga mendapatkan URL, sehingga Anda dapat menjadikan judul-judul posting itu hidup. Ini hanya sebuah contoh. Berikut beberapa hal lain yang dapat Anda lakukan:

  • daftar semua posting Anda dari kategori tertentu atau ditulis oleh penulis
  • lihat tabel yang digunakan plugin lain untuk menyimpan datanya, ambil data yang relevan dari mereka
  • tampilkan produk terlaris Anda dari WooCommerce, bersama dengan jumlah penjualan, tautan, harga, apa pun yang Anda inginkan
  • lakukan hal yang sama dengan Unduhan Digital Mudah; ini ada beberapa pertanyaan siap pakai

Itu tentang hal itu ketika datang ke Visualizer dan bagaimana kami menggunakannya. Tetapi ada juga solusi lain jika Anda tidak memerlukan otomatisasi canggih semacam ini:

Gunakan TablePress untuk pengurutan dan pengeditan tabel yang andal

Kami juga penggemar berat TablePress dan telah menggunakannya di sejumlah posting kami.

Misalnya, ada meja besar di sini – daftar 100 pemain top di pasar tema WordPress. Pratinjau:

contoh direktori tema

Apa yang kita sukai dari TablePress adalah kita dapat meluruskan ulang baris dengan mudah, menyembunyikan baris, menggandakan baris, dan juga memberi pengguna beberapa kontrol untuk mengurutkan tabel.

Misalnya, untuk tabel spesifik itu, kami memiliki beberapa kolom lagi di backend yang tidak kami tampilkan (yang merah). TablePress tidak memaksa kita untuk menghapusnya – kita bisa menyembunyikannya dari tampilan.

tablepress disembunyikan

Gunakan Shortcodes Ultimate untuk germo tabel HTML Anda

Sendiri, Kode Pintas Ultimate (SU) adalah salah satu plugin favorit saya sepanjang masa.

Di antara banyak kode pendeknya, ada juga yang dapat Anda gunakan untuk membuat tabel HTML standar Anda terlihat jauh lebih bagus.

Ini tabel di postingan kami yang membandingkan layanan VPN teratas:

meja su

Itu dibangun melalui HTML mentah, dan kemudian baru saja ditambahkan kode pendek SU di sekitarnya. Yang ini:

[su_table] [/ su_table]

Semua gaya dan batas baris yang Anda lihat adalah SU.

Dengan kata lain, jika tema Anda tidak memiliki CSS yang sangat bagus untuk menangani tabel, gunakan SU.

�� Catatan; ketiga solusi yang dibicarakan dalam posting ini – Visualizer, TablePress, dan SU, dapat menampilkan tabel yang siap untuk seluler dan responsif.

Kesimpulan

Saya mendorong Anda untuk bereksperimen dengan tiga plugin ini. Kami menyukai Visualizer karena ini adalah kreasi kami sendiri, tetapi kami harus mengakui bahwa dua lainnya cukup rapi untuk tugas tertentu!


Visualizer: Tables and Charts Manager untuk WordPress

Penulis: Selasar


Peringkat 90%


40.000 + Pemasangan


WP 3.5 + Membutuhkan

Info lebih lanjut

visualizer.zip

Versi Saat Ini: 3.4.3

Terakhir Diperbarui: 4 Mei 2020


Peringkat 90%


40.000 + Pemasangan


WP 3.5 + Membutuhkan

Halaman Plugin WordPress.org


Visualizer: Tables and Charts Manager untuk WordPress


TablePress

Penulis: Tobias Bäthge


Peringkat 100%


800.000 + Pemasangan


WP 5.3 + Membutuhkan

Info lebih lanjut

tablepress.1.11.zip

Versi Saat Ini: 1.11

Terakhir Diperbarui: 1 April 2020


Peringkat 100%


800.000 + Pemasangan


WP 5.3 + Membutuhkan

Halaman Plugin WordPress.org


TablePress


Plugin WordPress Shortcodes – Shortcodes Ultimate

Penulis: Vladimir Anokhin


Peringkat 98%


800.000 + Pemasangan


WP 4.6 + Membutuhkan

Info lebih lanjut

shortcodes-ultimate.5.9.0.zip

Versi Saat Ini: 5.9.0

Terakhir Diperbarui: 24 Mei 2020


Peringkat 98%


800.000 + Pemasangan


WP 4.6 + Membutuhkan

Halaman Plugin WordPress.org


Plugin WordPress Shortcodes – Shortcodes Ultimate

Apakah Anda menggunakan tabel data di WordPress?

Apa pendapat Anda tentang tabel dan tempatnya di UI WordPress modern?

Editor blok Gutenberg telah membuat membuat tabel lebih ramah-pengguna, jadi pengguna biasa mungkin akan lebih bersedia untuk bereksperimen dengan mereka sekarang. Bagaimanapun, tabel adalah salah satu dari hal-hal klasik yang semua orang yang pernah menggunakan MS Word cukup akrab dengannya. Jadi mengapa Anda tidak bisa? "tambahkan saja" ke WordPress, benar?

Apakah Anda sering menggunakan tabel data di WordPress? Jika demikian, bagaimana Anda membuatnya?

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector