Как сгруппировать результаты из wp-query

Вопрос или проблема

У меня есть настраиваемый тип записи для сотрудников. Поля это имя, фамилия, должность, телефон, электронная почта и примечания. Все сотрудники классифицируются по местоположению с использованием категории WP core. Мне нужно вывести справочник сотрудников для каждого местоположения, и я хотел бы сгруппировать по должности и отсортировать по фамилии. У меня есть следующий запрос для местоположения Нью-Джерси. Этот запрос сортирует по должности и фамилии:

$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); //var_dump($staff);

while($staff-> have_posts() ): $staff-> the_post(); // вывод результатов

Вот мой разметка:

<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> <!-- конец staff-element -->

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

Что я не могу понять, так это как добавить разрыв и элемент линии в конце каждой должности, чтобы плавающие элементы были разделены по должности. Другими словами, я хочу, чтобы все работники администрации были сгруппированы в одном разделе, все сотрудники по внутренним продажам в другом, а по внешним продажам в третьем.

Я знаю, что мог бы создать отдельный запрос для каждой должности, но я хочу минимизировать количество запросов к БД. Может кто-то предложить, как я могу это сделать? Большое спасибо.

Необходимо отслеживать предыдущую должность и, если она отличается, вставить разрыв строки.

Непроверенный код:

$prev_job_title = null;

while ( $staff->have_posts() ) {
    $staff->the_post();

    $job_title = get_post_meta( get_the_ID(), 'job_title', true );

    if ( $prev_job_title !== $job_title ) {
        printf( '<h2>%s</h2>', esc_html( $job_title ) );
        $prev_job_title = $job_title;
    }

    // Разметка сотрудников.
}

.

Ответ или решение

Группировка результатов WP_Query в WordPress: Пошаговая инструкция

Когда вы работаете с кастомными типами записей в WordPress, иногда возникает необходимость группировать их по определённым критериям для более удобной и наглядной презентации данных. В вашем случае вы хотите сгруппировать сотрудников по должностям, при этом результаты должны быть отсортированы по фамилии. Мы рассмотрим, как вы можете добиться этого, не создавая дополнительные запросы к базе данных.

1. Определение и настройка WP_Query

Ваша начальная настройка WP_Query уже выглядит достаточно хорошо, но мы добавим несколько нюансов для визуализации группы по должностям.

$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);

2. Группировка по должностям

Для группировки сотрудников по их должности достаточно отслеживать предыдущую должность и, если она изменилась, выводить заголовок новой группы. В следующем примере кода будет показано, как это реализовать:

$prev_job_title = null;

if ($staff->have_posts()) {
    while ($staff->have_posts()) {
        $staff->the_post();

        // Получаем текущую должность
        $job_title = get_post_meta(get_the_ID(), 'job_title', true);

        // Проверка, изменилась ли должность
        if ($prev_job_title !== $job_title) {
            // Выводим заголовок для новой должности
            printf('<h2>%s</h2>', esc_html($job_title));
            $prev_job_title = $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'); ?>">
                    <span class="phone"><?php the_field('telephone'); ?></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'); ?>">
                    <span class="email"><?php the_field('email'); ?></span>
                </a>
            </p>
        </div>
        <?php // Конец staff-element
    }
}

wp_reset_postdata(); // Сбрасываем данные запроса

3. Структура разметки

Для удобства чтения и эстетики вашего списка сотрудников можно применить CSS для стилизации. В вашем коде вы указали, что используете float:left; для элементов, но возможно стоит рассмотреть более современный подход с использованием Flexbox или Grid.

.staff-element {
    float: left;
    width: 33%;
    display: inline-block;
    margin-bottom: 20px; /* Добавляем отступ снизу для визуального разделения */
}

Заключение

Используя данный метод, вы сможете группировать сотрудников по их должностям, что облегчит читателям восприятие информации. Ваша интеграция результативна, в зависимости от количества сотрудников, и не требует дополнительных запросов к базе данных, что позитивно скажется на производительности вашего сайта.

Если у вас есть дополнительные вопросы или понадобится помощь в адаптации этого кода к вашим конкретным нуждам, не hesitate to ask!

Оцените материал
Добавить комментарий

Капча загружается...