Membuat Sitemaps Atau Table Of Contents Wordpress Tanpa Plugin

Membuat Sitemaps Atau Table Of Contents Wordpress Tanpa Plugin

Bola Hero Gawai

Membuat Sitemaps Atau Table Of Contents Wordpress Tanpa Plugin

Membuat Sitemaps Atau Table Of Contents Wordpress Tanpa Plugin
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. 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 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.

Table Of Contents Wordpress Tanpa Plugin


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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×