<?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个选项卡。

我搞不懂的是如何在一行中获得循环，其中每行都必须在容器中包含帖子摘录<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();