Cara Membuat Daftar Isi Tanpa Plugin

Cara Membuat Daftar Isi Tanpa Plugin - Hai sobat, pada kesempatan kali ini saya akan membahas tentang Cara Membuat Daftar Isi Tanpa Plugin.

Daftar Isi merupakan halaman penting dalam sebuah website atau blog. Dengan adanya Daftar Isi pengunjung bisa tau daftar artikel yang sudah kita buat.

Daftar Isi berbeda dengan Sitemap. Kalau Sitemap didesign untuk Search Engine, sedangkan Daftar Isi didesign untuk dilihat oleh pengunjung.

Langsung aja disimak tutorialnya :

Buka folder public_html > wp-content > theme > Buat file dengan nama daftar-isi.php didalam folder tema yang sedang sobat gunakan


<?php
get_header();
?>

<div id="page">
<div id="pagedaftar-isi">
<div id="daftar">
<div id="isi">
<div class="daftar-isi">
<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();
?>

Untuk mempercantik tampilannya, sobat buka file style.css dan tambahkan kode berikut :


#pagedaftar-isi {
    margin-bottom:15px;
    background: url(images/patterndaftarisi.png);
    box-shadow: 0px 0px 4px #000;
    border: 0;
}

#daftar {
    padding:5% 10% 5% 10%;
}

#isi { width:100%;
}

#isi h1{
    text-align:center;
    font-size:2.5em;
    font-family: 'Fjalla One', sans-serif;
    color:#b11c42;
}

.daftar-isi li {
    padding-bottom: 1%;
}

.daftar-isi li h4{
    padding-top: 3%;
}

.daftar-isi 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;
}

.daftar-isi li a:hover{
    background: #555556;
    color: #ffffff;
    text-decoration: none;
    padding-left: 10px;
}

Cukup Sekian tutorial Cara Membuat Daftar Isi Tanpa Plugin, kalau ada yang mau ditanyakan silahkan tinggalkan komentar.