Hướng dẫn viết code hiện thị bài viết liên quan và bài viết cùng chuyên mục

Hôm nay topweb.store sẽ hướng dẫn các bạn viết code hiện thị bài viết liên quan và bài viết cùng chuyên mục mà không cần dùng đến bất kỳ một plugin nào.

Để hiện thị bài viết liên quan (cùng post tag) và bài viết cùng chuyên mục ở cuối mỗi bài viết , các bạn thực hiện như sau:

Bước 1: Bạn bổ sung đoạn code sau vào file [content-single.php]

File [content-single.php] nằm trong thư mục theme bạn đang sử dụng nhé !

<div class="bai-viet-lien-quan">
<?php
/*
* Code hiển thị bài viết liên quan theo post tag
*/
$tags = wp_get_post_tags(get_the_ID());
if ($tags){

$tag_ids = array();
foreach($tags as $netweb_tag) $tag_ids[] = $netweb_tag->term_id;

$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array(get_the_ID()),
'posts_per_page' => 4,
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ):

echo '<h3>Bài viết liên quan:</h3>';
echo '<ul class="list-bai-viet">';
while ($my_query->have_posts()):$my_query->the_post();
?>
<li>
<div class="box-image">
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('large'); ?></a>
</div>
<a href="<?php the_permalink() ?>"><h4 class="tieu-de-bai-viet"><?php the_title(); ?></h4></a>
</li>

<?php
endwhile;
echo '</ul>';
endif;
wp_reset_query();
}
?>

<?php
$post_id = get_the_ID();
$categories = get_the_category($post_id);
if ($categories)
{
$cat_ids = array();
$categories = get_the_category( $post_id );

if(!empty($categories) && is_wp_error($categories)):
foreach ($categories as $category):
array_push($cat_ids, $category->term_id);
endforeach;
endif;

$args=array(
'category__in' => $cat_ids,
'post__not_in' => array($post_id),
'posts_per_page' =>8, // Số bài viết bạn muốn hiển thị.
'caller_get_posts'=>1,
'no_found_rows' =>true //Bỏ qua load phân trang tăng hiệu suât query
);
$my_query = new wp_query($args);
if( $my_query->have_posts() )
{
echo '<h3>Bài viết cùng chuyên mục:</h3>';
echo '<ul class="list-bai-viet">';
while ($my_query->have_posts())
{
$my_query->the_post();

?>
<li>
<div class="box-image">
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('large'); ?></a>
</div>
<a href="<?php the_permalink() ?>"><h4 class="tieu-de-bai-viet"><?php the_title(); ?></h4></a>
</li>
<?php
}
echo '</ul>';
wp_reset_query();
}
}
?>

</div>

Bước 2: Thêm css vào file [functions.php] như sau

function get_custom_style() { ?>

<style type = "text/css">
.bai-viet-lien-quan {
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
}.bai-viet-lien-quan h3 {
font-size: 19px;
color: black;
}.bai-viet-lien-quan ul {
margin-bottom: 0;
display: inline-block;
width: 100%;
}.bai-viet-lien-quan ul li {
list-style: none;
width: 25%;
color: graytext;
float: left;
padding-left: 4px;
padding-right: 5px;
}.bai-viet-lien-quan ul li .box-image img {
height: 120px;
border-radius: 4px;
object-fit: cover;
object-position: center;
}.bai-viet-lien-quan h4 {
font-size: 15px;
color: black;
line-height: 19px;
padding-top: 7px;
height: 64px;
overflow: hidden;
}.bai-viet-lien-quan h4:hover {
color: #E91E63;
text-decoration: underline;
}
</style>

<?php
}
add_action('wp_head','get_custom_style');

Thế là ok rồi đó, chúng bạn thực hiện thành công!