Sắp xếp các bài (Posts) theo dạng cột (Columns) trong WordPress

Thông thường các theme của WordPress sắp xếp các bài viết (posts) theo thứ tự từ trên xuống dưới. Đối với các blog mang tính báo chí, thông tin người ta lại thích bố trí theo kiểu các cột (columns) hơn. Để sửa 1 theme cho các bài viết sắp xếp theo dạng cột như hình dưới đây thì có 2 cách.

Cách 1:

float: left; Chỉ đơn giản là dùng thủ thuật trong CSS để đưa các bài viết nằm cạnh nhau và nó sẽ tự động xuống hàng khi hết chiều rộng. Khi đó sẽ cho ra dạng cột. Tuy nhiên cách này có điều dở là phải cho các post 1 độ dài cố định để khi các bài có độ dài ngắn khác nhau thì sẽ không bị hỏng design.

Cách 2:

Cách này hoàn thiện hơn nhiều tuy nhiên phức tạp hơn 1 chút. Bạn tìm trong theme của bạn nơi bắt đầu của WordPress Loop. Loop trong WordPress luôn bắt đầu bằng:

<?php while (have_posts()) : ?>

– Trước dòng Loop bắt đầu thêm dòng dưới đây:

<?php $col = 0; $numcols = 3; ?>

Có thể thay đổi số cột nếu muốn.

– Ngay sau dòng Loop bắt đầu thêm dòng dưới đây:

<?php if ($ct && $ct%$numcols==0) echo '<div class="clearcol"></div>'; ?>
<div class="col">

– Tìm dòng kết thúc Loop. Dòng kết thúc Loop như sau:

<?php endwhile; ?>

Ngay trên dòng kết thúc Loop chèn dòng sau vào:

</div>
<?php $ct++; ?>

– Dưới dòng kết thúc Loop chèn dòng sau:

<div class="clearcol"></div>

– Cuối cùng là thêm CSS vào trong style.css

.clearcol {
clear:both;
}
.col {
float:left;
display:inline;
width:150px;
padding:0 10px;
}

Đó là cách để sắp xếp các bài theo dạng cột. Có thể thấy dạng này các hàng, cột đều ngay hàng thẳng lối với nhau, áp dụng tốt cho trường hợp các post chỉ hiển thị đoạn trích (excerpt). Nếu muốn hiển thị toàn bộ nội dung của bài viết, khi đó cách này không ổn vì độ dài ngắn của các bài viết sẽ khác nhau. Trong bài sau tôi sẽ viết về 1 cách thể hiện dạng cột khác để dùng cho trường hợp bạn muốn hiện thị đầy đủ nội dung bài viết trên Loop.