Cara Menampilkan Caption di Excerpt Wordpress Menggunakan Plugin Get The Image

Front Page

Post ini akan berguna untuk anda yang membuat theme wordpress. Yang belum memahami sistem theme wordpress, anda dapat mempelajari dasar membuat theme wordpress melalui serial tutorial cara membuat wordpress theme.

Begini kondisinya : Anda sedang mendesain halaman home dari sebuah blog wordpress. Anda ingin membuat halaman home anda menampilkan cuplikan (bukan keseuruhan) konten + caption image. Masalahnya adalah :

Untuk menampilkan cuplikan konten, digunakan tag <?php the_excerpt(); ?>
tag the_excerpt(); tidak menampilkan image / caption image.

Jadi bagaimana solusinya?

Kami pernah mendapati beberapa theme magazine style yang menggunakan kode php tertentu untuk mengeluarkan image pertama dari sebuah konten post untuk dimunculkan beriringan dengan excerpt. Tapi teknik ini akan sangat menyebalkan jika anda belum menguasai php. maka dari itu, kita teknik yang ini :

Gunakan plugin Get The Image.

Apa gunanya pugin Get The Image ini?

Plugin Get The Image bertugas menampilkan caption berukuran 150 X 150 piksel dari gambar pertama yang ada dalam konten post anda.

Ditampilkan dimana?

Ditampilkan ditempat anda meletakkan tag khusus untuk memanggilnya.

Bagaimana jika post saya tidak ada image-nya?

Anda bisa menset agar plugin get the image menampilkan gambar default yang anda inginkan, seperti “image unavailable”. Anda bisa lihat halaman utama bloggingly sebagai contoh.

Cukup teorinya. Sekarang implementasinya :

1. Download plugin Get The Image disini. Lalu Install dan Activate
2. Masuk ke ( untuk versi 2.6 ) Design > Theme Editor > index.php (jika theme anda memiliki file home.php, maka yang di pilih home.php saja)
3. Sebelum tag <?php the_excerpt(); ?>, copy pastekan tag ini : <?php echo get_the_image_link(array(‘Thumbnail’,'My Thumbnail’),’thumbnail’,'http://test.com/unavailable.jpg’); ?>
4. Tekan update file.

Lihat halaman utama anda. Sekarang setiap post yang memiliki image, memiliki image di halaman utamanya. Tinggal anda rapihkan menggunakan CSS.

Lalu apa yang sebenarnya terjadi? Bisa jelaskan tag asing pada langkah ketiga?

Oke, Mari kita bahas. Tag tersebut merupakan tag dari plugin Get The Image :

<?php echo get_the_image_link(array(‘Thumbnail’,'My Thumbnail’),’thumbnail’,'http://example.com/unavailable.jpg’); ?>

1. get_the_image_link(array memanggil image + link menuju post
2. ('Thumbnail','My Thumbnail') Memberikan parameter class pada image. Jadi untuk stylingnya, anda bisa atur cssnya melalui .thumbnail atau .my-thumbnail pada style.css theme anda
3. 'thumbnail' merupakan parameter untuk menentukan ukuran yang akan dipanggil. FYI, setiap image yang diupload ke blog anda, oleh wordpress secara otomatis akan dibuat kan tiga ukuran : thumbnail (150 X 150 piksel), medium, dan full. Untuk memahami step ini, ganti saja nilai ‘thumbnail’ dengan ‘medium’ atau ”full’
4. 'http://example.com/unavailable.jpg' merupakan path image yang akan ditayangkan jika dalam post anda tidak memiliki image.

Well, cukup mudah kan?

Enjoy!