Bài viết liên quan (related post) bên dưới mỗi bài viết không chỉ có chức năng điều hướng và tăng trải nghiệm website của khách hàng mà một phần khác nó giúp cho website của bạn trông chuyên nghiệp hơn rất nhiều. Ở bài viết này, mình sẽ hướng dẫn bạn 2 cách thêm bài viết liên quan cho theme Flatsome.

Có lẽ bạn nào đang dùng theme flatsome đều khá khó chịu vì giao diện này không có phần tùy biến bài viết liên quan bên dưới mỗi bài viết. Điều này làm giảm đi sự trải nghiệm của người dùng và giảm mức độ tương tác, giữ chân khách hàng ở lại.

Mình cũng là người thường xuyên sử dụng flatsome để tạo website cho khách và mình cũng thấu hiểu điều đó. Dưới đây là 2 hướng dẫn thêm phần related post cho flatsome mà mình tổng hợp được. Xin chia sẻ lại với các bạn.

Cách 1: Thêm bài viết liên quan bằng code

Trong bài viết này, chỉ cần sao chép và dán sẽ tạo ra 3 khối hữu ích sau:

Bài viết mới nhất (xem thêm)
Hiển thị danh mục và thẻ của bài đăng
Khối các tin bài cùng chuyên mục.

Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 1

Để thực hiện thêm bài viết liên quan cho flatsome bạn cần chỉnh sửa trong source của giao diện. Vì vậy, các bạn lưu ý nên sao lưu website trước khi thực hiện, tránh trường hợp hư hỏng có thể gây hại cho website.

Một lưu ý nữa là khi sử dụng theme Flatsome chúng ta nên copy các file đã chỉnh sửa sang child theme để các bản cập nhật sau này không bị mất.

Chuyển file từ chủ đề chính sang chủ đề con để chỉnh sửa

Tôi sẽ chỉnh sửa trong tệp content-single.php của chủ đề. Do đó, tôi sẽ chuyển các tập tin từ Core theme sang Child theme để chỉnh sửa.

Bước 1: Vào phần quản trị Hosting, tìm và truy cập vào File manager. Sau đó, bạn vào thư mục Wp-content / themes / flatsome /

Bước 2: Sao chép toàn bộ thư mục Template-part sang child theme.

Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 2

Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 3

Ngay bây giờ, trong thư mục Child theme sẽ có thêm một thư mục mới có tên là “Template-part”.

Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 4

Chèn code để hiển thị các bài viết liên quan trên trang web

Bước 1: Sao chép toàn bộ mã bên dưới

<div class="entry-content single-page">
 
 <?php the_content(); ?>
 <?php
 wp_link_pages( array(
 'before' => '<div class="page-links">' . __( 'Pages:', 'flatsome' ),
 'after'  => '</div>',
 ) );
 ?>
<div class="xem-them">
    <span class="tieu-de-xem-them">Xem thêm:</span>
    <ul>
<?php 
    $postquery = new WP_Query(array('posts_per_page' => 5, 'orderby' => 'rand'));
    if ($postquery->have_posts()) {
    while ($postquery->have_posts()) : $postquery->the_post();
    $do_not_duplicate = $post->ID;
?>
 
<li>
    <a href="<?php the_permalink();?>"><?php the_title();?></a>
</li>
 
<?php endwhile; }  wp_reset_postdata(); ?>  </ul>
 
</div>
 
 <?php if ( get_theme_mod( 'blog_share', 1 ) ) {
 // SHARE ICONS
 echo '<div class="blog-share text-center">';
 echo '<div class="is-divider medium"></div>';
 echo do_shortcode( '[share]' );
 echo '</div>';
 } ?>
</div><!-- .entry-content2 -->
 
<?php if ( get_theme_mod( 'blog_single_footer_meta', 1 ) ) : ?>
 <footer class="entry-meta text-<?php echo get_theme_mod( 'blog_posts_title_align', 'center' ); ?>">
 <?php
 /* translators: used between list items, there is a space after the comma */
 $category_list = get_the_category_list( __( ' ', 'flatsome' ) );
 
 /* translators: used between list items, there is a space after the comma */
 $tag_list = get_the_tag_list( '', __( ' ', 'flatsome' ) );
 
 
 // But this blog has loads of categories so we should probably display them here.
 if ( '' != $tag_list ) {
 $meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span> %1$s</div><div class="the-tim-kiem"><span class="title">Từ khóa:</span> %2$s</div>', 'flatsome' );
 } else {
 $meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span>  %1$s</div>', 'flatsome' );
 }
 
 printf( $meta_text, $category_list, $tag_list, get_permalink(), the_title_attribute( 'echo=0' ) );
 ?>
 </footer><!-- .entry-meta -->
<?php endif; ?>
<?php
/*
 * Code hiển thị bài viết liên quan trong cùng 1 category
 */
$categories = get_the_category(get_the_ID());
if ($categories){
    echo '<div class="bai-viet-lien-quan">';
    $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' => 16, // So bai viet dc hien thi
    );
    $my_query = new wp_query($args);
    if( $my_query->have_posts() ):
        echo '<h3>Bài viết cùng chủ đề:</h3>
        <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();
    echo '</div>';
}
?>
<?php if ( get_theme_mod( 'blog_author_box', 1 ) ) : ?>
 <div class="entry-author author-box">
 <div class="flex-row align-top">
 <div class="flex-col mr circle">
 <div class="blog-author-image">
 <?php
 $user = get_the_author_meta( 'ID' );
 echo get_avatar( $user, 90 );
 ?>
 </div>
 </div><!-- .flex-col -->
 <div class="flex-col flex-grow">
 <h5 class="author-name uppercase pt-half">
 <?php echo esc_html( get_the_author_meta( 'display_name' ) ); ?>
 </h5>
 <p class="author-desc small"><?php echo esc_html( get_the_author_meta( 'user_description' ) ); ?></p>
 </div><!-- .flex-col -->
 </div>
 </div>
<?php endif; ?>
 
<?php if ( get_theme_mod( 'blog_single_next_prev_nav', 1 ) ) :
 flatsome_content_nav( 'nav-below' );
endif; ?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

<?php the_content(); ?>

<?php

wp_link_pages( array(

'before' => '<div class="page-links">' . __( 'Pages:', 'flatsome' ),

'after' => '</div>',

) );

<ul>

<?php

$postquery = new WP_Query(array('posts_per_page' => 5, 'orderby' => 'rand'));

if ($postquery->have_posts()) {

while ($postquery->have_posts()) : $postquery->the_post();

$do_not_duplicate = $post->ID;

<li>

</li>

<?php endwhile; } wp_reset_postdata(); ?> </ul>

</div>

<?php if ( get_theme_mod( 'blog_share', 1 ) ) {

// SHARE ICONS

echo '<div class="blog-share text-center">';

echo '<div class="is-divider medium"></div>';

echo do_shortcode( '[share]' );

echo '</div>';

} ?>

</div>

<?php if ( get_theme_mod( 'blog_single_footer_meta', 1 ) ) : ?>

<?php

/* translators: used between list items, there is a space after the comma */

$category_list = get_the_category_list( __( ' ', 'flatsome' ) );

/* translators: used between list items, there is a space after the comma */

$tag_list = get_the_tag_list( '', __( ' ', 'flatsome' ) );

// But this blog has loads of categories so we should probably display them here.

if ( '' != $tag_list ) {

$meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span> %1$s</div><div class="the-tim-kiem"><span class="title">Từ khóa:</span> %2$s</div>', 'flatsome' );

} else {

$meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span> %1$s</div>', 'flatsome' );

}

printf( $meta_text, $category_list, $tag_list, get_permalink(), the_title_attribute( 'echo=0' ) );

</footer>

<?php endif; ?>

<?php

* Code hiển thị bài viết liên quan trong cùng 1 category

$categories = get_the_category(get_the_ID());

if ($categories){

echo '<div class="bai-viet-lien-quan">';

$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' => 16, // So bai viet dc hien thi

);

$my_query = new wp_query($args);

if( $my_query->have_posts() ):

echo '<h3>Bài viết cùng chủ đề:</h3>

<ul class="list-bai-viet">';

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

<li>

</div>

</a>

</li>

<?php

endwhile;

echo '</ul>';

endif; wp_reset_query();

echo '</div>';

}

<?php if ( get_theme_mod( 'blog_author_box', 1 ) ) : ?>

<?php

$user = get_the_author_meta( 'ID' );

echo get_avatar( $user, 90 );

</div>

</div>

<?php echo esc_html( get_the_author_meta( 'display_name' ) ); ?>

</h5>

</div>

</div>

<?php endif; ?>

<?php if ( get_theme_mod( 'blog_single_next_prev_nav', 1 ) ) :

flatsome_content_nav( 'nav-below' );

endif; ?>

Bước 2: Vào child theme / Template-Parts / posts / content-single.php

Bước 3: Xóa toàn bộ nội dung của tệp Content-single.php và thay thế bằng đoạn code bên trên.

Bước 4: Thay đổi và chỉnh sửa các thông tin cần thiết

Bạn có thể xem hình ảnh bên dưới để biết thông tin có thể chỉnh sửa theo ý thích của mình:

Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 5

Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 6

Thêm CSS để làm đẹp

Copy-paste code vào child theme chỉ giải quyết được phần hiển thị, nhưng để nó đẹp thì bạn phải thiết lập thêm CSS cho nó.

Thêm CSS để hiển thị đẹp trên giao diện máy tính

Bước 1: Sao chép đoạn CSS sau

.xem-them .tieu-de-xem-them {
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
    font-size: 19px;
    color: black;
}
.xem-them ul li {
    margin-bottom: 3px;
}
.xem-them ul li a {
    font-weight: 700;
    font-size: 16px;
    color: #2a9e2f;
}
.xem-them ul li a:hover {
    text-decoration: underline;
}
.blog-single .entry-meta {
    text-transform: none;
    font-size: 14px;
    letter-spacing: 0;
    color: gray;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    padding: 10px;
    background: #f9f9f9;
}
.danh-muc {
    margin-bottom: 15px;
}
.danh-muc span.title, .the-tim-kiem span.title {
    border-radius: 4px;
    background: #126e32;
    padding: 4px 10px;
    color: white;
    margin-right: 5px;
}
.danh-muc a, .the-tim-kiem a {line-height:32px;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 4px 10px;
    background: #dedede;
    color: #464646;
}
.danh-muc a:hover, .the-tim-kiem a:hover {
    background: #6dca19;
    color: white;
}
.bai-viet-lien-quan {
    margin-top: 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;
}

.xem-them .tieu-de-xem-them {

font-weight: 700;

display: block;

margin-bottom: 10px;

font-size: 19px;

color: black;

}

.xem-them ul li {

margin-bottom: 3px;

}

.xem-them ul li a {

font-weight: 700;

font-size: 16px;

color: #2a9e2f;

}

.xem-them ul li a:hover {

text-decoration: underline;

}

.blog-single .entry-meta {

text-transform: none;

font-size: 14px;

letter-spacing: 0;

color: gray;

border-top: 1px solid #e2e2e2;

border-bottom: 1px solid #e2e2e2;

padding: 10px;

background: #f9f9f9;

}

.danh-muc {

margin-bottom: 15px;

}

.danh-muc span.title, .the-tim-kiem span.title {

border-radius: 4px;

background: #126e32;

padding: 4px 10px;

color: white;

margin-right: 5px;

}

.danh-muc a, .the-tim-kiem a {line-height:32px;

border-radius: 4px;

margin-bottom: 10px;

padding: 4px 10px;

background: #dedede;

color: #464646;

}

.danh-muc a:hover, .the-tim-kiem a:hover {

background: #6dca19;

color: white;

}

.bai-viet-lien-quan {

margin-top: 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;

}

Bước 2: Dán toàn bộ mã CSS trên vào Giao diện –> Tùy biến –> Style –> Custom CSS (phần tùy biến).

Bước 3: Lưu và tận hưởng kết quả trên PC.

Thêm CSS để làm đẹp trên thiết bị di động

Bước 1: Sao chép mã CSS sau:

.bai-viet-lien-quan ul li {
    width: 50%;
}
.bai-viet-lien-quan ul li .box-image img {
    height: 90px;
}

.bai-viet-lien-quan ul li {

width: 50%;

}

.bai-viet-lien-quan ul li .box-image img {

height: 90px;

}

Bước 2: Dán toàn bộ mã CSS ở trên vào Giao diện –> Tùy biến –> Style –> Custom CSS –> Custom CSS Mobile.

Bước 3: Lưu và tận hưởng kết quả trên Di động.

Cách 2: Thêm bài viết liên quan bằng function

Cách này đơn giản hơn rất nhiều, bằng cách tận dụng khả năng custom của theme flatsome.

Bước 1: Bạn chèn đoạn code dưới đây vào function của child theme.

// Thêm bài viết liên quan
add_shortcode('woovn_posts_related','flatsome_related_posts');
function flatsome_related_posts(){
    ob_start();
    $categories = get_the_category(get_the_ID());
    if ($categories){
        echo '<div class="relatedcat">';
        $category_ids = array();
        foreach($categories as $individual_category) array_push($category_ids, $individual_category->term_id);
        $my_query = new wp_query(array(
            'category__in' => $category_ids,
            'post__not_in' => array(get_the_ID()),
            'posts_per_page' => 6
        ));
        $ids = wp_list_pluck( $my_query->posts, 'ID' );
        $ids = implode(',', $ids);
        if( $my_query->have_posts() ){
            echo '<h3>Bài viết liên quan</h3>';
            //echo do_shortcode('[blog_posts style="normal" columns="3" columns__md="2" ids="' . $ids . '" image_height="56.25%" text_align="left"]'); // Slider
            echo do_shortcode('[blog_posts style="normal" type="row" columns="3" columns__md="2" posts="6" image_height="56.25%" text_align="left" ids="' . $ids . '"]'); // Row
        }
        echo '</div>';
    }
    return ob_get_clean();
}

// Thêm bài viết liên quan

add_shortcode('woovn_posts_related','flatsome_related_posts');

function flatsome_related_posts(){

ob_start();

$categories = get_the_category(get_the_ID());

if ($categories){

echo '<div class="relatedcat">';

$category_ids = array();

foreach($categories as $individual_category) array_push($category_ids, $individual_category->term_id);

$my_query = new wp_query(array(

'category__in' => $category_ids,

'post__not_in' => array(get_the_ID()),

'posts_per_page' => 6

));

$ids = wp_list_pluck( $my_query->posts, 'ID' );

$ids = implode(',', $ids);

if( $my_query->have_posts() ){

echo '<h3>Bài viết liên quan</h3>';

//echo do_shortcode('[blog_posts style="normal" columns="3" columns__md="2" ids="' . $ids . '" image_height="56.25%" text_align="left"]'); // Slider

echo do_shortcode('[blog_posts style="normal" type="row" columns="3" columns__md="2" posts="6" image_height="56.25%" text_align="left" ids="' . $ids . '"]'); // Row

}

echo '</div>';

}

return ob_get_clean();

}

Nhớ lưu lại nhé.

Bước 2: Vào phần Tùy biến -> Blog -> Blog Single Post -> và chèn đoạn code dưới đây vào phần HTML after blog posts.

&#91;woovn_posts_related]

1	[woovn_posts_related]

Thêm bài viết liên quan cho flatsome đơn giản 1

Như vậy là đã xong rồi đấy. Rất dễ phải không nào.

Tổng kết

Như vậy bài viết Hướng dẫn thêm bài viết liên quan cho Flatsome này mình đã hướng dẫn các bạn 2 bước thêm phần related post cho giao diện flatsome nhanh chóng và dễ làm. Chúc các bạn thành công. Nếu có bất kỳ thắc mắc nào hãy để lại ở phần bình luận nhé!!