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

Bài trước tôi đã giới thiệu về cách sắp xếp các bài theo dạng cột trong WordPress. Ở cách sắp xếp theo bài trước thì các bài (post) được sắp xếp ngay hàng thẳng lối với nhau, phù hợp với những blog chỉ hiển thị các đoạn trích (except) ở trang đầu. Trong trường hợp blog không hiển thị đoạn trích mà hiển thị toàn bộ nội dung của bài lên trang đầu thì cách làm như bài trước không còn phù hợp vì khi đó các bài với độ dài ngắn khác nhau sẽ làm xuất hiện các khoảng cách không đều giữa các bài trong cột. Để giải quyết vấn đề này tôi giới thiệu cách sắp xếp thứ 2. Hình vẽ dưới đây mô tả kết quả của cách sắp xếp này:

Để có kết quả như hình trên, bạn bắt đầu bằng việc tìm trong theme 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;
$col_count = 3; //số cột
$cols = array(); 
?>

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

<?php              
if($col >= $col_count) $col = 0;
ob_start();
?>

– Tiếp theo 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 này, chèn đoạn code sau:

<?php
$output = ob_get_contents();
ob_end_clean();
$cols[$col++] .= $output; 
?>

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

<div class="columns">
<?php
foreach($cols as $key => $col)
  echo '<div class="column column' . $key . '">' . $col . '</div>';
?>
</div>

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

.columns .column {
    float: left;
    padding-right: 3%;
    width: 25%;
}

Đến đây sẽ có được kết quả giống như hình mô phỏng. Cách này rất phù hợp cho các web dạng báo chí, tin tức.