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;
}
Lời kết
Bài viết liên quan trên Genesis Framework còn dễ hơn cả trên các theme thông thường phải không. Đối với Genesis chúng ta chỉ việc dùng hook và hook.
Tôi hy vọng bạn tìm thấy hướng dẫn này hữu ích. Nếu vậy, hãy xem xét chia sẻ nó với khán giả của bạn!
Hay quá