Hiển thị posts dạng grid

Có 2 hình thức hiển thị posts dạng grids, xác định số lượng posts hiển thị trên 1 dòng và thêm thẻ HTML để tạo hiển thị riêng biệt hoặc cách chúng ta đánh dấu ngắt dòng vào post ở cuối bằng việc thêm class cho nó.

Đếm chỉ số post - xác định post bắt đầu và kết thúc:

if( $my_query->have_posts() ) {

echo '';

$i = 0;

while ($my_query->have_posts()) : $my_query->the_post();

if($i % 4 == 0) { ?>

<?php

}

?>

<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>

<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p>

</div>

<?php

if($i != 0 && $i % 4 == 0) { ?>

</div><div class="clearfix"></div>

<?php

}

$i++;

endwhile;

}

Giải thích:

Ví dụ đoạn snippet sau sẽ chia kết quả lặp post thành 2 cột và bao trong thẻ div (div.left, div.right).

<?php

query_posts('YOUR QUERY HERE');

$i = 0;

// Thanks to PaoloVIP for the suggestion to add round() for loops with an odd # of results

if ( have_posts() ) : while ( have_posts() ) : the_post();

if ($i == 0) echo '<div id="left">';

if ($i == (round($wp_query->post_count / 2))) echo '</div><div id="right">';

the_content(); // or whatever custom content you desire

if ($i == round($wp_query->post_count)) echo '</div>';

$i++;

endwhile; endif;

?>

Thêm class cho item đầu và cuối.

1. Bằng cách can thiệp vào hook tạo class cho mỗi bài viết trong vòng lặp, sửa filter 'post_class' trong functions.php

<?php

/**

* Archive Post Class

* @since 1.0.0

*

* Breaks the posts into three columns

* @link http://www.billerickson.net/code/grid-loop-using-post-class

*

* @param array $classes

* @return array

*/

function be_archive_post_class( $classes ) {

global $wp_query;

if( ! $wp_query->is_main_query()

|| is_singular() #Don't run on single posts or pages

)

return $classes;

$classes[] = 'one-third'; #add class to all posts

#grab the current post counter, ie: 3 columns

if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 3 )

$classes[] = 'first';

if(($wp_query->current_post+1) % 3 == 0) $classes[]='last';

return $classes;

}

add_filter( 'post_class', 'be_archive_post_class' );

Gọi hàm post_class() vào thẻ bao mỗi post.

while(have_posts()):

the_post();

?>

</div>

<?php

endwhile;

Bạn cũng có thể thêm trực tiếp trong vòng lặp lấy từng post.

while ( $cat_posts->have_posts() )

{

$cat_posts->the_post();

$classes=array();//print($cat_posts->current_post);

if( 0 == $cat_posts->current_post || 0 == $cat_posts->current_post % 4 )

$classes[] = 'first';

if(($cat_posts->current_post+1) % 4 == 0) $classes[]='lastcolumn';

?>

<?php include(locate_template('loop.php'))?>

<?php

}

2. Thiết lập số lượng posts hiển thị trên một phân trang.

Điều chỉnh hiển thị vừa đủ dòng và cột, bạn cần sửa tham số 'posts_per_page'. Ví dụ sau tôi cho hiển thị 9 dòng, mỗi dòng 3 posts => có 27 posts cần lấy.

<?php

add_filter( 'pre_get_posts', 'be_archive_query' );

/**

* Archive Query

*

* Sets all archives to 27 per page

* @since 1.0.0

* @link http://www.billerickson.net/customize-the-wordpress-query/

*

* @param object $query

*/

function be_archive_query( $query ) {

if( $query->is_main_query() && $query->is_archive() ) {

$query->set( 'posts_per_page', 27 );

}

Hiển thị posts dạng grid

Made with help of Dr.Explain