Вопрос или проблема
У меня есть пользовательский тип записи (bulletins), который я помещаю в вкладки и аккордеоны Foundation 6.4.3. Таксономии являются заголовками вкладок. Индивидуальное содержимое пользовательского типа записи — это аккордеоны.
Моя проблема заключается в том, что при загрузке страницы вкладки не отображаются. Мне нужно добавить класс 'is-active' к первому class="tabs-panel" на странице, но я не могу понять, как лучше это сделать, потому что я должен начинать и останавливать различные циклы, чтобы вкладки и аккордеоны работали правильно.
Не думаю, что могу использовать какую-либо функцию подсчета в PHP, потому что <div class="tabs-panel"> находится перед <?php while, верно?
Мой код:
<ul class="tabs" data-tabs id="example-tabs">
<?php $bulletin_types = get_object_taxonomies( 'bulletinboard' );
foreach( $bulletin_types as $bulletin_type ) :
$terms = get_terms( $bulletin_type );
foreach( $terms as $term ) : ?>
<li class="tabs-title"><a data-tabs-target="panel-<?php echo $term->slug ;?>" href="#panel-<?php echo $term->slug ;?>"><?php echo $term->name ;?></a></li>
<?php endforeach;?>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<?php foreach( $terms as $term ) : ?>
<?php $bulletins = new WP_Query( array(
'taxonomy' => $bulletin_type,
'term' => $term->slug,
));?>
<?php if( $bulletins->have_posts() ): ?>
<div class="tabs-panel" id="panel-<?php echo $term->slug ;?>">
<ul class="accordion" data-accordion data-allow-all-closed="true">
<?php while( $bulletins->have_posts() ) : $bulletins->the_post();
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title"><?php the_title();?></a>
<div class="accordion-content" data-tab-content >
//ПОСТ КОНТЕНТ ЗДЕСЬ
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php endif;?>
<?php endforeach;?>
</div>
<?php endforeach; ?>
Конечно, вы можете использовать счетчик. Просто переместите ваш цикл while немного выше. Что-то вроде этого:
<ul class="tabs" data-tabs id="example-tabs">
<?php
// счетчик для ul.tabs
$i=0;
$bulletin_types = get_object_taxonomies( 'bulletinboard' );
foreach( $bulletin_types as $bulletin_type ) :
$terms = get_terms( $bulletin_type );
foreach( $terms as $term ) :
// увеличиваем каждый
$i++; ?>
<li class="tabs-title
<?php // только для первого добавляем .is-active
if($i == 1) { echo ' is-active'; } ?>
"><a data-tabs-target="panel-<?php echo $term->slug ;?>" href="#panel-<?php echo $term->slug ;?>"><?php echo $term->name ;?></a></li>
<?php endforeach;?>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<?php foreach( $terms as $term ) : ?>
<?php $bulletins = new WP_Query( array(
'taxonomy' => $bulletin_type,
'term' => $term->slug,
));?>
<?php if( $bulletins->have_posts() ):
// перемещаем while вверх
while( $bulletins->have_posts() ) : $bulletins->the_post();
// сбрасываем счетчик
$i=0; ?>
<div class="tabs-panel<?php // опять добавляем .is-active только для первого
if($i==0) { echo ' is-active'; } ?>" id="panel-<?php echo $term->slug ;?>">
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title"><?php the_title();?></a>
<div class="accordion-content" data-tab-content >
//ПОСТ КОНТЕНТ ЗДЕСЬ
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php endif;?>
<?php endforeach;?>
</div>
<?php endforeach; ?>
По сути, вы устанавливаете счетчик перед любым циклом, который вы используете — например, перед вашим foreach — и затем в цикле увеличиваете его, и таким образом можете изолировать первый элемент.
Ответ или решение
Чтобы решить проблему добавления класса 'is-active' к первому элементу вкладок и панелей в вашем шаблоне Foundation 6, необходимо применить структурированный подход, учитывающий порядок и контроль за циклами в вашем коде PHP. Это особенно важно в случае, когда вы работаете с пользовательскими типами записей, таксономиями и вовлечены в динамическое создание структур HTML через PHP.
Теория
При разработке интерфейсов, использующих вкладки и аккордеоны, очень важно обеспечить, чтобы хотя бы один элемент был отмечен как активный ('is-active'), чтобы пользователь понял, что содержимое загружено корректно, и он может с ним взаимодействовать. Foundation 6 использует класс 'is-active' для обозначения активного элемента. Если вы не назначите этот класс ни одному элементу, интерфейс может показаться пустым при первой загрузке, вызывая непонимание у пользователей.
Самый распространенный способ решения этой задачи — использование счетчика, который отслеживает итерации в вашем цикле. Это позволяет вам выделить первый элемент с помощью условного оператора и добавить к нему требуемый класс 'is-active'.
Пример
Рассмотрим, как ваш код может быть переформатирован для достижения указанной цели:
<ul class="tabs" data-tabs id="example-tabs">
<?php
$i = 0; // Создаем счетчик для подсчета элементов
$bulletin_types = get_object_taxonomies('bulletinboard');
foreach ($bulletin_types as $bulletin_type) :
$terms = get_terms($bulletin_type);
foreach ($terms as $term) :
$i++; // Увеличиваем счетчик
?>
<li class="tabs-title<?php if ($i == 1) echo ' is-active'; ?>">
<a data-tabs-target="panel-<?php echo $term->slug; ?>" href="#panel-<?php echo $term->slug; ?>">
<?php echo $term->name; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<?php
$j = 0; // Дополнительный счетчик для панелей
foreach ($terms as $term) :
$bulletins = new WP_Query(array(
'taxonomy' => $bulletin_type,
'term' => $term->slug,
));
if ($bulletins->have_posts()) :
$j++;
?>
<div class="tabs-panel<?php if ($j == 1) echo ' is-active'; ?>" id="panel-<?php echo $term->slug; ?>">
<ul class="accordion" data-accordion data-allow-all-closed="true">
<?php while ($bulletins->have_posts()) : $bulletins->the_post(); ?>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title"><?php the_title(); ?></a>
<div class="accordion-content" data-tab-content>
<?php the_content(); // Выводим содержимое записи ?>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; endforeach; ?>
</div>
<?php endforeach; ?>Применение
-
Создание счетчиков: В начале цикла
foreachсоздаете счетчик$i, который будет увеличиваться с каждой итерацией. Это позволяет отслеживать, какой по счету элемент вкладки и панели вы создаете. -
Добавление класса
'is-active': Используйте условный операторifдля проверки значения счетчика. Если он равен 1, добавляете класс'is-active'к первому элементу. -
Разделение счетчиков: Важно использовать разные счетчики для вкладок и панелей, поскольку оба могут начинаться с первого элемента, но находятся в разных циклах.
-
Архитектура кода: Обратите внимание на порядок цикла
foreach. Панели вложены в еще один циклforeachиwhile, чтобы обеспечить инициализацию панели только в случае наличия контента.
Этот метод обеспечивает динамическое выделение нужного элемента как активного при загрузке страницы, улучшая взаимодействие пользователя с вашей системой управления контентом. Во многом успех зависит от внимательного итогового тестирования обновленного кода, чтобы убедиться в отсутствии ошибок в логике циклов и правильности использования класса 'is-active'.