Display Related Posts Code Genesis Child Phần 7

Bạn đã biết tầm quan trọng của SEO On Page. Một trong những lý do chính khiến các trang web có xếp hạng tốt hơn trong công cụ tìm kiếm. Bài viết liên quan giúp các website cải thiện thứ hạng SEO On Page .

Việc hiển thị một bài viết liên quan trên Genesis Child themes khá đơn giản. Genesis sử dụng các Hook để tùy biến và mở rộng chức năng từ child themes.

Display Related Posts By Categories

Hiển thị bài viết liên quan trên Genesis Child themes bắt đầu với một action hook ‘genesis_entry_footer’. Hook này nằm trên tất cả post, page, category vì thế để hiển thị đúng trên trang bài viết ta thêm điều kiện is_single. Code bên dưới phải được Copy và pate vào file function.php child theme của bạn.

// Select posts in the same categories as the current post.
if ( ! function_exists( 'related_post_category' ) ):
add_action( 'genesis_entry_footer', 'related_post_category', 40 );
function related_post_category() {
	if ( is_single ( ) ) {
		// Get a list of the current post's categories
		global $post;
		$categories = get_the_category($post->ID);
		if ($categories) {
			$category_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), // Ensure that the current post is not displayed
				'posts_per_page' => 3, // Number of related posts to display
				'orderby' => 'rand', // Randomize the results
			);
			$my_query = new wp_query($args);
			if( $my_query->have_posts() ): $i = 0; ?>
				<div class="related-posts-container"><div class="related-posts-title-block"><h3 class="related-posts-title"><?php _e( 'Related Articles', 'longviet' );?></h3></div>
					<div class="related-posts-inner"><ul class="related-posts-blook">
					<?php while ($my_query->have_posts()):$my_query->the_post();  ?>
						<li class="related-posts-<?php echo $i; ?>">
							<div class="related-posts-img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?></a>
								<span class="entry-time"><?php echo esc_html( get_the_date() ) ?></span></div>
							<div class="item-details">
								<h4 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
							</div>
						</li> <?php $i ++; ?>
					<?php endwhile;  ?>
				<?php else : ?>
				<div class="related-posts-container"><div class="related-posts-title-block"><h3 class="related-posts-title"><?php _e( 'Related Articles', 'longviet' );?></h3></div>
					<div class="related-posts-inner"><ul class="related-posts-blook">
						<p><?php _e( 'Sorry, no related articles to display', 'longviet' );?></p>
				</ul></div></div>
			<?php endif; 
			wp_reset_postdata(); // Reset postdata
		}
	}
}
endif;

Display Related Posts By Tags

Cũng như trên Code bên dưới phải được Copy và pate vào file function.php child theme của bạn.

// Select posts in the same tags as the current post.
if ( ! function_exists( 'related_post_tags' ) ):
add_action( 'genesis_entry_footer', 'related_post_tags', 40 );
function related_post_tags() {
	if ( is_single ( ) ) {
		global $post;
		// Get a list of the current post's tags.
		$tags = wp_get_post_tags($post->ID);
		if ($tags) {
			$tag_ids = array();
			foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
			$args=array(
				'tag__in' => $tag_ids,
				'post__not_in' => array($post->ID), // Ensure that the current post is not displayed
				'posts_per_page' => 3, // Number of related posts to display
				'orderby' => 'rand', // Randomize the results
			);
			$my_query = new wp_query($args);
			if( $my_query->have_posts() ): $i = 0; ?>
				<div class="related-posts-container"><div class="related-posts-title-block"><h3 class="related-posts-title"><?php _e( 'Related Articles', 'longviet' );?></h3></div>
					<div class="related-posts-inner"><ul class="related-posts-blook">
					<?php while ($my_query->have_posts()):$my_query->the_post();  ?>
						<li class="related-posts-<?php echo $i; ?>">
							<div class="related-posts-img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(235, 160)); ?></a>
								<span class="entry-time"><?php echo esc_html( get_the_date() ) ?></span></div>
							<div class="item-details">
								<h4 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
							</div>
						</li> <?php $i ++; ?>
					<?php endwhile;  ?>
				<?php else : ?>
				<div class="related-posts-container"><div class="related-posts-title-block"><h3 class="related-posts-title"><?php _e( 'Related Articles', 'longviet' );?></h3></div>
					<div class="related-posts-inner"><ul class="related-posts-blook">
						<p><?php _e( 'Sorry, no related articles to display', 'longviet' );?></p>
				</ul></div></div>
			<?php endif; 
			wp_reset_postdata(); // Reset postdata
		}
	}
}
endif;

Tiến hành code css

Mỗi người một cách nhìn thẩm mỹ khác nhau bài viết này mình sẽ code css để bạn có một cái nhìn tổng thể sơ bộ. Để được vừa ý bạn có thể viết theo cách của bạn. Copy css và pate nó vào file style.css của bạn.

/* Related Articles */
.related-posts-container .related-posts-title-block {
    border-bottom: 2px solid #222;
}
.related-posts-container .related-posts-title {
    display: inline-block;
    padding: 5px;
	margin: 0;
    color: #fff;
    background-color: #222;
    line-height: 1;
    font-size: 16px;
    font-weight: 600;
    font-family: open sans,arial,sans-serif;
}
.related-posts-inner {
    display: block;
	margin: 20px 0;
}
.related-posts-inner .related-posts-blook {
    display: flex;
}
.related-posts-inner li {
    width: 31.33333%;
    display: block;
    clear: both;
    list-style-type: none;
    margin-right: 3%;
}
.related-posts-inner .related-posts-2 {
	margin-right: 0%;
}
.related-posts-inner .related-posts-img {
    position: relative;
}
.related-posts-inner .entry-time {
    position: absolute;
    top: 0;
    padding: 3px;
    color: #fff;
    background-color: #222;
    line-height: 1;
    font-size: 10px;
    font-weight: 600;
    font-family: open sans,arial,sans-serif;
}
.related-posts-inner .entry-time::before {
    content: '\f469';
    font-family: dashicons;
    font-size: 15px;
    color: #fff;
    padding-right: 3px;
    vertical-align: middle;
}
.related-posts-inner .item-details {
    margin-top: 20px;
}
.related-posts-inner .entry-title {
    font-size: 18px;
    line-height: 1;
	font-weight: 600;
    font-family: open sans,arial,sans-serif;
}