WordPress自定义帖子在父子项<=3时创建新行

Question

我在wordpress中有一个自定义的post类型，它向一行添加新的代理。如何创建一个条件语句来检查行中的帖子数量，如果超过4个帖子，则创建一个新的div并将新的帖子附加到新行？

<?php get_header(); ?>
<div class="agent-wrap">
<?php
$args = array(
'post_type' => 'agents',
'post_status' => 'publish',
'posts_per_page' => '12'
);
$agents_loop = new WP_Query( $args );
if ( $agents_loop->have_posts() ) : ?>
<div class="agent-row">
<?php
while ( $agents_loop->have_posts() ) : $agents_loop->the_post();
// variables
$name = get_field( 'agent_name' );
$position = get_field( 'agent_position' );
$phone = get_field( 'agent_phone' );
$email = get_field( 'agent_email' );
$image = get_field( 'agent_image' );
$link = get_the_permalink();
?>
<a href="<?php echo $link; ?>">
<div class="agent">
<div class="agent-bg"></div>
<div class="agent-content">
<h3><?php echo $name; ?></h3>
<h5><?php echo $position; ?></h5>
<hr class="divider" />
<a href="tel:<?php echo $phone; ?>"><?php echo $phone; ?> <i class="fa fa-phone"></i></a>
<a href="mailto:<?php echo $email; ?>"><?php echo $email; ?> <i class="fa fa-envelope"></i></a>
</div>
<img src="<?php echo $image; ?>">
</div>
</a>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>
<?php get_footer(); ?>

所需的HTML结构

<div class="agent-row">
<!-- only 4 agents post types per row -->
<div class="agent"></div>
<div class="agent"></div>
<div class="agent"></div>
<div class="agent"></div>
</div>
<!-- New Row After first row reaches 4 agent posts -->
<div class="agent-row">
</div>

Answer 1

wp_query有一个名为"current_post"的属性，它是当前显示的帖子的索引。您可以在"while"循环中使用它来构建布局。

"current_post"从零开始，这意味着如果您需要前4个帖子，它将是索引为0、索引为1、索引为2和索引为3的帖子。因此，您可以将if ($agents_loop->current_post <= 3) {}用于第一个布局，将if ($agents_loop->current_post > 3) {}用于第二个布局：

if ($agents_loop->have_posts()) : ?>
<div class='agent-row'>
<?php
while ($agents_loop->have_posts()) : $agents_loop->the_post();
if ($agents_loop->current_post <= 3) {
$name     = get_field('agent_name');
$position = get_field('agent_position');
$phone    = get_field('agent_phone');
$email    = get_field('agent_email');
$image    = get_field('agent_image');
$link     = get_the_permalink();
?>
<a href='<?php echo $link; ?>'>
<div class='agent'>
<div class='agent-bg'></div>
<div class='agent-content'>
<h3><?php echo $name; ?></h3>
<h5><?php echo $position; ?></h5>
<hr class='divider' />
<a href='tel:<?php echo $phone; ?>'><?php echo $phone; ?> <i class='fa fa-phone'></i></a>
<a href='mailto:<?php echo $email; ?>'><?php echo $email; ?> <i class='fa fa-envelope'></i></a>
</div>
<img src='<?php echo $image; ?>'>
</div>
</a>
<?php
}
endwhile;
?>
</div>
<!-- New Row After first row reaches 4 agent posts -->
<div class='agent-row'>
<?php
while ($agents_loop->have_posts()) : $agents_loop->the_post();
if ($agents_loop->current_post > 3) {
# Put your desired layout here
}
endwhile;
?>
</div>
<?php
wp_reset_postdata();
endif;

为了避免布局重复，可以在循环中创建一个模板文件和include或require。

---

为了避免代理布局的重复

只需创建一个php文件，并在主题中称之为agent-info.php。

代理信息.php

<a href='<?php echo $link; ?>'>
<div class='agent'>
<div class='agent-bg'></div>
<div class='agent-content'>
<h3><?php echo $name; ?></h3>
<h5><?php echo $position; ?></h5>
<hr class='divider' />
<a href='tel:<?php echo $phone; ?>'><?php echo $phone; ?> <i class='fa fa-phone'></i></a>
<a href='mailto:<?php echo $email; ?>'><?php echo $email; ?> <i class='fa fa-envelope'></i></a>
</div>
<img src='<?php echo $image; ?>'>
</div>
</a>

并使用include或require函数在循环中使用模板。