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.
Daftar Isi Tulisan Ini
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
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.
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.
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.
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:
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:
Pengaturan lainnya kebanyakan berkaitan dengan tampilan, jadi silakan dieksplor sendiri ya, hehe.
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.
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. 😀
Untuk membuat halaman daftar isi, saya menggunakan plugin Display Posts. Masuk ke menu Plugins > Add New, lalu cari plugin-nya dengan keyword “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.
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.
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.
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.
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.
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; }
.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,
Di tulisan sebelumnya saya sudah menceritakan seputar ikhtiar saya untuk meningkatkan produksi ASI. Kali ini… Read More
Dulu waktu awal-awal datang di Auckland, saya rasanya hampir tidak pernah melihat orang bersepeda. Terasa… Read More
Saya pernah tinggal di Tokyo, Jepang tahun 2010-2013. Saya juga pernah tinggal di Auckland, New… Read More
Mumpung masih bulan Syawal, Selamat Idul Fitri 1445 H ya semuanyaaa. Minal aidin wal faidzin.… Read More
Alhamdulillah tahun ini dikasih kesempatan untuk ketemu Ramadhan lagi. Dan makin lama kok ya Ramadhan… Read More
Kembali ke seri jelajah Auckland. Dulu saya sudah pernah menulis wilayah Auckland mana saja yang… Read More
View Comments
Mokasi unii ❤ akhirnya bikin beginian ngintip blog uni dulu haha
Sama-sama pike, mantap, banyak beut isi daftar isinyaaa..
Pas banget lagi cari rekomendasi plugin table of contents. Thank you sharing dan tutorialnya Teh! Salam kenal :)