Membuat Artikel Terkait di GeneratePress (Related Post)

Salah satu fitur standar yang hilang (lagi) dari tema GeneratePress adalah tidak adanya “artikel terkait” atau related post baik di widget maupun di akhir artikel. Bagaimana cara membuat artikel terkait di GeneratePress ini?

Pihak pengembang tema GeneratePress memang sengaja mengurangi fitur-fitur standar yang biasanya ada di tema WordPress. Efisiensi tema agar lebih ringan dan cepat adalah salah satu alasannya.

Membuat Artikel Terkait di GeneratePress

Beberapa fitur-fitur yang hilang dan bagaimana cara membuatnya sudah kami buatkan beberapa panduannya. Anda pengguna GeneratePress bisa membaca beberapa artikel berikut ini.

Jika Anda masih belum menggunakan tema GeneratePress Premium, Anda bisa membelinya melalui kami dengan lisensi resmi. Silahkan klik gambar berikut untuk keterangan lebih lengkap.

Beli GeneratePress Premium

Bagaimana cara membuat artikel terkait di tema GeneratePress ini?

  • Kita akan menggunakan bantuan plugin.
  • Plugin yang akan digunakan ini dibuat dan direkomendasikan khusus untuk tema GeneratePress.
  • Plugin ini ringan dan tidak memberikan beban ke server hosting.
  • Hanya bisa diterapkan di tema GeneratePress Premium.
Membuat Artikel Terkait di GeneratePress
Artikel Terkait di GeneratePress

Cara Membuat Artikel Terkait di GeneratePress

Kita akan menggunakan plugin bernama WP Show Posts Plugin. Pembuat plugin ini adalah orang yang sama dengan yang membuat tema GeneratePress yaitu Tom Usborne.

Silahkan mengunduh dan memasang plugin tersebut dan berlanjut ke langkah berikutnya.

TIPS: Baca dulu dan pahami sebelum mengikuti tutorial ini.

Konfigurasi WP Show Posts Plugin

  • Buka WP Show Posts Plugin -> Add new -> Beri namaTerkait” <- nama sesuaikan dengan ini, jangan diberi nama lain.
Membuat Artikel Terkait di GeneratePress
Pengaturan di WP Show Posts Plugin

Pada kolom Shortcode: wp_show_posts id=”19009“, 19009 adalah ID milik kami. Mungkin milik Anda nantinya berbeda. Nanti kita akan membutuhkan ID ini.

  • Pada menu Columns > Columns = 3 > Columns gutter = 2em.
Membuat Artikel Terkait di GeneratePress
Menu Columns
  • Pada menu Images > Cek Images > Image width (px) = 211 > Image height (px) = 150 > Image alignment = Center > Image location = Above title.
Membuat Artikel Terkait di GeneratePress
Menu Images
  • Pada menu Content > Content type = None > Title element = p. Lainnya biarkan kosong (sesuaikan dengan gambar berikut).
Membuat Artikel Terkait di GeneratePress
Menu Content

Pada menu meta = tidak ada yang dicentang.

Membuat Artikel Terkait di GeneratePress
Menu Meta
  • Pada menu More settings >Exclude current = cek > Ignore sticky posts = cek. Lainnya biarkan default.
Membuat Artikel Terkait di GeneratePress
Menu More settings

Jika sudah Terbitkan.

Pengaturan Elements

Langkah selanjutnya adalah membuat Element. Silahkan menuju Tampilan > Elements > Add New Element > Hook > Beri nama.

  • Masukkan kode berikut ini untuk menampilkan artikel terkait berdasarkan kategori.
<div class="wpsp-related-posts1  grid-container">
	<h2>Artikel Terkait</h2>
<?php
if ( is_single() ) {
    $cats =  get_the_category();
    $cat = $cats[0];
} else {
    $cat = get_category( get_query_var( 'cat' ) );
}

$cat_slug = $cat->slug;
$list = get_page_by_title( 'Terkait', 'OBJECT', 'wp_show_posts' );
wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
?>
</div>

Gunakan kode ini jika Anda memilih menampilkan artikel terkait berdasarkan tags.

<div class="wpsp-related-posts1  grid-container">
	<h2>Artikel Terkait</h2>
<?php    
if ( is_single() ) {
        $tags =  get_the_tags();
        $tags_list = [];
        foreach ($tags as $tag)
            $tags_list[] = $tag->slug;
        $tag_string = implode( ', ', $tags_list);
    } else {
        $tag_string = get_tag( get_query_var( 'tag' ) );
    }

    $list = get_page_by_title( 'Terkait', 'OBJECT', 'wp_show_posts' );
    wpsp_display( $list->ID, 'tax_term="' . $tag_string . '"' );
    ?>
</div>
  • Pada menu Settings > Hook = generate_after_content > Execute PHP = cek.
Membuat Artikel Terkait di GeneratePress
Menu settings
  • Pada menu Display Rules > Location > All Singular > Exclude = Laman / All Laman.
Membuat Artikel Terkait di GeneratePress
Menu Display Rules

Terbitkan.

Mempercantik Tampilan

Langkah berikutnya adalah memberikan sentuhan penampilan agar artikel terkait ini makin cantik.

Masuk ke menu Tampilan > Sesuaikan > CSS Tambahan > masukkan kode CSS berikut ini.

.wpsp-related-posts1 {
    background-color: #fff;
    padding: 24px 20px 10px 20px;
    margin-top: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

Sampai langkah ini jika Anda mengikuti dan berhasil menerapkan semua langkah diatas dengan baik, maka pembuatan artikel terkait sudah selesai.

Baca juga: Menambahkan Google Analytics di GeneratePress

Buka Artikel Terkait di Tab Baru

Pilihan ini adalah opsional. Langkah ini akan membuka link artikel terkait pada halaman baru. Jika Anda ingin link terkait terbuka pada halaman yang sama, tidak perlu melakukan langkah ini.

  • Bukan Tampilan > Elements > Add New Element = Hook > Beri nama.
  • Masukkan kode berikut ini.
<script>
	jQuery(function($){
		$( document ).on( 'click', '#wpsp-19009 a', function(e) { 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    window.open(url, '_blank');
});
});
</script>

Perhatikan: #wpsp-19009 pada kode diatas “19009” adalah berasal kolom Shortcode: wp_show_posts id=”19009“. Jadi silahkan sesuaikan dengan kode milik Anda.

Baca juga: Pasang Adsense di GeneratePress Tanpa Plugin

Kesimpulan

Tutorial membuat artikel terkait di GeneratePress ini kami usahakan dibuat semudah mungkin supaya tidak menyulitkan Anda. Ikuti langkahnya pelan-pelan kami yakin Anda akan berhasil membuatnya dengan benar. Jika Anda kesulitan silahkan berkomentar.

Lulusan Teknik Informatika yang berkecimpung di dunia internet sejak 2002 sebagai part-time blogger dan internet marketer. Tertarik dengan teknologi pada umumnya, pengembangan website dan gadget pada khususnya.

19 thoughts on “Membuat Artikel Terkait di GeneratePress (Related Post)”

  1. Bang, gimana caranya buat artikel terkait atau random ditengah postingan kaya punya abang?
    “Baca juga : bla bla bla” apakah harus pake plugin tambahan ?

    Reply
  2. Min, saya sudah ikutin tutorial, tetapi di bawah judul ada tanggal postingannya.

    Bagaimana cara menghilangkannya?

    Terima kasih sebelumnya

    Reply
  3. Min, saya sudah ikutin tutorial, tetapi di bawah judul ada tanggal postingannya.

    Bagaimana cara menghilangkannya?

    Reply
  4. kalo artikel terkait ngambil dari url situs lain kira2 gimana ya mas? mungkin bisa dibuatkan artikelnya, terimakasih..

    Reply
  5. Berhasil Min, hanya saja kok beda tampilan dengan yang disini ya..
    Kalo disini kan tulisannya di tengah, jadi terlihat rapi.
    Kao punya saya malah kaya artikel yang mulainya dari kiri dulu.

    Reply
  6. Itu di step awal perintahnya buat nama “terkait” tapi di SS “artikel terkait” yang bener gimana om?

    Reply
  7. Min kok ga bisa ya, malah artikel nya aja yg kebaca di artikel terkait, gada thumbnail nya + hyperlink nya.. udh ikutin cara diatas ttp gada hasil

    Reply
    • Cara ini dijamin bisa (sudah saya coba pada puluhan blog dengan generatepress), pasti ada yang kelewat. Cek kode element apakah sudah tersalin dengan benar dan tepat.

      Reply
      • Saya ga masukan kode karena saya tidak menggunakan cara yang opsional, saya perhatikan tidak ada perintah masukan kode kecuali pada cara opsional yg terakhir, mohon bantuannya min..

        Reply
        • Halo,

          Perhatikan lagi gan pelan pelan sepertinya kurang teliti. Ada kode yang harus dimasukkan dalam elements. Saya tidak membicarakan masalah “opsional”.

          Biasanya kodenya kurang sesuatu ketika copy paste.

          Reply
          • sudah saya masukan seperti ini

            Artikel Terkait
            slug;
            $list = get_page_by_title( ‘Terkait’, ‘OBJECT’, ‘wp_show_posts’ );
            wpsp_display( $list->2677, ‘tax_term=”‘ . $cat_slug . ‘”‘ );
            ?>

            tapi masih saja tidak bisa min 🙁

  8. kak udah berhasil heheh. ternyata ada yang kurng punyaku. Request dong kak, gimana settingan buat layout homepage yang kayak kaka, keren banget soale

    Reply
  9. aku gagal, aku udah ngikutin arahannya dan yang keluar malah bukan seperti yang diharapkan. Malah keluar Excerpt word dan bukan thumbnail gambar, tak ada interlinking interlinking

    Reply
    • Saya yakin ada yang kurang. Kalau keluar excerpt masalahnya hanya di setting bagian content -> content type. Sejauh ini cara ini sudah dicoba oleh semua klien yang membeli GP Premium di saya dan berhasil menerapkan cara ini dengan baik. Diulang saja lagi pelan².

      Reply

Leave a Comment


Klik Webnesia