Code bài viết liên quan cho theme Flatsome không dùng plugin

By | Tháng Tám 25, 2019

Những ai đã dùng flatsome thì mới thấy nó không có bài viết liên quan như các theme khác, nó chỉ có bài trước và bài kế tiếp thôi.

Do vậy, trong quá trình làm web cho khách, đôi khi khách yêu cầu phải có bài viết liên quan kiểu như hình bên dưới.

Code bài viết liên quan cho theme Flatsome không dùng plugin 1

Mình thấy một số bạn có share code trên mạng, nhưng đa phần đều phải dùng thêm 1 plugin nữa. Hôm nay mình share 1 đoạn code, không cần plugin, các bạn thêm vào file functions.php của theme là được.

Bài viết liên quan theo tag

Code này là bài viết liên quan theo tag nhé, không phải theo danh mục, khi viết bài các bạn phải chú ý thêm tag cho bài viết nhé.

/*
 * Code bài viết liên quan
*/
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'=>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('bvlq', 'bvlq');

Bài viết liên quan cùng danh 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'=>3,
          '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');

Tiếp theo là phần css, bạn chèn vào style.css của child theme

.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 1 shortcode là [ bvlq ] . 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

Bài viết liên quan

6 thoughts on “Code bài viết liên quan cho theme Flatsome không dùng plugin

  1. Đức

    mình chèn code nhưng không hiển thị được hình thumbnail. Bạn hỗ trợ giúp mình được k

    Reply
    1. Mcode Post author

      Bạn xem có copy css vào style.css chưa. Muốn hiện thì phải kết hợp css nữa bạn nha

      Reply
  2. Hải Nam

    Mình muốn hiển thị ra trang chủ Top bài viết (top viewed) thì có cách nào không bạn? Mong bạn chỉ giúp.

    Reply
    1. Mcode Post author

      Về nguyên lý là sẽ code 1 cái meta đề lưu số lượt view của bài, sau đó gọi ra và sắp sếp theo thứ tự. Để mình tìm hiểu rồi phản hồi lại

      Reply
  3. Phong

    Sao mình muốn viết in hoa dòng Title: “Bài viết liên quan” không được nhỉ

    Reply
    1. Mcode Post author

      Bạn css thêm cho chỗ đó là .relatedcat p {text-transform: uppercase;}

      Reply

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *