Разделите записи WP_Query по дате и типу записи

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

<?php
$day_check = '';
$index = new WP_Query( array(
   'orderby'=>'post_date',
   'post_type' => array('cpt1', 'cpt2'),
   'posts_per_page' =>12));
while ( $index->have_posts() ) : $index->the_post();
   $day = get_the_date('j');
   if ($day != $day_check) {
      if ($day_check != '') {
         echo '</div></div>'; // закрывает div
      }
      echo '<div class="day"><div class="date">' . get_the_date() . '</div><div class="posts">';
   }?>
   <li class="post"><?php the_title(); ?></li>
<?php $day_check = $day; endwhile; ?>
<?php if ( $index->have_posts() ) :?>                                         
<?php endif; ?>

add_filter( 'posts_groupby', 'my_posts_groupby' );

function my_posts_groupby($groupby) {
   global $wpdb;
   $groupby = "{$wpdb->posts}.post_date";
   return $groupby;
}

$args = array(
   'posts_per_page' => 10, 
   'orderby' => 'date',
   'groupby' => 'date', /* не уверен в параметре, должно быть легко выяснить */
   'post_type' => array('type1', 'type2')
);

.

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

Разделение постов WP_Query по дате и типу поста

Работа с WP_Query требует не только знания PHP и WordPress API, но и ясного понимания структуры данных. Если ваша цель — организовать вывод постов по дате и типу, следуя вашему запросу, рассмотрим, как можно эффективно и элегантно решить эту задачу.

Проблема

Вы сталкиваетесь с проблемой, когда посты выводятся на одном уровне, и их необходимо сгруппировать по дате, разделив при этом посты различных типов на колонки. Это можно сделать, используя HTML и некоторые CSS-стили для создания желаемой структуры.

Решение

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

<?php
$day_check = '';
$index = new WP_Query( array(
    'orderby' => 'post_date',
    'post_type' => array('cpt1', 'cpt2'),
    'posts_per_page' => 12
));

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

        $current_date = get_the_date('Y-m-d');

        // Проверяем, изменился ли день
        if ($current_date != $day_check) {
            if ($day_check != '') {
                // Закрываем предыдущий div
                echo '</div>'; // Закрываем .posts
                echo '</div>'; // Закрываем .day
            }

            // Открываем новый блок для дня
            echo '<div class="day">';
            echo '<div class="date">' . get_the_date() . '</div>';
            echo '<div class="posts">'; 
        }

        // Выводим посты по типу
        // Условие определяет тип поста и отрисовывает в нужной колонке
        if (get_post_type() == 'cpt1') {
            echo '<div class="column cpt1">';
            echo '<li class="post">' . get_the_title() . '</li>';
            echo '</div>';
        } elseif (get_post_type() == 'cpt2') {
            echo '<div class="column cpt2">';
            echo '<li class="post">' . get_the_title() . '</li>';
            echo '</div>';
        }

        // Обновляем день
        $day_check = $current_date;
    }

    // Закрываем последние открытые div'ы
    echo '</div>'; // Закрываем .posts
    echo '</div>'; // Закрываем .day
}
wp_reset_postdata();
?>

Пояснение кода

1. Инициализация WP_Query: Мы начинаем с подготовки WP_Query с фильтрацией по типу постов и сортировкой по дате.

2. Проверка и вывод постов: В цикле проверяется, если дата какого-либо поста отличается от предыдущей. Если да, мы закрываем div-ы для предыдущей даты и открываем новые для текущей.

3. Вывод постов в зависимости от типа: Внутри блока posts для каждого поста определяется его тип, после чего он выводится в соответствующем div, который затем оформляется с помощью CSS.

4. Закрытие div’ов: После завершения обработки всех постов важно закрыть все открытые div’ы, чтобы избежать ошибок разметки.

Финальные штрихи

Теперь вы можете стилизовать ваши контейнеры с помощью CSS для создания двух колонок под каждой датой, выделяя каждый тип поста:

.day {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.posts {
    display: flex;
    justify-content: space-between; /* Пример разделения на колонки */
}

.column {
    width: 48%; /* Задает ширину для колонок */
}

.cpt1 {
    /* Стили для первого типа поста */
}

.cpt2 {
    /* Стили для второго типа поста */
}

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