Selasa, 20 Februari 2024

Cara Membuat Related Post Otomatis Tanpa Plugin di Website WordPress

Info Menarik – Penting sekali jika website menampilkan related post atau artikel terkait dalam postingan. Banyak manfaat bagi website jika kita menampilkan artikel terkait. Salah satunya adalah ketika pengunjung selesai membaca artikel bisa saja kemudian akan klik artikel lain yang tampil di artikel terkait. Dengan begitu kemungkinan trafik website juga bisa meningkat. Jika Kamu belum tahu cara menampilkan related post di website WordPress, silakan simak artikel ini hingga selesai.

Cara Membuat Related Post di WordPress

Apa itu Related Post?

Related post adalah sekumpulan link yang akan menuju ke postingan lain yang memiliki kesamaan topik dengan artikel yang sedang pengunjung baca. Keberadaannya mungkin saat ini sudah cukup lumrah bahkan adanya artikel terkait itu bisa menjadi wajib. Hal ini karena bisa membuat pengunjung tertarik untuk menjelajahi atau membaca postingan lainnya.

Adapun keuntungan memasang artikel terkait di website dari segi SEO adalah:

  1. Bisa meningkatkan page views;
  2. Dapat menurunkan bounce rate website;
  3. Kemungkinan bisa meningkatkan waktu kunjungan rata-rata pengunjung;
  4. Agar terlihat lebih profesional dengan melengkapi navigasi blog.

Posisi Related Post

Secara umum posisi penempatannya adalah pada akhir artikel. Hal ini agar pengunjung setelah selesai membaca positngan merasa penasaran ingin membaca artikel pada halaman posting lainnya. Kemudian ini bisa membantu pengunjung agar langsung bisa menuju artikel terakit yang pengunjung cari.

Cara Membuat Related Post di Website WordPress

Untuk pengguna WordPress bisa menggunakan plugin, karena saat ini banyak plugin WordPress untuk memenuhi kebutuhan tersebut. Namun pada artikel ini saya tidak akan membahas yang menggunakan plugin. Yang akan saya terangkan adalah yang tanpa plugin atau kita kerjakan secara manual.

Kemudian selain dapat menggunakan plugin, juga biasanya fitur artikel berkaitan ini sudah otomatis tersedia pada tema yang kita gunakan. Terlebih jika tema yang kita gunakan adalah tema premium atau berbayar. Sudah pasti kalau tema premium itu akan memiliki fitur yang lengkap termasuk fitur artikel terkait.

1. Kode Related Post

Sebelum praktik, tentu saja kita harus sudah memiliki kode khusus untuk menampilkan artikel berkaitan. Silakan Kamu salin atau copy kode berikut:

<h3>Related Posts</h3>
<ul>
<?php
$tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] );
$args = [
'post__not_in' => array( get_queried_object_id() ),
'posts_per_page' => 5,
'tax_query' => [
[
'taxonomy' => 'post_tag',
'terms' => $tags
]
]
];
$related_query = new wp_query( $args );
if( $related_query->have_posts() ) {
while( $related_query->have_posts() ) {
$related_query->the_post();
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php } wp_reset_postdata(); } ?>
</ul>

Untuk pengaturan menentukan jumlah artikel dalam tampilan artikel berkaitan, silakan Kamu ubah dan sesuaikan dengan kebutuhan. Contoh di atas saya telah menentukan hanya 5 artikel saja pada kode:

posts_per_page' => 5

Kamu ubah dan sesuaikan dengan kebutuhan.

Pasang Kode di WordPress

Jika sudah memiliki kode seperti di atas, silakan Kamu pasang kode tersebut pada single.php WordPress. Tentu saja sebelumnya Kamu harus sudah login di Dashboard WordPress.

Baca Juga: Cara Membuat Daftar Isi di WordPress Tanpa Plugin Lengkap Download Kode

Pada halaman single.php biasanya terdapat kode seperti berikut:

<?php the_content(); ?>

Silakan Kamu pasang kode related post pada halaman single.php sesudah kode tersebut. Lebih jelasnya nanti akan tampil seperti ini:

<?php the_content(); ?>
kode related post
<?php comments_template(); ?>

Tambahkan CSS

Untuk lebih mempercantik lagi tampilan related post baik yang berdasarkan kategori ataupun berdasarkan tags, silakan modifikasi dengan menambahkan kode CSS di file style.css Editor WordPress. Sebagai contoh saya menggunakan kode CSS sebagai berikut:

/*-[ Related Posts ]*/
 .relatedpost {
 background: #ebeef2;
 border-top:3px solid #b11c42;
 padding: 2px 2px 2px 20px;
 font-size: 14px;
 line-height: 1.7em;
 }
 .relatedpost a:hover {
 background: #0074a2;
 color: #ffffff;
 text-decoration: none;
 padding: 2px;
 border: 1px solid #666;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 }

Jika penulisan related post di atas tidak berfungsi, berarti tema yang Kamu gunakan tidak mendukung penggunaan kode ini. Solusinya adalah silakan Kamu ubah/tambahkan kode berikut, yang semula kita simpan di dalam single.php:

<h3>Related Post : </h3>

Menjadi:

<div class="judul-relatedpost">
<h3>Related Post :</h3>
</div>

Kemudian tempatkan kode berikut pada style.css:

.judul-relatedpost {
font-size: 1.7em;
margin: 10px 0;
}

Untuk modifikasi, silakan Kamu sesuaikan lagi dengan selera masing-masing. Semoga bisa membantu.

About Info Menarik

Berbagi Info & Tips Trik Menarik tentang Android, EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

65 comments

  1. keren nih related postnya, sayang bukan untuk blogspot. hehee

    • InfoMenarik

      Related Post standar saja mas budi, tampilannya tidak istimewa …

  2. Di WP masang CSS sama ya kaya di Blogger kirain beda gitu kode CSS :D

    • InfoMenarik

      Ya mas, untuk HTML dan CSS antara Blogspot dan WordPress sama.

  3. Wah saya masih awam kalau di wp, terlebih jika bicara kode PHP. Namun menurut saya, memasang related posts tanpa plugin di wp ini bisa mempercepat loading blog wp kita di bandingkan jika kita memasangnya menggunakan plugin.

    Karena setiap plugin yang ada di blog wp akan menciptakan 1 sumber eksternal, dan sumber eksternal ini yang menjadi salah satu penyebab loading blog bertambah berat.

    Mudah-mudahan pendapat saya tidak salah. :D

    • InfoMenarik

      Mantab, saya kasih nilai 100 saja lah … :)
      Memang betul mas Dory, pengguna WordPress jangan mempunyai ketergantungan sama Plugin. Kecuali kalau kita memang krisis pengetahuan koding, seperti saya. Plugin sebaiknya dibuat minimalis saja, karena seperti pendapat mas Dory jika terlalu banyak menggunakan Plugin, maka pengaruhnya buruk terhadap kecepatan blog.

  4. terima kasih mas kerana sudi berkongsikan ilmu ini..terbaik

    • InfoMenarik

      Sama-sama mas Hanafi, terimakasih sudah berkunjung.

  5. Kalau di Blogspot bisa diterapkan juga ya Mas? atau sama aja kayak wordpress ini

    • InfoMenarik

      Saya kurang tahu masalah Blogspot mas.

  6. lengkap mas, tutorialnya, dulu saya pernah pake WP, karena WP lebih advance akhirnya saya beralih ke blogspot.

    • InfoMenarik

      Iya mas, masing-masing mempunyai kelemahan dan kelebihan. Itu tergantung kitanya mau pilih mana.

  7. Dengan begitu kita bisa lebih menghemat ruang ya Mas, karena makin sedikit plugins yang kita gunakan, sangat di rekomendasikan ini mas buat para pengguna wp

    • InfoMenarik

      Sedang berusaha untuk memangkas Plugin-Plugin yang ga perlu mas Arie.

  8. point dalam memasang related /artikel terkait didalam blog kita juga tentunya lbih memudahkan pengunjung untuk membaca artikel kita yg lain hehee

  9. Cara ini perlu dikerjain, karena bisa membuat betah para pengunjung berlama-lama di blog kita. Dan akhirnya meningkatkan serp kita.

    • InfoMenarik

      Sangat tepat sekali prediksinya mas.

  10. Jd pingin punya wp :)

    • InfoMenarik

      Kalau sudah punya gimana?

  11. Kenapa iya kalau urusan dengan HTML saya belum jago banget malah pusing liat kode-kodenya :D

    • InfoMenarik

      Sama saya juga pusing mba. Kalau pusing saya minum kopi aja.

  12. Mang Lembu

    cara buat related post tanpaplugin bisa dicobain di blog wp saya nih.
    makasih ilmunya ya, langsung tak praktekin nih

    • InfoMenarik

      Ok kang lembu, semoga berhasil dan bermanfa’at.

  13. Ari

    Wah, keinginan saya pindah ke wordpress kambuh lagi nih mas.. tapi ntarlah, kalo jadi usaha keroyokan sama teman ntar, saya bakal bikin blog baru pake wordpress. Cara dalam artikel ini bakal berguna juga nantinya, terimakasih mas :D

    • InfoMenarik

      Blogspot juga bagus mas. Tapi boleh juga untuk studi perbandingan antara Blogspot dan WordPress.

  14. yang wp gratisan nyimak sajalah tidak bisa di praktekan.. gan..

    • InfoMenarik

      WordPress.com sekarang sudah otomatis muncul related postnya mas.

  15. mana lebih mudah buat mas..WP blog atau blogspot?

    • InfoMenarik

      Hmmm mana ya? Mungkin WordPress mas, karena saya belum terlalu jauh belajar Blogspot.

  16. Gan kalau buat yang tentang penulis nya gimana gan? tanpa plugin juga tentunya..hehe

    • InfoMenarik

      Itu author box mas, nanti saya buat caranya aja deh.

  17. Halo gan pa kabar,

    Punya masalah nih, maklum newbie ga tau hehe

    di theme bawaannya sudah tersedia related post, nah saya sudah non aktifkan yang bawaan jetpack di reading settingnya, tapi jadi double nih, di kiri bawaan theme di bawah sehabis artikel muncul dan parahnya related nya tidak sesuai dengan topik,

    kenapa ya gan?
    thanks

    • InfoMenarik

      Tapi saya lihat barusan sudah tidak ada mas double related postnya?

  18. maksudnya gimana caranya supaya related post hanya satu yang bawaan theme nya,

  19. Iya ketemu penyakitnya di jetpack… settingannya di non aktifkan, hilang teh duh di menu reading tools nya..

    maap ngerepotin gan

    • InfoMenarik

      Saya selama ini belum pernah coba plugin Jetpack gan. Untuk itu saya ga bisa komentar apapun.

  20. Akhdan

    Nah ini. Luar biasa mas. dari sekian banyak ternyata cara dari blog ini paling jitu. makasih mas. salam

    • InfoMenarik

      Obat jitu itu kalau didaerah saya obat sakit pinggang gan Hihihihi

  21. yang bagian categorynya untuk merubah jumlah artikel supaya lebih dari 5 gimana mas, disitu gak ada dikasih taunya, saya pun bingung lihat kode sebanyak itu

    • InfoMenarik

      Rubah angka 5 yang ini mas sesuai dengan kebutuhan :

      {if ( $post->ID == $this_post->ID || $count == 5) {unset($posts[$count]);}
  22. keren kang, btw ada refrensi theme wordpress simple yang free ngga? Terutama layout clean & sederhana biar ditermia adsens ;)

    • InfoMenarik

      Referensi tema saya biasa menggunakan tema produksi MyThemesShop mas. Disana bagus-bagus temanya bahkan seluruhnya sudah responsive. Gratis ada dan juga premium …

  23. makasih banyak om dah ada related pos di artikel hehehe.

    emang kalo pake plugin agak lemot ya om loadingnya

  24. nanda

    assalamualaikum
    trimakasih sebelumnya, saya mau tanya mas di wordpress saya tidak ada file single phpnya ya mas apa ada alternalif lain selain di singgle.php

    • InfoMenarik

      Itu letak kesalahannya terdapat pada tema yang mas gunakan. Coba menggunakan tema lain dulu mas, apakah single.php masih tetap ga ada?

  25. Firdaus

    ada masalah pada bagian menu di tab tutorial Anda, harusnya masukkan tanda # saja. :D bisa gak bikin nyaman pengunjung. :D

    • InfoMenarik

      Terimakasih sudah diingatkan. Dulu sudah saya setting dengan tanda #, mungkin berubah setelah dirubah template blog ini.

  26. Apa ada cara menggabungkan related post kategory dan tag agar bisa digunakan bersama mas, karena kadang ada artikel yang beda kategory tapi berhubungan ?

    • InfoMenarik

      Mungkin solusinya diartikel tersebut dikaitkan dengan kategori lebih dari satu aja mas. Saya belum menemukan penggabungan related post kategori dan tag.

  27. Terimakasih mas, sudah saya coba di blog saya dan berhasil :)

    Klo caranya biar ada gambar dan deskripsinya gimana caranya mas?

  28. Terima kasih gan. Sangat bermanfaat. Kalau di single php udah mau muncul. Kalau misal menaruh related post di di halaman image attachment gimana ya gan? tepatnya di image.php

  29. Related post ada yg bentuk vertikal tapi ada yg berbentuk misal 2 baris 2 kolom (4 artikel). nah itu gmn caranya ?

  30. Arip

    Mau nanya nih gan, kalo buat related post kaya punya mas yang ada tulisan powered by google itu bagaimana ya? terimakasih gan

    • Itu jenis iklan baru Google gan atau tepatnya itu adalah “Matched Content”. Jenis iklan ini masih dalam tahap BETA dan tidak semua blog yang memperolehnya. Untuk caranya saya sudah menulis artikel disini.

  31. gan saya pernah dapat pemberitahuan untuk memasang iklan yang di mobile bisa muncul di bagian bawah , tetapi setelah saya refresh dan pemberitahuan itu hilang ,bagaimana cara bisa muncul lagi yah

  32. Terima kasih info menariknya mas, dan sudah saya terapkan pada blog saya. Namun, untuk memperbesar tulisan / judul Ralated Post nya bagaimana ya Mas ? Soalnya kalau pada template blog yang saya gunakan terlalu kecil. Atau barang kali mas bisa cek di blog saya langsung. Sekali lagi terima kasih dan mohon bantuan nya Mas.

    • Sudah saya jawab mas pertanyaannya ditulis pada akhir artikel diatas. Semoga masalahnya bisa terselesaikan dan salam sukses!

  33. kalo cara pindah posisi nya gimana ya gan, soalnya di template saya muncul di sidebar paling atas, pengen nya di letakan di tengah atau bawah gitu gan

  34. kalau pake child theme gimana yah gan? soalnya pas masuk menu editor ga ada option single.php nya? mohon saran dan petunjuk nya yah gan

  35. Rifan

    Permisi..saya pengguna wp selfhost. Memakai template nyeotheme.
    Klo mau pasang iklan matched conten seperti yg anda pasang pada blog ini. Letaknya sperti di blog ini dibawah share itu gmna ya?
    Mohon infonya…terimakasih

    • Apakah akun AdSensenya sudah mendapatkan notifikasi pemasangan Matched Content belum? Karena jenis iklan ini hanya berlaku bagi member AdSense tertentu saja mas.

  36. Maaf mas mau tanya, di tempat saya koq munculnya angka 1..5 ya?? sepertinya CSSnya tidak berfungsi karena tidak ada border dan BGnya??

  37. menarik juga :D
    apa ini bisa diterapkan di theme bawaan wordpress? seperti twenty twelve ? soalnya saya pakai theme itu kak

Tinggalkan Balasan

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

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.