Bài viết sau mình sẽ hướng dẫn bạn cách hiển thị bài viết theo category trên trang chủ. Trong bài viết này mình sẽ dùng tạo ra shortcode có tham số là các cat slug, số lượng bài viết, tiêu đề. Bạn muốn lấy bài viết thuộc category nào với số lượng bao nhiêu thì bạn chỉ cần nhập tham số vào shortcode là được. Việc tạo ra một shortcode như này sẽ giúp bạn hiển thị bài viết trong wordpress theo category ở bất kỳ đâu bạn muốn. Bài viết này thuộc chuyên mục WordPress Development.

Cách hiển thị bài viết theo category trên trang chủ tạo shortcode

Sau đây mình sẽ hướng dẫn bạn cách hiển thị bài viết theo category trên trang chủ bằng cách tạo shortcode. Việc sử dụng code mình tự viết ra sẽ tránh việc bạn phải cài thêm plugin. Sẽ làm nặng website của mình thêm. Việc sử dụng shortcode cũng không quá khó khăn, mình sẽ hướng dẫn bạn chi tiết nhất.

Đầu tiên trong file function.php của theme bạn thêm đoạn code sau:

add_shortcode( 'csw_post_by_cat_id', 'csw_post_by_cat_id_fc' );
function csw_post_by_cat_id_fc( $args_sc ) {

    $title = isset($args_sc['title']) ? sanitize_text_field( $args_sc['title'] ) : 'Danh sách các bài viết';
    $total = isset($args_sc['total']) ? sanitize_text_field( $args_sc['total'] ) : 5;
    $cat_lug = isset($args_sc['cat_lug']) ? sanitize_text_field( $args_sc['cat_lug'] ) : '';

    $args=[
        'post_type' => 'post',
        'posts_per_page' => $total,
        'order' => 'desc',
        'category_name' =>  $cat_lug
    ];

    $blog = new \WP_Query($args);
        $html = "";
        $html .= "<div class='csw-list-post-by-cat'>";
        $html .= "<p class='csw-titlet'>".$title."</p>";
         	$html .= "<div class='csw-inner-post'>";
	        if($blog->have_posts()) : while($blog->have_posts()) : $blog->the_post();

	            $html .= '<div class="csw-item">';
	                $html .='<p class="post-title">';
	                    $html .= '<a href="'.get_the_permalink().'">'.get_the_title().'</a>';
	                $html .='</p>';
	            $html .= '</div>';

	        endwhile; endif; wp_reset_postdata();
	        $html .= "</div>";
        $html .= "</div>";
    
    return $html;
}

Ở đây mình tạo ra shortcode có tham số. Nghĩa là bạn có thể lấy danh sách bài viết theo cat slug, số lượng bài viết bạn muốn lấy và tiêu đề khi hiển thị ra. Bạn sử dụng đoạn shortcode sau và tùy chỉnh các tham số:

[csw_post_by_cat_id title="Danh sách các bài viết thuộc " total="10" cat_lug=""]

• Titlte: Là tên tiêu đề của cả khối danh sách các bài viết này
• Total: là số lượng bài viết bạn muốn lấy
• Để lấy cat slug bạn vào Bài viết -> Chuyên mục -> copy cat slug thêm vào tham số.

Tiếp theo để hiển thị bài viết theo category trên trang chủ được đẹp hơn bạn có thể thêm đoạn code CSS sau cho đẹp hơn.

.csw-list-post-by-cat {
  padding: 30px 0 30px 0;
}
.csw-list-post-by-cat .csw-titlet {
  margin: 0;
  background: #698ba9;
  color: white;
  font-weight: bold;
  display: inline-block;
  padding: 8px 20px 8px 20px;
  line-height: 24px;
  font-size: 17px;
}
.csw-list-post-by-cat .csw-inner-post {
  border: 1px solid #e5e5e5;
  padding: 30px 25px 30px 25px;
}
.csw-list-post-by-cat .post-title {
  margin: 0 0 10px 0;
  font-size: 17px;
  line-height: 24px;
  color: #62718d;
  font-weight: 600;
}
.csw-list-post-by-cat .post-title a {
  margin: 0 0 10px 0;
  font-size: 17px;
  line-height: 24px;
  color: #62718d;
  font-weight: 600;
}
.csw-list-post-by-cat .post-title a:hover {
  color: #f00;
}

Cuối cùng kết quả sau khi hoàn thành nó sẽ hiển thị dưới dạng sau

Kết Luận

Qua bài viết vừa rồi Chuẩn Seo Web đã hướng dẫn bạn cách hiển thị bài viết theo category trên trang chủ dùng shortcode tự tạo. Hy vọng sẽ giúp ích cho bạn. Nếu có thắc mắc hay câu hỏi gì bạn vui lòng để lại bình luận bên dưới. Cám ơn bạn đã theo dõi bài viết.