Hiển thị bài viết liên quan là rất quan trọng nó giúp cho bài viết trở nên sinh động. Hơn nữa là một trong những chiến thuật thiết yếu 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 này chúng tôi sẽ hướng dẫn các bạn hiển thị Related Posts bằng cách thêm code. Cơ sở để các bạn tự viết theme mà ko cần dùng plugin.
Hiển thị bài viết liên quan theo Categories
Đầu tiên các bạn mở file single.php sau đó copy và pate đoạn code bên dưới vào bất kỳ chỗ nào bạn muốn. Chúng tôi thường đặt ngay dưới phần nội dung bài viết.
<?php $categories = get_the_category($post->ID); // Get a list of the current post's categories
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
}
?>
Hiển thị bài viết liên quan theo Tags
Cũng như trên đầu tiên các bạn mở file single.php sau đó copy và pate đoạn code bên dưới vào bất kỳ chỗ nào bạn muốn. Chúng tôi thường đặt ngay dưới phần nội dung bài viết.
<?php
// 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
}
?>
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
Vậy là ở bài viết này chúng tôi đã hướng dẫn để các bạn có thể dễ dàng thêm Related Posts mà không cần plugin. Nếu bạn sử dụng Genesis hãy xem trong chuyên mục Genesis Framework.
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!
Thay đổi văn bản cho nút add to cart
Create Social Share Buttons Tạo Nút Chia Sẻ Xã Hội Không Javacript
Hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce
cảm ơn bạn rất nhiều ạ