Hiển thị bài viết trong wordpress dạng lưới

Thông thường một giao diện wordpress sẽ hiển thị bài viết dạng blog, mình có một theme và hiển thị kiểu này. Nhìn nhàm chán thật, qua tìm hiểu trên mạng mình thấy có bài hướng dẫn nên share cho các bạn nào chưa biết muốn tìm hiểu như mình.

(Kiểu bài viết hiển thị dạng lưới cần thực hiện)
1. Đầu tiên các bạn mở style.css
Thêm vào code:

Code:

#gridcontainer{margin: 20px 0; width: 100%; }#gridcontainer h2 a{color: #77787a; font-size: 13px;}#gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}#gridcontainer .griditemright{float: left; width: 278px;}#gridcontainer .postimage{margin: 0 0 10px 0;}

2. Các bạn mở file catagories.php hoặc archive.php tùy theo theme, xóa phần code hiển thị bài viết cũ đi và thay bằng.

Code:

<div id="gridcontainer">
<?php$counter = 1; //start counter$grids = 2; //Grids per rowglobal $query_string; //Need this to make pagination work/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');if(have_posts()) : while(have_posts()) :  the_post(); ?><?php//Hiển thị bài viết cột tráiif($counter == 1) :?>   <div class="griditemleft">    <div class="postimage">     <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>    </div>                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>   </div><?php//Hiển thị bài viết cột bên phảielseif($counter == $grids) :?><div class="griditemright">    <div class="postimage">     <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>    </div>                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>   </div><div class="clear"></div><?php$counter = 0;endif;?><?php$counter++;endwhile;//Chèn code phân trang ở đâyendif;?> </div>

Code trên do mình sưu tầm trên mạng, chia sẽ các bạn nguyên văn code.
Demo online: http://depvn.info/dulieu/ngam_2/nguoi-dep