GeneratePress (GP) adalah theme berbasis block editor yang cukup powerful. Ringan, mudah dimodifikasi, dan didukung oleh dokumentasi yang baik. GP juga cocok untuk para WordPress theme developer yang ingin membuat website untuk klien tanpa harus coding from scratch.
Namun, dengan sekian banyak kelebihan, theme yang satu ini juga punya kekurangan. Salah satunya, tidak dilengkapi dengan fitur related posts. Padahal, ini fitur yang cukup berguna untuk para bloger.
Ada dua cara untuk membuat fitur ini: dengan plugin, tanpa plugin. Saya memilih opsi kedua karena dua alasan:
- Cara membuatnya cukup sederhana. Rasanya overkill kalau harus menambah plugin hanya untuk membuat fitur yang tidak terlalu rumit dan bisa dikerjakan sendiri.
- Menghemat disk space . Menambah plugin artinya menambah beban hidup server. So, agar tidak terlalu banyak plugin, saya memilih ngoding sendiri.
Cara Membuat Related Post di GeneratePress
Saya berasumsi Anda sudah menggunakan child theme. Bila belum, silakan buat terlebih dahulu. Oh ya, Anda bisa membuat related posts berdasarkan kategori atau berdasarkan tag.
Prerequisite: PHP, CSS, HTML.
Step 1: Tambahkan hook di file functions.php
Tambahkan script ini di file functions.php child theme. Ganti text domain menjadi text domain theme Anda. Untuk penamaan function dan class juga bisa diganti dan disesuaikan.
Berdasarkan kategori:
// Related Post Berdasarkan Kategori
add_action( 'generate_before_comments_container','langit_related_post' );
function langit_related_post() {
if ( is_single() ) : ?>
<div class="related-post__container">
<h2 class="related-post__header">Related Posts</h2>
<div class="related-post__content">
<?php
global $post;
$orig_post = $post;
$categories = get_the_category($post->ID);
if ($categories) {
$categories_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page' => 3, // Number of related posts to display.
'ignore_sticky_posts' => 1
);
$related_query = new wp_query( $args );
while( $related_query->have_posts() ) {
$related_query->the_post();
?>
<div class="related-post__item">
<div class="related-post__item--thumb">
<a rel="nofollow" href="<? the_permalink()?>"><?php the_post_thumbnail(array(300,150)); ?>
</a>
</div>
<h3 class="related-post__item--title">
<a href="<? the_permalink()?>"><?php the_title(); ?></a>
</h3>
</div>
<? }
}
$post = $orig_post;
wp_reset_query();
?>
</div>
</div>
<?php
endif;
}
Berdasarkan tags:
// Related Post Berdasarkan Tags
add_action( 'generate_before_comments_container','langit_related_post' );
function langit_related_post() {
if ( is_single() ) : ?>
<div class="related-post__container">
<h2 class="related-post__header">Related Posts</h2>
<div class="related-post__content">
<?php
global $post;
$orig_post = $post;
$tags = get_the_tag($post->ID);
if ($tags) {
$tags_ids = array();
foreach($tags as $individual_tag) $category_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page' => 3, // Number of related posts to display.
'ignore_sticky_posts' => 1
);
$related_query = new wp_query( $args );
while( $related_query->have_posts() ) {
$related_query->the_post();
?>
<div class="related-post__item">
<div class="related-post__item--thumb">
<a rel="nofollow" href="<? the_permalink()?>"><?php the_post_thumbnail(array(300,150)); ?>
</a>
</div>
<h3 class="related-post__item--title">
<a href="<? the_permalink()?>"><?php the_title(); ?></a>
</h3>
</div>
<? }
}
$post = $orig_post;
wp_reset_query();
?>
</div>
</div>
<?php
endif;
}
generate_before_comments_container agar related post tidak menjadi bagian dari <article>. IMO, secara semantic ini lebih masuk akal. Kalau Anda mau, bisa juga mengganti tag HTML <div class="related-post__container> menjadi <region> atau <aside>.
Step 2: Atur tampilan dengan CSS
Atur tampilan. Tambahkan ini di additional CSS atau di style.css child theme.
/* Related Post */
.related-post__content {
display: flex;
justify-content: space-between;
}
.related-post__item {
flex-basis: 30%;
}
.related-post__item--thumb {
background-color: var(--contrast);
height: 200px;
width: 100%;
margin-bottom: 10px;
}
.related-post__item--thumb a:hover {
opacity: 0.5;
}
.related-post__item--thumb img {
height: 200px;
width: 100%;
object-fit: cover;
}
.related-post__item--title {
font-size: 16px;
text-align: center;
}
.related-post__item--title a {
color: var(--contrast-2);
text-decoration: none;
}
.related-post__item--title a:hover {
color: var(--accent);
}
@media only screen and (max-width: 800px) {
.related-post__content {
flex-direction: column;
}
}
Step 3: Selesai
Selesai, deh. Tampilannya kira-kira seperti ini:
Bila Anda kurang sreg dengan tampilannya, bisa modif sendiri di CSS.
Sekian tutorial coding kali ini. Semoga membantu. (eL)
Langit Amaravati
Web developer, graphic designer, techno blogger.
Aktivis ngoding barbar yang punya love-hate relationship dengan JavaScript. Hobi mendengarkan lagu dangdut koplo dan lagu campursari. Jika tidak sedang ngoding dan melayout buku, biasanya Langit melukis, belajar bahasa pemrograman baru, atau meracau di Twitter.
