如何在我的 Wordpress 循环中显示第一个选项卡？

Question

我正在使用 Wordpress 和 Foundation 选项卡。

目标：
在垂直 Foundation 选项卡中显示来自特定类别的 Wordpress 帖子。

我目前有一个静态版本显示在这里：
http://www.aos-engineering.com（项目下）

问题：
在页面加载时，显示的第一个选项卡是空的。但是，当您单击选项卡时，它们会正确显示。

问题
如何在页面加载时显示第一个选项卡项？

这是显示问题的测试页面：
http://www.aos-engineering.com/test/

代码

<div class="full-width" id="projects">
<div class="row">
    <div class="small-4 medium-3 large-3 columns">          
        <dl class="tabs vertical profile-tabs" data-tab>
        <?php
         $displayposts = new WP_Query();
         $displayposts->query('category_name=Projects');
         while ($displayposts->have_posts()) : $displayposts->the_post();
         $tab_number = $displayposts->current_post + 1;             
          ?> 
          <dd><a href="#tab<?php echo $tab_number;?>"><?php the_title(); ?></a></dd>
          <?php endwhile; ?>
        </dl>
    </div>  

    <div class="small-8 medium-9 large-9 columns">
        <div class="tabs-head">Projects</div>

        <div class="tabs-content">  
              <?php   
              while ($displayposts->have_posts()) : $displayposts->the_post();
              $tab_number = $displayposts->current_post + 1;
              ?> 
              <div class="content" id="tab<?php echo $tab_number;?>">
                <h2><?php the_title(); ?></h2>
                <div class="row">
                    <div class="medium-9 large-9 columns">
                      <?php the_post_thumbnail(); ?>
                      <p><small><?php the_field('img_caption'); ?></small></p>
                    </div>

                    <div class="medium-3 large-3 columns">
                    <?php the_content(); ?>
                    </div>
                </div>
              </div>
              <?php endwhile; ?>                      
        </div>  
    </div>
</div>      

如果我能提供更多信息，请告诉我。提前谢谢你。

Answer 1

提示 CPILKO 解决方案。

---

这是在垂直 Foundation 选项卡中显示特定类别的 Wordpress 帖子的方法。

• 要显示您的帖子，只需添加您的类别名称
  'category_name=YourCategoryName'

解决方案

<div class="full-width" id="projects">
<div class="row">
    <div class="small-4 medium-3 large-3 columns">          
        <dl class="tabs vertical profile-tabs" data-tab>
        <?php
         $displayposts = new WP_Query();
         $displayposts->query('category_name=Projects');
         while ($displayposts->have_posts()) : $displayposts->the_post();
         $tab_number = $displayposts->current_post + 1; 
         $active_class = (1 == $tab_number) ? 'active' : '';            
          ?> 
          <dd class="<?php echo $active_class;?>"><a href="#tab<?php echo $tab_number;?>"><?php the_title(); ?></a></dd>
          <?php endwhile; ?>
        </dl>
    </div>  

    <div class="small-8 medium-9 large-9 columns">
        <div class="tabs-head">Projects</div>

        <div class="tabs-content">  
              <?php   
              while ($displayposts->have_posts()) : $displayposts->the_post();
              $tab_number = $displayposts->current_post + 1;
              $active_class = (1 == $tab_number) ? 'active' : ''; 
              ?> 
              <div class="content <?php echo $active_class;?>" id="tab<?php echo $tab_number;?>">
                <h2><?php the_title(); ?></h2>
                <div class="row">
                    <div class="medium-9 large-9 columns">
                        <?php the_post_thumbnail(); ?>
                        <p><small>Show above: Huiit Zolars</small></p>
                    </div>

                    <div class="medium-3 large-3 columns">
                    <?php the_content(); ?>
                    </div>
                </div>
              </div>
              <?php endwhile; ?>

        </div>

    </div>
</div>      

Answer 2

您需要让您的代码将active 类添加到您希望在页面加载时显示的.tabs > dl 和.tabs-content > div。

将此添加到$tab_number = ... 之后的两行，以使第一个选项卡成为加载时的活动选项卡：

$active_class = (1 == $tab_number) ? 'active' : '';

然后在输出中：

<dd class="<?php echo $active_class;?>" ><a href=...
<div class="content <?php echo $active_class;?>"...

有关详细信息，请参阅Foundation Tabs documentation。