TUTORIAL CARA MEMBUAT HALAMAN DAFTAR SEMUA POSTINGAN PADA WORDPRESS – Tutorial wordpress kita kali ini adalah bagaimana cara menampilkan daftar postingan kita yang telah kita buat, menjadi semacam archive berdasarkan aturan bulan, mungkin sebagian dari anda ada yang tertarik dengan tutorial kali ini untuk menampilkan semua daftar postinganya pada satu halaman sehingga dapat memudahkan untuk proses pencarian. hasil dari tutorial kita ini nanti akan dapat menampilkan semua judul postingan yang sudah kita buat sejak awal di kelompokkan dalam aturan bulan dan jika di klik akan menuju ke halaman postingan kita.
Disamping itu saya juga akan memberikan sebuah script CSS3 agar tampilan list menjadi lebih menarik dan juga rapi, sebenarnya Tutorial CSS3 list ol li ini telah saya bahas di tutorial terdahulu.
[php]<?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(); ?>[/php]
Untuk membuatnya silahkan anda buat file baru dengan menggunakan nama page-allpost.php di folder bagian template anda, setelah itu isikanlah script seperti dibawah ini.
*Ingatlah, sesuaikan dengan class dari template anda di singel.php ataupun page.php, sehingga script diatas dapat menyesuaikan dengan template yang anda pakai. dan untuk cssnya tambahkan juga script css dibawah ini ke dalam style.css template anda
[php]/* 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;
}[/php]
Jika semuanya telah anda cocokan dan sudah tidak terjadi error, langsung saja buat page baru dan cukup beri title tanpa anda isi, dan pilih lah sebuah template di bawah menu update dari status default template menjadi all page, dengan nama yang telah kita tentukan di script all-page.php tadi.
Baca juga: CARA MEMASUKKAN SYNTAX CODE DI POSTINGAN PADA WORDPRESS
