有没有办法计算CPT中的职位数量，并在三分之一的职位上添加不同的类别？
我使用砌体作为网格，希望随机显示两种不同大小的图像。我做了所有这些工作，但图像没有完全对齐，这就是为什么网格看起来不好（中间有间隙）。我想，如果1/3的帖子尺寸更小，它会对齐得更好。
所以我想要的是：
两种不同图像大小的网格在刷新时会发生变化（因此每次刷新和大小图像切换的布局都不同）
循环随机显示项目这是我当前的代码： <?php
/**
* Template Name: Teampagina
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Deliciae Design custom
* @since 1.0.0
*/
get_header(); ?>
<div id="primary" <?php astra_primary_class(); ?>>
<?php astra_primary_content_top(); ?>
<main id="main" class="site-main team-page" role="main">
<header class="entry-header <?php astra_entry_header_class(); ?>">
<h1 class="entry-title text-center" itemprop="headline"><?php echo post_type_archive_title(); ?></h1>
<form class="quicksearch">
<div class="input-group">
<input type="text" id="qs-input" placeholder="Zoek op naam">
<i class="fa fa-search"></i>
</div>
</form><!-- quicksearch -->
</header><!-- .entry-header -->
<?php
$args = array(
\'orderby\' => \'rand\',
\'post_type\' => \'focus_team\'
);
$query = new WP_Query( $args );
$count = 0; if ( $query->have_posts() ) : ?>
<ul id="team-masonry">
<li class="grid-sizer"></li>
<?php while ( $query->have_posts() ) : $query->the_post();
?>
<li class="grid-item size-<?php echo rand(1,2); ?>">
<a href="<?php echo get_post_permalink(); ?>">
<div class="fo--info">
<?php the_post_thumbnail(\'team_member\'); ?>
<div class="fo--overlay">
<div class="table">
<div class="item">
<?php the_title( \'<h3 class="entry-title" itemprop="headline">\', \'</h3>\' ); ?>
<p>functie</p>
</div>
</div>
</div>
</div>
</a>
</li>
<?php endwhile; wp_reset_postdata(); ?><!-- reset loop -->
</ul>
<?php endif;?>
</main><!-- #main -->
<?php astra_primary_content_bottom(); ?>
</div><!-- #primary -->
<?php get_footer(); ?>
<script>
(function($){
var qsRegex;
var $container = $(\'#team-masonry\');
$container.isotope({
itemSelector: \'.grid-item\'
});
var $grid = $(\'#team-masonry\').isotope({
resizable: true,
// set itemSelector so .grid-sizer is not used in layout
itemSelector: \'.grid-item\',
columnWidth: 300,
masonry: {
columnWidth: \'.grid-sizer\'
},
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope(\'layout\');
});
// use value of search field to filter
var $quicksearch = $(\'input#qs-input\').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), \'gi\' );
$grid.isotope();
}, 200 ) );
// debounce so filtering doesn\'t happen every millisecond
function debounce( fn, threshold ) {
var timeout;
return function debounced() {
if ( timeout ) {
clearTimeout( timeout );
}
function delayed() {
fn();
timeout = null;
}
timeout = setTimeout( delayed, threshold || 100 );
}
}
})( jQuery );
</script>
最合适的回答,由SO网友:inarilo 整理而成
解释见注释：
<?php
...
if ( $query->have_posts() ) :
//number of small ones needed = a third of total number of posts
$numsmallneeded = round($query->post_count / 3);
...
while ( $query->have_posts() ) : $query->the_post();
//if no more small sizes are needed, use big
if ( !$numsmallneeded ) $size = 1;
//if number of small sizes needed = number of remaining posts, use small
else if ( $numsmallneeded == $query->post_count - $query->current_post) $size = 0;
//else pick at random
else $size = rand(0, 1);
//if small was picked, reduce number of small ones needed by 1
if ( !$size ) $numsmallneeded--;
?>
<li class="grid-item size-<?php echo ++$size; /*add 1 before printing*/ ?>">
...
<?php endwhile; wp_reset_postdata(); ?><!-- reset loop -->
</ul>
<?php endif;?>
SO网友:Johansson
这个WP_Query 课程提供了您所需要的两个方面：
通过使用$query->post_count 您可以获取查询中的帖子总数。
通过使用$query->current_post 您可以获得循环中当前帖子的索引。
因此，要检查当前帖子是否在总帖子的前三分之一，您可以使用：
<?php if ( $query->current_post < floor( $query->post_count / 3 ) ) { echo \'some-class\'; } ?>
