Пользовательский тип записи с пользовательской таксономией в аккордеоне Bootstrap 4

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

<?php 
$terms = get_terms( array(
            'taxonomy' => 'ano'
        ));

foreach($terms as $term) { ?>    <div id="accordion" role="tablist">      <div class="card">
<div class="card-header" role="tab" id="heading-<?php the_ID(); ?>">
  <h5 class="mb-0">
    <a data-toggle="collapse" href="#collapse-<?php the_ID(); ?>" aria-expanded="true" aria-controls="collapse-<?php the_ID(); ?>">
      <?php echo $term->name;  ?>
    </a>
  </h5>
</div>

<div id="collapse-<?php the_ID(); ?>" class="collapse<?php echo ($the_query->current_post == 0 ? ' in' : ''); ?> show" role="tabpanel" aria-labelledby="heading-<?php the_ID(); ?>" data-parent="#accordion">
  <div class="card-body">
    <?php   $event = new WP_Query('post_type=Paradas&posts_per_page=-1');
            while ($event->have_posts()) : $event->the_post(); ?>                           
            <p><?php the_title(); ?></p>
            <?php endwhile ; wp_reset_query(); ?>    

<?php
$post_type="paradas";
// Получить все таксономии для этого типа записей
$taxonomies = get_object_taxonomies( (object) array( 'post_type' => $post_type ) );
foreach( $taxonomies as $taxonomy ) :

    // Получает каждую "категорию" (термин) в этой таксономии, чтобы получить соответствующие записи
    $terms = get_terms( $taxonomy,
            array(
                'orderby'   => 'name',
                'order'     => 'ASC',
                'hide_empty'    => '1'
        )
    );

        foreach( $terms as $term ) : 
            // WP_Query аргументы
        $args = array (
            'post_type'   => $post_type,
            'posts_per_page'  => '-1',
            'tax_query'       => array(
                        array(
                            /**
                 * Чтобы получить определенную таксономию, используйте
                 *'taxonomy' => 'category',
                 */
                            'taxonomy' => $taxonomy,
                            'field'    => 'slug',
                            'terms'    => $term->slug,
                        )
                    )
        );
        // Запрос
        $posts = new WP_Query( $args );

        // Цикл
        if( $posts->have_posts() ) : ?>
            <dl id="box-loop-list-<?php echo $term->slug ;?>">    <div id="accordion" role="tablist">    <div class="card">
<div class="card-header" role="tab" id="heading-<?php the_ID(); ?>">
  <h5 class="mb-0">
    <a data-toggle="collapse" href="#collapse-<?php the_ID(); ?>" aria-expanded="true" aria-controls="collapse-<?php the_ID(); ?>">
      <?php echo $term->name;  ?>
    </a>
  </h5>
</div>

<div id="collapse-<?php the_ID(); ?>" class="collapse<?php echo ($the_query->current_post == 0 ? ' in' : ''); ?>" role="tabpanel" aria-labelledby="heading-<?php the_ID(); ?>" data-parent="#accordion">
  <div class="card-body">

            <?php while( $posts->have_posts() ) : $posts->the_post(); ?>
                <p><?php the_title(); ?></p>
                <?php endwhile; ?>
        </div>
</div>

.

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

Концепция использования настраиваемых типов записей (Custom Post Types, CPT) и настраиваемых таксономий в WordPress позволяет пользователям расширять функциональные возможности сайта. Эти инструменты особенно полезны, когда необходимо структурировать контент для достижения определенных целей. В заданном вопросе вы стремитесь вывести данные из настраиваемого поста типа вместе с его таксономиями в аккордеоне Bootstrap 4. Понимание этой темы требует как теоретических знаний, так и практической реализации.

Теория

Настраиваемые типы записей представляют собой мощный механизм WordPress, позволяющий добавлять новые типы контента, помимо стандартных записей и страниц. Они предоставляют гибкость в организации и выводе информации. В свою очередь, настраиваемые таксономии помогают классифицировать контент, создавая произвольные категории или теги для настраиваемых типов записей. Это создает возможности для более организации данных, что особенно важно при создании сложных веб-приложений.

Bootstrap является популярным фронтенд-фреймворком, предлагающим компоненты для построения современного пользовательского интерфейса. Аккордеон в Bootstrap — это элемент управления интерфейсом, позволяющий пользователю раскрывать и скрывать контент. Это делается с помощью комбинации HTML, CSS и JavaScript, что делает его интуитивно понятным способом представления информации.

Пример

В предоставленном примере кода первоначальная попытка вывести данные показала некоторые недостатки. Хотя таксономия отображается правильно в заголовке аккордеона, контент внутри каждого аккордеона остается одинаковым и не фильтруется по таксономии. Это произошло из-за того, что запрос на получение данных (WP_Query) не был настроен правильно для фильтрации по таксономии.

Обновленное решение сначала получает все таксономии, связанные с конкретным типом публикации. Затем оно извлекает все термины для этой таксономии, чтобы получить соответствующие публикации. Использование WP_Query с аргументом ‘tax_query’ обеспечивает фильтрацию записей по конкретной таксономии. Это обеспечивает вывод корректных данных для каждого элемента аккордеона.

Вот обновленный фрагмент кода для вывода записей по таксономиям:

$post_type = "paradas";
$taxonomies = get_object_taxonomies((object) array('post_type' => $post_type));

foreach ($taxonomies as $taxonomy) {
    $terms = get_terms($taxonomy, array(
        'orderby' => 'name',
        'order' => 'ASC',
        'hide_empty' => '1'
    ));

    foreach ($terms as $term) {
        $args = array(
            'post_type' => $post_type,
            'posts_per_page' => '-1',
            'tax_query' => array(
                array(
                    'taxonomy' => $taxonomy,
                    'field' => 'slug',
                    'terms' => $term->slug,
                )
            )
        );

        $posts = new WP_Query($args);

        if ($posts->have_posts()) : ?>
            <div id="accordion" role="tablist">
                <div class="card">
                    <div class="card-header" role="tab" id="heading-<?php echo $term->slug; ?>">
                        <h5 class="mb-0">
                            <a data-toggle="collapse" href="#collapse-<?php echo $term->slug; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $term->slug; ?>">
                                <?php echo $term->name; ?>
                            </a>
                        </h5>
                    </div>
                    <div id="collapse-<?php echo $term->slug; ?>" class="collapse" role="tabpanel" aria-labelledby="heading-<?php echo $term->slug; ?>" data-parent="#accordion">
                        <div class="card-body">
                            <?php while ($posts->have_posts()) : $posts->the_post(); ?>
                                <p><?php the_title(); ?></p>
                            <?php endwhile; ?>
                        </div>
                    </div>
                </div>
            </div>
        <?php endif;
        wp_reset_postdata();
    }
}

Применение

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

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

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