Получать сообщения в закладках фундамента и вкладках, разделенных на 3 строки

<?php /* Template Name: Page information */ get_header(); ?> <div class="row"> <div class="main-wrap" role="main"> <?php do_action( 'foundationpress_before_content' ); ?> <div class="row"> <div class="column"><a class="back-to-shop-link" href="/shop" title="Terug naar de shop">< Terug</a> </div> </div> <header class="featured-hero" role="banner"> <figure> <img src="<?php echo the_post_thumbnail_url('full'); ?>" alt="<?php echo the_title(); ?>"> </figure> </header> <div class="info-tabs"> <?php $i = 0; $break_after = 3; $counter = 0; $args = array( 'post_type' => 'information', //'posts_per_page' => 6, //'orderby' => 'date', ); $tabs = new WP_Query( $args ); ?> <?php // tabs for tabs ?> <?php if ( $tabs->have_posts() ) { while ( $tabs->have_posts() ) : $tabs->the_post(); if ($counter % $break_after == 0) { echo '<ul class="tabs ' . $i++ . '">'; } ?> <li class="tabs-title small-6 large-4"> <a href="#<?php echo $i; ?>"><?php the_title(); ?></a> </li> <?php if ($counter % $break_after == ($break_after-1)) { echo '</ul>'; } ++$counter; endwhile; } else { echo __( 'No products found' ); } wp_reset_postdata(); ?> </div> <?php do_action( 'foundationpress_after_content' ); ?> </div> </div> <?php get_footer(); 

Я использую закладки-основы в сочетании с инструкцией while, чтобы получить 3 сообщения (вкладки) за строку. Который я получил. Каждая строка имеет набор из 3 вкладок.

Я не могу понять, как получить цикл внутри одной строки, где каждая строка должна содержать выдержку post внутри контейнера <div class="tabs-content"></div> .

Поэтому после каждого <ul class="tabs">3 tabs</ul> Я хочу иметь контейнер табуляции с вкладками с 3 вкладками внутри.

Итак, как мне подойти к этому?

Окончательный результат должен выглядеть следующим образом:

 <div class="info-tabs"> <!-- first set of tabs and tabs-content --> <ul class="tabs 0"> <li class="tabs-title small-6 large-4"> <a href="#1">test</a> </li> <li class="tabs-title small-6 large-4"> <a href="#1">test</a> </li> <li class="tabs-title small-6 large-4"> <a href="#1">test</a> </li> </ul> <div class="tabs-content" data-tabs-content> <div class="tabs-panel" id="*"> [...] </div> <div class="tabs-panel" id="*"> [...] </div> <div class="tabs-panel" id="*"> [...] </div> </div> <!-- second set of tabs and tabs-content --> <ul class="tabs 0"> <li class="tabs-title small-6 large-4"> <a href="#1">test</a> </li> <li class="tabs-title small-6 large-4"> <a href="#1">test</a> </li> <li class="tabs-title small-6 large-4"> <a href="#1">test</a> </li> </ul> <div class="tabs-content" data-tabs-content> <div class="tabs-panel" id="*"> [...] </div> <div class="tabs-panel" id="*"> [...] </div> <div class="tabs-panel" id="*"> [...] </div> </div> </div> 

Мне удалось «решить» проблему с помощью кода ниже. Это нехорошее решение, но оно выполняет эту работу. Любые корректировки кода, чтобы сделать его более красивым, приветствуются.

 <?php /* Template Name: Page information */ get_header(); ?> <div class="row"> <div class="main-wrap" role="main"> <?php do_action( 'foundationpress_before_content' ); ?> <div class="row"> <div class="column"><a class="back-to-shop-link" href="/shop" title="Terug naar de shop">< Terug</a> </div> </div> <header class="featured-hero" role="banner"> <figure> <img src="<?php echo the_post_thumbnail_url('full'); ?>" alt="<?php echo the_title(); ?>"> </figure> </header> <div class="info-tabs"> <?php $tabsnr = 1; $linknr = 1; $panelnr = 1; $tabscontentnr = 1; $break_after = 3; $counter = 1; $args = array( 'post_type' => 'information', 'posts_per_page' => 9, //'orderby' => 'date', ); $argsContent = array( 'post_type' => 'information', //'posts_per_page' => 3, //'orderby' => 'date', ); $tabs = new WP_Query( $args ); $tabsContent = new WP_Query( $argsContent ); ?> <?php // tabs for tabs ?> <?php if ( $tabs->have_posts() ) { while ( $tabs->have_posts() ) : $tabs->the_post(); if ($counter % $break_after == 1) { echo '<ul class="tabs" data-tabs id="tabs-' . $tabsnr++ . '">'; $items = array(); }?> <?php $item = array(); ob_start(); the_title(); $item[] = ob_get_contents(); ob_end_clean(); ob_start(); echo get_the_post_thumbnail_url(); $item[] = ob_get_contents(); ob_end_clean(); ob_start(); the_excerpt(); $item[] = ob_get_contents(); ob_end_clean(); ob_start(); the_permalink(); $item[] = ob_get_contents(); ob_end_clean(); $items[] = $item; ?> <li class="tabs-title small-6 large-4"> <a class="tabs-link" href="#panel-<?php echo $linknr++; ?>"><?php the_title(); ?></a> </li> <?php if ($counter % $break_after == 0) { echo '</ul>'; echo '<div class="tabs-content" data-tabs-content="tabs-'. $tabscontentnr++ .'">'; foreach($items as $item) { echo '<div class="tabs-panel" id="panel-'. $panelnr++ .'">'; echo '</div>'; } echo '</div>'; wp_reset_postdata(); } $counter++; endwhile; } else { echo __( 'No products found' ); } wp_reset_postdata(); ?> </div> <?php do_action( 'foundationpress_after_content' ); ?> </div> </div> <?php get_footer();