Tutorial Membuat Related Posts di GeneratePress, Tanpa Plugin

GeneratePress

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.

  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;
}

Note: saya sengaja meletakkan hook di 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>.

  1. 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;
	}
}
  1. Selesai

Selesai, deh. Tampilannya kira-kira seperti ini:

Cara membuat related post tanpa plugin

Bila Anda kurang sreg dengan tampilannya, bisa modif sendiri di CSS.


Sekian tutorial coding kali ini. Semoga membantu. (eL)

Foto Langit Amaravati

Langit Amaravati

Web developer, graphic designer, techno blogger.

Peminum kopi fundamentalis. 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.

Related Posts

Cara Membuat Sitemap di Blogspot dan WordPress Serta Cara Submit ke Google Search Console

Frontend Mentor

Menjajal Frontend Mentor

Perbedaan WordPress.com dengan WordPress.org

Perbedaan WordPress.com dengan WordPress.org

4 Comments

Tinggalkan komentar