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.
- Breadcrumbs: Membuat Breadcrumb di GeneratePress Tanpa Plugin.
- Sosial Media Share: Membuat Tombol Sosial Media Share di GeneratePress.
Jika Anda masih belum menggunakan tema GeneratePress Premium, Anda bisa membelinya melalui kami dengan lisensi resmi. Silahkan klik gambar berikut untuk keterangan lebih lengkap.
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.
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 nama “Terkait” <- nama sesuaikan dengan ini, jangan diberi nama lain.
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.
- Pada menu Images > Cek Images > Image width (px) = 211 > Image height (px) = 150 > Image alignment = Center > Image location = Above title.
- Pada menu Content > Content type = None > Title element = p. Lainnya biarkan kosong (sesuaikan dengan gambar berikut).
Pada menu meta = tidak ada yang dicentang.
- Pada menu More settings >Exclude current = cek > Ignore sticky posts = cek. Lainnya biarkan default.
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.
- Pada menu Display Rules > Location > All Singular > Exclude = Laman / All Laman.
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.
Bang, gimana caranya buat artikel terkait atau random ditengah postingan kaya punya abang?
“Baca juga : bla bla bla” apakah harus pake plugin tambahan ?
Itu manual.
Min, saya sudah ikutin tutorial, tetapi di bawah judul ada tanggal postingannya.
Bagaimana cara menghilangkannya?
Terima kasih sebelumnya
Coba dibaca lagi langkahnya, kalau sudah diikuti dengan benar pasti bisa sama persis.
Check di pengaturan wp show posts, mungkin include date aktif.
Min, saya sudah ikutin tutorial, tetapi di bawah judul ada tanggal postingannya.
Bagaimana cara menghilangkannya?
kalo artikel terkait ngambil dari url situs lain kira2 gimana ya mas? mungkin bisa dibuatkan artikelnya, terimakasih..
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.
Tambahin ini di CSS:
text-align: center
Itu di step awal perintahnya buat nama “terkait” tapi di SS “artikel terkait” yang bener gimana om?
Di ss sebelum kode saya betulkan menjadi “terkait”. Silahkan sesuaikan dengan panduannya yaitu “terkait”.
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
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.
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..
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.
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 🙁
kak udah berhasil heheh. ternyata ada yang kurng punyaku. Request dong kak, gimana settingan buat layout homepage yang kayak kaka, keren banget soale
Sudah saya duga pasti ada yang kurang hehe
Untuk tampilan silahkan buka disini:
Modifikasi GeneratePress dengan CSS Khusus (CSS Tambahan)
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
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².