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! ***

Read Full Post »

Upgrade WordPress Versi 2.6.5

Harus diakui, wordpress termasuk salah satu engine blog yang amat memanjakan penggunanya. Belum lama wordpress versi 2.6.3 diluncurkan, kini versi 2.6.5 sudah bisa dinikmati. Bahkan, meski masih dalam versi beta, versi 2.7 juga sudah bisa dicoba untuk diinstalasi. Saya pernah juga mencoba menggunakan wordpress versi 2.7, sayangnya ada beberapa plugin yang kurang “bersahabat” dengan versi 2.7, sehingga terpaksa saya copot dan kembali ke versi 2.6.

Saya sendiri belum melihat perbedaan yang begitu signifikans antara versi 2.6.5 dan versi 2.6.3. Struktur dasbor tak jauh berbeda. Hanya karena direkomendasikan untuk di-upgrade, maka dengan memanfaatkan plugin WordPress Automatic Upgrade saya segera menginstalnya.

Jujur saja, kehadiran WordPress Automatic Upgrade ini, menurut saya, sangat membantu kita dalam melakukan proses instalasi. Semua proses berlangsung secara otomatis. Kita hanya mengunduh wordpress versi terbaru, lantas tinggal meng-klik link next-task yang disediakan. Kita tak perlu repot-repot harus melakukan backup database atau menonaktifkan plugin seperti kalau kita melakukan upgrade manual lewat FileZilla Ftp, misalnya. Hanya dalam beberapa menit, proses instalasi berlangsung (nyaris) tanpa cacat.

Selain melakukan upgrade wp, saya juga berganti theme dengan menggunakan jasa baik desainer Brian Gardner. Menurut saya, desain theme karya Brian Gardner memang dirancang khusus seperti dalam bentuk majalah. Kita bisa dengan mudah menampilkan image pada halaman utama (homepage) hanya dengan melakukan kopipaste url image yang kita upload ketika sedang memosting tulisan melalui Custom Field, sebuah fitur yang belum saya temukan lewat theme karya desainer yang lain.

Selain tampil dalam bentuk majalah, kode-kode CSS dan html/xhtml theme revolution karya Brian Gardner juga gampang di-oprek. Dengan menggunakan CSS dan html validator yang dikeluarkan oleh W3C, theme ini akhirnya bisa terbebas dari kode-kode yang error. Hanya dibutuhkan sedikit waktu untuk mencermati kode-kode tag yang membuat file berekstensi .css dan .php error atau mendapatkan peringatan (warning). ***

Read Full Post »