• 主页
  • 文章
  • SEO
  • 使用 Bootstrap 3 选项卡在自定义帖子类型分类中显示帖子

使用 Bootstrap 3 选项卡在自定义帖子类型分类中显示帖子

已发表: 2021-07-19

Bootstrap 选项卡非常适合在小区域内显示大量内容。 简而言之，他们为很少的屏幕空间带来了很多冲击！

在本教程中，我们将研究一种显示自定义帖子类型帖子的好方法，该帖子分为不同的分类术语。

对于这个例子，我设置了一个“电影”的自定义帖子类型，我们将按照“流派”的分类法对它们进行分组。 正是这些类型将成为引导标签，而标签内容将是这些特定类型下的电影。

这是我们正在努力实现的目标：

设置帖子类型和分类

首先，我们需要创建自定义帖子类型的电影。 最简单的方法是安装优秀的自定义帖子类型 UI。

使用以下设置：

然后我们需要设置类型分类，以便我们可以将所有电影归入正确的类型。 使用自定义帖子类型 UI，使用以下设置创建分类：

确保将hierarchy 设置为true，因为这将确保分类使用类别样式选择框而不是标签。

接下来的工作是制作一些电影并将它们归类为正确的类型。 我刚刚添加了一些测试胶片，以便向您展示下一个过程。

为简单起见，我将在 WordPress 中创建一个名为“电影”的页面，然后对该页面进行页面覆盖，我们将在其中放置我们的代码。 这样做的方法是在你的主题文件夹中创建一个名为 page-films.php 的文件，然后 WordPress 将使用这个文件来显示电影页面。 这样，我们就可以添加我们需要的代码，并且只有在您访问网站的电影页面时才会显示。

该页面不必称为“电影”，但要确保页面的 slug 与页面模板的第二部分匹配。 因此，如果页面的 slug 是“电影”，则模板文件将被称为 page-movies.php。

创建选项卡

如果您访问 Bootstrap 站点并访问选项卡部分，我们可以获取我们将需要的标记。 只要您加载了所有 Bootstrap javascript 文件（尤其是 tabs.js 和 transitions.js），您刚刚粘贴到页面中的选项卡就可以正常工作。

不过，我们想要做的是在选项卡中显示我们的流派名称。 为此，我们将不得不使用 WordPress 函数 get_terms。 这个函数基本上只是返回所有与分类相关的帖子的术语。 因此，我们需要使用 get_terms 来返回有关我们拥有的所有类型的信息。

 <?php $film_genres = get_terms('genres'); ?>

在此示例中，我针对变量 $film_genres 设置了 get_terms，但您可以使用任何您喜欢的内容。

接下来，我们需要对这个变量进行 foreach 循环，以返回我们添加的所有类型。 我们想对 nav-tabs 无序列表执行此操作，如下所示：

 <ul class="nav nav-tabs nav-justified">
  <li class="active">
    <a data-toggle="tab" href="#all">全部</a>
  </li>
  <?php foreach($film_genres as $film_genre) { ?>
    <li>
      <a href="#<?php echo $film_genre->slug ?>" data-toggle="tab"><?php echo $film_genre->name ?></a>
    </li>
  <? } ?>
</ul>

确保在 foreach 之前设置“All”li，因为我们希望第一个选项卡默认显示所有电影，然后我们使用其他选项卡按流派过滤。

标签内容

然后我们想为所有电影选项卡设置选项卡内容，我们使用 wp_query 对电影的帖子类型进行设置，如下所示：

 <div class="tab-pane active">
  <?php 	
  $args = 数组(
    'post_type' => '电影',
    'posts_per_page' -1,
    'orderby' => 'title',
    '订单' => 'ASC'
  );
  $all_films = new WP_Query( $args);		
  ?>

  <?php if ( $all_films->have_posts() ) : // 在做任何事情之前确保我们有电影要放映？>
  <div class="table-responsive">
    <table class="table">
      <?php while ( $all_films->have_posts() ) : $all_films->the_post(); ?>	
      <tr>
        <td><?php the_post_thumbnail() ?></td>
        <td><h3><?php the_title() ?></h3</td>
        <td>
          <p class="lead"><?php the_excerpt() ?></p>
          <a href="<?php the_permalink() ?>" class="btn btn-primary">阅读更多</a>
        </td>
      </tr>
      <?php endwhile; ?>
      <?php wp_reset_query() ?>
    </table>
  </div>
  <?php endif; ?>

</div><!-- 所有电影选项卡窗格 -->

确保您将帖子类型键值设置为您的帖子类型的名称（如果您不使用电影），即“post_type”=>“您的帖子类型在这里”。 然后，我们将返回电影帖子类型中的所有帖子，并按标题升序排列。

然后我们在这个 wp_query 对象上运行一个普通的 WordPress 循环并返回所有的电影帖子。

对于此示例，我选择在每个选项卡窗格中输出引导表，但您可以随时输出数据。 需要记住的是，通过使用 wp_query 循环，我们可以使用所有出色的 WordPress 功能，例如 the_title、the_excerpt、the_post_thumbnail 等。

在此循环结束时不要忘记运行 wp_reset_query，因为如果我们要在此页面上运行任何其他循环，这将避免我们可能遇到的任何可能的问题。

在我们整理好显示所有电影的选项卡内容后，我们希望能够显示所有按类型分组的电影。 我们希望它是动态的，这样如果我们将来选择添加更多类型，我们就不需要为这些类型中的每一个在其他 wp_quires 中编码。 为了实现这一点，我们需要在下一个 tab-content div 上运行另一个 foreach 循环，在这个循环中，我们将运行一个带有一些分类参数的 wp_query。

 <?php foreach($film_genres as $film_genre) { ?>
  <div class="tab-pane">
    <?php 	
    $args = 数组(
      'post_type' => '电影',
      'posts_per_page' -1,
      'orderby' => 'title',
      '订单' => 'ASC',
      'tax_query' => 数组（
        大批（
          '分类' => '流派',
          'field' => 'slug',
          '条款' => $film_genre->slug
        )
      )
    );
    $films = new WP_Query( $args );		
    ?>

    <?php if ( $films->have_posts() ) : // 在做任何事情之前确保我们有电影要放映？>
    <table class="table">
      <?php while ( $films->have_posts() ) : $films->the_post(); ?>	
      <tr>
        <td><?php the_post_thumbnail() ?></td>
        <td><h3><?php the_title() ?></h3</td>
        <td>
          <p class="lead"><?php the_excerpt() ?></p>
          <a href="<?php the_permalink() ?>" class="btn btn-primary">阅读更多</a>
        </td>
      </tr>
      <?php endwhile; ?>
      <?php wp_reset_query() ?>
    </table>
    <?php endif; ?>

  </div>
<? } ?>

我们将之前使用的 foreach 包装在选项卡窗格 div 周围。 我们需要这样做，以便我们可以访问我们设置的 $film_genre 对象中的值，因为我们需要使用 slug 值传递给我们的 wp_query，并设置选项卡窗格 id。

创建 wp_query 后，我们使用与“所有”电影选项卡窗格中相同的 WordPress 循环，记住将 wp_query 变量更改为诸如 $film_genres 之类的唯一变量。

这真的是关于它。 Bootstrap 选项卡应该可以正常工作，并且当您添加附加了电影的新类型时，它应该显示为一个新选项卡。

这是完整的代码：

 <section class="films-tabs">

  <?php $film_genres = get_terms('genres'); // 获取所有流派 ?>

  <!-- 导航标签 -->
  <ul class="nav nav-tabs nav-justified">
    <li class="active">
      <a data-toggle="tab" href="#all">全部</a>
    </li>
    <?php foreach($film_genres as $film_genre) { ?>
      <li>
        <a href="#<?php echo $film_genre->slug ?>" data-toggle="tab"><?php echo $film_genre->name ?></a>
      </li>
    <? } ?>
  </ul>

  <!-- 标签窗格 -->
  <div class="tab-content">

    <div class="tab-pane active">
      <?php 	
      $args = 数组(
        'post_type' => '电影',
        'posts_per_page' -1,
        'orderby' => 'title',
        '订单' => 'ASC'
      );
      $all_films = new WP_Query( $args);		
      ?>

      <?php if ( $all_films->have_posts() ) : // 在做任何事情之前确保我们有电影要放映？>
      <div class="table-responsive">
        <table class="table">
          <?php while ( $all_films->have_posts() ) : $all_films->the_post(); ?>	
          <tr>
            <td><?php the_post_thumbnail() ?></td>
            <td><h3><?php the_title() ?></h3</td>
            <td>
              <p class="lead"><?php the_excerpt() ?></p>
              <a href="<?php the_permalink() ?>" class="btn btn-primary">阅读更多</a>
            </td>
          </tr>
          <?php endwhile; ?>
          <?php wp_reset_query() ?>
        </table>
      </div>
      <?php endif; ?>

    </div><!-- 所有电影选项卡窗格 -->

    <?php foreach($film_genres as $film_genre) { ?>

      <div class="tab-pane">
        <?php 	
        $args = 数组(
          'post_type' => '电影',
          'posts_per_page' -1,
          'orderby' => 'title',
          '订单' => 'ASC',
          'tax_query' => 数组（
            大批（
              '分类' => '流派',
              'field' => 'slug',
              '条款' => $film_genre->slug
            )
          )
        );
        $films = new WP_Query( $args );		
        ?>

        <?php if ( $films->have_posts() ) : // 在做任何事情之前确保我们有电影要放映？>
        <table class="table">
          <?php while ( $films->have_posts() ) : $films->the_post(); ?>	
          <tr>
            <td><?php the_post_thumbnail() ?></td>
            <td><h3><?php the_title() ?></h3</td>
            <td>
              <p class="lead"><?php the_excerpt() ?></p>
              <a href="<?php the_permalink() ?>" class="btn btn-primary">阅读更多</a>
            </td>
          </tr>
          <?php endwhile; ?>
          <?php wp_reset_query() ?>
        </table>
        <?php endif; ?>

      </div>
    <? } ?>

  </div><!-- 标签内容 -->

</section><!-- 电影标签 -->

如果您需要帮助，请随时与我们联系。