WordPress如何按职位分组员工查询结果并添加组间分隔

问题背景 #

已创建staff自定义文章类型，包含first_name、last_name、job_title、telephone、email和notes字段，员工通过WordPress核心分类按地点归类。当前已实现新泽西地区员工按job_title升序、last_name升序排序的查询，但需要将同一职位的员工归为独立板块，每个板块末尾添加换行和分隔元素，且避免多次数据库查询。

解决方案 #

通过在循环中跟踪当前职位的方式，实现单查询下的分组输出，无需额外数据库请求：

1. 修改查询后的循环逻辑

在原有查询代码后，添加职位跟踪变量，在循环中对比当前职位与上一个职位，当职位变化时输出分隔元素与职位标题：

$args = array(
    'post_type' => 'staff',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'cat' => 14,
    'meta_query' => array(
        'relation' => 'AND',
        'title_clause' => array(
            'key' => 'job_title',
            'compare' => 'EXISTS',
        ),
        'name_clause' => array(
            'key' => 'last_name',
            'compare' => 'EXISTS',
        ), 
    ),
    'orderby' => array( 
        'title_clause' => 'ASC',
        'name_clause' => 'ASC',
    ),
);

$staff = new WP_Query($args);

// 初始化上一个职位变量
$previous_job_title = '';

if ($staff->have_posts()) :
    while($staff->have_posts()) : $staff->the_post();
        $current_job_title = get_field('job_title');

        // 当职位变化时，输出分隔和职位标题（跳过第一个分组的前置分隔）
        if ($current_job_title !== $previous_job_title) {
            // 非第一个分组时，输出分隔元素并清除浮动
            if ($previous_job_title !== '') {
                echo '<div class="staff-group-separator"></div><div class="clearfix"></div>';
            }
            // 输出职位分组标题
            echo '<h3 class="staff-group-title">' . esc_html($current_job_title) . '</h3>';
            // 更新上一个职位记录
            $previous_job_title = $current_job_title;
        }
?>
        <div class="staff-element">
            <p class="nametag"><span class="name"><?php the_title(); ?></span><?php echo ' - '; the_field('job_title'); ?></p>
            <p><i class="fa-solid fa-phone"></i>
                <a href="tel: <?php the_field('telephone_number'); ?>">
                <span class="phone"><?php the_field('telephone_number'); ?></span></a>
                <span class="ext"><?php if (get_field('telephone_extension')) : echo 'Ext. '; the_field('telephone_extension'); endif; ?></span></p>
            <p>    
                <i class="fa-solid fa-envelope"></i><a href="mailto: <?php the_field('email_address'); ?>"><span class="email"><?php the_field('email_address'); ?></span></a>
            </p>
        </div> <!-- end staff-element -->
<?php
    endwhile;
    // 循环结束后，添加最后一个分组的收尾清除浮动
    echo '<div class="clearfix"></div>';
    wp_reset_postdata();
endif;

2. 补充CSS样式

添加清除浮动和分隔元素的样式，确保板块分隔生效：

.staff-element { 
    float:left; 
    width:33%; 
    display:inline-block; 
    margin-bottom: 1rem;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.staff-group-title {
    margin: 2rem 0 1rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.staff-group-separator {
    height: 1px;
    background-color: #eee;
    margin: 2rem 0;
    clear: both;
}

原理说明 #

• 通过$previous_job_title变量记录上一个循环的职位，每次循环对比当前职位，不一致时触发分组切换逻辑
• 利用clearfix类清除浮动，确保每个职位板块的浮动元素不会干扰下一个板块布局
• 仅通过一次WP_Query获取所有数据，避免多次数据库请求，提升页面性能

内容的提问来源于stack exchange，提问作者banacan