"Tạo bài viết liên quan trên theme Flatsome" - Views: 46 · Hits: 46 - Type: Unlisted

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

1. Chèn code sau vào file functions.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.
        'ignore_sticky_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 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;
}


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

Vậy là đã ok rồi.