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

Hướng dẫn hiển thị bài viết theo Category cho WordPress đơn giản nhất.

Chào các bạn,

Như các bạn cũng thấy, hiện nay cho dù là một blog cá nhân thì việc chỉ hiển thị danh sách các bài viết mới nhất sẽ làm cho trang web kém phần cuốn hút. Vì vậy, để tăng thêm tính chuyên nghiệp cho blog chúng ta thường hiển thị bài viết theo từng chuyên mục ở từng box khác nhau.

Tuy nhiên, không phải bạn nào cũng biết cách hiển thị bài viết theo category trong WordPress cả. Vì vậy, hôm nay mình xin chia sẻ tới các bạn thủ thuật WordPress hiển thị bài viết theo Category.

Các bước thực hiện

Bước 1: Tìm hiểu về vòng lặp của WordPress

Rất dễ, WordPress đã hỗ trợ chúng ta lấy ra danh sách các bài viết nhanh chóng với vòng lặp While đơn giản như sau:

<?php while (have_posts()) : the_post(); ?>
// Thông tin bài viết
<?php endwhile ; wp_reset_query() ;?>
 Tuy nhiên, mặc định thì vòng lặp này sẽ lấy ra danh sách các bài viết mới nhất trên blog của bạn. Vậy làm sao để chúng ta lấy ra được danh sách bài viết mới theo một Category nhất định? Nào, hãy cùng tới bước 2 ngay thôi.

Bước 2: Thêm điều kiện cho vòng lặp

Vậy, để khắc phục vấn đề ở trên, hướng khắc phục của chúng ta là viết thêm một vài điều kiện cho vòng lặp này. Và dưới đây là một đoạn điều kiện của vòng lặp.

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

Giải thích ý nghĩa:

  • 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
  • ‘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
  • $mocgin->have_posts(): Áp dụng Query trên vào vòng lặp của WordPress

Đoạn code này được tham khảo trên wordpress.vnkings.com.

Bước 3: Viết code cho bài viết

Bước này thì lại cần phải xem xét xem bạn muốn hiển thị những thông tin nào của bài viết ra. Ở ví dụ này, mình sẽ hiển thị Tiêu đề, Thumbnail và một đoạn mô tả. Như vậy, mình sẽ có được đoạn code như sau:

<li class="list-item">
<span class="item-image">
<div class="thumbnail">
<a href="<?php the_permalink() ;?>">
<?php the_post_thumbnail("thumbnail",array( "title" => get_the_title(),"alt" => get_the_title() ));?>
</a>
</div>
</span>
<span class="item-info">
<a href="<?php the_permalink() ;?>" class="item-title"><?php the_title() ;?></a>
<span class="excerpt"><?php the_excerpt() ;?></span>
</span>
</li>

OK, bây giờ chúng ta chỉ việc ghép nó với đoạn code bên trên nữa là được. Và chúng ta có đoạn code hoàn chỉnh như sau:

<?php
 $mocgin = new WP_Query(array(
 'post_type'=>'post',
 'post_status'=>'publish',
 'cat' => 1,
 'order' => 'DESC',
 'posts_per_page'=> 4
 ));
?>
<?php while ($mocgin->have_posts()) : $mocgin->the_post(); ?>
 <li class="list-item">
 <span class="item-image">
 <div class="thumbnail">
 <a href="<?php the_permalink() ;?>"><?php the_post_thumbnail("thumbnail",array( "title" => get_the_title(),"alt" => get_the_title() ));?></a>
 </div>
 </span>
 <span class="item-info">
 <a href="<?php the_permalink() ;?>" class="item-title"><?php the_title() ;?></a>
 <span class="excerpt"><?php the_excerpt() ;?></span>
 </span>
 </li>
<?php endwhile ; wp_reset_query() ;?>

Bước 4: Chèn code

Sau khi đã có được đoạn code hoàn chỉnh, công việc duy nhất bây giờ của chúng ta là dán nó vào vị trí mà bạn muốn hiển thị. Nếu là trên trang chủ thì bạn dán vào trong file index.php, trang bài viết thì là single.php,…

Tổng kết

Các bạn nhớ là viết thêm cả CSS cho nó để thêm đẹp mắt nhé. Như vậy là mình đã hướng dẫn các bạn hoàn thành việc hiển thị bài viết theo Category cho WordPress rồi. Hi vọng sẽ giúp ích được cho bạn!

Nếu thấy Blog của mình hữu ích hãy chia sẻ nó tới bạn bè của mình và cũng đừng quên theo dõi blog qua email nữa nhé! Và đừng quên cho mình 5 sao nếu thấy bài viết hữu ích đấy ?

Cùng chuyên mục:

Add Comment

9 Comments

  1. Trường Nguyễn
    32 Bình luận
    12/03/2017
    • Mộc
      Admin
      12/03/2017
  2. Vũ Minh Chiến
    14 Bình luận
    13/03/2017
    • Mộc
      Admin
      13/03/2017
  3. Tạ Hữu Nam
    60 Bình luận
    16/03/2017
  4. Bùi Công Luận
    28 Bình luận
    07/04/2017
    • Mộc
      Admin
      07/04/2017
  5. Minh Hoàng
    2 Bình luận
    12/06/2017
  6. David Nguyen
    9 Bình luận
    15/09/2017