Home / WordPress / Cara Membuat Daftar Isi Di WordPress Tanpa Plugin

Cara Membuat Daftar Isi Di WordPress Tanpa Plugin

Cara Membuat Daftar Isi Di WordPress Tanpa Plugin – Selain Cara Membuat Tombol Back To Top Di WordPress daftar isi di blog juga merupakan halaman penting yang harus Anda buat untuk memudahkan pengunjung blog dalam menelusuri dan mengetahui lebih jauh secara kesuluruhan artikel Anda.

Baca Juga : Cara Backup Semua Konten Di WordPress

Daftar isi di WordPress yang saya maksud dan yang akan saya jelaskan disini berbeda dengan Sitemap.  Sitemap adalah peta situs untuk mempermudah pengindekskan mesin pencari seperti Google. Dengan mengaktifkan sitemap di blog, mesin google akan mudah mendeteksi seluruh konten di dalamnya. Sitemap atau peta situs biasanya berbasis XML, contoh Sitemap blog Info Menarik.

Adapun halaman Daftar Isi fungsinya hampir sama dengan Sitemap, bedanya kalau Daftar Isi dibuat untuk memudahkan pengunjung blog atau pembaca blog sedangkan Sitemap untuk memudahkan pengindekskan Google. Kita bisa saja membuat Daftar Isi dengan Sitemap blog yang sudah kita punya, namun Sitemap basis XML tampilannya kurang menarik.

Cara membuat daftar isi di WordPress ada dua cara, pertama dengan menggunakan Plugin dan kedua bisa juga dengan Tanpa Plugin. Dan untuk WordPress.com (blog gratisan), pastinya Daftar Isi dibuat dengan Tanpa Plugin.

Sebagai contoh Anda bisa lihat Daftar Isi blog Info Menarik, Daftar Isi tersebut saya buat tanpa menggunakan plugin. Dan saya rasa tampilannya tidak kalah menarik dengan yang menggunakan plugin, justru kita lebih leluasa mengatur style.css sesuai dengan selera kita. Dengan menggunakan Plugin, tentunya akan memberatkan http request suatu blog dan efeknya loading blog akan semakin buruk. Dengan alasan itu saya membuat halaman khusus Daftar Isi tanpa menggunakan plugin.

Cara Membuat Daftar Isi Di WordPress Gratisan

Membuat daftar isi di WordPress.com ini sangat mudah, Anda tinggal copy dan paste kode berikut di tempat yang ingin Anda tampilkan Daftar Isi tersebut. Bisa di Halaman paste di mode Text atau di Widget Sidebar paste di box Text. Kodenya adalah :

[archives]

Kode pengaturan lebih lengkap lagi untuk membuat daftar isi di WordPress.com bisa dilihat di Archives Shortcode.

Cara Membuat Daftar Isi Di WordPress Berbayar

Seperti yang sudah saya singgung di atas, bahwa bisa kita lakukan dengan dua cara : Plugin dan Tanpa Plugin. Tapi disini saya tidak akan membahas kedua-duanya, yang akan saya bahas disini adalah membuat daftar isi di WordPress tanpa Plugin.

Halaman daftar isi yang akan saya buat adalah daftar isi perkategori, maka kodenya kira-kira seperti ini :

<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>

Selanjutnya untuk memanggil judul halaman, Anda bisa menggunakan kode berikut :

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

Buatlah class untuk mempercantik dan memudahkan dalam desain halaman daftar isi yang kita buat, sebagai contoh saya membuat class seperti 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>

Agar header blog Anda tampil di halaman daftar isi, maka tambahkan kode berikut di atas kode daftar isi yang sedang Anda buat.

<?php get_header(); ?>

Dan untuk menampilkan footer tambahkan kode berikut di bawah kode daftar isi yang sedang Anda buat.

<?php get_footer(); ?>

Maka setelah digabung kode di atas, untuk menampilkan halaman daftar isi tanpa plugin di WordPress kira-kira akan seperti ini :

<?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(); ?>

Langkah selanjutnya, copy kode diatas dan paste di Notepad lalu simpan dengan nama page-daftar-isi.php.

cara-membuat-daftar-isi-di-wordpress-tanpa-plugin-1

Setelah Anda membuat kode untuk menampilkan halaman daftar isi dan menyimpannya di Notepad dan memberi nama page-daftar-isi.php selanjutnya upload file php daftar isi Anda ke tema WordPress yang Anda gunakan di File Manager > Web Root (public_html/www) > wp-content > themes > tema Anda melalui CPanel tempat sewa Hosting Anda. Cara masuk ke File Manager, Anda bisa lihat di tulisan saya Cara Backup Semua Konten Di WordPress

cara-membuat-daftar-isi-di-wordpress-tanpa-plugin-2

Setelah Anda upluad file php untuk menampilkan halaman daftar isi, sekarang Anda login ke wp-admin WordPress Anda untuk masuk ke Dashboard dan buatlah halaman baru dengan judul  Daftar Isi dan permalink http://domainanda.com/daftar-isi/. Dan ingat, biarkan kosong / jangan ketik apapun pada area halaman kerja daftar isi yang baru saja Anda buat.

cara-membuat-daftar-isi-di-wordpress-tanpa-plugin-3

Silahkan cek halaman baru yang barusaja Anda buat dengan permalink diatas, sukses atau belum? Jika belum, ulangi lagi dan cermati langkah-langkah diatas dengan teliti jangan sampai salah satu langkahpun. Selanjutnya jika Anda telah sukses membuat halaman Daftar Isi Tanpa Plugin untuk mempercantik tampilan halaman Daftar Isi, tambahkan style di style.css dan sesuaikan dengan class yang Anda buat seperti pada Langkah 1. Contoh, saya membuat style seperti berikut :

/*-[ 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;
 }

Semoga empat langkah diatas dapat Anda mengerti dan sukses membuat halaman daftar isi tanpa plugin. Jika ada yang ingin ditanyakan, silahkan di kolom komentar saja, semoga saya bisa membantunya.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

42 comments

  1. Terima Kasih nih buat info menarik, cara membuat daftar isi tanpa plugin sudah saya praktekan dan berhasil dengan lancar… sangat bermanfaat…

  2. Yah, padahal kemarin nyari beginiain. tapi sekarang sudah pakai tema yang sudah ada daftar isinya langsung.

  3. Wah padahal saya kemarin-kemarin mencari-cari cara ini loh. Tapi syukur sekarang tema wordpressnya sudah ada sitemapnya langsung.

  4. Thx gan… berhasil diterapkan di salah satu blog ane nih…. Mantap dah… :)

  5. makasih gan artikelnya …

  6. Gan kl sebelumnya sudah pakai plugin google sitemap lalu saya mau bikin manual seperti tutorial agan di atas apakah aman gan ?

    • Google sitemap khusus untuk mesin pencari mas, kalau halaman daftar isi seperti yg saya terangkan diatas untuk manusia. Jadi aman-aman saja …

  7. Susah juga ya om, harus belajar lagi ini …
    Thanks infonya ..

  8. saya gk bisa mas..gk berjalan pada saya uda nerapkan cara cara di atas…kira kira apa yang bermasalah ya?

  9. Mas klo dlam satu website dipasangin 22nya gimana (tanpa plugin & yg pke plugin)? Apa aman buat websitenya.

  10. Mas kalo spy daftar isi nya spt mas punya bgmn ?
    http://info-menarik.net/daftar-isi/

  11. makasih tutornya om dan ijin praktek…
    skalian mau nanya om, kalo mau buat daftar isi kayak blog InfoMenarik gimana yah?

    • Kebetulan mas, itu saya sudah buat tutorialnya. Itu menggunakan plugin mas.

      • Iya om, saya baru mo terapin ke blog saya.. hehe
        cuma yang mau saya tanyakan om, apakah page-daftar-isi.php sama kode css harus dihapus dulu atao dibiarkan saja om?
        makasih sebelumnya om.. :)

  12. mas terima kasih atas infonya.sebelumnya saya buat daftar isi manual sampai gempor. saya mau tanya bagaimana agar post bisa diurutkan sesuai abjad

    • Yang saya tahu hanya akan tampil berdasarkan tulisan terbaru saja mas. Untuk berdasarkan abjad saya ga tahu mas.

  13. Ini pas kemarin ane otak-atik gak work mas. Ya weslah ane pake plugin ja, daripada ribet.
    Tutornya luar biasa mas. makasih.

  14. tutorialnya bagus dan lengkap. tapi sayanganya terlalu banyak langkah terutama bagi blogger awam seperti saya :D

  15. Mantap gan! joss gandos artikelnya, barangkali agan2 butuh referensi lebih dalam tentang cara membuat sidebar di WordPress, agan bisa berkunjung ke kafeinkode.com/membuat-daftar-isi-pada-wordpress/

  16. Siap untuk mencoba. Mohon ijin juga untuk melacak artikel-artikel menarik di blog ini. Salam dari penulis pemula asal bumi padjadjaran :)

  17. kok saya belum bisa ya mas pada kode

    Sudah saya ganti, nama namanya, dan langkah langkahnya benr tapi belum bisa muncul, apa ya yang salah

    • Hmmm apa ya mas? Sulit kalau tidak langsung praktik dan dilihat masalahnya. Coba mas praktik dulu di Local Host menggunakan template lain!

  18. mas, mau tanya.. cara nambahin kata “new” untuk post yang kurang dari 10 hari di daftar isi bagaimana yah ?? U,u

    skifisipairlangga.com/daftar-isi/

    • Itu menggunakan kode Javascript mas dan nanti akan memberatkan loading halaman. Tapi kalau mas tertarik, nanti saya buat tutorialnya saja, karena kepanjangan kalau dibahas disini.

  19. Nambahin saja.
    Tidak bekerjanya page ini adalah (mungkin) tidak menggunakan page template. Agar muncul pilihan template tambahkan:

    paling atas (di atas )

    Kemudian sewaktu membuat page, pilih daftar isi template, kemudian publish.

    Semoga membantu

  20. Sangat menginspirasi. Saya tertarik untuk belajar lebih lanjut.

    Jika Anda ingin sewa mobil di Malang hubungi Prameswari Transport.

  21. tempat tidur bayi

    Maaf cara backup domain yang sudah expeired bisa tdk mas? Makasih .. semoga blog anda semakin rame dan sukses om…………..

    • Sejauh ini saya belum pernah mendengar mas untuk mengembalikan domain yang sudah kadaluarsa. Mungkin masalah ini bisa dibicarakan dengan tim support penyedia domain atau hosting.

  22. pembuatan class itu dimana ?
    makanya saya lihat dari semua komentator tidak berjalannya code diatas.
    yang saya maksud baris ini :

    disimpannya dimana ???

    • Bisa diperjelas lagi pertanyaannya? Maksudnya baris mana yang ingin ditanyakannya mas? Jika ingin menampilkan kode, gunakan tag < 'pre'> saja (tanpa tanda petik).

  23. lebih ribet dari blogger ternyata..tapi menantang juga. maklum newbie di wordpress.
    perlu dicoba..

Leave a Reply

Your email address will not be published. Required fields are marked *