Bootstrap 3タブを使用して、カスタム投稿タイプの分類で投稿を表示する

公開: 2021-07-19

ブートストラップタブは、小さな領域に多くのコンテンツを表示するのに最適です。要するに、彼らは非常に小さな画面の不動産のためにたくさんのパンチを詰め込んでいます！

このチュートリアルでは、さまざまな分類用語に分割されたカスタム投稿タイプの投稿を表示するための優れた方法を見ていきます。

この例では、「映画」のカスタム投稿タイプを設定し、「ジャンル」の分類法でこれらをグループ化します。ブートストラップタブになるのはこれらのジャンルであり、タブのコンテンツはこれらの特定のジャンルに属する映画になります。

これが私たちが達成しようとしていることです：

投稿タイプと分類法の設定

まず最初に、カスタムポストタイプのフィルムを作成する必要があります。これを行う最も簡単な方法は、優れたカスタム投稿タイプUIをインストールすることです。

以下の設定を使用してください。

次に、すべての映画を正しいジャンルにグループ化できるように、ジャンルの分類を設定する必要があります。カスタム投稿タイプUIを使用して、以下の設定を使用して分類を作成します。

階層をtrueに設定してください。これにより、分類法でタグではなくカテゴリスタイルの選択ボックスが使用されるようになります。

次の仕事は、いくつかの映画を作成し、それらを正しいジャンルに分類することです。次のプロセスを紹介できるように、いくつかのテストフィルムを追加しました。

簡単にするために、WordPressで「films」というページを作成してから、コードを配置するこのページのページオーバーライドを作成します。これを行う方法は、テーマフォルダーにpage-films.phpというファイルを作成することです。そうすると、WordPressはこのファイルを使用して映画のページを表示します。このようにして、必要なコードを追加し、サイトの映画ページにアクセスしたときにのみ表示されるようにすることができます。

ページを「フィルム」と呼ぶ必要はありませんが、ページのスラッグがページテンプレートの2番目の部分と一致していることを確認してください。したがって、ページのスラッグが「movies」の場合、テンプレートファイルはpage-movies.phpと呼ばれます。

タブの作成

Bootstrapサイトにアクセスしてタブのセクションにアクセスすると、必要なマークアップを取得できます。すべてのBootstrapjavascriptファイル（特に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 = array（
    'post_type' => 'films'、
    '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 =" btnbtn-primary ">続きを読む</a>
        </ td>
      </ tr>
      <？php endwhile; ？>
      <？php wp_reset_query（）？>
    </ table>
  </ div>
  <？php endif; ？>

</ div> <！-すべての映画のタブペイン->

投稿タイプのキー値を投稿タイプの名前に設定してください（フィルムを使用していない場合）。つまり、「post_type」=>「ここに投稿タイプ」を設定してください。次に、映画の投稿タイプのすべての投稿を、タイトルの昇順で返します。

次に、このwp_queryオブジェクトに対して通常のWordPressループを実行し、すべての映画の投稿を返します。

この例では、各タブペイン内にブートストラップテーブルを出力することを選択しましたが、いつでもデータを出力できます。覚えておくべきことは、wp_queryループを使用することで、the_title、the_excerpt、the_post_thumbnailなどのすべての優れたWordPress関数を使用できるということです。

このループの最後に、wp_reset_queryを実行することを忘れないでください。これにより、このページで他のループを実行する場合に発生する可能性のある問題を回避できます。

すべての映画を表示するタブコンテンツを整理したら、ジャンルにグループ化されたすべての映画を表示できるようにします。これを動的にしたいので、将来さらにジャンルを追加することを選択した場合、これらのそれぞれについて他のwp_quiresでコーディングする必要はありません。これを実現するには、次のタブコンテンツdivに対して別のforeachループを実行する必要があります。この中で、いくつかの分類パラメーターを含むwp_queryを実行します。

 <？php foreach（$ film_genres as $ film_genre）{？>
  <div class = "tab-pane">
    <？php 	
    $ args = array（
      'post_type' => 'films'、
      'posts_per_page' -1
      'orderby' => 'title'、
      'order' => 'ASC'、
      'tax_query' => array（
        アレイ（
          '分類' => 'ジャンル'、
          'フィールド' => 'スラッグ'、
          'terms' => $ 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 =" btnbtn-primary ">続きを読む</a>
        </ td>
      </ tr>
      <？php endwhile; ？>
      <？php wp_reset_query（）？>
    </ table>
    <？php endif; ？>

  </ div>
<？ }？>

以前使用したものと同じforeachをタブペインdivにラップします。これを行う必要があるのは、設定した$ film_genreオブジェクトから値にアクセスできるようにするためです。これは、スラッグ値を使用してwp_queryに渡し、タブペインIDを設定する必要があるためです。

wp_queryを作成したら、「すべての」フィルムタブペインと同じWordPressループを使用し、wp_query変数を$ film_genresのような一意の変数に変更することを忘れないでください。

そしてそれは本当にそれについてです。ブートストラップタブは完全に機能するはずです。フィルムが添付された新しいジャンルを追加すると、新しいタブとして表示されます。

完全なコードは次のとおりです。

 <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 = array（
        'post_type' => 'films'、
        '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 =" btnbtn-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 = array（
          'post_type' => 'films'、
          'posts_per_page' -1
          'orderby' => 'title'、
          'order' => 'ASC'、
          'tax_query' => array（
            アレイ（
              '分類' => 'ジャンル'、
              'フィールド' => 'スラッグ'、
              'terms' => $ 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 =" btnbtn-primary ">続きを読む</a>
            </ td>
          </ tr>
          <？php endwhile; ？>
          <？php wp_reset_query（）？>
        </ table>
        <？php endif; ？>

      </ div>
    <？ }？>

  </ div> <！-tab-content->

</ section> <！-film-tabs->

ご不明な点がございましたら、お気軽にお問い合わせください。