Code thêm bài viết liên quan vào theme flatsome

Code thêm bài viết liên quan vào theme flatsome

Theme Flatsome dùng để dựng web bán hàng thì không cần phải nói rồi. Nhưng phần blog của nó lại không có khối bài viết liên quan như các theme khác. Vì vậy trong bài viết này mình xin hướng dẫn bạn Code thêm bài viết liên quan vào theme flatsome nhé.

Code bài viết liên quan theo tag

Dán 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 related_tag() {
    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'=>3,
            '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('related_tag', 'related_tag');
/*End Code bài viết liên quan theo tag*/

Code bài viết liên quan theo chuyên mục

Dán 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 related_cat() {
    $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,
          'ignore_sticky_posts'=>1
        );
        
        $my_query = new wp_query( $args );
        if( $my_query->have_posts() ):
            $output .= '<div class="related-box">';
                $output .= '<span class="related-head">Bài viết liên quan:</span><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('related_cat','related_cat');
/*End Code bài viết liên quan theo chuyên mục*/

Thêm code CSS vào cho đẹp

Tiếp theo là phần css, 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 phần Tuỳ biến của Flatsome.

/*************** CSS FOR BAIVIETLIENQUAN.   ***************/
.related-box .related-head {
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
    font-size: 19px;
    color: black;
}
.related-box ul li {
    margin-bottom: 3px;
}
.related-box ul li a {
    font-weight: 700;
    font-size: 16px;
    /*color: #2a9e2f;*/
}
.related-box ul li a:hover {
    text-decoration: underline;
}
.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;
	border-radius: 6px;
}
ul.row.related-post li {
    list-style: none;
}
.related-title {
    line-height: 1.3 !important;
    margin-top: 10px !important;
	color: #000;
}
.related-title a{
	color: #000;
	font-weight: 600;
}
/*************** END CSS FOR BAIVIETLIENQUAN. ***************/

Thêm shortcode vào vị trí muốn hiển thị

Ở phần thêm code trên, bạn muốn thêm bài viết liên quan theo tag hoặc chuyên mục thì bạn chỉ cần copy 1 loại bỏ vào functions.php là được nhé.

Ở mỗi code sẽ cho chúng ta 1 shortcode tương ướng:

  • Shortcode bài viết liên quan theo tag: [related_tag]
  • Shortcode bài viết liên quan theo chuyên mục: [related_cat]

Chúng ta chọn một loại rồi thêm nó vào Giao diện -> Tùy biến -> Blog -> Blog Single Post -> HTML after blog posts

Như vậy là đã xong, và đây là kết quả.

Kết luận

Như vậy chỉ cần thêm vào dòng code vào thì sẽ có thêm được chức năng bài viết liên quan trong theme flatsome rồi nhé. Bạn không cần phải cài thêm plugin gì hết đâu. Nếu trong quá trình làm cần mình hỗ trợ thì cứ nhắn nhé.

Mình có bán các sản phẩm và cung cấp các dịch vụ sau, mong bạn dành ít phút để tham khảo, nếu thấy cần cái nào thì ủng hộ mình nhé:

  1. Shop Key License WordPress
  2. Kho Demo Website
  3. Dịch vụ Hosting tốc độ cao
  4. Dịch vụ thiết kế Website, diệt mã độc, tối ưu website
GROUP ZALO HỖ TRỢ WORDPRESS
Đừng bao giờ nói tất cả những gì bạn biết. Và đừng bao giờ tin tất cả những gì bạn nghe.
Người thông minh giống như một dòng sông, càng sâu càng lặng lẽ.
Cách tốt nhất để có một ý tưởng xuất sắc là có thật nhiều ý tưởng.
Chúng ta chỉ thật sự thất bại một khi chúng ta từ bỏ mọi cố gắng.
Không vấp ngã trước cuộc sống, điều đó là rất tốt. Nhưng vấp ngã rồi đứng dậy mà đi lên càng tốt hơn.
Chuyên Mục
Plugin - Theme
Bài Viết Mới
Mời 1 Ly Sinh Tố
momo qr

Ngân hàng: MB BANK

Tài khoản: NGUYỄN BẢO NGỌC

Số TK: 0396753543

Mình xin chân thành cảm ơn sự ủng hộ của các bạn. Những khoản donate của các bạn đã giúp mình có 1 khoảng để chi trả và duy trì blog của mình. Mình sẽ cố gắng update thêm nhiều kiến thức và tài nguyên hữu ích hơn nửa. Cám ơn rất nhiều !!!

Chat Facebook (8h-24h)
Chat Zalo (8h-24h)
0396.753.543 (8h-20h)
Chat Telegram t.me/jakengocnguyen
Group Zalo Hỗ Trợ Get Theme + Plugin + Support