Download Now Download Themes Gratis WordPress Responsive!

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 Google+.

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

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

WebHostingPad

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

Hostgator

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

  • paling seneng mampir ke web agan….selain indah tampilan web’a tp banyak ilmu yg didapat
    salam sukses selalu gan

  • Apip

    kalo pengen bikin listnya berdasarkan kategori tertentu gimana ?
    apa yang harus di tambah

  • terima kasih sangat membantu

Must Read...!
9 Plugins WordPress Paling Populer di Gunakan

Berikut adalah daftar dari 9 plugins yang paling populer dan sering di gunakan oleh...

Theme WordPress Sugar and Spice Responsive Free

Sugar and Spice adalah Template Wordpress Responsife gratis yang di desain feminin, tema ini...

Close