当父子级 <=3 时，Wordpress 自定义帖子创建新行答案

【问题标题】：Wordpress custom posts create new row when parent children is <=3当父子级 <=3 时，Wordpress 自定义帖子创建新行
【发布时间】：2022-01-23 01:00:36
【问题描述】：

我在 wordpress 中有一个自定义帖子类型，可以将新代理添加到一行。如何创建一个条件语句来检查行中的帖子数量，如果超过 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>

【问题讨论】：

你能解释一下“如果大于 4 创建一个新 div 并将新帖子附加到新行”是什么意思吗？我的意思是你可以在你的问题中包含html 结构吗？
我的解释可能不是正确的思考方法。基本上代理是自定义帖子，而“agent-row”类的 div 是父级，我只想要每个代理 4 个帖子-行，如果在 4 之后有更多代理帖子，我想创建一个带有“agent-row”类的新 div，并将其他帖子附加到新行中。如果添加了更多代理帖子类型，则此循环需要继续。没有其他 html 结构...我将编辑帖子以希望更容易理解我的要求

标签： php wordpress conditional-statements

【解决方案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。

agent-info.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 函数在循环中使用模板。

【讨论】：