Ditulis oleh: Ditulis pada: 10/26/2015
Sebenarnya tidak perlu pusing untuk membuat sitemaps atau table of contents di wordpress karena banyak plugin yang menyediakan fasilitas tersebut, tinggal install plugin lalu setting maka jadilah sebuah sitemaps untuk blog wordpress. Namun kali ini kita akan membuat sebuah sitemaps wordpress tanpa plugin. Ini biasanya dilakukan jika ternyata sudah terlalu banyak plugin yang di-install atau karena memang menghindari penggunaan plugin agar 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 agar menjadi lebih ringan.
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 digunakan >> lalu copy page.php kemudian re-name menjadi sitemap.php.
Selanjutnya silahkan edit sitemap.php yang barusan dibuat, tambahkan kode di bawah ini di paling atas kode lainnya.
<?php
/*
Template Name: Sitemap
*/
?>
Kemudian ganti kode
<?php the_content(); ?> dengan kode 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 baru 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 kode 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 kode javascript di bawah ini lalu simpan di atas kode
</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, selesai sudah membuat sitemap wordpress tanpa plugin ini. Sekarang silahkan cek halaman PAGE untuk Sitemaps yang barusan dibuat.
Harap diperhatikan
Ikon toggel pada sitemaps ini menggunakan font awesome, jadi pastikan bahwa Anda sudah melengkapi blog Anda dengan font awesome.