Catatan Perjalanan Jimmy Ahyari

Cara Membuat “Table of Content” di WordPress

www.ahyari.net – Anda yang sering main-main ke blog butut ini, mungkin menyadari, jika ada postingan yang panjang dan terbagai dalam beberapa sub pokok bahasan, biasanya di bagian kanan atas ada semacam kotak berwarna biru berisikan daftar isi, seperti pada tulisan Hosting WordPress Terbaik ataupun Cara SEO on Page pada WordPress atau seperti yang terlihat di gambar berikut ini:

Contoh Table of Content atau Daftar Isi di WordPress
Contoh Table of Content atau Daftar Isi di Blog Butut ini

Nah, di luar negeri sana, itu disebut Table of Content. Di Indonesia, apa ya? Saya hanya menyebutnya “Daftar Isi” (meskipun sepertinya bukan ini, tapi anggap saja begitu 😀 ). Ternyata, cukup lumayan yang bertanya baik di form komentar blog ini ataupun bertanya langsung ketika bertemu (yang baca ini, kemudian sadar, ketika kopdar beberapa hari yang lalu, pasti senyum-senyum 😆 ).

Oke, baiklah, saya bukannya merahasiakan, hanya saja saya tidak mengira antusiasme terhadap yang “begituan” cukup besar. Meski terlihat sepele, situs besar macam WikiPedia juga menggunakannya, loh. Karena sejatinya, fungsi table of content ini untuk mempermudah pengguna untuk “meloncat” langsung ke bagian mana yang ingin mereka baca. “Daftar” ini juga membantu SEO blog kita. Google akan secara otomatis menambahkan kata “Loncat ke” atau “Jump to” di halaman pencarian mereka bagi kata kunci yang memang sesuai.

Contoh SERPs di Google
Contoh SERPs di Google (bentuk posting asli bisa dilihat di Amazon untuk WordPress)

Sebenarnya membuat “menu” berisi daftar-daftar tersebut bisa dilakukan secara manual dengan bahasa HTML dasar. Akan tetapi, bagi yang benar-benar pemula, tentu akan kerepotan. Maka dari itu, tulisan ini dibuat untuk menunjukkan bagaimana cara membuat daftar isi (table of content) di tulisan pada blog bermesin WordPress tanpa membuat kode CSS atau HTML apapun.

Download, Install dan Aktifkan Plugin Table of Contents

Hal pertama yang harus dilakukan adalah memasang dan mengaktifkan plugin Table of Contents Plus. Setelah aktif, lakukan beberapa konfigurasi yang dianggap perlu melalui halaman Settings > TOC+ pada dashboard admin WordPress.

Pada tab “Main Options“, terdapat opsi untuk memilih di mana dan kapan Table of Contents (TOC) akan muncul. Dalam keadaan default, TOC akan muncul sebelum “first heading”. Heading di sini maksudnya adalah dalam artikel yang dibuat, terdapat tag <h>, entah h2, h3, atau h4. Artinya, TOC akan tampil secara otomatis di atas tulisan yang pertamakali memiliki tag heading. Posisi ini bisa dirubah, silakan berkreasi.

Opsi selanjutnya adalah “Show when”. Kapan TOC akan muncul? Ketika tulisan memiliki berapa tag heading? Dalam tulisan ini, TOC tidak akan muncul karena setting milik saya mengharuskan ada 4 untuk muncul sedangkan tulisan ini hanya mempunyai 1 tag di dalam tulisan (tag <h2> pada tulisan Download, Install dan Aktifkan Plugin Table of Contents).

Pengaturan Table of Contents Plus (klik untuk membuka/menutup)

Pengaturan Table of Contents Plus
Pengaturan Table of Contents Plus

Pengaturan Advanced Table of Contents Plus (klik untuk membuka/menutup)

Pengaturan Advanced Table of Contents Plus
Pengaturan Advanced Table of Contents Plus

Pengaturan Sitemap Table of Contents Plus (klik untuk membuka/menutup)

Pengaturan Sitemap Table of Contents Plus
Pengaturan Sitemap Table of Contents Plus

Pengaturan selanjutnya bisa Anda coba sambil praktek. Oh iya, jika memang ingin TOC tidak tampil dalam salah satu tulisan yang memiliki heading banyak, bisa ditambahkan kode [no_toc] untuk men-disable TOC+ pada tulisan tertentu saja.

Pada beberapa theme, terkadang juga ada yang terlihat “kacau”. Coba saja disable opsi “auto insertion” dan untuk memunculkannya, tambahkan kode [toc].

Plugin TOC+ ini juga menyediakan opsi penampilan melalui widget. Masuk ke dashboard, lalu ke Appearance > Widgets lalu drag & drop widget TOC+ ke sidebar yang diinginkan.

Demikianlah, semoga artikel ini menjawab rasa penasaran kawan-kawan. Jika ada pertanyaan, kolom komentar selalu terbuka. Jika banyak yang bertanya, bisa saja akan jadi satu artikel lagi di kemudian hari. Hihihi.. :mrgreen:

-Berbagi Tidak Pernah Rugi-

37 Comments
  1. Buat Karikatur Murah says

    Apakah cara ini sama seperti untuk blogspot juga mas ??? Terima kasih ….

    1. Jimmy Ahyari says

      sudah jelas blogspot tidak ada plugin, sudah pasti tidak bisa dengan cara ini
      Yuk, lihat tulisan Jimmy Ahyari di Bagaimana Memilih Hosting Terbaik untuk Blog WordPress?My Profile

  2. Iqbal says

    mun cara meolah yg tahap pengaturan table of content seperti di artikel pian kayapa?

    1. Jimmy Ahyari says

      tinggal masukkan tag h2 dan h3.. kalau settingnya 4, h2 minimal 4 buah agar muncul TOC+ nya.. 😉
      Yuk, lihat tulisan Jimmy Ahyari di Pengaturan WP Super Cache untuk Blog WordPressMy Profile

  3. Bunga says

    Informasi yang saya cari, thanks informasi tentang wp
    Yuk, lihat tulisan Bunga di Beli Bunga di Tangerang SelatanMy Profile

  4. Interior Pekanbaru says

    Thanks ya buat postinganya.
    Sangat bermanfaat.

  5. yoppy says

    saya ingin cuba , thanks sudah posting artikelnya

  6. wadiyo says

    Nah ini nih yang aku cari-cari,
    ingin nulis yang ada table of content-nya.

    Apakah bisa berfungsi untuk semua veri WP ya?

    Terima kasih

    1. Jimmy Ahyari says

      So far, bisa aja jalan dari versi 3 dan 4 saat ini..

  7. Siti Rukmanah says

    Kenapa saya selalu gagal ketika memasang Pluigin ini, saya coba pluigin lain bisa, mohonbantuannya….

  8. Nofi Ratnasari says

    Thanks for your tips, saya ingin mencoba di website saya. sekali lagi thanks

  9. lisa says

    wh bisa dicoba nih, semoga aja bisa. mkasih mas atas info nya
    Yuk, lihat tulisan lisa di Ponsel Pixel dan Pixel Xl memiliki layar 5 inci dan hadir dengan warna putihMy Profile

  10. Lulu Febi says

    Thanks ya buat postinganya bermanfaat. Jgan lupa terus berbagi, 🙂

  11. petrified wood indonesia says

    waw keren, terima kasih atas postingannya sangat membantu..

  12. Hawa Hassan says

    Terima kasih. Saya baru bermula dengan WP, sebelumnya Blogspot. Sanagat bermanfaat tutorial ini. Salam kenal dari Malaysia ya . =)

  13. TeknologiRAF Media says

    Terima kasih mas, akhirnya saya sudah bisa membuatnya, sangat membantu, thanks yaa…..

  14. Tempat Tidur Anak says

    Hemm,,, Terimakasih Gan, keren deh kalo ada Table nya.

  15. Resep Masakan says

    Wah dapat ilmu baru ini untuk wordpress,, soalnya saya masih berkutat di blogspot,,,apakah itu sama dengan sitemap?

  16. Lowongan Kerja says

    gampang banget ternyata caranya, thanks om

    1. Jimmy Ahyari says

      Iya.. Gampang banget ternyata.. Nulisnya yang capek.. xixixi

  17. Don Arta says

    Dapat tips bermanfaat lagi. terima kasih buat artikelnya…
    Yuk, lihat tulisan Don Arta di Travel Surabaya Batu Murah – Carter Drop Batu SurabayaMy Profile

  18. Blog Pendidikan says

    Terima kasih share artikelnya, maaf saya masih pemula di wordpress…. jadi harus banyak belajar tentang wordpress.

  19. Manfaat2 says

    thanks mas ilmunya sudah mau berbagi

  20. www.istanaloker.com says

    Kayaknya ane bakalan nyobain WP nih soalnya selama ini pake blogspot. Tertarik pengen nyoba yg baru.

  21. Stafaband says

    Wah tipsnya bermanfaat sekali gan, membantu untuk newbie seperti aku yang baru mengenal wordpress

  22. paket wisata karimunjawa says

    Terima kasih atas informasinya yang sangat bermanfaat dan menginspiratif sekali. semoga yang membuat artikel ini diberi kesehatan, rejeki dan umur panjang. amin…
    Yuk, lihat tulisan paket wisata karimunjawa di PAKET WISATA KARIMUNJAWA 3 HARI 2 MALAMMy Profile

  23. sinopsis box office says

    Table of Content atau Daftar Isi sangat bermanfaat untuk membuat pengunjung blog kita menjadi betah dan lama-lama. Semakin suka pengunjung blog kita maka itu akan mendatangkan duit untuk Kita. WordPress memang mempunyai pluggin yang banyak dibutuhkan oleh para blogger kelas dunia

  24. Jual Vinyl Lantai says

    Terima kasih atas informasinya, muter2 cari postingan table. dapat disini.

  25. tempat makan keluarga says

    waduh berguna banget nih, jadi lebih gampang ya tidak perlu scroll
    Yuk, lihat tulisan tempat makan keluarga di Eh di Jakarta Ada Juga Tempat Makan Keluarga yang Kece loh!My Profile

  26. Mery Ananta says

    assalamualaikum.mksh infonya cukup bermaafaat 🙂

  27. maenpro.com says

    thanks gan, ijin coba ya

  28. Inspirasi Muslimah says

    apakah masih bisa dicoba untuk menerapkannya kali ini ?

    1. Jimmy Ahyari says

      Bisa. Buktinya di blog ini masih menggunakan 😉

  29. wisata karimunjawa says

    Terima kasih atas informasinya yang sangat bagus dan jelas sekali. Semoga informasi ini bisa bermanfaat buat pembaca semuanya.
    Yuk, lihat tulisan wisata karimunjawa di NAIK SARANG BURUNG RAKSASA DI BUKIT LOVE KARIMUNJAWAMy Profile

  30. Pintar Sekolah says

    Kalau untuk blogger apa bisa min? kalau bisa, bagaimana caranya?
    Yuk, lihat tulisan Pintar Sekolah di Teknik-Teknik Dasar Bermain Sepak BolaMy Profile

    1. Jimmy Ahyari says

      Saya kurang tahu untuk blogger/blogspot karena tidak mengelola blog ber”mesin” blogspot
      Yuk, lihat tulisan Jimmy Ahyari di Insight yang Perlu Brand Tahu Tentang Generasi ZMy Profile

  31. Media softgame says

    Wow ini ni yang saya cari-cari. udah muter2 sana sini gak nemu juga, ini baru ketemu, makasih banyak sobb..!

Comments are closed.