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);
}

 

Tạo bài viết lên quan trên theme Flatsome
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

Top 5 nền tảng tốt nhất cho website bán hàng và thương mại điện tử
  Top 5 nền tảng tốt nhất cho website bán hàng và thương mại điện tử Thương mại điện tử đã ...
Dự án website giáo dục
Link Demo : Website dạy tiếng anh Dự án website giáo dụcRate this post
Thiết kế website thiết bị phòng tắm
Link Demo : Website Thiết bị nhà tắm Thiết kế website thiết bị phòng tắmRate this post
Dự án website thiết kế website
Link Demo : Thiết kế website Dự án website thiết kế websiteRate this post