Hướng dẫn thêm Bài viết liên quan trong website WordPress sử dụng theme Flatsome

Đánh giá cho post

Video hướng dẫn chi tiết các bước để bạn thêm bài viết liên quan trong website wordpress sử dụng theme Flatsome một cách đơn giản nhất mà không cần biết code quá nhiều.

Bài viết liên quan chỉ gồm tiêu đề

Thêm đoạn code sau vào cuối file single-content.php (wp-content/themes/flatsome (childtheme)/template-parts/posts)

<div id="related-posts">
<?php
$categories = get_the_category(get_the_ID());
if ($categories){
echo '<div class="relatedcat">';
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array(get_the_ID()),
'posts_per_page' => 10,
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ):
echo '<h3>Bài viết cùng chuyên mục</h3><ul>';
while ($my_query->have_posts()):$my_query->the_post();
?>
<li><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
<?php
endwhile;
echo '</ul>';
endif; wp_reset_query();
echo '</div>';
}
?>
</div>

Thêm đoạn CSS sau vào Custom CSS hoặc file css

#related-posts {
border:1px solid #ccc;
background:#f2f2f2;
}
#related-posts h3 {
background: #dd3333;
color: #fff;
font-weight:normal;
text-transform:uppercase;
padding: 5px 10px;
}
#related-posts ul {
margin-left:15px;
padding:10px;
margin-bottom:0!important;
}
#related-posts ul li {
margin-bottom:5px;
}
#related-posts ul li a {
color: #000;
}
#related-posts ul li a:hover {
color: #dd3333;
}

Bài viết liên quan gồm tiêu đề và hình ảnh

Thêm đoạn code sau vào cuối file single-content.php (wp-content/themes/flatsome (childtheme)/template-parts/posts)

<div id="related-posts">
<?php
$categories = get_the_category(get_the_ID());
if ($categories){
echo '<div class="relatedcat">';
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array(get_the_ID()),
'posts_per_page' => 6,
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ):
echo '<div class="row row-small"><div class="col large-12" style="padding: 0 10px; margin-bottom:10px;"><h3>Bài viết cùng chuyên mục</h3></div>';
while ($my_query->have_posts()):$my_query->the_post();
?>
<div class="col large-4 medium-6 small-12"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('full'); ?><?php the_title(); ?></a></div>
<?php
endwhile;
echo '</div>';
endif; wp_reset_query();
echo '</div>';
}
?>
</div>

Thêm đoạn CSS sau vào Custom CSS hoặc file css

#related-posts h3 {
background: #dd3333;
color: #fff;
font-weight:normal;
text-transform:uppercase;
padding: 5px 10px;
}
#related-posts a {
color: #000;
}
#related-posts a:hover {
color: #dd3333;
}

Kết luận: Với thủ thuật nhỏ này, các bạn đã có thể làm cho bài viết chi tiết được sinh động, đầy đủ chức năng hơn, giúp giữ chân khách hàng lâu hơn trên website. Chúc các bạn thành công!

• Tweet
• Share
• Share
• Share
• Share