Pada tutorial sebelumnya, Anda tentunya sudah tau bagaimana membuat daftar isi dengan menggunakan Kadence Blocks. Hanya dengan beberapa langkah mudah Anda sudah bisa menampilkan daftar isi dengan tampilan yang menarik.

Jika Ada menggunakan tema Kadence dan plugin Kadence Pro Anda bisa memanfaatkan Kadence Element Hooks untuk menampilkan daftar isi di sidebar WordPress.

Jika Anda melihat tutorial ini menggunakan PC desktop maka Anda akan melihat daftar isi di sidebar. Yup, Anda juga bisa memilih target pengguna yang bisa melihat daftar isi yang ada di sidebar WordPress.

Persiapan

Ada dua plugin yang harus diinstall jika Anda ingin menampilkan daftar isi di sidebar WordPress, yaitu Kadence Blocks dan Kadence Pro.

1. 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.

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.

2. Install Kadence Pro

Kadence Pro adalah addon untuk Kadence Theme dan merupakan plugin berbayar. Plugin ini diperlukan karena Anda harus menggunakan Kadence Element Hooks. Plugin ini adalah.

Setelah Anda membeli dan mendapatkan file installer plugin dalam format zip, Anda bisa langsung menginstallnya.

Karena plugin ini tidak ada di plugin direktori WordPress maka Anda harus upload plugin tersebut secara manual. Tapi tenang saja, caranya cukup mudah kok.

  1. Login dengan menggunakan alamat www.domain-anda.com/wp-admin atau www.domain-anda.com/wp-login.php.
  2. Upload file zip yang Anda download dari menu Plugins.
  3. Install dan aktifkan Kadence Pro.

Lihat panduan cara menginstall plugin jika Anda ingin mengetahui langkah detail dalam menginstall plugin.

3. Aktifkan Kadence Elements

Setelah Kadence Pro aktif, klik menu AppearanceKadence. Di halaman ini Anda akan melihat semua addon pro. Pastikan tombol pada bagian Hooked Elements berwarna biru. Jika tidak berwarna biru klik pada tombol tersebut untuk membuat fitur tersebut aktif.

Kadence Hooked Elements Toggle

Ayo Bikin Website juga mempunyai panduan yang lebih lengkap jika Anda ingin tau lebih tentang apa itu Kadence Elements dan cara menggunakannya.

Menampilkan Daftar Isi di Sidebar

Untuk menampilkan daftar isi di sidebar tidak terlalu sulit. Hanya diperlukan beberapa langkah untuk melakukannya.

1. Buat Element Baru

Masuk ke halaman Kadence Elements dengan klik pada menu Appearance > Kadence > Elements yang ada pada bagian sidebar WordPress dashboard.

Kadence Element Hooks

Buat element baru dengan klik pada tombol Add New.

Add New Element

Pilih tipe element Default.

Kadence Element Type

2. Masukkan Daftar Isi ke Element

Klik tombol + yang ada di pojok kiri atas kemudian cari block Table of Contents.

Membuat Daftar Isi di WordPress

Atur tampilan daftar isi sesuai dengan yang Anda inginkan. Anda bisa membaca panduan kami tentang cara mengatur tampilan daftar isi jika ingin tau lebih dalam tentang hal ini.

Ya, yang perlu Anda lakukan hanya mengatur seperti apa nantinya daftar isi yang ingin Anda tampilkan di sidebar. Sedangkan isinya biarkan kosong.

Element Daftar Isi

3. Tampilkan Element di Sidebar

Setelah pengaturan tampilan yang Anda buat jadi, sekarang saatnya Anda melakukan pengaturan untuk menampilkan daftar isi di sidebar.

Element Settings

Caranya adalah dengan klik tombol Element Settings yang ada di bagian pojok kanan atas halaman seperti terlihat pada gambar di atas. Setelah Anda klik akan muncul berbagai pengaturan yang bisa Anda lakukan. Yang perlu Anda pilih adalah pengaturan penempatan element atau Placement Settings

Untuk melihat penempatan posisi Anda bisa klik dropdown placement settings berikut:

  • Body
    • Before Site Wrapper
    • After Site Wrapper
  • Header
    • Before Header
    • After Header
    • Replace Header
  • Content Wrap
    • Before All Content
    • After All Content
  • Above Content Hero Title
    • Above Title Content
  • Content and Sidebar
    • Before Content
    • After Content
    • Before Sidebar
    • Replace Sidebar
    • After Sidebar
  • Single Inner Content
    • Before Inner Content
    • Before Inner Title Area
    • Before Inner Title
    • After Inner Title
    • After Inner Title Area
    • Before Entry Content
    • After Entry Content
    • After Inner Content
  • Inside The Content
    • Before First Heading Tag
    • After First Heading Tag
    • After First Paragraph
    • After Second Paragraph
    • After Third Paragraph
    • After Fourth Paragraph
  • Comments
    • Before Comments
    • Before Comments List
    • After Comments List
    • After Comments
  • Archive Inner Content
    • Before Archive Inner Title
    • After Archive Inner Title
  • Footer
    • Before Footer
    • After Footer
    • Replace Footer
  • 404 Page
    • Before 404 Page Content
    • After 404 Page Content
    • Replace 404 Page Content
  • Mobile Menu Off Canvas Area
    • Before Mobile Off Canvas Content
    • After Mobile Off Canvas Content
  • Header Account Login Modal
    • Left of Login Form
    • Before Login Form
    • After Login Form
    • Right of Login Form
    • Replace Login Modal
  • Custom
    • Custom Hook

Anda mempunyai tiga opsi pilihan untuk menampilkan daftar isi di sidebar, yaitu before sidebarreplace sidebar, dan after sidebar. Jika Anda masih ingin widget lain di sidebar tampil maka pilih opsi before sidebar atau after sidebar.

Placement Setting Daftar Isi

4. Pengaturan Tambahan

Ada beberapa pengaturan lain yang bisa dipakai.

  1. Device Settings.
    Contohnya pada halaman ini, daftar isi di sidebar hanya akan tampil saat pengunjung mengakses halaman ini menggunakan PC. Jika ditampilkan juga pada pengunjung smartphone akan menjadi sia-sia karena daftar isi akan berada di bawah konten.
  2. Display Settings.
    Anda tentunya hanya ingin daftar isi tampil di postingan saja, tidak di seluruh halaman website. Anda bisa mengaturnya melalui display settings. Contohnya pada gambar di atas, pengaturan pada display setting akan membuat daftar isi hanya tampil pada semua postingan.

Setelah selesai semua pengaturan, saatnya Anda publish element yang Anda buat dan lihat hasilnya. Mulai sekarang setiap Anda membuat artikel maka secara otomatis daftar isi akan tampil di sidebar seperti pada gambar ini.

Daftar Isi di Sidebar

Kesimpulan

Sangat mudah diaplikasikan bukan?

Dengan hanya menggunakan Kadence Element Hooks ada cukup sekali membuat template dan secara otomatis Kadence akan menampilkan daftar isi di sidebar WordPress.

Jika Anda ingin request tutorial yang lain silahkan request di kolom komentar.

Artikel Terkait

Leave a Reply

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