Hiển thị bài viết theo category trên trang chủ

Ở bài viết trước mình đã hướng dẫn một cách custom homepage bằng cách sử dụng widget, ở bài viết này mình sẽ trình bày thêm một cách custom homepage theo kiểu hiển thị bài viết theo từng category. Kiểu hiện thị này ta thường thấy trên các theme dạng tạp chí. Kiểu hiển thị bài viết trên trang chủ sẽ có dạng như thế này: custom homepage with category

Đối với các theme thông thường

Mở file index.php và tìm đoạn code sau:

<?php while ( have_posts() ) : the_post(); ?>
		<?php  get_template_part( 'content', get_post_format() ); ?>
<?php  endwhile; ?>

Xóa đoạn code trên đi và thay bằng:

<?php
	$categories = get_categories();
	foreach ($categories as $cat) {
		$category_ids = $cat->term_id;
		$category_num = $cat->category_count;
		$category_link = get_category_link( $category_ids);
		if ($category_num >=0) {
				echo '<div><div class="title-category"><a href="'.esc_url( $category_link ).'">'.$cat->cat_name.'</a></div>';
				$args=array('category__in' => $category_ids,'showposts'=>5);
         		$my_query = new wp_query($args);
		 		echo '<ul id="post">';
                while ($my_query->have_posts()){
                     $my_query->the_post(); 
							echo '<li><h2><a href="'.get_permalink().'">'.get_the_title().'</h2></li>';
				}
		 		echo '</ul> </div>';
			}
		}?>

Code trên sẽ hiển thị tên của category và 5 bài viết mới nhất thuộc category đó. Nếu bạn muốn hiển thị ảnh thumbnail cho bài viết và một đoạn ngắn nội dung thì có thể sử dụng hai lệnh the_post_thumbnail()the_excerpt() bổ sung vào đoạn code trên.

Đối với Genesis childthemes

Ta sẽ sử dụng đoạn code sau chèn vào file functions.php:

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'child_do_custom_loop' );
function child_do_custom_loop() {
	$categories = get_categories();
	if(is_home()) {
       $categories = get_categories();
       foreach ($categories as $cat) {
        $category_ids = $cat->term_id;
        $category_num = $cat->category_count;
        $category_link = get_category_link( $category_ids);
        if ($category_num >=0) {
                echo '<div><div class="title-category"><a href="'.esc_url( $category_link ).'">'.$cat->cat_name.'</a></div>';
                $args=array('category__in' => $category_ids,'showposts'=>5);
                $my_query = new wp_query($args);
                echo '<ul id="post">';
                while ($my_query->have_posts()){
                     $my_query->the_post(); 
                            echo '<li><h2><a href="'.get_permalink().'">'.get_the_title().'</h2></li>';
                }
                echo '</ul> </div>';
            }
        }
}}

Đoạn code sau sẽ hiển thị bài viết giống như hình bên trên kèm với ảnh thumbnail cho bài viết đầu tiên trong từng category:

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'child_do_custom_loop' );
function child_do_custom_loop() {
	$categories = get_categories();
	if(is_home()) {
	$j=0;
	foreach ($categories as $cat) {
		$category_ids = $cat->term_id;
		$category_num = $cat->category_count;
		$category_link = get_category_link( $category_ids);
		if ($category_num >=0) {
			$j++;
			if($j%3 == 1) {
				echo '<div id="left"><div class="title-category"><a href="'.esc_url( $category_link ).'">'.$cat->cat_name.'</a></div>';
				$args=array('category__in' => $category_ids,'showposts'=>5);
         		$my_query = new wp_query($args);
		 		echo '<ul id="bai4">';
				$e=0;
                while ($my_query->have_posts()){
                     $my_query->the_post(); 
					 $e++;
					 	if($e==1) {
						 	echo '<li class="four"><div class="imgthum3">';the_post_thumbnail(array(320,200));
							echo '</div><div class="titlefirst2"><h2><a href="'.get_permalink().'">'.get_the_title().'</a></h2></div>';
							echo '</li>';
			   			}else {
							echo '<li><div class="titlerandom"><h2><a href="'.get_permalink().'">'.get_the_title().'</h2></div></li>';
						}
				}
		 		echo '</ul> </div>';
			}
			if($j%3 == 2) {
				echo '<div id="right"><div class="title-category"><a href="'.esc_url( $category_link ).'">'.$cat->cat_name.'</a></div>';
				$args=array('category__in' => $category_ids,'showposts'=>5);
         		$my_query = new wp_query($args);
		 		echo '<ul id="bai4">';
				$e=0;
               while ($my_query->have_posts()){
                     $my_query->the_post(); 
					 $e++;
					 	if($e==1) {
						 	echo '<li class="four"><div class="imgthum3">';the_post_thumbnail(array(320,200));
							echo '</div><div class="titlefirst2"><h2><a href="'.get_permalink().'">'.get_the_title().'</a></h2></div>';
							echo '</li>';
			   			}else {
							echo '<li><div class="titlerandom"><h2><a href="'.get_permalink().'">'.get_the_title().'</h2></div></li>';
						}
				}
		 		echo '</ul></div> ';
			}
			if($j%3 == 0) {
				echo '<div style="clear: both"></div><div id="mid"><div class="title-category"><a href="'.esc_url( $category_link ).'">'.$cat->cat_name.'</a></div>';
				$args=array('category__in' => $category_ids,'showposts'=>3);
         		$my_query = new wp_query($args);
		 		echo '<ul id="bai5">';
               while ($my_query->have_posts()){
                     $my_query->the_post(); 
						 	echo '<li class="five"><div class="imgthum4">';the_post_thumbnail(array(150,100));
							echo '</div><div class="title4"><h2><a href="'.get_permalink().'">'.get_the_title().'</a></h2></div>';
							the_excerpt();
							echo '<div style="clear:both"></div></li>';
				}
		 		echo '</ul></div> ';
			}
		}
	} }
}

Bổ sung thêm một số lớp css vào file style.css:

#bai4 li{list-style-image: url(images/li.png);}
.titlefirst, .tit, .titlefirst2 {list-style: none !important;font-size: 16px;font-weight: bold;height: 38px;overflow: hidden;}
.tit {border-bottom: #CCCCCC solid 1px;}
.titlefirst2 {padding: 10px 0 10px 0;}
.titlefirst a,.titlefirst2 a {color: #333 !important;font-weight: 500;}	
.first {width: 350px;}
.imgthum {width: 350px;height: 250px;}
.imgthum img{width: 350px;height: 250px;}
.third {width: 165px;float: left;}
#left, #right {float: left;width: 320px;}
#left {margin-right: 20px;}
#bai4 {padding-left: 15px;}
.four {width: 320px;margin-left: -15px !important;}
.four {list-style: none !important;}
.title-category {margin-bottom: 15px;}
.title-category a{color: #666666 !important;font-size: 17px;font-weight: 600;}
#mid {border-top: 1px solid #D6D6D6;padding-top: 10px;}
#bai5, .five{width: 100%;}
.five {margin-bottom: 10px;}
.imgthum4, .imgthum4 img {width: 150px;height: 100px;}
.imgthum4 {float: left;border: #D6D6D6 1px solid;padding: 3px;margin-right: 10px;}
.title4 a{color: #2ba6cb;font-size: 16px;}
.five p {color: #666666 !important;}

Kết quả chúng ta sẽ được như thế này: ket quaBạn có thể tham khảo đoạn code trên và chỉnh sửa lại cho phù hợp với mục đích của bạn. Chúc bạn thành công!

Hiển thị bài viết theo category trên trang chủ
5 (100%) 1 vote

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. Hi Mr Bảo
    bạn có thể giúp mình đoạn code hiển thị bài viết dạng như hiện thị bìa viết theo category trên trang chủ, nhưng nó là của Listing trong mấy theme bất động sản được không, do bài viết của mình đều nằm trong Listing trong Dashboard chứ không phải trong Post
    cảm ơn bạn nhiều

  2. Tut rất chi tiết và dễ hiểu với newbie như minhg

  3. Sao em làm như hướng dẫn mà ko đc ạ?

  4. mình làm không được {c26}

  5. Anh ơi, cái này thì lúc chọn category hiển thị thì chọn ở đâu à???

  6. bạn ơi cho mình hỏi là khi mình làm một cái Custom Post Type và custom-taxonom-cho-custom-post-type để tạo danh mục và sản phẩm riêng ko dùng của wordpress. Khi đó lấy danh sách danh mục ra thì truy vấn thế nào. Giúp mình với thank nhiều!

  7. Bảo cho mình hỏi vậy như trang này họ hiển thị các sản phẩm của họ trên 1 trang bất kỳ giống dạng tạp chí họ có phải dùng cách này không. Mình thấy họ không dùng pluggin bán hàng gì hết
    Trang của họ là: tu van san go.com

  8. Chào bảo. Mình làm như bạn nhưng ko được. Minh dùng theme MH theme. Mình muốn hiện các bài viết theo từng catolog như bạn nói. Phần cần sửa nó năm ở file fuction.php. Đã sửa theo đoạn 1. Nhưng lúc hiện ra nó ko theo 1 catalog nao cả. Nó gán linh tinh theo từng cái 1. ko chia theo từng ô 1. Bạn giúp mình sửa lại xem thế nào. Cảm ơn bạn

  9. Không hiểu sao cứ khi em chèn thêm code vào theme là nó lại hiển thị lên trang chủ mà lại chẳng có tác dụng gì cả.
    Trong 2 cách trên, cách thứ nhất thì file index của em không có đoạn code đó. Cách hai thì như thế này đây:
    http://upanh.in/cTg

    Trước giờ em thêm code vào theme chưa bao giờ được!
    Mong anh chỉ giúp ạ!

  10. Mình mới làm quen với framework (Genesis childthemes), thử làm theo nhưng không thấy sự thay đổi.

    Cám ơn vì nhiều bài viết hữu ích.

  11. Có cách nào cho các bài viết bên dưới bài viết đầu kia nằm sang bên cạnh được không bạn Bảo ơi??
    kiểu giống như các chuyên mục trên trang chủ báo Tuổi trẻ đó bạn
    Hy vọng bạn giúp được. Cám ơn nhiều {c1}

  12. Chào bạn Bảo:
    Mình sửa code như bạn hướng dẫn vào file này: ChocoTheme: Main Index Template (index.php)
    Nó thành như sau:

    term_id;
    $category_num = $cat->category_count;
    $category_link = get_category_link( $category_ids);
    if ($category_num >=0) {
    echo ‘‘.$cat->cat_name.’‘;
    $args=array(‘category__in’ => $category_ids,’showposts’=>5);
    $my_query = new wp_query($args);
    echo ”;
    while ($my_query->have_posts()){
    $my_query->the_post();
    echo ‘‘.get_the_title().”;
    }
    echo ‘ ‘;
    }
    }?>

    max_num_pages > 1 ) : ?>

    <?php next_posts_link( __( '← Older posts’, ‘choco’ ) ); ?>
    <?php previous_posts_link( __( 'Newer posts →’, ‘choco’ ) ); ?>

    Nhưng sao nhấn F5 thấy không thay đổi được gì bạn ơi. Giúp mình với, mình mới tập làm WP mà nói về code thì mình bù luôn. Giúp mình với. Nếu được bạn cho 2 lệnh the_post_thumbnail() và the_excerpt() giúp mình với.
    Thanks!

  13. Chào bạn, cho mình hỏi nếu mình chỉ lấy 1 chuyên mục thôi thì như thế nào?
    VD mình có chuyên mục Dịch vụ và Tin tức, trong tin tức có các chuyên mục con. Và mình chỉ muốn hiển thị chuyên mục Tin tức và các chuyên mục con của nó thôi.

  14. Chào bạn,
    Hiện mình cũng đang làm blog cá nhân nhưng còn phần các chuyên mục hiển thị như trên thì chưa làm được.Mình sử dụng theme canyon.
    Địa chỉ trang blog của mình là:http://quocvuongvn.tk/
    Mình muốn hiển thị các chuyên mục như keenh14.vn có được không bạn và chỉnh chỗ nào?
    Cảm ơn nhiều

  15. chào bạn.
    ví dụ mình tạo một category abc với các cate con là abc1 abc2 abc3.bình thường thì khi vào category abc thì sẽ hiện tất cả các bài viết của các cate con.nhưng mình không muốn vậy mà chỉ hiện bài của cate abc thôi thì phải làm thế nào?

  16. Chào các bạn cho mình hỏi tí, trang web của mình là greenaroma.vn lúc đầu các ” Chuyên mục” sắp xếp lộn xộn do khi thêm chuyên mục mới thì nó nằm dưới cùng mình muốn sắp xếp lại theo đúng yêu cầu mình muốn mà không được. Nên mình xóa tất cả các chuyên mục sau đó làm lại cho đúng thứ tự: Nhưng khi mình làm xong thì các Chuyên mục trong trang chủ hiện thị theo từng nhóm nó mất 3 cái mà thay vào đó cái “Dầu toàn thân – Body Oil” nó dài thêm 3 hàng dài giống nhau nữa, lúc trước nó có 3 mục là ” Xà phòng thiên nhiên, Dụng cụ xông tinh dầu…” nhưng giờ thì tiêu luôn, các bạn vào xem trong trang web và giúp tí. thank các bạn

  17. Không liên quan. Nhưng bác cho hỏi đăng kí aff của godady ntn vậy. Thanks: kieplamthue2701@gmail.com

  18. Mình bị báo lỗi tại dòng code: $categories = get_categories(); như thế này:
    Parse error: syntax error, unexpected ‘$categories’ (T_VARIABLE) in H:\xampp\htdocs\nhadep24.net\wp-content\themes\customizr-child-01\functions.php on line 8
    Bạn chi mình cách sửa với. Thanks you!

  19. Cho mình hỏi chút về đoạn code cho Genesis Childtheme hiển thị ra 3 category. Nhưng web của mình lại có nhiều hơn 3 category mà mình muốn hiển thị những categiry theo ý mình thì có chỉnh sửa như thế nào ? với lại sử dụng đoạn code này thì có tác dụng hiển thị trên trang chủ home page hay trang trong ?

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!