Membuat Artikel Terkait di GeneratePress (Related Post)

Bagikan

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.

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 ingin 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.

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: Membuat Author Box 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.

Tinggalkan komentar