Tutorial WordPress kali ini adalah bagaimana menampilkan daftar postingan kita yang sudah kita buat, semacam archive berdasarkan bulan, mungkin ada yang tertarik dengan tutorial ini untuk menampilkan semua daftar postinganya di satu halaman sehingga memudahkan untuk pencarian.

Hasil dari tutorial ini nanti akan menampilkan semua judul postingan yang telah kita buat dari awal di kelompokkan dalam bulan dan jika di klik akan menuju ke link postingan kita.

Selain itu saya juga akan memberikan script CSS3 biar tampilan list menjadi lebih menarik dan rapi, sebenarnya Tutorial CSS3 list ol li ini sudah saya bahas di tutorial terdahulu disini.

<?php
/*
Template Name: All posts
*/
?>
<?php $mts_options = get_option('nama template anda'); ?>
<?php get_header(); ?>
<div id="page" class="single">
	<div class="content">
		<article class="article">
<?php if(have_posts()) : ?>
     <?php while(have_posts()) : the_post(); ?>
          <div class="post"> 
               <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
               <div class="entry">	
                    <?php the_content(); ?>
                    <?php
                    $current_date ="";
                    $count_posts = wp_count_posts();
                    $nextpost = 0;
                    $published_posts = $count_posts->publish;
                    $myposts = get_posts(array('posts_per_page'=>$published_posts)); 
	               foreach($myposts as $post) :
                         $nextpost++;
                         setup_postdata($post);
                         $date = get_the_date("F Y");   
                         if($current_date!=$date): 
                              if($nextpost>1): ?> 
                                   </ol>
                              <?php endif; ?> 
                              <strong><?php echo $date; ?></strong><ol start = "<?php echo $nextpost; ?>">
                              <?php $current_date=$date;
                         endif; ?>
                         <li class="rectangle-list"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="nofollow"><?php the_title(); ?></a></li>
                    <?php endforeach; wp_reset_postdata(); ?>
                    </ol>
              </div>
          </div>
     <?php endwhile; ?>
<?php endif; ?>

	</article>
		<!-- End Article -->
		<!-- Start Sidebar -->
		<?php get_sidebar(); ?>
		<!-- End Sidebar -->
		<?php get_footer(); ?>

Untuk membuatnya silahkan buat file baru dengan nama page-allpost.php di folder template anda, setelah itu isikan script dibawah ini.

*Ingat sesuaikan class dari template anda di singel.php atau page.php, sehingga script diatas bisa menyesuaikan dengan template yang anda gunakan. dan untuk cssnya tambahkan script css dibawah ini ke style.css template anda.

/* Rectangle */
ol {
    counter-reset: li; 
    list-style: none;
    *list-style: decimal; 
    font: 15px Fjalla one;
    padding: 0;
    margin-bottom: 4em;
    
}

ol lo {
    margin: 0 0 0 2em;
}

.rectangle-list {
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #555555;
    color: #fff;
    text-decoration: none;
    transition: all .3s ease-out;   
}

.rectangle-list :hover{
    background: #6b6b6b;
}   

.rectangle-list :before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #EE3322;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}

.rectangle-list :after{
    position: absolute; 
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;               
}

.rectangle-list :hover:after{
    left: -.5em;
    border-left-color: #EE3322;             
}

Jika semuanya sudah anda sesuaikan dan sudah tidak ada error, langsung buat page baru cukup beri title tanpa di isi, dan pilih lah template di bawah tombol update dari default template menjadi all page, seperti nama yang sudah kita tentukan di script all-page.php tadi.

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.