Cara Membuat Halaman Daftar Isi Blog WordPress.com Secara Otomatis

Pengarsipan yang rapi adalah salah satu kelebihan blog yang bikin saya betah nulis di blog ketimbang di media sosial. Dengan arsip yang apik itu, kita jadi lebih mudah menemukan tulisan lama jika ingin dibaca sewaktu-waktu. Salah satu yang sangat membantu saya adalah adanya daftar isi. Dan daftar isi ini bisa dibuat secara otomatis lho di blog, baik WordPress ataupun Blogspot.

Eh, daftar isi mana sih yang dimaksud? Biar ga beda persepsi, daftar isi yang saya maksud kali ini adalah seperti yang ada di halaman Archive blog saya ini. Di situ ada daftar semua tulisan yang ada di blog ini.

Daftar isi ini kepake banget ketika saya butuh nambahin link ke tulisan lama, saya tinggal Ctrl+F dari halaman itu. Lebih cepat ketimbang pakai fitur pencarian bawaan blog, hehe

Tadinya saya mau jembrengin semua tutorial cara membuat daftar isi blog untuk WordPress maupun Blogspot di tulisan ini, tapi sepertinya bakal panjang baget dan bikin pusing deh, hehe. Jadi untuk masing-masing saya posting terpisah aja deh.

Kali ini fokus ke blog di WordPress.com dulu, soalnya saya pertama kali bikin daftar isi itu di blog lama saya, reisha.wordpress.com. Untuk blog WordPress self-hosted dan Blogspot menyusul di tulisan selanjutnya.

Apa Itu Shortcode di WordPress?

Sebelum ke tutorial, buat yang belum kenal, kenalan dikit ya dengan shortcode. Bikin daftar isinya pake shortcode soalnya.

Shortcode adalah kode singkat yang sangat spesifik di WordPress yang biasanya ditulis di dalam tanda kurung siku alias []. Dengan kode pendek itu WordPress akan meng-generate konten sesuai shortcode yang dipakai, yang kalau di-coding sendiri pake HTML dijamin bakal rumit. Sementara shortcode ini paling pake satu kata doank. No rumit-rumit, no coding-coding.

Di editor tulisan, shortcode ini tinggal diketik biasa aja. Atau bisa juga pake block shortcode yang tersedia di block editor. Sama aja sih hasilnya.

Shortcode bisa dimasukkan ke dalam post ataupun page di WordPress, bahkan di widget. Daftar shortcode yang tersedia di WordPress.com silakan langsung cek aja ke halaman ini ya.

Cara Membuat Daftar Isi Blog WordPress.com dengan Shortcode Archives

Cara paling gampang untuk membuat halaman daftar isi di blog WordPress.com adalah:

1. Buat halaman baru dengan mengklik menu Pages > Add New.
2. Masukkan judul (terserah apa aja), lalu di bagian konten masukkan shortcode berikut:

[archives]

Publish. Beres deh!

Yak, sesimpel itu sodara-sodara, hihi. Paling praktis nih dibanding blog WordPress yang self-hosted apalagi Blogspot. Enak banget. Hasilnya bisa lihat di blog lama saya ini ya.

Opsi Pengaturan Tampilan Shortcode Archives

Secara default, shortcode archives akan menampilkan daftar semua judul semua tulisan yang ada di blog, berurut dari yang paling baru ke yang paling lama.

Di samping shortcode archives itu kita bisa menambahkan opsi untuk meng-customize hasilnya. Misal nih daftar isinya mau dibatasin nampilin 100 tulisan terakhir aja, atau mau diganti urutannya dari yang paling lama ke paling baru.

Opsi ini ditulis di dalam kurung sikunya juga. Berikut opsi yang tersedia untuk shortcode archives dan contoh penggunaannya. (Pilihan default maksudnya, tanpa dikasih opsi, shortcode akan menampilkan daftar isi sesuai piliha default tersebut)

• type, untuk mengatur tipe daftar isi.
  Pilihan yang tersedia: yearly, monthly, weekly, daily, postbypost
  Pilihan default: postbypost (menampilkan semua list tulisan)
  Contoh penggunaan: menampilkan arsip per bulan.

[archives type="monthly"]

• format, untuk mengatur bagaimana daftar isi ditampilkan.
  Pilihan yang tersedia: option, html, custom
  Pilihan default: html (berupa list dengan bullet point)
  Contoh penggunaan: menampilkan semua list dalam bentuk dropdown.

[archives format="option"]

• limit, untuk mengatur berapa banyak yang ditampilkan di daftar isi.
  Pilihan yang tersedia: bilangan bulat berapapun.
  Contoh penggunaan: menampilkan 50 tulisan terbaru saja.

[archives limit=50]

• showcount, untuk menampilkan angka jumlah postingan.
  Pilihan yang tersedia: true, false
  Pilihan default: false (angka tidak ditampilkan)
  Contoh penggunaan: menampilkan arsip bulanan beserta jumlah tulisannya.

[archives type="monthly" showcount="true"]

• order, untuk mengatur urutan list.
  Pilihan yang tersedia: asc, desc
  Pilihan default: desc (dari yang paling baru ke yang paling lama)
  Contoh penggunaan: menampilkan daftar isi dari yang paling lama ke yang paling baru dalam dropdown.

[archives format="option" type="monthly" showcount="true" order="desc"]

Oh iya, beberapa opsi itu bisa digabung ya dalam satu shortcode. Udah ada beberapa contohnya di atas. Nah silakan trial error aja ya dengan opsi-opsi di atas, hehe.

Kelebihan dan Kekurangan Shortcode Archives

Sepanjang saya trial error, ini nih kelebihan pake shortcode archives ini.

• Shortcode ini simpel banget, kalo ga butuh customization aneh-aneh, tinggal ketik satu kata aja coba.

Sementara kekurangannya:

• Opsi untuk pengaturannya tergolong sedikit.
• Saya ga nemu gimana caranya biar daftar isinya dimunculin pake nomor, bukan bullet point. Kalau pakai nomor kan enak, kelihatan langsung ada berapa banyak isinya.
• Shortcode ini ga bisa dipake buat nampilin daftar tulisan dalam kategori atau tag tertentu saja.

Cara Membuat Daftar Isi Blog WordPress.com dengan Shortcode Display Posts

Cara lain untuk membuat daftar isi di WordPress.com adalah dengan shortcode berikut:

[display-posts]

Secara default, shortcode ini hanya akan menampilkan daftar 10 tulisan terakhir kita. Dikit banget ya, hehe. Tapi opsi pengaturannya lebih banyak lho.

Dengan berbagai opsi yang ada, kita bisa banget berkreasi seperti:

• Membuat daftar tulisan yang ada dalam kategori atau tag tertentu.
• Membuat daftar tulisan yang ditulis oleh seorang author di blog yang punya banyak penulis.

Opsi Pengaturan Tampilan Shortcode Display Posts

Opsi di shortcode display posts ini ada buanyak. Ini dia.

• author, diisi dengan username penulis tulisan yang akan ditampilkan.
• category, diisi dengan slug dari kategori tulisan. Gunakan pemisah berupa tanda koma jika ingin menampilkan lebih dari satu kategori.
• date_format, diisi dengan format tanggal jika ingin menampilkan tanggal postingan di daftar isi. Penulisan format tanggal bisa lihat di halaman bantuan formatting ini ya.
• id, diisi dengan ID tulisan. Gunakan pemisah berupa tanda koma jika ingin menampilkan lebih dari satu ID. ID tulisan bisa dilihat dari URL halaman ketika kita mengedit tulisan itu, yakni angka yang ada setelah post=.
• image_size, diisi dengan ukuran gambar jika ingin menampilkan daftar isi disertai featured image tiap tulisan. Pilihan ukuran yang bisa diisi yakni thumbnail, medium, dan large.
• include_content, diisi dengan true jika ingin menampilkan list tulisan lengkap dengan semua isinya.
• include_date, diisi dengan true jika ingin menampilkan tanggal tulisan.
• include_excerpt, diisi dengan true jika ingin menampilkan list tulisan disertai ringkasannya.
• offset, diisi dengan angka jumlah tulisan terbaru yang ingin di-skip di daftar isi.
• order, diisi dengan asc jika ingin daftar isi terurut dari yang lama ke yang baru.
• orderby, diisi dengan title jika ingin daftar isi terurut berdasarkan abjad judul.
• posts_per_page, diisi dengan angka jumlah tulisan yang ingin ditampilkan, default-nya 10, maksimal 100.
• tag, diisi dengan slug dari tag tulisan. Gunakan pemisah berupa tanda koma jika ingin menampilkan lebih dari satu tag.
• wrapper, diisi dengan tipe HTML yang digunakan untuk menampilkan daftar isi. Pilihannya ul (list dengan bullet point), ol (list dengan nomor), atau div (ini kalau mau di-custom sendiri dengan CSS).

Contoh penggunaannya langsung saya gabung-gabung aja ya beberapa opsi.

• Menampilkan 20 tulisan yang ada di dalam tag “bayi” dan “anak”.

[display-posts tag="bayi,anak" posts_per_page="20"]

• Menampilkan 10 tulisan dalam kategori “keluarga” disertai gambar thumbnail.

[display-posts category="keluarga" image_size="thumbnail"]

• Menampilkan 100 tulisan dengan penomoran.

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

Kelebihan dan Kekurangan Shortcode Display Posts

Sepanjang saya trial error, ini nih kelebihan pake shortcode display posts ini.

• Banyak opsi yang tersedia sehingga kita bisa banget berkreasi dan menyesuaikannya dengan kebutuhan.

Sementara kekurangannya:

• Batas 100 terasa sedikit jika tulisan kita ada buanyak. Kalau mau nampilin semua, mending pake shortcode archives aja.
• Jika ingin menampilkan daftar isi disertai gambar thumbnail, bisa gunakan wrapper div. Tapi itu aja ga cukup menurut saya, karena layout-nya biasanya berantakan. Kalau mau dirapihin mesti nambahin kode CSS, sementara di blog WordPress.com gratisan kita ga bisa naruh kode CSS. Padahal kalau bisa nambahin CSS, bisa bikin kayak di halaman daftar isi tulisan saya di kuliah IIP ini.

—

Segitu dulu deh ya bahasan seputar cara membuat daftar isi di blog WordPress.com ini. Berikutnya saya mending bahas yang mana dulu ya, untuk di Blogspot atau WordPress self-hosted? 😀

Salam,