Chuyên mục
Blog

[Tips] Tạo bài viết lên quan trên theme Flatsome nhanh chóng không dùng plugin

Flatsome là theme nổi tiếng dùng để tạo website cũng như trang thương mại điện tử, tuy nhiên bên trong phần bài viết lại không thể hiện mục bài viết liên quan.

 Hướng dẫn tạo bài viết liên quan trên theme flatsome
Hướng dẫn tạo bài viết liên quan trên theme flatsome

Nay HenaSeo sẽ hướng dẫn mọi người cách chèn nhanh code vào theme tạo bài viết liên quan trên theme flatsome một cách nhanh và đẹp mắt qua 2 bước.

Bước 1: Chèn function vào file function.php trong 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);

Bước 2: Chèn Code css vào file Style.css bên trong Child 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;
}

Như vậy là bạn đã hoàn thành việc tạo bài viết liên quan cho theme Flatsome, nếu bạn muốn trình bày đẹp hơn và theo thiết kế riêng bạn có thể tùy chỉnh css theo ý riêng của mình.

Bởi Minh Đăng

Với 8 năm kinh nghiệm trong lĩnh vực SEO và quảng cáo trực tuyến tại Việt Nam. Hiện tại đang là Founder của HenaSeo, cùng với việc thực chiến hàng trăm dự án Seo lớn nhỏ với mong muốn đem đến thay đổi tích cực trong việc bán hàng là đối tác của HenaSeo

1 trả lời trong “[Tips] Tạo bài viết lên quan trên theme Flatsome nhanh chóng không dùng plugin”

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *