How to Start a Blog? Panduan Membuat Website Hanya 30 Menit

Tutorial Membuat Halaman Daftar Semua Postingan di WordPress

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.

all page post template wordpress

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

Daftar isi Tutorial WordPress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Niagahoster

Rp.26.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

IDCloudhost

Rp.30.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

6 Comments

Add a Comment

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