logo

Menampilkan Thumbnail di Random Posts dan Recent Posts

Menampilkan Thumbnail di Random Posts dan Recent Posts

Membuat Thumbnail di Random Posts dan Recent Posts

Sudah bisa menampilkan random posts atau recent posts di blog WordPress kamu? Hasil yang ditampilkan dari kedua skrip random posts dan recent posts pada postingan saya sebelumnya memang tidak memunculkan gambar jika post kamu ada gambarnya. Artikel postingan yang muncul juga hanya excerpt (summary) nya saja. Sekarang kita coba menampilkan thumbnail dari kedua skrip tersebut.

Spoiler :
1. Buka function.php theme blog kamu dan kopas kode berikut. (simpan aja di bagian paling bawah kode-kode dalam function.php)



<?php
function the_image($size = 'medium' , $class = ”){
global $post;

//setup the attachment array
$att_array = array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order_by' => 'menu_order'
);

//get the post attachments
$attachments = get_children($att_array);

//make sure there are attachments
if (is_array($attachments)){
//loop through them
foreach($attachments as $att){
//find the one we want based on its characteristics
if ( $att->menu_order == 0){
$image_src_array = wp_get_attachment_image_src($att->ID, $size);

//get url – 1 and 2 are the x and y dimensions
$url = $image_src_array[0];
$caption = $att->post_excerpt;
$image_html = '<img align="left" style="padding:0 4px 4px 0" width="50px" src="%s" alt="%s" class="thumb-home"/>';

//combine the data
$html = sprintf($image_html,$url,$caption,$class);

//echo the result
echo $html;
}
}
}

}
?>

Kode line 27 berisi ukuran thumbnail (width=”50px” dan penempatan gambar (align=”left”). Kamu modifikasi sendiri jika diperlukan.

2. Kemudian tambahkan kode berikut untuk menampilkan –> Random Posts:

<h1>Random Posts:</h1>
<?php
$rand_posts = get_posts('numberposts=5&orderby=rand'); //angka 5 = jumlah postingan yang mau ditampilkan
foreach( $rand_posts as $post ) :
setup_postdata($post);
?>
<div class="post">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<div class="entry"><?php the_image('thumbnail','post-thumb');?><?php the_excerpt(); ?> </div>
<p class="postmetadata"><small><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted on <?php the_time('F jS, Y') ?> under <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></small></p>
</div>
<?php endforeach; ?>

3. Kemudian tambahkan kode berikut untuk menampilkan –> Recent Posts:

<?php
$recent_posts = get_posts('numberposts=5');//angka 5 = jumlah postingan yang mau ditampilkan
foreach( $recent_posts as $post ) :
setup_postdata($post);
?>
<div class="post">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<div class="entry"><?php the_image('thumbnail','post-thumb');?><?php the_excerpt(); ?> </div>
<p class="postmetadata"><small><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted on <?php the_time('F jS, Y') ?> under <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></small></p>
</div>
<?php endforeach; ?>

Thumbnail akan muncul, apabila postingan kamu berisi gambar. Jika mau menggunakan skrip ini, pastikan dulu semua postingan berisi gambar supaya tampilannya lebih baik.

0 komentar:

Posting Komentar