Có nhiều kiểu hiển thị bài viết khác nhau ra trang chủ. Kiểu thường gặp nhất đó là dạng danh sách (Lists) hoặc là dạng lưới (Grid). Và một dạng nữa mình muốn nhắc tới đó là dạng cột (Column). Nó sẽ tách bài viết ra thành cột trái và cột phải bằng cách thêm một chút mã của WordPress và CSS.

Tuy nhiên cách này sẽ không sử dụng Bootstrap. Bootstrap khi chia cột sẽ dùng col-sm-6 và bài viết sẽ lặp từ trái sang phải. Nhưng cách bên dưới đây sẽ lặp từ trên xuống dưới. Nếu bạn đang tò mò thì hãy xem cách làm dưới nhé.

Đầu tiên bạn sẽ viết mã HTML và PHP

<?php  $query_args = array(
    'posts_per_page'      => 8,
    'post_type'           => 'post',
    'meta_key'            => 'nb_type', 
    'meta_value'          => '1'
);
$query = new WP_Query( $query_args ); ?>

<div class="left-item">
<?php 
    $row_start = 1; 
    while ( $query->have_posts() ) : $query->the_post(); 
        if( $row_start % 2  != 0) { ?>
        <div class="box">
           <?php get_template_part( 'tpl/job','item' ); ?>
        </div>
    <?php
        }
        ++$row_start; 
    endwhile;
?>
</div>
<div class="right-item">
<?php 
     $query_args = array(
    'posts_per_page'      => 8,
    'post_type'           => 'job',
    'meta_key'            => 'nb_type', 
    'meta_value'          => '1', 
    'offset' => 4,
    );
    $query = new WP_Query( $query_args );
    $row_start = 1; 
    while ( $query->have_posts() ) : $query->the_post(); 
        if( $row_start % 2  != 0) { ?>
        <div class="box">
           <?php get_template_part( 'tpl/job','item' ); ?>
        </div>
    <?php
        }
        ++$row_start; 
    endwhile;
?>
</div>

Tiếp theo mình sẽ viết mã CSS để trang trí

.box:nth-child(odd)
{
  background: #f5f5f5;
}
.box:nth-child(event) {
  background: #fff;
}
.left-item {
    width: 49%;
    float: left;
    border: 1px solid #c2c2c2;
}
.right-item {
    width: 49%;
    float: right;
    border: 1px solid #c2c2c2;
}

Kết quả sau khi thực hiện xong trông cũng bắt mắt đấy chứ!

chia-cot-wordpress

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *