Memajang Postingan Terkait dan Thumbnail Tanpa Plugin

Ketika jalan-jalan ke blog Mas Jauhari, saya menemukan postingan bagus tentang pemasangan kode postingan terkait tanpa plugin. Bagi sebagian blogger, mungkin ini sudah termasuk kedaluwarsa. Namun, tidak buat saya. Belakangan ini, saya mulai jenuh dengan berbagai jenis plugin. Memang plugin bisa menjadi fitur menarik yang membuat blog jadi lebih interaktif dan komunikatif. Namun, semakin banyak plugin dipasang, ujung-ujungnya akan semakin menambah entry database sehingga disk-space-usage jadi makin menyempit. Yang merepotkan, ketika sedang melakukan proses update, tak jarang muncul pesan “out of memory”, sehingga update pun gagal diselesaikan. Oleh karena itu, ada baiknya dipikirkan juga untuk mengurangi jumlah plugin, kemudian menggantinya dengan kode php.

relatedpostSalah satu plugin menarik adalah plugin yang bisa menampilkan postingan yang terkait dengan tulisan yang kita publikasikan. Coba buka dasbor wordpress, khususnya yang berdomain sendiri, pilih menu Plugins => Add new, lalu masukkan kata kunci “related post” pada tab “search plugins”, maka ada puluhan plugin related post yang bisa diinstal. Saking banyaknya, kita jadi bingung memilihnya, hehe …. Nah, ketimbang bingung-bingung pilih plugin related post, ada baiknya menggunakan kode.php yang bisa dimodifikasi secara manual. Berikut ini adalah kode menampilkan postingan terkait yang saya kutip dari Mas Jauhari.

Buka single.php pada theme editor, kemudian cari kode <?php the_content(); ?> . Setelah kode tersebut, tambahkan kode berikut ini.


<?php // Akan menampilkan 6 artikel terkait dari konten kita berdasar tags
$counter = 0; $counter2 = 0;
$backup = $post; // Query Asli di Backup
$tags = wp_get_post_tags($post->ID);
$tagIDs = array();
if ($tags) {
$tagcount = count($tags);
for ($i = 0; $i < $tagcount; $i++) {
$tagIDs[$i] = $tags[$i]->term_id;
}
$args=array(
‘tag__in’ => $tagIDs,
‘post__not_in’ => array($post->ID),
‘showposts’=>6,
‘caller_get_posts’=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post();
$counter++; $counter2++;
?><div>
<div>
<strong><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></strong>
</div>
</div>
<?php endwhile;
} else { ?>
<div><strong>No related posts found!</strong></div>>
<?php }
}
$post = $backup; // Query Asli di Kembalikan
wp_reset_query(); // Kembali ke Query asli (agar komen bisa berjalan sempurna)
?>

Simpan kode tersebut, kemudian ditest. Maka, di bawah postingan akan muncul beberapa postingan yang terdeteksi oleh wordpress memiliki kaitan isi.

Terima kasih tutorialnya, Mas Jauhari. Nah, untuk mempercantik tampilan postingan terkait, saya memodifikasinya dengan menampilkan thumbnail-nya sekaligus, ditambah dengan keterangan tentang waktu pemostingan, jumlah pembaca dan jumlah komentar, serta ringkasan seperti yang tampak pada screenshot atau postingan terkait di bawah postingan ini.

relatedpost

Berikut ini adalah kode tambahan untuk menampilkan thumbail dan beberapa “penampakan” yang lain.

<?php // Akan menampilkan 6 artikel terkait dari konten kita berdasar tags
$counter = 0; $counter2 = 0;
$backup = $post; // Query Asli di Backup
$tags = wp_get_post_tags($post->ID);
$tagIDs = array();
if ($tags) {
$tagcount = count($tags);
for ($i = 0; $i < $tagcount; $i++) {
$tagIDs[$i] = $tags[$i]->term_id;
}
$args=array(
‘tag__in’ => $tagIDs,
‘post__not_in’ => array($post->ID),
‘showposts’=>5,
‘caller_get_posts’=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post();
$counter++; $counter2++;
?>
<?php $postimageurl = get_post_meta($post->ID, ‘image’, true); if ($postimageurl) { ?><span style=”float:left;margin:-3px 2px 0px 0px;border:#eee 0px solid;”><a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”><img src=”<?php echo $postimageurl; ?>” alt=”img” width=”90″ height=”75″ /></a></span>
<a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a> (<?php the_time(‘l, j F Y’) ?>, <?php if(function_exists(‘the_views’)) { the_views(); } ?>, <a href=”<?php the_permalink() ?>#comments” title=”Jump to the comments”><?php comments_number(‘0 respon’,’1 respon’,’% respon’); ?></a> ) <?php the_content_limit(180); ?> <div style=”border-bottom:1px dotted #ddd; margin-bottom:2px; clear:both;”></div><?php } ?><?php endwhile;
} else { ?></div><div><strong>Tidak ada tulisan lain yang berkaitan!</strong>
<?php }
}
$post = $backup; // Query Asli di Kembalikan
wp_reset_query(); // Kembali ke Query asli (agar komen bisa berjalan sempurna)
?>

Kode <strong><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></strong>

saya modifikasi menjadi:

<?php $postimageurl = get_post_meta($post->ID, ‘image’, true); if ($postimageurl) { ?><span style=”float:left;margin:-3px 2px 0px 0px;border:#eee 0px solid;”><a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”><img src=”<?php echo $postimageurl; ?>” alt=”img” width=”90″ height=”75″ /></a></span>
<a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a> (<?php the_time(‘l, j F Y’) ?>, <?php if(function_exists(‘the_views’)) { the_views(); } ?>, <a href=”<?php the_permalink() ?>#comments” title=”Jump to the comments”><?php comments_number(‘0 respon’,’1 respon’,’% respon’); ?></a> ) <?php the_content_limit(180); ?><div style=”border-bottom:1px dotted #ddd; margin-bottom:2px; clear:both;”></div><?php } ?><?php endwhile;
} else { ?>

Pada kode tersebut, ukuran gambar, baik width (lebar) maupun height (tinggi) bisa disesuaikan ukuran yang dikehendaki. Untuk menampilkan jumlah pembaca, terpaksa kita mesti memanfaatkan plugin WP-PostViews.

Mungkin tidak semua theme bisa menampilkan thumnail dengan menggunakan kode tambahan seperti itu. Kebetulan saja, saya menggunakan theme yang sudah termodifikasi untuk menampilkan thumbnail di halaman depan. Teman-teman yang ingin menampilkan thumbnail di halaman depan (home-page), silakan intip tulisan di sini! Nah, ada info tambahan? Mohon di-share, kawan! Matur nuwun! ***

Comments

    • @adib,
      kalau saya juga pasang postingan terkait tanpa plugin tapi tidak thumbnail. kalau thumbnail saya belum ngerasa cocok?
      mungkin cara tersebut wajib kita kembangkan lagi, agar kita tidak bergantung pada plugin

      • betul sekali, gus. pengalaman saya selama ini penggunaan plugin bisa berdampak pada disk-space dan loading blog.

  1. mantap banget Tutorialnya Pak…
    Saya akan coba di blog self hosting saya.
    terima kasih.

  2. save dulu pak, selama ini saya masih pake plg in. ntar kalo udah berani utak atik php saya baru mo praktek :)>-

  3. sejak pakai wp saya juga senang sekali dengan plugin tapi ternyata makan banyak space dan membuat blog jadi lemot

    • hehe …. itulah yang terjadi, mas. plugin memang ok, tapi kelemahannya, terlalu makan space dan bikin loading blog jadi berkurang speed-nya.

  4. saya belum paham pak.. maklum masih baru di dunia blogger hehe
    saya pelajari dulu pak

    • wah, samngat boleh, dong, pak munir. kalau ndak salah, blog pak munir malah sudah lebih dulu saya masukkan ke google reader. akan saya cek ulang!

  5. Trims sobatku, info yang amat berguna, kita akan coba, maklum aja baru belajar ne, tak rugi punya sahabat sebaik anda…..!!!!

  6. perlu kesabaran yang tinggi untuk ngutak-atik bahasa php, apalagi yang belum nerti

  7. scc

    saya belum tahu banyak nih mengenai php…tapi memang plugin kayaknya mengurangi disk space

    • itulah yang terjadi, mas pra. yang menjengkelkan, seringkali plugin malah menghambat proses update blog.

  8. Tapi loadingnya jadi lumayan berat pak wali. heavy bandwidth killer, terutama buat saya yang fakir bandwidth…. :((:((

  9. Saya belum pasang pak, soalnya postingan dan kategori saya masih sedikit, nanti kalau sudah banyak mampir lagi kesini dan cari ini aja buat tutorialnya, terima kasih pak sawali sudah berbagi…

  10. hmm, kurang lebih, tampilan related post saya sudah seperti punya pak Sawali ini, tapi thumbnail saya lebih kecil

  11. dicoba ahh
    ….
    selama ini saya pake plugin tp theme nya tidak compatible

  12. Wah sayang saya adalah pecinta Blogspot Mas jadi tidak paham yang namanya WordPress…so pasti panjenengan tahu maksud saya.
    Btw ok banget dech tutorialnya

    • hmmm …. mungkin kalau blogspot ada cara tersendiri, mas, karena antara css dan php-nya kan jadi satu file. kalau pluginnya ada, mas, kalau ndak salah linkwithin. kalau mau, buru aja di search engine!

  13. dulu pernah Q coba pake widget ini, tapi lau menurutku dikit banget manfatnya ketimbah efek buruknya. Thanks!

  14. :d wah mantaf boleh dicoba nich keren..ane convert dulu ni halaman ke PDF hehehe..sip sip tengkyu

    • mangga, mas. terima kasih apresiasinya. tapi kalau ndak cocok, memang sebaiknya dilepas saja. malah ngrepotin nantinya.

  15. wahh bisa nuy dicoba
    hehehhe
    makasih untuk script code nya

    selamat pagi blogwalking
    :D

    • kalau blogger.com mungkin ad atriknya tersendiri, mas. tapi pluginnya ada juga kok. kalau ndak salah linkwithin.

  16. Saya pakai textpattern, bukan wordpress. Jadi tidak perlu kode PHP macam begitu… \:d/

  17. mungkin bagi sebagian blogger sudah kedaluarsa, tapi saya malah baru mendengar eh membacanya kali ini:d

    • terima kasih apresiasinya, mas. postingan ini sekadar iseng utk share ttg pengurangan penggunaan plugin, kok.

  18. WAH mantap pak, lengkap!! kap!! kap!!
    kalo saya belum menggunakan thumbnail karena masih belum sempet dan selalu lupa untuk ngedit . . .hee
    Ah biarkan saja themesku seperti itu :)

  19. tips nya manteb banget pak…
    semoga ada tutorial lanjutannya..

  20. Ini kode untuk WordPress ya pak Sawali? Tapi saya masukkan keranjang dulu, barangkali nanti ada teman kesulitan, tinggal saya bagi ke mereka (Ilmu yg Bermanfaat) pak.. trims untuk share nya :)

    • iya, mas andi. utk blogspot mungkin ada kode lain, saya belum pernah mencobanya. kalau di blogger, saya [ernah pakai plugin linkwithin.

    • kalau blogspot mungkin ada kodenya tersendiri, mas. tapi saya pernah nyoba plugin linkwithin. oke juga kok!

    • mangga, pak sungkowo, ini juga hanya sekadar postingan iseng utk sedikit share pengalaman penggunaan thumbnail post tanpa plugin.

  21. wah bagus pak hasilnya, saya malah belum nyoba, masih males ngutak-atik he..he.. :)

    • hehe … ndak perlu diotak-atik, mas arif, sebab belum tentu support dg theme yang mas arif pakai, kok.

    • mangga, mas, tapi kalau ndak kompatible dg theme-nya memang sebaiknya dibatalkan saja, mas, hehe ….

  22. Terima kasih atas kesediaan Pak Sawali untuk ikutan posting kolaborasi.
    Linknya sudah saya daftar.

  23. maturnuwun sharenya pak guru, html dan php memang asyik namun butuh waktu dan menyempatkan untuk belajar

    • utk blogspot saya menggunakan plugin linkwithin, pak. kalau penggunaan tanpa plugin di blogspot, saya belum pernah mencoba.

  24. Abu kurang berani mengotak atik blog, sementara biarlah sederhana seperti ini sahaja….

  25. wah, manjur pak!
    ini berguna banget untuk mengurangi pemakaian plugin2 yang kalau terlalu banyak bisa melemotkan loding blog…
    :)

  26. jadi tambah ilmu nih, cuma saya belum nyoba Pak. Salam hangat dan sukses selalu.

    • hehe …. salam sukses juga, mas yusa. ndak harus dicoba, kok, ini juga hanya sekadar iseng utk share hasil coba2, mas.

  27. Alhamdulilllah ini plugin in yang saya cari2 pak. Soale aku punya masalah read more itu. makasih pak Guru.

    • hehe … justru saya malah membuang pluginnya, mas kyai, diganti dengan kode manual. terlalu banyak menggunakan plugin malah jadi repot sendiri, hiks.

  28. gaya “penampakan”nya sangat bagus sekali pak,
    kepinging sekali saya ingin mengopreknya, tapi tunggu kalo ada waktu luang ..
    btw, pak sawali jago juga mengoprek2 srcipt yaa…
    oh yaa, saya malah kepingin buat form script seperti diatas .. ?
    apakah pake plugin juga pak .. ?

    • @DikMa,
      walah, ndak juga, mas. hanya kebetulan saja pingin coba2 kok, hehe … justru saya oprek dikit utk mengurangi jumlah plugin, mas.

  29. Saya juga masih kurang paham tentang fungsi plugin ini. Maklum blog saya kan gratisan, jadi kayanya nggak terlalu dipusingkan dengan urusan semacam itu. Tapi, nggak tahu ya pak, kalau buka blog bapak itu kok berat loadingnya. Apa mungkin karena terlalu banyak widget ya pak? Kalau untuk pengguna speedy memang tidak terlalu masalah. Tapi yang menggunakan koneksi internet unlimited yang murah, itu sangat bermasalah sekali pak.

    • hmmm … itu dia, mas ifan. saya sudah sering memanfaatkan banyak fitur dan tool utk mempercepat loading blog, ternyata memang bukan hal yang mudah. terima kasih masukannya, mas ifan.

  30. TQ banget … tutorialnya cukup mudah dipahami,,, mungkin bisa jadi alternatif,, krn blog saya sdh terlanjur ditanami plugin 🙂

  31. itu hanya buat WP aja ya pak? saya blogger newbie pak. kode HTML saja saya masih belum paham. Moga saja dengan berjalannya waktu saya bisa semakin paham dengan berbagai macam kode HTML, CSS ataupun PHP.

    • walah, saya juga sedang belajar, kok, mas, hehe …. hmm …. saya memang belum pernah menerapkannya di blogspot atau engine lain, mas.

  32. mantap tutorialnya mas sawali, saya belum berani coba oprek2 script utk tema yg baru dipakai..ntar error atau broken tema (doh) seperti yg pernah saya coba pada tema sebelumnya pakai related post biasa tanpa plugin.
    Ijin save dulu…untuk lebih dipelajari di saat offline.
    Sekarang saya masih pakai related post thumbnail dengan plugin. 😉

  33. ini nanti kalo g dikasih tags
    g bakalan nongol ya related artikelnya ? (thinking)
    cobain dulu ah
    tengs om buat infonya 😀

    • hehe … memang benar, mas. makanya kalau posting perlu juga memberi tag seperti yang sdh ada sebelumnya.

  34. waduh. ak dah pake yang lain pak. tapi bagus pak tampilannya, ada gambarbya jadi lebih hidup 😀

  35. Nice sharing mas, tapi kalo di theme yang saya pake gak ada single.php saya bisa edit di bagian mana ya editor wordpress. terimakasih untuk pencerahannya

    • hmmm …. biasanya utk theme karya brian gardner, single.php-nya ada di Main Index Template (index.php). dicoba aja!

  36. Waw…

    Hebat juga bapak ini emang benar” Kreatif ,walau tanpa menggunakan plugin postingan itu sangat Menarik..

    Apalagi kalau pakai yach…??

Tinggalkan Balasan

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