Cara Membuat Daftar Isi di WordPress Tanpa Plugin Lengkap Download Kode

Info Menarik – Seperti layaknya sebuah buku, daftar isi di blog atau website juga cukup penting. Hal ini untuk memudahkan pengunjung ketika mereka ingin mencari seluruh konten blog atau website berdasarkan judul artikel. Dengan begitu pembaca blog atau website bisa lebih cepat untuk menuju ke artikel yang mereka cari. Dan pada artikel ini saya akan membagikan cara membuat daftar isi khusus WordPress tanpa menggunakan plugin.

Baca Juga: Cara Membuat Daftar Isi Otomatis di Microsoft Office Word

Daftar isi sebuah blog atau website itu terbagi menjadi dua jenis. Pertama daftar isi atau Table of Content (TOC) yang menggambarkan isi tulisan yang terdapat dalam artikel. Daftar isi ini biasanya berada di dalam konten atau artikel. Kemudian daftar isi ini biasanya mengambil data otomatis dari subheading seperti H2, H3, H4, dan seterusnya.

Kemudian daftar isi selanjutnya adalah gambaran umum dari seluruh artikel yang terdapat di sebuah blog atau website. Untuk daftar isi seperti ini akan mengambil dari setiap judul artikel atau heading 1 (H1). Biasanya daftar isi seperti ini akan disimpan di halaman tertentu yang khusus untuk menampilkan daftar isi blog atau website.

Nah, pada artikel ini yang akan saya bagikan adalah daftar isi untuk menggambarkan seluruh konten atau artikel blog. Dan sebetulnya pembuatan daftar isi di WordPress itu sangatlah mudah. Karena WordPress telah didukung oleh banyaknya plugin seperti pembuatan daftar isi.

Namun saya tidak akan membahas dengan menggunakan plugin. Pada artikel ini hanya akan membahas pembuatan daftar isi WordPress tanpa menggunakan plugin.

Cara Membuat Daftar Isi di WordPress Tanpa Plugin

Karena WordPress itu terbagi menjadi dua yaitu WordPress.com (gratisan) dan WordPress hosting sendiri (berbayar), maka pada artikel ini saya akan membahas keduanya.

Membuat Archives di WordPress.com

Meskipun WordPress gratisan, namun WordPress sendiri sudah menyediakan fitur untuk menampilkan daftar isi berdasarkan judul artikel.

Di WordPress.com Kamu cukup menggunakan kode berikut:

[archives]

Kode di atas silakan Kamu tempatkan pada mode Teks halaman baru yang khusus untuk menampilkan daftar isi. Atau jika ingin dipasang di sidebar (widget) silakan tempatkan kode pada Widget Teks.

Selanjutnya bukan hanya kode di atas saja, Kamu juga bisa menampilkan daftar isi menggunakan beberapa opsi. Misalnya Kamu ingin menampilkan daftar isi 12 bulan terakhir, 18 hari terakhir, dan sebagainya. Silakan selengkapnya bisa Kamu lihat referensi kode Archives Shortcode WordPress.

Membuat Daftar Isi di WordPress Berbayar

Untuk WordPress berbayar atau hosting sendiri terdapat dua pilihan penggunaan, yaitu menggunakan plugin dan tanpa plugin. Namun yang akan saya bahas pada artikel ini hanya yang tanpa plugin. Karena saya rasa jika menggunakan plugin sangat praktis dan tidak perlu petunjuk atau tutorial. Kamu tinggal menambahkan plugin kemudian aktifkan dan pembuatan daftar isi selesai.

1. Daftar Isi Berdasarkan Kategori

Pada artikel ini saya akan memberikan contoh daftar isi yang otomatis mengambil data perkategori. Kodenya adalah sebagai berikut:

<ol>
<?php $cats = get_categories('exclude=');
foreach ($cats as $cat) {
echo "<li><h4>".$cat->cat_name." :</h4>";
echo "<ol>";
query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
while(have_posts()) {
the_post();
$category = get_the_category();
if ($category[0]->cat_ID == $cat->cat_ID) {
echo '<li><a target="_blank" href="'.get_permalink().'">'.get_the_title().'</a></li>';}}
echo "</ol>";
echo "</li>";}?>
</ol>

Kemudian agar daftar isi berfungsi untuk memanggil judul halaman, silakan Kamu tambahkan kode PHP berikut ini:

<h1><?php the_title(); ?></h1>

Selanjutnya agar tampilan daftar isi lebih menarik lagi, silakan gunakan kode berikut:

<div id="page">
 <div id="pageinfomenarik">
 <div id="info">
 <div id="menarik">
 <div class="infomenarik">
/*-[ isi dengan kode untuk menampilkan daftar isi, seperti kode diatas ! --------------------*/
</div>
 </div>
 </div>
 </div>
 </div>

Kemudian agar header blog tampil di halaman daftar isi, maka tambahkan kode berikut di atas kode daftar isi.

<?php get_header(); ?>

Dan untuk menampilkan footer tambahkan kode berikut di bawah kode daftar isi.

<?php get_footer(); ?>

Kemudian jika kode-kode di atas kita gabungkan, maka akan menjadi seperti berikut:

<?php get_header(); ?>
 <div id="page">
 <div id="pageinfomenarik">
 <div id="info">
 <div id="menarik">
 <div class="infomenarik">
 <h1><?php the_title(); ?></h1>
 <ol>
 <?php $cats = get_categories('exclude=');
 foreach ($cats as $cat) {
 echo "<li><h4>".$cat->cat_name." :</h4>";
 echo "<ol>";
 query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
 while(have_posts()) {
 the_post();
 $category = get_the_category();
 if ($category[0]->cat_ID == $cat->cat_ID) {
 echo '<li><a target="_blank" href="'.get_permalink().'">'.get_the_title().'</a></li>';}}
 echo "</ol>";
 echo "</li>";}?>
 </ol>
 </div>
 </div>
 </div>
 </div>
 </div>
 <?php get_footer(); ?>

2. Membuat file PHP

Langkah selanjutnya kita harus membuat sebuah file PHP yang nantinya akan kita upload ke direktori blog atau Website. Untuk membuat file PHP silakan gunakan aplikasi bawaan Windows yaitu menggunakan Notepad.

Silakan Kamu copy semua kode di atas kemudian paste pada halaman aplikasi Notepad yang tadi sudah kita buat. Jangan lupa juga untuk menentukan file name, silakan isi pada kolom dengan page-daftar-isi.php.

Langlah selanjutnya upload file php daftar isi ke tema WordPress yang Kamu gunakan di File Manager > Web Root (public_html/www) > wp-content > themes > tema blog atau website yang Kamu gunakan.

Cara masuk ke File Manager, Kamu bisa lihat di tulisan saya Cara Backup Semua Konten di WordPress

3. Membuat Halaman Baru di WordPress

Setelah file php Kamu upload di direktori WordPress yang ada di cPanel, langkah selanjutnya adalah membuat halaman baru di Dashboard WordPress. Halaman baru ini nantinya khusu untuk menampilkan daftar isi.

Silakan login di Dashboard WordPress menggunakan username dan password Kamu. Kemudian buat halaman baru dari Menu Pages kemudian Add New. Tentukan judul halaman dengan nama Daftar Isi dan sesuaikan juga permalink halaman harus sama dengan judul halaman.

Silahkan cek halaman baru yang baru saja Kamu buat dengan permalink di atas! Saya rasa sekarang halaman baru tersebut akan menampilkan seluruh isi konten blog berdasarkan judul artikel.

4. Tambahkan Style CSS

Agar tampilan daftar isi lebih menarik lagi, silakan tambahkan CSS berikut dan Kamu tempatkan pada style.css tema WordPress yang Kamu gunakan.

/*-[ daftar isi ]-------------------*/
 #pageinfomenarik {
 margin-bottom:15px;
 background: url(images/patterndaftarisi.png);
 box-shadow: 0px 0px 4px #000;
 border: 0;
 }
 #info {
 padding:5% 10% 5% 10%;
 }
 #menarik {
 width:100%;
 }
 #menarik h1{
 text-align:center;
 font-size:2.5em;
 font-family: 'Fjalla One', sans-serif;
 color:#b11c42;
 }
 .infomenarik li {
 padding-bottom: 1%;
 }
 .infomenarik li h4{
 padding-top: 3%;
 }
 .infomenarik li a{
 color:#0074a2;
 font-size:15px;
 font-family: Arial;
 display:block;
 width:auto;
 border-bottom: 1px solid #707070;
 box-shadow: 0 1px 0 #fff;
 -webkit-transition: all 0.100s ease-out;
 }
 .infomenarik li a:hover{
 background: #555556;
 color: #ffffff;
 text-decoration: none;
 padding-left: 10px;
 }

Saya rasa pembuatan daftar isi di WordPress tanpa menggunakan plugin ini dicukupkan sekian saja. Selamat mencoba dan semoga sukses. Jika gagal dan ada tahapan yang masih belum mengerti silakan Kamu sampaikan pada kolom komentar di bawah.