Up, mari kita kembali ke WordPress. Dan karena kita akan sama sama kembali. Mari kita ke 2.7 ;) Tips WordPress kali ini berhubungan dengan list recent post, latest post, atau postingan terakhir.

Tutorial WordPress kali ini, kembali menuntun anda untuk olah pikiran dan juga perasaan dengan Code Editor dan juga beberapa baris Code PHP dan juga CSS. Saya akan mencoba menerangkan segamblang mungkin seperti seorang Hacker memandang Sistem Operasi Jendela. ;) Saya berharap kembali. Ini tuorial bermanfaat bagi saya pribadi dan bagi blogger sekalian. Intinya tips kali ini, kita bisa listing 10 posting terakhir kita yang mana bisa kita taruh di sidebar atau di footer. Dan menambah efek dinamis. Dimana ketika listing ini berada dihalaman utama. Maka list dari latest post/postingan terakhir kita akan melist 10 posting terakhir dikurangi post yang sudah tayang di standar looping blog kita.

coffee writing computer blogging
Photo by Negative Space on Pexels.com

Seperti kita tahu dan anda juga tahu kalau Cak Matt sebenarnya sudah menyertakan fungsi yang menarik juga untuk list postingan terakhir kita, yaitu dengan kode seperti ini

<?php wp_get_archives(‘type=postbypost&limit=10’);?>

Dimana kode itu akan membuat list 10 postingan terakhir kita dengan tampilan ala kadarnya hanya berupa Judul aja, sekarang kita bisa oleh lebih dengan custom code yang akan saya bagi ini dan bisa menambah parameter lain seperti tanggal. dan juga menambah pagination.

Pertamax

Buka sidebar.php atau footer.php (salah satu aja, jika anda ingin tampil di sidebar, buka file sidebar, jika ingin di footer buka file footer)

Setelah terbuka cari lahan kosong, usahakan lahan kosong yang tidak akan merusak tampilan. Kemudian tambahkan kode ini

<div class="last">
<h3>Postingan Terakhir</h3>
<ul class="recent">
 	<li style="list-style-type: none;">
<ul class="recent">&lt; ?php if(is_home()): $postoff = '&amp;offset=5'; else: $postoff = ''; endif; $temp = $wp_query; $wp_query= null; $wp_query = new WP_Query(); $wp_query-&gt;query('showposts=10'.'&amp;paged='.$paged.$postoff);</ul>
</li>
</ul>
<ul class="recent">
 	<li style="list-style-type: none;">
<ul class="recent">?&gt;</ul>
</li>
</ul>
<ul class="recent">
 	<li style="list-style-type: none;">
<ul class="recent"><?php while ($wp_query-&gt;have_posts()) : $wp_query-&gt;the_post(); ?></ul>
</li>
</ul>
<ul class="recent">
 	<li style="list-style-type: none;">
<ul class="recent">
 	<li><a href="<?php the_permalink() ?>" rel="bookmark">&lt; ?php the_title(); ?></a> <?php the_time('d m'); ?></li>
</ul>
</li>
</ul>
<?php endwhile; ?>

<?php if($postoff =='&amp;offset=5'): ?>
<div class="navigation">
<div class="alignleft">&lt; ?php previous_posts_link('&amp;laquo; Previous') ?&gt;</div>
<div class="alignright">&lt; ?php next_posts_link('More &amp;raquo;') ?&gt;</div>
</div>
<?php endif; ?>
<?php $wp_query = null; $wp_query = $temp;?>
<br class="clear" />

</div>

Langkah diatas kita akan membuat custom loop, dimana saya menambahkan sedikit statemen JIKA, dimana JIKA posisi halaman ada di halaman utama akan membuat parameter yang $postoff yang terpanggil akan bernilai &offset=5 dan akan bernilai KOSONG jika tidak pada halaman utama.

Hal penting lain adalah anda harus merubah parameter offset, dimana pada blog saya bernilai 5 karena saya hanya menampilkan 5 posting terakhir pada looping saya, jika anda menampilkan 10, maka ganti 10.

Keduax

Kemudian Buka juga file style.css dan tambahkan kode ini pada akhir code tersebut

ul.recent {
list-style: none;
margin-left: 0;
padding-left: 0;
background: #ccc
}
.recent li {
display: block;
color:#777;
font-size:0.9em;
float: left;
text-align: right;
width: 310px;
line-height: 22px;
border-bottom: 1px solid #ccc;
}
.recent li a {
font-size:1em;
font-weight: bold;
float: left;
text-align: left;
}

Kode CSS diatas adalah kode standard saya untuk membuat tampilan seperti di FOOTER saya ini, Jika anda mau explore silahkan saja.

Sekali lagi terima kasih sudah mau membaca, jika anda merasa nyaman silahkan berlangganan RSS saya dan tentu saja bantu saya menyebarkan artikel yang semoga bermanfaat ini. Jabat Erat dan Jabat WordPress :D

0 Shares:
55 comments
  1. kalo mau nampilin gambar thumbnail pada 1 posting terbaru gimana mas? kayak punya hizbutahrir,

    mohon pencerahan, . . . sekalian scriptnya
    terima kasih bantuannya

  2. Saya biasanya menggabungkan beberapa code CSS dari Jauhari.net dan beberapa themes yang nampilin “plugin” secara langsung (tanpa widget) digabung-gabungin di localhost wordpress, kalau jadi diupload ke cpanel kalau jadi ancur delete saja copy yang baru :d
    Dengan tutorial ini jadi lebih mudah …

    Bookmark jadi andalan nich .. biar nggak lupa url-nya :)

    Arifs last blog post..Termehek-mehek dapat Duit Ratusan Dollar dengan Modal Rp. 5.000,-

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

You May Also Like

Setting MMS iPhone 4

Setting MMS di iPhone 4 dan iPhone versi2 sebelumnya, sebagai pengguna perangkat genggam iPhone, tidak mantap kalau tidak…
Read More

Sadarlah dan Sadarkah Kawan?

Sebagai mahluk Online… sebenarnya privasi kita secara otomatis (kalau ndak mau melindungi) akan di lihat orang lain. Dan…