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

Thủ thuật WordPress
1

Thêm code bên dưới vào file functions.php trong child-theme. Có 2 trường hợp xảy ra.

TH1: Đối với trường hợp dùng tag làm tiêu chí tìm kiếm bài viết liên quan.


/*
 * Related post by tag
*/
function flatsome_related_post_by_tag() {
    global $post;
    $tags = wp_get_post_tags($post->ID);
    if ($tags){
        $output = '<div class="related-post-box">';
        $first_tag = $tags[0]->term_id;
         
        $args=array(
            'tag__in' => array($first_tag),
            '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 .= '<h3 class="related-title-box">Related Post</h3><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('flatsome_related_post', 'flatsome_related_post_by_tag');

TH2: Đối với trường hợp dùng category làm tiêu chí tìm kiếm bài viết liên quan.


function flatsome_related_post_by_category() {
    $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-post-box">';
                $output .= '<h3 class="related-title-box">related Post</h3><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('flatsome_related_post','flatsome_related_post_by_category');

Sau đó thêm code css vào trong file style.css


/*Related Post*/
.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;
}

Hiện tại, chúng ta có 1 shortcode là [flatsome_related_post ] . Chúng ta sẽ vào Flatsome –> Theme Option –> Blog –> Blog Single Post, chúng ta 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 là xong.