WPサンプル 固定ページにカスタムポスト・カスタム分類の一覧 タブ切替(スタッフページ) 入れ子

スタッフページ

1.Custom Post Type UIでカスタムポスト『staffs』を作成

投稿タイプスラッグ *:staffs

複数形のラベル *:スタッフ

単数形のラベル *:スタッフ

アーカイブ:true

2.カスタムポストUIでカスタム分類『job_cat』を作成

タクソノミースラッグ *:job_cat

複数形のラベル *:チーム

単数形のラベル *:チーム

利用する投稿タイプ *:スタッフ

階層:true ← チェックボックスで選択できるようになる

スタッフ-> チーム 先にチームカテゴリ設定する

もう一つカテゴリを作る場合は さらに設定

3.Advanced Custom Fieldsカスタムフィールドで記事の入力項目を増やす

フィールドグループ:スタッフ入力項目 【設定】投稿タイプがスタッフと等しいページに設定

フィールドタイプ:テキスト

フィールドラベル:項目

フィールド名:job

手順:

【スタッフページ入力手順】<br>
1.タイトル:名前(日本語表記)例:山田 太郎<br>
2.タイトル下ブロック:メッセージ <br>
3.スラッグ:名前(英語表記 名前と苗字をハイフンで繋ぐ)例:taro-yamada<br>
4.職種:例:EDITOR<br>
5.チーム:該当項目チェック<br>
6.アイキャッチ画像:画像UP 』

プレースホルダーテキスト:EDITOR

先頭に追加:職種

//取得する時
<p><?php the_field('job'); ?></p>

4.固定ページでSTAFFページを作成

タイトル:STAFF、 スラッグ:staff

5.スタッフ専用のページテンプレートを作成

カスタムポストの子ページがあるかの有無で分岐する場合はこちら

page-staff.php

<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php get_header(); ?>

<?php
//---------------------------
// タブ
//---------------------------
?>
<ul class="tab-group">
  <li class="tab is-active">営業</li>
  <li class="tab">制作</li>
  <li class="tab">MUSIC</li>
</ul>

<?php
//---------------------------
// タブを切り替えて表示するコンテンツ
//---------------------------
?>
<div class="panel-group">

  <?php 
  //---------------------------
  // 各panel
  //---------------------------
  $staff_jobs = ['sales','create','music'];

  foreach( $staff_jobs as $staff_job):


    if( $staff_job === reset( $staff_jobs)){
      // 最初のpanelにis-showクラス
      echo '<div class="panel is-show">';

    }else{

      echo '<div class="panel">';
    }

   // WP_Query 設定
   $args = array(
    'posts_per_page' => 5,
    'post_type' => 'staffs', //カスタム投稿slag
    'orderby' => 'date', //日付を出力する基準
    'order' => 'DESC', //表示する順番(逆はASC)
    'tax_query' => array(//カスタム分類 job_ca の sales に関連付けられた投稿(post)を表示
      array(
        'taxonomy' => 'job_cat',//カスタム分類
        'field'    => 'slug',
        'terms'    => $staff_job,//ターム(配列)
      ),
    ),
   );

   $the_query = new WP_Query( $args );

   if ( $the_query->have_posts() ) {

     while ( $the_query->have_posts() ) {

       $the_query->the_post();

       //-------- ここからサブループ---------- 
       
       if( $the_query->query["tax_query"][0]["terms"] === 'sales' ){
         
            echo '<ul class="tab-group">';
            echo '<li class="tab2 is-active">Editor</li>';
            echo '<li class="tab2">Manager</li>';
            echo '</ul>';
            
         
            echo '<div class="panel-group">';
         
            $staff_job_details = ['editor','editor'];
                 
         
            foreach( $staff_job_details as $staff_job_detail){
              
              if( $staff_job_detail === 'editor'){
                // 最初のpanelにis-showクラス
                echo '<div class="panel2 is-show">';

              }else{

                echo '<div class="panel2">';
              }              
              
              // WP_Query 設定(サブ)
               $sub_args = array(
                'posts_per_page' => 5,
                'post_type' => 'staffs', //カスタム投稿slag
                'orderby' => 'date', //日付を出力する基準
                'order' => 'DESC', //表示する順番(逆はASC)
                'tax_query' => array(//カスタム分類 job_ca の sales に関連付けられた投稿(post)を表示
                  array(
                    'taxonomy' => 'job_cat_detail',//カスタム分類
                    'field'    => 'slug',
                    'terms'    => $staff_job_detail,//ターム(配列)
                  ),
                ),
               );
              
              $sub_query = new WP_Query( $sub_args );
              
                 if ( $sub_query->have_posts() ) {

                 while ( $sub_query->have_posts() ) {

                   $sub_query->the_post();
                     
                   get_template_part('template-parts/loop', 'staff');

                 }//endwhile(サブ)

                 //-------- WP_query終了-----------
                 wp_reset_postdata(); 

               }//endif(サブ)
              
              echo '</div>';//panel
              
            }//foreach (サブ)
         
            
            echo '</div>';//panel-group
         
       }else{
         
         get_template_part('template-parts/loop', 'staff');
         
       }
       
       
       

       

       //-------- 繰り返しここまで-----------

     }//endwhile

     //-------- WP_query終了-----------
     wp_reset_postdata(); 

   }//endif
  ?>

  </div><!--panel-->

  <?php endforeach; ?>

</div><!--panel-group-->


<?php get_footer(); ?>

繰り返す内容はループにする template-parts/loop-staff.php

<dl class='staff'>
  <dt class='staff-title'>
      <!--カスタムフィールド取得-->
      <p><?php the_field('job'); ?></p>
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?>
      </a>
      <!--slug取得-->
      <?php $name_en = strtoupper($post->post_name); ?>
      <p><?= str_replace('-', ' ', $name_en); ?></p>          
  </dt>
  <dd class="staff-pic">
      <a href="<?php the_permalink(); ?>">
          <?php if ( has_post_thumbnail() ): ?>
              <?php the_post_thumbnail('medium'); ?>
          <?php else: ?>
              <img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/noimage_600x400.png" alt="">
          <?php endif; ?>
      </a>
  </dd>
  <dd class='staff-date'>
    <!--the_date()だと同じ日付が非表示になるので注意-->
    <?php the_time('Y年m月d日'); ?>
  </dd>
  <dd class='staff-cat'>
      <!--※タクソノミー設定後:ハイパーリンク有り-->
      <!--get_the_term_list( $id, $taxonomy, '前に挿入する文字列', '区切り文字', '後に挿入する文字列' )-->
      <?php echo get_the_term_list($post->ID, 'job_cat', '', '|',''); ?>
    </dd>
  <dd class='staff-cat'>
      <!--※タクソノミー設定後:ハイパーリンク無し-->
      <?php
      if ($terms = get_the_terms($post->ID, 'job_cat')) {
          foreach ( $terms as $term ) {
              echo esc_html($term->name);

              //区切り文字
              if( next($terms) ){
                  echo '|';
              }
          }
      }
      ?>
  </dd>
  <dd class='staff-content'><?php the_content(); ?></dd>
</dl>

タブの参考はこちら

モーダル(同じクラスで複数・画像を拡大)はこちら