Membuat Daftar Isi Pada WordPress

Saad Abdurrazaq Mon, March 2, 2015 5 Comments 2,126 views
Membuat-Daftar-Isi-Pada-WordPress

Membuat daftar isi pada WordPress bukanlah hal yang sulit, dengan berbekal sedikit pengetahuan tentang HTML, CSS, PHP, dan function yang dibuat oleh WordPress, Anda sudah dapat membuat daftar isi pada WordPress.

Berikut Saya akan jelaskan step by step cara membuat daftar isi pada WordPress.

Langkah Pertama: Buatlah page dan beri nama page-all-posts.php misal, kemudian isikan kode berikut ini:

<?php /* Template Name: page-all-posts */ ?>

<?php get_header(); ?>




<div class="main-wrapper">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- Looping post if have_post -->

                <?php get_template_part( 'content', 'allposts' ); ?> <!-- memanggil template yang bernama content-allpost.php -->
 
                 
        <?php endwhile; ?>

        <?php else : ?>

            <?php get_template_part( 'content', 'none' ); ?> <!-- jika tidak ada artikel, maka panggil template content-none.php -->     

        <?php endif; ?>

        
    </div>



<?php get_sidebar(); ?>
<?php get_footer(); ?>

Langkah Kedua: Buatlah page dan beri nama content-allposts.php, kemudian ketikkan script di bawah ini:




<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>




<h1 class="entry-title"><?php the_title(); ?></h1>







<div class="all-articles">
<?php the_content(); ?>


Display <?php $count_posts = wp_count_posts(); $published_posts = $count_posts->publish; echo $published_posts; ?> articles, published:

 <!-- Menampilkan jumlah artikel yang telah dipublikasikan -->




<ol>
<a href="<?php the_permalink(); ?>"><?php get_archives('postbypost'); ?></a><!-- permalink: digunakan untuk menampilkan URL artikel. sedangkan title untuk menampilkan judul artikel -->
</ol>



</div>



</article>



Langkah Ketiga: Buatlah page dan beri nama content-none.php, lalu ketikkan script berikut ini:

<?php /** * Menampilkan suatu halaman, ketika artikel yang dicari melalui kotak pencarian tidak tersedia * * The template part for displaying a message that posts cannot be found. * * @package Sead */ ?>




<section class="no-results">



<div class="page-header">



<h1><?php _e( 'Nothing Found', 'sead' ); ?></h1>



 <!-- Pesan yang menampilkan kata nothing found -->
</div>



<!-- .page-header -->




<div class="page-content">
<?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?> <!-- Jika artikel tidak tersedia -->



<?php printf( __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'sead' ), esc_url( admin_url( 'post-new.php' ) ) ); ?>


<?php elseif ( is_search() ) : ?> <!-- Jika artikel yang dicari tidak tersedia -->



<?php _e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'sead' ); ?>

<?php get_search_form(); ?>

<?php else : ?>



<?php _e( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.', 'sead' ); ?>

<?php get_search_form(); ?>

<?php endif; ?>
</div>



<!-- .page-content -->

</section>



<!-- .no-results -->

Langkah Keempat: Simpan file tersebut di folder template Anda.

Langkah Kelima: Buatlah sebuah page, caranya masuk ke Dashboard > Pages > Add New > kemudian isikan judul dan kontennya sesuai keinginan Anda > kemudian pada Page Attributes pilih opsi Template dan kaitkan dengan halaman page-all-posts.php.
add

wysywig

hook

Selesai.

Berikut hasilnya setelah distyling dengan CSS:
cropdaftar

Tahapan lengkap cara membuat template WordPress bisa Anda lihat di http://kafeinkode.com/membuat-template-wordpress/

Is a web enthusiast from Indonesia. kafeinkode was created and written by Saad Abdurrazaq, it is built on WordPress. Love working with WordPress, programming, blogging, internet marketing, and all about computer soft skills.

5 comments

Leave a Reply

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

  1. malikabimanyu171299@gmail.com'

    Wah lumayan rumit nih codenya, Saya bookmark dulu gan, muehehe…

    Reply
  2. anak.tanta@gmail.com'

    Kok punya saya malah gak muncul mas list daftar isinya. Padahal semua kode udah saya salin semua. Apa yang salah ya? Apa di saya gak ngisi cssnya ya? soalnya saya gak bisa

    Reply