[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

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 viết [Tips] Tạo bài viết lên quan trên theme Flatsome nhanh chóng không dùng plugin đã xuất hiện đầu tiên vào ngày Dịch vụ SEO của HenaSeo lên top google, quảng cáo google ads nhanh chóng.

Đăng bởi HenaSeo.Vn

HenaSeo.Vn - HenaSeo giúp bạn hiểu rõ về hành vi đối tượng khách hàng tiềm năng, về tệp khách hàng của doanh nghiệp bạn đang ở đâu từ đó giúp bạn lựa chọn được công cụ nào và sử dụng chúng như thế nào để đạt hiệu quả cao nhất và điểm cuối cùng là bán được hàng. Hotline: 0976794040 Website: https://henaseo.vn

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s

Create your website at WordPress.com
Bắt đầu
%d bloggers like this: