• 主頁
  • 文章
  • 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><!-- 電影標籤 -->

如果您需要幫助，請隨時與我們聯繫。