Thêm Bài Viết Liên Quan Trong Flatsome

Mặc định Flatsome không có bài viết liên quan, chỉ có nút trở lại và xem tiếp phải nói là đơn điệu và cực kỳ xấu. Vì vậy hôm nay mình hướng dẫn thêm code bài viết liên quan cho Flatsome.

Xem Thêm:

1. Bài Viết Liên Quan Cho Flatsome Theo Tag

Copy code này vào file functions.php của theme/child theme đang kích hoạt.

/*
* Code bài viết liên quan theo tag
*/
function bvlq() {
    global $post;
    $tags = wp_get_post_tags($post->ID);
    if ($tags){
        $output = '<div class="relatedcat">';
        $first_tag = $tags[0]->term_id;
        $args=array(
            'tag__in' => array($first_tag),
            'post__not_in' => array($post->ID),
            'posts_per_page'=>6,
            'caller_get_posts'=>1
        );
        $my_query = new wp_query($args);
        if( $my_query->have_posts() ):
            $output .= '<p>Bài Viết Liên Quan:</p><ul class="row related-post">';
            while ($my_query->have_posts()):$my_query->the_post();
            $output .=
                '<li class="col large-4">
                                <a href="'.get_the_permalink().'" title="'.get_the_title().'">
                                    <div class="feature">
                                        <div class="image" style="background-image:url('. get_the_post_thumbnail_url() .');"></div>
                                    </div>
                                </a>
                                <div class="related-title"><a href="'.get_the_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></div>
                            </li>';
            endwhile;
            $output .= '</ul>';
        endif; wp_reset_query();
        $output .= '</div>';
        return $output;
    }
    else return;
}
add_shortcode('bvlq', 'bvlq');

2. Bài Viết Liên Quan Cùng Chuyên Mục

Copy code này vào file functions.php của theme/child theme đang kích hoạt.

/*
 * Code bài viết liên quan theo chuyên mục
*/
function bvlq_danh_muc() {
    $output = '';
    if (is_single()) {
      global $post;
      $categories = get_the_category($post->ID);
      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),
          'posts_per_page'=>6,
          'caller_get_posts'=>1
        );
        $my_query = new wp_query( $args );
        if( $my_query->have_posts() ):
            $output .= '<div class="relatedcat">';
                $output .= '<p>Bài Viết Liên Quan:</p><div class="row related-post">';
                    while ($my_query->have_posts()):$my_query->the_post();
                    $output .=

                        '<div class="col large-4">
                            <a href="'.get_the_permalink().'" title="'.get_the_title().'">
                                <div class="feature">
                                    <div class="image" style="background-image:url('. get_the_post_thumbnail_url() .');"></div>
                                </div>
                            </a>
                            <div class="related-title"><a href="'.get_the_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></div>
                        </div>';
                    endwhile;
                $output .= '</div>';
            $output .= '</div>';
        endif;   //End if.
      wp_reset_query();
    }
    return $output;
  }
}
add_shortcode('bvlq_danh_muc','bvlq_danh_muc');

3. Thêm CSS

Để làm đẹp mục bài viết liên quan mà các bạn vừa tạo ở trên thì cần viết thêm css cho nó, bạn chèn vào style.css của theme/child theme đang kích hoạt hoặc thêm vào CSS bổ sung trong Tuỳ biến.

.feature {
    position: relative;
    overflow: hidden;
}
.feature::before {
content: "";
display: block;
padding-top: 56.25%;
}
.feature .image{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-size: cover;
    background-position: center;
}
ul.row.related-post li {
    list-style: none;
}
.related-title {
    line-height: 1.3 !important;
    margin-top: 10px !important;
}

Sau khi thêm đủ 2 cái đó cho con, chúng ta được 2 shortcode [bvlq] và [bvlq_danh_muc] . Chúng ta chọn 1 loại rồi thêm vào Flatsome –> Theme Option –> Blog –> Blog Single Post, kéo xuống dưới cùng, tới phần HTML after blog posts. Chúng ta chèn shortcode vào đó rồi lưu lại. Ra xem thành quả au khi đã tạo theo hướng dẫn mục bài viết liên quan trong flatsome nhé.

Ngoài ra, các bạn coss thể xem thêm nhiều bài viết, thủ thuật tại website này, hoặc tham gia vào Fanpages và để lại yêu cầu hướng dẫn hoặc hỗ trợ khi có bất kỳ thắc mắc nào nhé!

5/5 - (2 bình chọn)

Có thể bạn quan tâm

  • Hướng dẫn chèn fanpages vào website

    Hướng Dẫn Cách Chèn Fanpage Vào Website

    Nội Dung Chính1. Bài Viết Liên Quan Cho Flatsome Theo Tag2. Bài Viết Liên Quan Cùng Chuyên Mục3. Thêm CSS Hiện tại thì gần như 100% các website đều nhúng Fanpage Facebook vào website để thu hút người dùng theo dõi kênh trên mạng xã hội Facebook. Bằng việc hiển thị nút kêu gọi “thích …

  • cách tạo popup trong flatsome

    Tạo Popup Bằng Lightbox Trong Flatsome

    Nội Dung Chính1. Bài Viết Liên Quan Cho Flatsome Theo Tag2. Bài Viết Liên Quan Cùng Chuyên Mục3. Thêm CSS Bài viết này mình sẽ hướng dẫn cách tạo popup trong flatsome để báo giá, popup báo giá kèm URL , popup hẹn giờ, …. bằng cách sử dụng tính năng có sẵn của Flatsome …

  • cai-dat-smtp-wordpress-gmail

    Cách Cấu Hình SMTP Cho WordPress

    Nội Dung Chính1. Bài Viết Liên Quan Cho Flatsome Theo Tag2. Bài Viết Liên Quan Cùng Chuyên Mục3. Thêm CSS Khi xây dựng một website wordpress, bắt đầu vào hoạt động nhưng không thể gửi/nhận email như email thông báo, khách gửi form tư vấn báo giá…. Vậy làm sao để có thể nhận email …

  • advanced-options-flatsome

    THAY ĐỔI STYLE & LAYOUT CHO FLATSOME

    Nội Dung Chính1. Bài Viết Liên Quan Cho Flatsome Theo Tag2. Bài Viết Liên Quan Cùng Chuyên Mục3. Thêm CSS Tùy Biến Style và Layout cho Flatsome Hôm nay tôi sẽ hướng dẫn cho các bạn cách thay đổi Style và Layout trong theme Flatsome cho các bạn.Để website được trau chuốt và đẹp hơn, …

  • seo tổng hợp

    Cách Đưa Google Analytics Vào Website

    Nội Dung Chính1. Bài Viết Liên Quan Cho Flatsome Theo Tag2. Bài Viết Liên Quan Cùng Chuyên Mục3. Thêm CSS Cách Đưa Google Analytics Vào Website Sau khi có một website với đầy đủ sản phẩm, thông tin đã được update, vậy làm thế nào để biết được website có bao nhiêu lượt truy cập? …