Membuat Sitemaps Atau Table Of Contents Wordpress Tanpa Plugin

Sebenarnya tidak perlu pusing untuk menciptakan sitemaps atau table of contents di wordpress sebab banyak plugin yang menyediakan kemudahan tersebut, tinggal install plugin kemudian setting maka jadilah sebuah sitemaps untuk blog wordpress. Namun kali ini kita akan menciptakan sebuah sitemaps wordpress tanpa plugin. Ini biasanya dilakukan jikalau ternyata sudah terlalu banyak plugin yang di-install atau sebab memang menghindari penggunaan plugin biar tidak terjadi blocking render dari js dan css.

Scriptnya saya ambil dari http://wplift.com/ namun saya sedikit modifikasi tampilannya serta mengganti jquery show hide dengan javascript biar menjadi lebih ringan. Sebagai live demonya silahkan lihat sitemaps blog wordpress saya di sini.

Bagi yang tertarik untuk mencoba menggunakannya, silahkan ikuti langkah-langkahnya di bawah ini.

1. Buat Template Halaman Sitemaps
Silahkan masuk ke File Manager hosting blog Anda. Lalu masuk ke public_html >> wp-content >> themes >> pilih theme yang dipakai >> kemudian copy page.php kemudian re-name menjadi sitemap.php.

Selanjutnya silahkan edit sitemap.php yang barusan dibuat, tambahkan isyarat di bawah ini di paling atas isyarat lainnya.

 <?php
 /*
 Template Name: Sitemap
 */
 ?>

Kemudian ganti kode <?php the_content(); ?> dengan isyarat di bawah ini.

 <ul id="toggle-view">
 
 <li>
 <h2 id="post-panel" onclick='togglePanelpost("panel-post")'><i class="fa fa-plus"></i> Posts</h2>
 <div class="panel" id="panel-post" style="display:none">
 <ul>
 <?php
 $myposts = get_posts('numberposts=-1&offset='.$debut);
 foreach($myposts as $post) :
 ?>
 <li class="sitemap"><?php the_time('d/m/y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
 <?php endforeach; ?>
 </ul>
 </div>
 <?php //endwhile; ?>
 </li>
 
 <li>
 <h2 id="page-panel" onclick='togglePanelpage("panel-page")'><i class="fa fa-plus"></i> Pages</h2>
 <div class="panel" id="panel-page" style="display:none">
 <ul>
 <?php
 $myposts = get_posts('numberposts=-1&post_type=page&offset='.$debut);
 foreach($myposts as $post) :
 ?>
 <li class="sitemap"><?php the_time('d/m/y') ?>: <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
 <?php endforeach; ?>
 </ul>
 </div>
 </li>
 
 <li>
 <h2 id="categories-panel" onclick='togglePanelcategories("panel-categories")'><i class="fa fa-plus"></i> Categories</h2>
 <div class="panel" id="panel-categories" style="display:none">
 <ul>
 <?php wp_list_cats("sort_column=name&optioncount=1&hierarchical=0"); ?>
 </ul>
 </div>
 </li>
 
 </ul>

Kemudian silahkan SAVE perubahan pada sitemap.php-nya.

2. Buat Halaman Sitemap
Silahkan buat PAGE gres di dashboard wordpress, silahkan beri judul Sitemaps atau apa pun yang Anda inginkan. Kemudian di bilah kanan editor postingan pada kotak Page Attributes silahkan klik toggle pada Template dan pilih Sitemap. Selanjutkan silahkan terbitkan halaman tersebut.



3. Tambahkan Kode CSS
Silahkan tambahkan isyarat CSS di bawah ini pada file style.css

 #toggle-view{list-style:none;margin-top:30px;padding:0;font-size:16px!important}
 #toggle-view h2{border-bottom:0;margin:30px 0;font-size:22px!important;font-weight:600;cursor:pointer}
 #toggle-view h2:hover {color:#e8554e}
 #toggle-view li{margin:0;list-style-type:none;border-bottom:1px solid #ccc;}
 #toggle-view li:first-child{border-top:1px solid #ccc;}
 #toggle-view li.cat-item,#toggle-view li.sitemap{margin:0;position:relative;cursor:pointer;list-style-type:none;padding-left:15px}
 #toggle-view li.cat-item:last-child,#toggle-view li.sitemap:last-child{margin-bottom:-5px;border-bottom:none}
 #toggle-view li.cat-item:first-child,#toggle-view li.sitemap:first-child{border-top:1px solid #ccc}
 #toggle-view .panel{margin:5px 0}

4. Tambahkan Kode Javascript
Silahkan copy isyarat javascript di bawah ini kemudian simpan di atas isyarat </body> pada file footer.php

 <script>
 function togglePanelpost(e){var n=document.getElementById(e),l=document.getElementById("post-panel"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="<i class='fa fa-minus'></i> Posts"):(n.style.display="none",l.innerHTML="<i class='fa fa-plus'></i> Posts")};
 function togglePanelpage(e){var n=document.getElementById(e),l=document.getElementById("page-panel"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="<i class='fa fa-minus'></i> Pages"):(n.style.display="none",l.innerHTML="<i class='fa fa-plus'></i> Pages")};
 function togglePanelcategories(e){var n=document.getElementById(e),l=document.getElementById("categories-panel"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="<i class='fa fa-minus'></i> Categories"):(n.style.display="none",l.innerHTML="<i class='fa fa-plus'></i> Categories")};
 </script>

Nah, akibat sudah menciptakan sitemap wordpress tanpa plugin ini. Sekarang silahkan cek halaman PAGE untuk Sitemaps yang barusan dibuat.

Harap diperhatikan
Ikon toggel pada sitemaps ini memakai font awesome, jadi pastikan bahwa Anda sudah melengkapi blog Anda dengan font awesome.


Sumber https://www.kompiajaib.com/

Share this post