Jika Anda adalah pengguna WordPress dan sering membuat tutorial yang lengkap dan panjang atau menulis artikel mendalam, membuat daftar isi adalah sesuatu yang layak Anda lakukan.

Daftar isi akan memudahkan pembaca dalam mengakses sub-judul tertentu. Karena terkadang pembaca hanya ingin membaca bagian tertentu. WordPress sendiri tidak menyertakan daftar isi sebagai fitur default. Jadi Anda harus menambahkannya sendiri.

Anda bisa menggunakan plugin untuk membuat daftar isi di WordPress atau jika Anda tau sedikit tentang html, Anda tidak perlu menggunakan plugin.

Ada keuntungan sendiri jika menggunakan plugin, karena Anda bisa menambahkan daftar isi secara otomatis. Salah satu plugin yang bisa digunakan untuk membuat daftar isi adalah Kadence Blocks.

Kadence Blocks adalah salah satu plugin populer yang berisi beberapa block yang bisa digunakan untuk menambah fitur dari Gutenberg. Salah satu block yang ada di Kadence Blocks adalah Table of Contents atau Daftar Isi.

Install Kadence Blocks

Kadence Blocks adalah plugin yang memberikan banyak fitur baru pada editor Gutenberg di WordPress. Salah satu fitur yang ada di Kadence Blocks adalah Table of Contents atau Daftar Isi. Daftar isi yang ada di halaman ini dan halaman lain di Ayo Bikin Website dibuat menggunakan Kadence Blocks. Dan yang paling menarik dari Kadence Blocks adalah plugin ini bisa digunakan secara gratis. Mantap!

Sama seperti cara menginstal semua plugin yang ada di direktori plugin WordPress, Anda perlu login ke dashboard untuk menginstal plugin ini.

  1. Dari dashboard klik App Plugins kemudian klik Add New.
  2. Ketik Kadence Blocks di kolom pencarian.
  3. Klik Install Now kemudian klik Activate.
Install Kadence Blocks

Kami memiliki tutorial lengkap cara menginstall plugin jika Anda ingin mengetahui langkah detail dalam menginstall plugin.

Membuat Daftar Isi di WordPress

Setelah Anda sukses menambahkan plugin Kadence Blocks, Anda bisa langsung membuat daftar isi di WordPress Anda.

Tutorial ini akan menjelaskan cara membuat daftar isi di WordPress menggunakan editor Gutenberg karena editor ini cukup mudah untuk digunakan. Untuk Anda yang masih menggunakan editor lama dan ingin mengetahui cara menggunakan editor Gutenberg bisa membaca panduan kami tentang cara membuat konten dengan block editor.

Ada dua cara untuk menambahkan block Daftar Isi, yang pertama adalah dengan klik tombol + yang ada di pojok kiri atas kemudian cari block Table of Contents.

Membuat Daftar Isi di WordPress

Cara yang kedua adalah dengan mengetik /table pada paragraf baru, dan semua block yang dimulai dengan kata table akan muncul di list termasuk Table of Contents dari Kadence Blocks.

Menambahkan Daftar Isi

Setelah block Daftar Isi ditambahkan, akan muncul tulisan “Table of Contents” dan pesan yang berbunyi “Start adding Heading blocks to create a table of contents.” jika konten Anda belum memiliki heading.

Table of Contents Block

Salah satu fitur terbaik dari block Table of Contents ini adalah block ini akan secara otomatis menambahkan heading yang Anda buat kedalam daftar isi tanpa Anda perlu melakukan apapun. Saatnya Anda coba untuk menambahkan heading dan lihat hasilnya, cukup keren bukan?

Daftar Isi

Mengatur Tampilan Daftar Isi

Setelah menambakan daftar isi, sekarang saatnya mengatur tampilan dari daftar isi yang kita buat.

Kadence Block memberikan banyak sekali pengaturan yang bisa kita gunakan untuk membuat daftar isi menjadi menarik. Bagi sebagian orang mungkin menjadi bingung dengan banyaknya pilihan pengaturan yang bisa dilakukan. Mari kita bahas satu per satu fitur pengaturan yang ada di daftar isi ini.

Seting General

Seting general bisa Anda temukan diatas block saat Anda klik block tersebut.

General Setting

Pada setingan general ini Anda bisa membuat daftar isi di WordPress menjadi beberapa kolom dan dengan style tertentu. Pada bagian kolom Anda bisa memilih untuk menjadikan daftar isi menjadi satu, dua atau tiga kolom.

Pada umumnya setingan yang digunakan adalah 1 kolom. Halaman tutorial ini juga menggunakan pilihan 1 kolom.

Selanjutnya adalah menetukan style dari daftar isi. Ada tiga opsi yang bisa dipakai. Anda bisa menggunakan style (X) agar daftar isi Anda menggunakan format bullet (titik didepan), atau jika Anda lebih suka menggunakan angka agar lebih terkesan terstruktur Anda bisa memilih style (Y). Jika Anda tidak ingin ada titik atau angka di depan, maka bisa pilih style (Z).

Anda bisa membuat daftar isi di WordPress dengan tiga style berbeda sesuai dengan kebutuhan.

Yang perlu diperhatikan adalah jika heading yang Anda buat memiliki angka di depannya, jangan pilih style (Y) karena akan ada dua angka di depan yang bisa membuat bingung.

Allowed Headers

Setingan lain yang spesifik bisa Anda lihat di sidebar. Yang pertama adalah Allowed Header. Setingan ini cukup sederhana namun sangat berguna. Anda bisa memilih heading yang ditampilkan di daftar isi hanya dengan sekali klik.

Heading

Sebaiknya Anda menon aktifkan h1, karena h1 sudah digunakan pada judul artikel. Beberapa ahli SEO merekomendasikan h2, h3, dan h4 untuk digunakan di daftar isi.

Title Settings

Setingan selanjutnya adalah untuk judul daftar isi.

Title Setting

Cukup banyak pengaturan yang bisa Anda pakai untuk judul daftar isi. Jika setingan Enable Title diaktifkan maka akan ditambahkan judul “Table of Contents” di awal daftar isi.

Jadi Anda bisa membuat daftar isi di WordPress dengan atau tanpa judul. Anda juga bisa mengganti judulnya sesuai keinginan.

Selain itu Anda bisa memilih ukuran dan jenis font yang digunakan, bahkan hingga warna judul bisa Anda atur sesuai dengan warna tema website Anda.

Collapsible Settings

Collapsible adalah salah satu fitur menarik yang ada di Table of Contents block ini. Dengan mengaktifkan fitur ini Anda bisa membuat daftar isi panjang menjadi ringkas dengan hanya menampilkan judul saja.

Collapsible

Untuk mengaktifkannya cukup dengan klik pada opsi Enable Collapsible Content. Selain itu Anda juga bisa memilih untuk membuat daftar isi tertutup saat halaman web diakses, sehingga pengunjung web harus klik pada icon untuk melihat keseluruhan daftar isi. Beberapa icon yang bisa dipilih antara lain:

Collapsible Icon

List Settings

List setting digunakan untuk mengatur semua list heading yang tampil di daftar isi.

List Setting

List Item Gap digunakan untuk mengatur jarak antar heading daftar isi. Anda bisa mengatur sesuai dengan kebutuhan. Jarak ini diperlukan terutama jika pengunjung website Anda menggunakan perangkat mobile seperti smartphone agar tidak terjadi salah klik.

Anda bisa mengatur warna item di bagian List Items Color. Anda bisa mengatur warna saat normal dan juga saat kursor diarahkan ke salah satu item. Anda bisa menggunakan warna yang sama atau berbeda untuk keduanya.

Ada beberapa pilihan style yang bisa digunakan untuk item yang ditampilkan di daftar isi. Pemilihan style bisa dilakukan pada opsi List Link Style. Style yang disediakan ada 3, yaitu: Underline, Underline on Hover (underline muncul saat kursor diarahkan ke salah satu item), No underline.

Jika pada judul Anda bisa memilih jenis dan ukuran font, untuk item list nya pun Anda bisa memilih jenis dan ukuran font. Anda juga bisa membuat semua item menjadi huruf besar atau huruf kecil melalui opsi Text Transform.

Container Settings

Setingan ini bisa digunakan untuk mengatur ukuran lebar dari daftar isi, selain itu dengan pengaturan yang tepat bisa menambah estetika dari daftar isi yang Anda buat.

Container Settings

Anda bisa membuat daftar isi di WordPress dengan warna background yang berbeda dengan keseluruhan konten. Anda bisa menggunakan opsi Container Background untuk mengatur warna background.

Anda bisa memberi border pada daftar isi dan mengatur tebalnya border pada opsi Border Color dan Content Border Width. Pada halaman tutorial ini digunakan tebal border 2px.

Jika ingin border yang agak membulat, Anda bisa mengaturnya di opsi Border Radius.

Opsi Box Shadow jika diaktifkan akan memberikan efek seperti melayang dan jika digunakan dengan baik bisa menambah estetika daftar isi.

Anda bisa mengatur lebar maksimal daftar isi di opsi Max Width. Jika daftar isi Anda ada item yang cukup panjang maka item tersebut akan dipotong dan dilanjutkan dibaris setelahnya.

Anda perlu mengatur Container Margin jika Anda menggunakan daftar isi di sidebar bersama dengan widget lain, untuk memberi jarak dengan widget yang lain. Dan ya, Anda tidak salah baca, Anda bisa menempatkan daftar isi ini di sidebar. Cukup menarik bukan? Kami akan membahasnya di tutorial selanjutnya.

Scroll Settings

Setingan terakhir yang bisa digunakan adalah scroll setting. Pada menu Scroll Settings ini pastikan opsi Enable Smooth Scroll to ID diaktifkan. Opsi ini akan memberikan pengalaman yang lebih baik untuk pengunjung website Anda.

Scroll Settings

Opsi Scroll Offset akan sangat berguna jika Anda menggunakan sticky header. Jika Anda tidak menggunakannya gunakan saja nilai yang diberikan oleh Kadence Blocks.

Kesimpulan

Anda sudah berhasil membuat daftar isi di WordPress. Cukup mudah bukan?

Setelah selesai daftar isi dan konten Anda, publish post yang Anda buat dan lihat hasilnya. Ini adalah daftar isi yang saya buat.

Anda bisa menampilkan daftar isi di setiap konten tanpa harus melakukan setingan secara manual di setiap post jika Anda menggunakan Kadence Theme pro. Dengan Kadence theme pro Anda bisa menggunakan Kadence element hooks untuk membuat daftar isi di WordPress secara otomatis. Anda bahkan bisa membuat daftar isi secara otomatis tampil di sidebar.

Jika website Anda belum ada daftar isi, jangan ragu untuk menggunakan Kadence Blocks. Karena selain daftar isi, Anda juga mendapatkan banyak block yang bisa digunakan.

Jika Anda mengalami kesulitan, jangan ragu untuk menghubungi kami di kolom komentar.

Artikel Terkait

Leave a Reply

Your email address will not be published. Required fields are marked *