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