Bagaimana cara menambahkan Posting Terkait WordPress Tanpa Plugin

Salah satu keuntungan besar menggunakan WordPress adalah plugin. Plugin WordPress mencakup hampir semua yang dapat Anda bayangkan, dari mengembangkan blog Anda menjadi CMS, hingga menambahkan fitur yang bagus dan mengoptimalkan blog Anda untuk mesin pencari - kemungkinan tidak terbatas (dan jangan lupa semua tema yang berbeda di luar sana).

Tetapi dengan menggunakan terlalu banyak plugin, Anda berisiko menyumbat blog WordPress Anda, dan yang paling buruk, Anda mungkin 'merusaknya'. Ada banyak contoh plugin yang tidak kompatibel satu sama lain, serta plugin yang memperlambat blog Anda.

Beberapa kategori plugin WordPress paling populer didasarkan pada penambahan “posting terkait” ke blog. Karena WordPress tidak memiliki standar apa pun untuk ini, semua orang diharuskan menggunakan semacam plugin untuk menampilkan posting terkait di situs mereka.

Artikel ini akan mengajarkan Anda cara menambahkan posting terkait dengan thumbnail ke blog Anda tanpa plugin apa pun, menjaga semuanya tetap sederhana, ringan dan mudah diakses. Mari kita mulai!

Tapi pertama-tama, Kenapa hindari plugin?

Ada sejumlah alasan mengapa Anda harus selalu mencoba dan menggunakan kode dan layanan bawaan WordPress, alih-alih sebagai plugin. Manfaat utama adalah bahwa Anda tidak harus bergantung pada pihak ketiga (pengembang plugin) agar blog Anda berfungsi. Ada banyak kasus plugin populer ditinggalkan oleh pengembangnya, membuat banyak pemilik situs terjebak dengan perangkat lunak yang ketinggalan zaman dan berpotensi rentan..

Alasan lain adalah bahwa Anda tidak menjalankan risiko menggunakan plugin kembung yang dapat memperlambat situs Anda, atau bahkan lebih buruk lagi, mengandung sepotong kode berbahaya, meskipun ini jarang terjadi asalkan Anda mendapatkan plugin dari direktori WordPress resmi.

Persiapan: posting terkait dengan thumbnail

Fitur "posting terkait" ini, seperti kebanyakan yang lain, dirancang untuk ditempatkan di halaman artikel utama Anda (single.php), tetapi Anda dapat menggunakannya hampir di mana saja, selama Anda menyimpannya di dalam loop WordPress. Untuk mendapatkan pos terkait, kami akan menggunakan tag pos yang diberikan kepada masing-masing artikel.

Gambar kecil

WordPress sekarang memiliki sistem thumbnail bawaan, yang akan kita butuhkan di sini. Untuk mengaktifkannya, tambahkan kode ini ke file functions.php Anda di folder tema Anda (dalam kebanyakan kasus, sudah ada di sana).

 add_theme_support ('post-thumbnails'); 

Anda juga dapat mengatur lebar dan tinggi thumbnail dengan menambahkan baris lain ke kode:

 add_theme_support ('post-thumbnails'); set_post_thumbnail_size (100, 50, true); 

Penting: Saat menambahkan gambar ke posting, untuk membuat thumbnail, Anda harus, di panel unggah gambar, pilih “Gunakan sebagai gambar unggulan”. Ini akan membuat thumbnail untuk posting.

Kode

 
 
Posting terkait
 ID); if ($ tag) $ tag_ids = array (); foreach ($ tag as $ individual_tag) $ tag_ids [] = $ individual_tag-> term_id; $ args = array ('tag__in' => $ tag_ids, 'post__not_in' => array ($ post-> ID), 'posts_per_page' => 4, // Jumlah posting terkait yang ditampilkan. 'caller_get_posts' => 1) ; $ my_query = new wp_query ($ args); while ($ my_query-> have_posts ()) $ my_query-> the_post (); ?> 
 
   
  
 

Sepotong kode the_post_thumbnail (array (150.100) mengatur ukuran thumbnail yang akan ditampilkan, dalam hal ini, lebar 150px, tinggi 100px.

CSS

Kami memiliki dua kelas divs di sini, “.posting terkait”, yang merupakan wadah div keseluruhan, dan “.terkaitthumb” yang merupakan thumbnail individual dan tautan dalam pos .related. Kami akan menganggap bahwa lebar posting adalah standar 640px. CSS:

 .relatedposts width: 640px; margin: 0 0 20px 0; mengapung: kiri; font-size: 12px; .relatedposts h3 ukuran font: 20px; margin: 0 0 5px 0;  .relatedthumb margin: 0 1px 0 1px; mengapung: kiri;  .relatedthumb img margin: 0 0 3px 0; padding: 0; .relatedthumb a color: # 333; teks-dekorasi: tidak ada; display: blok; padding: 4px; width: 150px; .relatedthumb a: hover background-color: #ddd; warna: # 000; 

CSS di atas akan membuat thumbnail posting dengan lebar 150px, yang berarti kita akan membutuhkan 4 thumbnail untuk mengisi lebar 640px posting (termasuk margin di antara mereka). Anda dapat menyesuaikan ini sesuai keinginan; jika Anda ingin 5 thumbnail, Anda memerlukan lebar .relatedthumb sekitar 125px.

Penting: Pastikan untuk mengatur lebar thumbnail yang dihasilkan dalam pengaturan media WordPress Anda agar sesuai dengan yang Anda atur di CSS. Selain itu, harus sesuai dengan ukuran yang ditentukan dalam kode php: the_post_thumbnail (array (150.100).

Contoh

Posting terkait akan muncul seperti ini, seperti yang digunakan oleh blog game DigitalBattle (yang menggunakan teknik tepat yang dijelaskan dalam artikel ini):

Teknik serupa

Ini bukan satu-satunya cara untuk melakukan posting terkait tanpa plugin - ada banyak teknik dan panduan di luar sana yang menunjukkan kepada Anda cara menambahkan posting terkait tanpa plugin, berikut adalah beberapa di antaranya:

]
• Posting terkait dengan thumbnail di WordPress tanpa plugin (TechWalz)
• Cara: posting terkait dengan thumbnail di WordPress tanpa plugin (WPBeginner)
• Bagaimana cara menambahkan Posting Terkait dengan thumbnail tanpa plugin (WPCode)

Kesimpulan

Kita dapat melakukan banyak hal dengan fitur bawaan yang ditawarkan WordPress, dan dalam banyak kasus, kita tidak perlu menggunakan plugin pihak ketiga untuk menyelesaikan pekerjaan. Lain kali Anda membutuhkan plugin untuk blog WordPress Anda, lihat apakah Anda dapat mencapai fitur yang sama tanpa plugin. Gali sekitar, cari Web untuk alternatif. Anda akan terkejut betapa mungkin dengan WordPress di luar kotak.