Pos Terkait di GeneratePress menjadi salah satu fitur sederhana yang mampu memberikan dampak besar terhadap performa sebuah website. Dengan menampilkan artikel-artikel yang masih relevan di akhir postingan, pengunjung terdorong untuk membaca lebih banyak konten, sehingga meningkatkan jumlah pageviews. Di sisi lain, fitur ini juga membantu memperkuat internal linking dan memudahkan mesin pencari memahami hubungan antarartikel di dalam website.
Banyak tutorial dari blogger, di tema generatepress dengan menggunakan plugin tambahan. Padahal, jika Anda menggunakan GeneratePress Premium, fitur tersebut bisa dibuat dengan jauh lebih ringan menggunakan Code Snippets dan Hook Elements. Hasilnya lebih cepat, mudah disesuaikan, dan tidak membebani performa website.
Pada tutorial ini kita akan membuat pos terkait di generatepress dengan kriteria berikut:
- Menampilkan 6 artikel terkait.
- Berdasarkan kategori yang sama.
- Tampil dalam grid 2 kolom.
- Tanpa thumbnail agar lebih ringan.
- Menggunakan shortcode sehingga mudah dipasang melalui Hook Element.
Mengapa Tidak Menggunakan Plugin?
Semakin banyak plugin yang aktif, semakin besar pula beban yang harus diproses WordPress. Untuk fitur sederhana seperti pos terkait di generatepress, sebenarnya kita hanya membutuhkan satu query WordPress yang mengambil artikel dari kategori yang sama.
Keuntungan menggunakan cara ini antara lain:
- Website lebih ringan.
- Tidak bergantung pada plugin pihak ketiga.
- Tampilan dapat disesuaikan sesuka hati.
- Lebih mudah dipelihara ketika tema diperbarui.
- Sangat cocok untuk website berita maupun blog dengan banyak artikel.
Langkah 1: Membuat Shortcode pos terkait di generatepress dengan Code Snippets
Jika belum ada plugin code snippets, download dulu. Serius!!! plugin code snippets seperti hal wajib ada untuk pengguna generatepress.
Jika sudah diinstal.
Lalu buat snippet baru dengan Nama : Related Posts. Copy paste kode berikut:
/**
* Shortcode: [ps_related_posts]
* Menampilkan 4 artikel terkait berdasarkan kategori yang sama
*/
function ps_related_posts_shortcode() {
if ( ! is_single() ) {
return '';
}
global $post;
$categories = wp_get_post_categories( $post->ID );
if ( empty( $categories ) ) {
return '';
}
$args = array(
'category__in' => $categories,
'post__not_in' => array( $post->ID ),
'posts_per_page' => 6,
'ignore_sticky_posts' => true,
'orderby' => 'date',
'order' => 'DESC',
);
$related = new WP_Query( $args );
if ( ! $related->have_posts() ) {
return '';
}
ob_start();
?>
<div class="ps-related-posts">
<h3 class="ps-related-title">Pos Terkait</h3>
<div class="ps-related-grid">
<?php while ( $related->have_posts() ) : $related->the_post(); ?>
<article class="ps-related-item">
<h4 class="ps-related-heading">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h4>
<div class="ps-related-date">
<?php echo get_the_date(); ?>
</div>
</article>
<?php endwhile; ?>
</div>
</div>
<?php
wp_reset_postdata();
return ob_get_clean();
}
add_shortcode( 'ps_related_posts', 'ps_related_posts_shortcode' );Dengan pendekatan ini, seluruh logika pengambilan artikel berada di satu tempat sehingga lebih mudah dikelola.
Langkah 2: Menambahkan Hook Element
Masuk ke:
Appearance → Elements → Add New → Hook
Pilih hook:
before_comments_container (ini yang saya terapkan).
Hook ini akan menampilkan pos terkait tepat setelah isi artikel selesai dibaca. Atau sebelum komentar.
atau
after_main_content
Hook ini akan menampilkan pos terkait sesudah kolom komentar.
Langkah 3: Tambahkan Shortcode
Di dalam Hook Element, tambahkan blok Shortcode, kemudian isi dengan:
[ps_related_posts]Seperti gambar berikut:
Atur Display Rules agar hanya tampil pada semua postingan (All Posts), lalu klik Publish.
Seperti gambar berikut:
Langkah 4: Percantik Tampilan dengan CSS
Agar kode PHP tetap bersih, semua pengaturan tampilan sebaiknya diletakkan di Additional CSS.
Masuk ke
Appearance → Customize → Additional CSS
Copy paste kode berikut:
.ps-related-posts{
margin:0px 0px;
padding:20px;
background:#062962;
border-radius:8px;
}
.ps-related-title{
margin:0 0 20px;
color:#fff;
font-size:22px;
font-weight:700;
}
.ps-related-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}
.ps-related-item{
padding-bottom:12px;
border-bottom:1px solid rgba(255,255,255,.15);
}
.ps-related-item:last-child{
border-bottom:none;
}
.ps-related-heading{
margin:0 0 6px;
font-size:16px;
line-height:1.5;
font-weight:600;
}
.ps-related-heading a{
color:#fff;
text-decoration:none;
transition:.2s;
}
.ps-related-heading a:hover{
color:#FFD54F;
}
.ps-related-date{
font-size:12px;
color:#cbd5e1;
}
@media(max-width:768px){
.ps-related-grid{
grid-template-columns:1fr;
}
}Pada tutorial ini desain pos terkait di generatepress dibuat sederhana namun elegan:
- Background biru
#062962. - Judul berwarna putih.
- Ukuran judul artikel 16px.
- Tanggal 12px.
- Grid dua kolom.
- Responsif menjadi satu kolom di perangkat mobile.
Memisahkan logika PHP dan CSS seperti ini membuat proses pengembangan jauh lebih mudah nantinya. Kamu tidak perlu otak-atik kode di code snippets lagi.
Mengapa Pendekatan Ini Lebih Baik?
Banyak pengguna WordPress mencampurkan HTML, CSS, dan PHP dalam satu file. Cara tersebut memang cepat, tetapi akan menyulitkan saat ingin mengubah desain.
Pendekatan yang lebih profesional adalah:
- PHP bertugas mengambil data.
- HTML menyusun struktur tampilan.
- CSS mengatur desain.
Pemisahan ini membuat kode lebih rapi, mudah dibaca, dan lebih mudah dikembangkan ketika kebutuhan website semakin kompleks.
Penutup
GeneratePress Premium dikenal sebagai salah satu tema WordPress yang ringan dan fleksibel. Dengan memanfaatkan Code Snippets dan Hook Elements, Anda dapat membangun fitur yang biasanya membutuhkan plugin tambahan tanpa mengorbankan performa website.
Tutorial membuat pos terkait di generatepress ini hanyalah langkah awal. Setelah memahami konsepnya, Anda dapat mengembangkan fiturnya menjadi lebih canggih, misalnya dengan prioritas berdasarkan tag, menampilkan estimasi waktu baca, kategori, jumlah tayangan, hingga menggunakan cache agar tetap cepat meskipun website telah memiliki ribuan artikel.
Ingat, website yang baik bukanlah website dengan plugin terbanyak, melainkan website yang dibangun dengan kode yang efisien, mudah dirawat, dan memberikan pengalaman terbaik bagi pengunjung.
Itulah salah satu filosofi yang membuat GeneratePress begitu disukai oleh banyak pengembang WordPress di seluruh dunia.
Hasilnya dari pos terkait di generatepress seperti akhir dari artikel ini. Tepat di bawah widget tags.
Kerennya. Kode ini bisa kamu terapkan di dalam artikel.
Kamu hanya perlu copy kode berikut dan paste ke area artikel yang ingin kamu terapkan.
[ps_related_posts]Silakan coba. Klik demonya.
Demo Pos Terkait dalam Artikel