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

Tích hợp Zalo chat và Zalo comment vào website [wordpress] chi tiết từng bước
Chào mọi người, lâu lắm rồi mình chưa viết bài hướng dẫn nào. Hôm nay mình sẽ hướng dẫn cho các ...
Thiết kế website du lịch tại Đồng Tháp
www.thietkewebsitedongthap.com – Chuyên thiết kế website du lịch tại Đồng Tháp, Website chuẩn SEO, thân thiện với các thiết bị di động. Đồng ...
Báo động nền tảng website WordPress bị hacker tấn công lừa đảo
Vượt qua cơ chế bảo vệ của Wordfence (“tường lửa” của WordPress), các hacker sẽ lợi dụng tấn công thay đổi ...
DỊCH VỤ THIẾT KẾ WEBSITE TẠI QUẢNG BÌNH
Dịch vụ thiết kế website tại Quảng Bình, LH: 0357.592.458– Công ty thiết kế website số 1 Việt Nam! Hinatech hỗ ...