Tạo bài viết lên quan trên theme Flatsome

Bài viết liên quan ở cuối nội dung bài viết không được flatsome hỗ trợ sẵn như các theme tin tức khác, vì nó là theme chuyên bán hàng mà.
Nhưng nếu bạn muốn hãy làm theo hướng dẫn của mình dưới đây. Rất đơn giản, không phải cài thêm plugin chi cho nó nặng web, mà chẳng may khách vô tình tắt plugin nó mất tiêu cái bài viết liên quan là lại yêu cầu support. Chèn code cho nó chắc

1. Chèn code sau vào file funcions.php của child theme

//Bài viết liên quan
function mh_add_post_content($content) {
  if (is_single()) {
    $content .= "<div class='clearfix'></div>";
    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, // Number of related posts that will be shown.
        'caller_get_posts'=>1
      );

      $my_query = new wp_query( $args );
      if( $my_query->have_posts() ) { 		
        $content .= '<div id="related_posts"><h3>Bài viết liên quan</h3><ul>';
        while( $my_query->have_posts() ) {
            		$my_query->the_post();
          $content .= '
            <li class="col large-4">
              <div class="relatedthumb">
                <a href="' . get_the_permalink() .'">'. get_the_post_thumbnail().'</a>
              </div>
                  		<div class="relatedcontent">
                      		<h3>
                      			<a href="'. get_the_permalink().'">'. get_the_title().'</a>
                      		</h3>
                        	</div>
                      </li>';
        } //End while
        $content .= "</ul></div> 
        <div class='clearfix'></div>";
      } //End if
    } //End if
  }
  return $content;
}
add_filter ('the_content', 'mh_add_post_content', 0);

2. Chèn đoạn mã css sau vào file style.css của chile theme

#related_posts .col {
  float: left;
  margin-left: 0;
  list-style: none;
}
.relatedcontent h3 {
  font-size: 16px;
  margin-top: 7px;
}
.relatedthumb img {
  height: 100%;
  max-height: 165px;
}
#related_posts {
  border-top: 4px double #e8e8e8;
        padding-top: 10px;
}
#related_posts li:nth-child(1) {
  padding-left: 0 !important;
}
#related_posts li:nth-child(2) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#related_posts li:nth-child(3) {
  padding-right: 0 !important;
}
.relatedthumb img {
  min-height: 125px;
}

3. Các bạn muốn đẹp hoặc khác hơn hãy css thêm nhé

Chỉ cần đơn giản 2 bước thôi là có ngay bài viết liên quan ở cuối mỗi bài viết trong theme flatsome.

Và đây là kết quả tạo bài viết liên quan trên theme flatsome

Note: Đối với các bạn xài kèm AMP thì sửa code như sau:

Thay đoạn

add_filter ('the_content', 'mh_add_post_content', 0);

 

Bằng đoạn:

if (!wp_is_mobile()) {
add_filter ('the_content', 'mh_add_post_content', 0);
}

 

Rate this post
Summary
Review Date
Reviewed Item
Tạo bài viết lên quan trên theme Flatsome
Author Rating
51star1star1star1star1star

CÓ THỂ BẠN QUAN TÂM

Thiết kế website opencart tại Đồng Tháp
Thiết kế website opencart tại Đồng Tháp Nhiều khách hàng khi có dự định mở cửa hàng kinh doanh online hoặc ...
Công Ty Thiết Kế Website Tại Đồng Tháp
Kính gửi: Quý Khách hàng Thiết kế website đồng tháp là một trong những doanh nghiệp đứng đầu về ứng dụng công nghệ ...
Mẫu website bán hàng đẹp
Một số mẫu website bán hàng đẹp và ấn tượng
Một số mẫu website bán hàng đẹp và ấn tượng Mọi người không đánh giá một cuốn sách thông qua bìa ...
Thiết kế website bất động sản
Link Demo : Website bất động sản Rate this post