Hiển thị bài viết mới theo Category trong WordPress

Hiển thị bài viết mới theo Category trong WordPress một cách đơn giản cho người mới bắt đầu tự code chức năng Wordpress mà không cần dùng đến Plugin

Hiển thị bài viết mới theo Category trong WordPress
4.8 (95%) 16 votes
Hiển thị bài viết mới theo Category trong WordPress

Chào các bạn,
Trong bài viết này mình sẽ nói về cách Hiển thị bài viết mới theo Category trong WordPress, chủ đề này có lẽ đã được khá nhiều Website viết rồi, nhưng hầu như là sử dụng plugin. Đối với những Developer làm việc nhiều với WordPress chắc hẳn đây là một vấn đề khá đơn giản, Nhưng với những bạn mới bước vào tìm hiểu và tự code chức năng thì nó khá quan trọng cho thời điểm khởi đầu.

Hiển thị bài viết mới theo Category trong WordPress

Cùng bắt đầu nhé!

– Trước tiên bạn cần tìm hiểu về Vòng lặp(Loop) lấy danh sách bài trong WordPress

<?php while (have_posts()) : the_post(); ?>
// các thông tin bài viết
<?php endwhile ; wp_reset_query() ;?>

WordPress hỗ trợ bạn có thể lấy các bài viết 1 cách dễ dàng với vòng lặp While như bên trên, Với vòng lặp này mặc định bạn sẽ xuất ra tất cả các bài viết ở Post_type là Post(các bài trong mục POST ở trang quản trị) trong Website của mình

Với phần Các thông tin hiển thị của bài viết, bạn có thể tham khảo thêm trong bài viết này:
Các hàm cơ bản của WordPress cho người mới bắt đầu

– Vậy ta cần thêm một số điều kiện cho vòng lặp này để có thể lấy được bài viết theo Category

 <?php
$vnkings = new WP_Query(array(
'post_type'=>'post',
'post_status'=>'publish',
'cat' => 1,
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> 4));
?>
<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
// các thông tin bài viết
<?php endwhile ; wp_reset_query() ;?>

Giải thích :

  • new WP_Query(): Tạo Query mới có điều kiện bên trong
  • ‘post_type’=>’post’: Hiển thị các bài viết trong Post type là Post
  • ‘post_status’=>’publish’: Hiển thị các bài có trạng thái là đã đăng
  • ‘cat’ => 1: Hiển thị các bài viết ở Category có ID là 1 (đây chính là mấu chốt của bài này)
  • ‘orderby’ => ‘ID’,’order’ => ‘DESC’: Hiển thị bài viết từ mới đến cũ
  • ‘posts_per_page’=> 4: Hiển thị số bài viết là 4
  • $vnkings->have_posts(): Áp dụng Query trên vào vòng lặp của WordPress

Ví dụ chi tiết:
Chúng ta sẽ làm 1 box Hiển thị bài viết theo Danh mục WordPress Nâng Cao như Vnkings.com

hien-thi-bai-viet-moi-theo-category-vnkings

–Tạo phần hiển thị tên danh mục và Link:

<div class="title_category"><a href="<?php echo get_category_link( id_của_category ); ?>"><?php echo get_cat_name( id_của_category);?></a></div>

— Tạo Vòng lặp hiển thị các bài viết của Danh mục này:

 <?php
$vnkings = new WP_Query(array(
'post_type'=>'post',
'post_status'=>'publish',
'cat' => id_của_category,
//thay id_của_category bằng id danh mục bạn muốn hiển thị nhé
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> 5));
?>
<?php $i=1; while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
<?php if($i==1){ ?>
<div class="bai_dau_tien">
	<a href="<?php the_permalink() ;?>" class="anh_bai_viet"> 
		<?php the_post_thumbnail("thumbnail",array( "title" => get_the_title(),"alt" => get_the_title() ));?>
	</a>
	<a href="<?php the_permalink() ;?>" class="tieu_de_bai_viet"><?php the_title() ;?></a>
	<p class="trich_dan">
		<?php the_excerpt() ;?>
	</p>
</div>
<?php } else { ?>
<div class="cac_bai_con_lai"><a href="<?php the_permalink() ;?>"><?php the_title() ;?></a> </div>
<?php } ?>
<?php $i++; endwhile ; wp_reset_query() ;?>

Giải thích :
với mục đích hiển thị bài đầu tiên khác với các bài còn lại trong vòng lặp nên mình đã gán biến i=1, sau đó check nếu i == 1 thì sẽ hiển thị theo div bài đầu tiên, ngược lại các bài tiếp theo sẽ hiển thị như mặc định. Đây là kiến thức khá cơ bản trong PHP, nếu bạn chưa hiểu có thể để lại comment câu hỏi cho mình

– Nâng cao 1 chút
– nếu bạn muốn lấy bài trong danh mục ở 1 Post type khác không phải Post mặc định của WordPress Thì làm thế nào?

Bạn chỉ cần thay đoạn

'post_type'=>'post_type_của_bạn'

và thêm đoạn lấy ID của danh mục theo Post type này

'tax_query' => array(
	  array(
		  'taxonomy' => 'post_type_taxonomy_của bạn',
		  'field' => 'id',
		  'terms' => 'ID_Của_Danh_Mục_Sản_Phẩm'
	  )
),

Ví dụ cụ thể:

Hiển thị bài viết mới theo Category trong WordPress
Bạn có 1 Post type là Product, và Taxonomy chứa danh mục là product_cat
Thì bạn sẽ có đoạn code như sau

<?php
$vnkings = new WP_Query(array(
'post_type'=>'product',
'post_status'=>'publish',
'tax_query' => array(
	  array(
		  'taxonomy' => 'product_cat',
		  'field' => 'id',
		  'terms' => 'ID_Của_Danh_Mục_Sản_Phẩm'
	  )
  ),
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> '4'));
?>
<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
// Nội dung từng sản phẩm
<?php $i++; endwhile ; wp_reset_query() ;?>

Sau khi đã hiển thị được các bài viết mới theo danh mục, hãy vận dụng kiến thức CSS để làm đẹp cho phần này nhé. Chúc các bạn thành công!

Bài liên quan

  1. Giã sử mình muốn toàn bộ bài viết hiển thị tại trang chủ đều là bài viết trong cùng một catagory và theo post type mặc định thì làm ntn vậy ad? mình dùng theme magxp của mythemshop. hiển thị dạng viral.

  2. bác ơi em muốn kiểu này. Nếu danh mục nào có bài viết thì sẽ hiện thị như bác nói ở trên. Vì ở trên thì mình sẽ cho từng danh mục rồi. Giừo em muốn show tất cả danh mục có bài viết thì thêm vòng lặp nào bác

  3. Cảm ơn bạn viết rất hữu ích từ ad!
    Ad ơi, cho mình hỏi xíu nhé:
    Mình hiển thì post theo dạng tab, mỗi tab là một post category khác nhau, thì làm nhứ thế nào vậy ad?
    Rất mong nhận được câu trả lời!
    Xin cảm ơn!

  4. Chào mọi người, mình mới tạo một website và đang gặp phải vấn đề này, mình muốn trang chủ hiển thị bài viết theo từng chuyên mục chứ không chỉ hiển thị bài viết mới nhất. Ai có thể chỉnh sửa theme thì liên hệ giúp mình nhé, cảm ơn rất nhiều.

  5. Mình đang làm một trang wordpress vệ tinh, mình muốn hiển thị các bài viết mới trong một trang bất kì kiểu như hiển các sản phẩm mới nhất thì có câu lệnh nào đơn giản hơn không ạ?

Bình luận bài viết

Bạn có thể dùng các thẻ HTML này:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

X

Tạo live chat facebook cho website

Bạn cần tư vấn ?