10 Desember 2024

Blog Personal Reisha Humaira

Reisha's Planet
cara membuat daftar isi blog wordpress self hosted
blogging blog skill 

Cara Membuat Daftar Isi Blog WordPress Self-Hosted Secara Otomatis

Reisha 3 Komentar ,

Masih melanjutkan seri tulisan seputar daftar isi blog, kali ini ke WordPress self-hosted yaa. Untuk yang ngeblog di WordPress.com bisa baca cara buat daftar isinya di sini, sementara untuk yang ngeblog di Blogspot caranya ada di tulisan ini.

Kali ini saya bakal jelasin juga gimana caranya membuat daftar isi dari subtopik yang ada di dalam blog post, serta cara membuat satu halaman khusus yang berisi daftar tulisan yang kita miliki di blog.

Oh iya, biar ga riweuh nulisnya, di tulisan ini saya nulisnya pake kata “WordPress” aja ya. Ribet nulis dan baca “WordPress self-hosted” berulang-ulang, hehe.

Tentang Plugin di WordPress

Sebelum ke tutorialnya, sebaiknya kenalan dulu ya dengan yang namanya plugin. Karena untuk bikin daftar isi ini nanti kita tinggal pakai plugin, ga ribet coding kayak di Blogspot, hihi.

Plugin di WordPress itu pada dasarnya adalah potongan kode yang berisi fitur yang bisa kita pasangkan ke WordPress kita. Dengan memasang plugin, kita bisa menambahkan fungsionalitas tertentu untuk blog kita. Pasangnya pun gampang banget, tinggal klik-klik aja.

Plugin bisa dengan mudah kita temukan di Dashboard WordPress, lewat menu Plugins > Add New. Plugin juga bisa didapat dari pihak ketiga alias website lain, lalu tinggal di-upload lewat menu yang sama.

Baca: Perbandingan Lengkap Platform Blogger vs. WordPress.org vs. WordPress.com

plugin di wordpress
Halaman untuk menambahkan plugin

Cara Membuat Daftar Isi di Dalam Blog Post di WordPress

Daftar isi di dalam blog post bisa dilihat sendiri di tulisan-tulisan saya di blog ini ya, termasuk tulisan ini, hihi. Tapi jika Anda sedang baca blog saya ini dari HP, tampilannya bakal berbeda dengan versi laptop karena di HP yang kebuka versi AMP. Untuk versi tanpa AMP, bisa lihat tulisan ini, daftar isinya bisa dibuka-tutup.

Meng-install Plugin Table of Contents

Untuk menambahkan daftar isi, kita perlu install plugin-nya terlebih dahulu. Masuk ke menu Plugins > Add New, lalu cari plugin-nya dengan keyword “table of contents”.

Ada banyak hasilnya, tapi dua hasil pencarian teratas ada plugin Easy Table of Contents dan Table of Contents Plus. Di blog ini saya pakai plugin Easy Table of Contents, tapi di web Mamah Gajah Ngeblog saya pasang plugin Table of Contents Plus. 

plugin daftar isi easy table of contents
plugin daftar isi table of contents plus

Lumayan banyak kemiripan antara kedua plugin ini, beda sedikit di tampilan aja. Kalau pakai plugin Easy Table of Contents, untuk buka-tutup daftar isinya pakai button yang berisi icon garis tiga. Sementara di plugin Table of Contents Plus pakai teks show/hide (bisa diganti nanti teksnya).

Jadi silakan pilih aja mana yang disuka, selanjutnya saya sebut plugin Table of Contents aja ya biar ga dobel-dobel jelasinnya, hehe.

Kembali ke instalasi plugin.

Untuk meng-install plugin-nya, tinggal klik tombol Install Now di plugin yang diinginkan. Trus tinggal tunggu loading hingga instalasinya selesai.

Setelah instalasi, tombol Install Now tadi akan berubah jadi tombol Activate. Klik tombol Activate tersebut untuk mengaktifkan plugin-nya. Plugin yang statusnya tidak aktif berarti tidak bisa digunakan.

Jika tadi setelah install terlanjur pindah ke halaman lain, ga perlu khawatir. Kita bisa lihat list plugin-nya dari menu Plugins > Installed Plugins. Aksi untuk Activate ada berupa teks di bawah nama plugin-nya.

Pengaturan Plugin Table of Contents Secara Global

Setelah plugin table of contents ini diaktifkan, berarti plugin sudah bisa digunakan, tapi perlu kita setting dulu biar daftar isinya nanti sesuai dengan yang diharapkan.

Cara akses halaman pengaturannya:

  • Untuk plugin Easy Table of Contents, bisa dari menu Plugins lalu klik link Settings di bawah nama plugin-nya. Bisa juga dari menu Settings > Table of Contents.
  • Untuk plugin Table of Contents Plus, bisa dari menu Settings > TOC+. Klik link show di samping teks Advanced untuk menampilkan semua pengaturan.

Halaman pengaturan ini digunakan untuk mengeset daftar isinya secara global, jadi nanti format daftar isinya ya sesuai itu. 

Pada dasarnya plugin-nya udah mengeset default value pengaturan ini, tapi sebaiknya dicek lagi dan diubah jika perlu.

Bagian pengaturan yang perlu diperhatikan menurut saya antara lain:

  • Auto insert. Ini untuk menentukan di mana saja daftar ini itu akan ditampilkan. Minimal centang Post biar daftar isinya nanti otomatis ditambahkan di tiap blog post. 
  • Position. Ini untuk mengatur daftar isi mau ditaruh di mana. Default pilihannya adalah Before first heading, yakni ditampilin sebelum heading pertama pada tulisan. Blog saya pakai setting ini. Bisa pilih Top kalau mau ditaruh langsung di bawah judul.
  • Show When X or more headings are present. Ini untuk mengatur berapa minimal heading yang tersedia supaya daftar isinya ditampilin.
  • Show Hierarchy. Ini menurut saya baiknya dicentang biar kelihatan hirarki heading dan subheading-nya gimana.
  • Heading Levels. Tersedia 6 checkbox untuk H1 hingga H6. Kita bisa centang heading mana aja yang mau ditampilin di daftar isi. H1 biasanya udah dipake untuk judul tulisan, jadi di dalam tulisan pakai H2, H3, dan seterusnya aja.
  • Exclude Headings. Ini tergantung template dan setting blognya sih. Kadang ada yang masang bagian share, like, dan related post di akhir tulisan. Lalu tiap bagian itu mungkin masuk ke daftar isi karena judul-judulnya pakai H3, padahal kan ga perlu. Itu bisa di-exclude dengan memasukkan judul subheading-nya di bagian ini.

Pengaturan lainnya kebanyakan berkaitan dengan tampilan, jadi silakan dieksplor sendiri ya, hehe.

Pengaturan Plugin Easy Table of Contents Per Blog Post

Selain pengaturan global di menu Settings di atas, untuk plugin Easy Table of Contents juga ada pengaturan tambahan di tiap blog post. Ini bisa dilihat di text editor WordPress, scroll aja terus ke bawah, bagian Table of Contents. Namun jika pakai plugin Table of Contents Plus, bagian ini ga ada.

Pengaturan per blog post ini sih sebenarnya ga perlu diutak-atik ya, karena biasanya udah terwakili dari pengaturan global. Fitur ini paling baru digunakan jika ada kebutuhan berbeda untuk blog post bersangkutan.

Misal nih di blog post yang dibuat itu kita ga mau nampilin daftar isi, maka tinggal centang opsi Disable the automatic insertion of the table of contents. Ntar di tulisan itu ga akan ada daftar isinya, sementara di tulisan lain tetap ada.

Cara Membuat Halaman Daftar Isi Blog di WordPress

Okai kita lanjut ke pembuatan halaman khusus yang berisi daftar tulisan di blog kita ya. Saya bikin halaman daftar isi ini di beberapa halaman di blog ini dengan format yang berbeda-beda. Di mana aja? Lanjut dulu yuk. 😀

Meng-install Plugin Display Posts

Untuk membuat halaman daftar isi, saya menggunakan plugin Display Posts. Masuk ke menu Plugins > Add New, lalu cari plugin-nya dengan keyword “display posts”.

plugin daftar isi display posts

Cara meng-install plugin-nya, tinggal klik tombol Install Now. Setelah beres klik Activate. Plugin pun siap digunakan, hehe.

Untuk plugin Display Posts ini, tidak ada halaman setting atau pengaturannya. Pengaturannya nanti ditambahin di shortcode untuk menampilkan daftar isinya.

Membuat Halaman Daftar Isi dengan Shortcode Display Posts

Ada yang belum kenal dengan shortcode? Boleh baca dulu di tulisan daftar isi untuk WordPress.com ini ya. 

Di sana saya juga udah jelasin soal shortcode Display Posts yang kebetulan juga udah ada di WordPress.com. Mirip sih, tapi di WordPress.com itu masih banyak keterbatasan.

Kalau kita pakai plugin Display Posts, opsi pengaturan tampilannya ada lebih banyak lagi. Lengkapnya silakan langsung lihat di dokumentasi plugin-nya ya.

Di sini saya kasih contoh aja ya yang udah saya bikin beserta shortcode-nya.

Shortcode di WordPress untuk Menampilkan Daftar Semua Tulisan

Ini saya gunakan untuk membuat halaman Archive ini. Pertama, buat dulu halaman baru dengan mengklik menu Pages > Add New. 

Isikan judul lalu masukkan shortcode-nya di bagian konten. Boleh langsung diketik atau copy paste aja ke text editor-nya, boleh juga menggunakan block shortcode.

Saya menggunakan opsi untuk menampilkan daftar tulisan dengan penomoran (bukan bullet). Shortcode yang digunakan adalah:

[display-posts wrapper="ol" posts_per_page="1000"]

Saat ini saya menggunakan batas posts_per_page sebanyak 1000, kebetulan tulisan saya belum sampai 1000, jadi ya bakal muncul semuanya. 

Kalau sudah lebih dari 1000 boleh diganti dengan angka yang lebih besar kalau mau dimunculin semuanya dalam satu halaman. Tapi saya juga ga tahu berapa batas maksimalnya, hihi.

Shortcode di WordPress untuk Menampilkan Daftar Tulisan Per Kategori

Di blog ini saya juga bikin daftar isi per kategori, untuk memudahkan melihat daftar tulisan di tiap kategori yang ada. Kalau di halaman Archive itu kan ga kelihatan ya kategori tulisannya apa, campur aduk semua tema, hehe.

Kunci pengarsipan yang rapih untuk daftar isi per kategori ini adalah penggunaan kategori serta tag yang teratur dan seragam untuk tiap tema tulisan. Jadi kalau selama ini penggunaan kategori dan tag-nya masih ngasal, sebaiknya dirapihkan dulu, hehe.

Saya udah bikin lima halaman daftar isi per kategori ini, yakni untuk kategori Parenting, NZ Journey, Traveling, Blogging, dan Wedding. Di tiap halaman, daftar isinya saya bagi-bagi lagi berdasarkan subkategori.

Sebagai contoh, shortcode yang saya gunakan pada halaman Parenting untuk subkategori Pregnancy adalah:

[display-posts category="pregnancy" wrapper="ol" posts_per_page="1000"]

Bagian category diisi sesuai slug dari kategori yang bersangkutan.

Shortcode di WordPress untuk Menampilkan Daftar Tulisan Per Tag

Untuk kategori Traveling, saya membuat subkategori berdasarkan nama negara, misal “indonesia” dan “new-zealand”. Hanya saja daftar isinya mau saya kelompokkan secara lebih spesifik lagi. Misal untuk traveling di New Zealand saya kelompokkan per road trip-nya, sementara untuk traveling di Indonesia saya kelompokkan per provinsi.

Oleh karena itu, di bagian ini saya memanfaatkan tag. Misal untuk road trip di South Island di musim dingin 2019 saya gunakan shortcode:

[display-posts tag="road-trip-winter-2019" wrapper="ol" posts_per_page="1000"]

Sementara untuk traveling di Sumatra Barat saya pakai shortcode:

[display-posts tag="wonderful-Sumbar" wrapper="ol" posts_per_page="1000"]

Oh iya, sebenarnya shortcode ini tidak harus digunakan pada halaman baru aja ya, bisa juga dipasang di blog post atau widget. Sebagai contoh, saya pernah taruh di akhir tulisan tentang relaktasi ini. Di situ saya pakai shortcode:

[display-posts tag="menyusui-akas" posts_per_page="15" order="ASC" wrapper_class="collection"]

Di situ terlihat tulisannya terurut dari yang paling lama ke yang paling baru. Saya tambahin wrapper class untuk keperluan custom CSS.

Shortcode di WordPress untuk Menampilkan Daftar Tulisan Dengan Thumbnail

Di blog ini saya juga punya halaman yang berisi daftar isi tulisan saya untuk tugas-tugas perkuliahan di Institut Ibu Profesional (IIP). Bisa dilihat di halaman Ibu Profesional ini. 

Waktu itu saya lagi pengen berkreasi, jadi saya eksplor deh caranya nampilin daftar isi yang dilengkapi dengan thumbnail featured image-nya, tanggal publish, dan excerpt tulisannya. 

Saya ga nyaranin bikin daftar isi model begini untuk nampilin semua daftar tulisan ya. Kalau isinya kebanyakan, mungkin bakal lambat loading-nya karena banyak gambar.

Bagian ini agak lebih rumit sih kodenya, karena selain shortcode juga butuh tambahan kode CSS biar tampilannya bagus. Trus konten tugas IIP itu juga saya bikin pakai fitur Jetpack Portfolio, bukan post biasa, hihi.

Tapi yo weslah pajang aja di sini. Shortcode yang saya pakai adalah:

[display-posts posts_per_page="50" post_type="jetpack-portfolio" date_query_after="2021-03-03" date_query_before="2021-03-26" include_excerpt="true" excerpt_length="25" image_size="medium" wrapper="div" wrapper_class="portfolio-iip" include_date="true" date_format="j F Y"]

Bisa dilihat di situ saya ga menggunakan kategori atau tag, melainkan pakai rentang tanggal publish tulisannya.

Sementara untuk basic CSS-nya (tapi masih butuh penyesuaian dengan template blog):

<style media='all' type='text/css'>
.portfolio-iip .listing-item { overflow:hidden; margin-bottom:10px; padding-bottom:10px; width:100%; border-bottom:1px solid rgba(0,0,0,.4); }
.portfolio-iip .listing-item:last-child { border-bottom:none; padding-bottom:0; }
.portfolio-iip .image img { margin:0!important; }
.portfolio-iip .title { display:block; font-size:18px; font-weight:700; line-height:normal; }
.portfolio-iip .date { font-size:12px; color:#aaa; display:block; padding-bottom:4px; }
.portfolio-iip .excerpt-dash { display:none; }
.portfolio-iip .excerpt { font-size:14px; padding-right:10px; line-height:normal; display:block; }
</style>

—

Okeh sekian dulu tulisan seputar daftar isi, semoga mudah dipahami, hihi. Ada yang udah pakai plugin di atas juga? 😀

Salam,

Reisha Humaira

3 komentar pada “Cara Membuat Daftar Isi Blog WordPress Self-Hosted Secara Otomatis”

Leave your comment