Menampilkan Thumbnail di Halaman Depan

Salah satu daya tarik sebuah blog adalah tampilan alias theme. Trend tampilan halaman depan sebuah blog belakangan ini adalah format majalah dengan menampilkan thumnail (image) di bawah judul. Salah satu theme blog yang memiliki ciri khas format majalah pada halaman depan adalah theme revolution karya desainer Bryan Gardner. Dengan tampilan wajah seperti itu, halaman depan blog menjadi lebih menarik.

Selain kode bawaan dari theme tertentu, kita juga bisa membuat tampilan blog kita seperti dalam format majalah dengan memodifikasinya. Berikut ini adalah kode untuk menampilkan thumbnail pada halaman depan, khususnya untuk engine wordpress dengan domain sendiri.

<?php

if (have_posts()) : $count = 0;

while(have_posts()) : the_post();

$count++;

if ($count>2) break;

?>

<?php $postimageurl = get_post_meta($post->ID, ‘image’, true); if ($postimageurl) { ?>

<p style=”font-size:13px; font-family:georgia;font-weight:bold;margin:0px;text-align:left;”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></p>

<p style=”font-size:11px; font-family:arial;margin:0px 5px 5px 8px;”>

<?php the_time(‘j F Y’) ?> | <?php if(function_exists(‘the_views’)) { the_views(); } ?> | <a href=”<?php comments_link(); ?>”><?php comments_number(‘0 respon’, ‘1 respon’, ‘% respon’); ?></a> <?php edit_post_link(‘(e)’, ”, ”); ?></span></p></div>

<div style=”border-bottom:1px dotted #94B1DF; margin-bottom:5px; padding:0px 0px 5px 0px; clear:both;”></div>

<a href=”<?php the_permalink() ?>” rel=”bookmark”>

<img style=”float:left;width:100px;height:98px;border:3px solid #eee;margin:3px 5px 0px 0px;” src=”<?php echo $postimageurl; ?>” alt=”img” /></a><?php } ?><?php the_content_limit(300); ?>

<div style=”border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;”></div><?php endwhile; endif; ?>

Keterangan:

1. Kode tersebut digunakan untuk mengganti kode asli yang terdapat pada file index.php pada theme yang kita gunakan. (Silakan cari pada theme editor!) Sebelum diganti, kode asli sebaiknya di-back-up dulu. Hal ini dimaksudkan untuk berjaga-jaga apabila terjadi error.
2. Angka 2 pada kode if ($count>2) break; menyatakan jumlah postingan yang akan ditampilkan di halaman depan. Angka 2 bisa diganti sesuai selera kita. Sedangkan, angka 300 pada kode <?php the_content_limit(300); ?> menunjukkan jumlah karakter yang akan ditampilkan pada setiap postingan. Kita juga bisa mengganti angka tersebut sesuai panjang pendeknya penggalan postingan yang akan ditampilkan.
3. Jangan lupa, ketika kita memosting tulisan, masukkan link image (gambar) yang kita upload pada value dan klik atau ketik image pada kolom nama pada fitur Add new custom field: yang terdapat di bawah text-editor. Kemudian, klik add custom field.

Nah, selamat mencoba, semoga berhasil! Salam ngeblog! ***