Hướng dẫn tạo bài viết liên quan đẹp mắt trong theme Flatsome WordPress

Hướng dẫn tạo bài viết liên quan đẹp mắt trong theme Flatsome WordPress

Mặc định theme Flatsome WordPress không có bài viết liên quan, bài viết sau đây sẽ hướng dẫn bạn cách tạo bài viết liên quan đẹp mắt có hình và 3 cột như các theme khác, rất đơn giản

Bước 1: Chèn code này vào file function.php của flatsome-child

// Tạo bài viết liên quan
function vareno_baivietlienquan($content) {
// Chỉ hiển thị trên trang bài viết chi tiết (single post)
if (is_single()) {
global $post;
// Lấy danh mục của bài hiện tại
$categories = get_the_category($post->ID);

if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) {
$category_ids[] = $individual_category->term_id;
}

// Cấu hình query
$args = array(
‘category__in’ => $category_ids,
‘post__not_in’ => array($post->ID), // Loại bỏ bài hiện tại
‘posts_per_page’ => 3, // Số lượng bài viết liên quan
‘ignore_sticky_posts’ => 1 // Thay thế cho caller_get_posts
);

$my_query = new WP_Query($args);

// Nếu có bài viết thì mới nối thêm vào nội dung
if( $my_query->have_posts() ) {
$content .= ‘<div class="clearfix"></div>’;
$content .= ‘<div id="related_posts"><h3>Bài viết liên quan</h3><ul>’;

while( $my_query->have_posts() ) {
$my_query->the_post();

$content .= ‘<li class="col large-4">’;

// Ảnh đại diện
$content .= ‘<div class="relatedthumb">’;
$content .= ‘<a href="’ . get_the_permalink() . ‘">’ . get_the_post_thumbnail(get_the_ID(), ‘thumbnail’) . ‘</a>’;
$content .= ‘</div>’;

// Tiêu đề
$content .= ‘<div class="relatedcontent">’;
$content .= ‘<h3><a href="’ . get_the_permalink() . ‘">’ . get_the_title() . ‘</a></h3>’;
$content .= ‘</div>’;

$content .= ‘</li>’;
}

$content .= ‘</ul></div><div class="clearfix"></div>’;

// Quan trọng: Reset lại dữ liệu post gốc
wp_reset_postdata();
}
}
}
return $content;
}

// Hook vào nội dung bài viết
add_filter(‘the_content’, ‘vareno_baivietlienquan’);

 

Bước 2: Chèn đoạn mã css này vào file style.css của flatsome-child để chỉnh lại style cho bài viết liên quan

//Tạo bài viết liên quan
#related_posts .col {
float: left;
margin-left: 0;
list-style: none;
}
.relatedcontent h3 {
font-size: 16px;
margin-top: 7px;
}
.relatedthumb img {
height: 100%;
max-height: 165px;
}
#related_posts {
border-top: 4px double #e8e8e8;
padding-top: 10px;
}
#related_posts li:nth-child(1) {
padding-left: 0 !important;
}
#related_posts li:nth-child(2) {
padding-left: 0 !important;
padding-right: 0 !important;
}
#related_posts li:nth-child(3) {
padding-right: 0 !important;
}
.relatedthumb img {
min-height: 125px;
}

Demo thực tế bài viết liên quan trong theme Flatsome WordPress

Chúc bạn thành công!