タームをタブで表示し所属する記事一覧を表示する方法[WordPress]Posted by:岩下 雄一郎
WordPressのカスタム投稿でカスタムタクソノミーを使い各ターム記事一覧をタブ分けして表示する方法です。
運用でタームを増やす事があるとのことで記事が存在するタームをループで吐き出し
それに紐づく記事を表示する一覧を作成しました。
次使用する時の為に書いておきます。
タブ表示用のJS
$(function(){ $('.tab').on('click',function(){ var idx=$('.tab').index(this); $(this).addClass('is-active').siblings('.tab').removeClass('is-active'); $(this).closest('.tab-group').nextAll('.panel-group').find('.panel').removeClass('is-show'); $('.panel').eq(idx).addClass('is-show'); }); });
クラス名などは環境に合わせて変更してください。
タブ表示用のCSS
/* タブ---------------------------------------------------------------*/ .tab-group{ display: -moz-flex; display: -webkit-flex; display: flex; -moz-flex-flow: row wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap; -moz-justify-content: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; } .tab{ flex-grow: 1; padding:5px; list-style:none; border:solid 1px #CCC; text-align:center; cursor:pointer; width: 25%; align-items: center; margin: 0 auto; } .panel-group{ border-top:none; } .panel{ display:none; } .tab.is-active{ background:#F00; color:#FFF; transition: all 0.2s ease-out; } .panel.is-show{ display:block; }
まず最初にポストタイプやタクソノミーを変数に入れておく
例として
ポストタイプ=recruit
タクソノミー=recruit_cat
としています。環境に合わせて変えてください。
<?php $taxonomy_slug = 'recruit_cat'; // カスタムタクソノミーのスラッグを指定 $post_type_slug = 'recruit'; // 投稿タイプのスラッグを指定 $terms = get_terms($taxonomy_slug); // タームを取得 ?>
タブのボタンにするためのターム一覧を出力
<ul class="tab-group"> <?php foreach ( $terms as $value ) : ?> <li class="tab<?php if( $value === reset($terms) ) : ?> is-active<?php endif; ?>"><?php echo esc_html($value->name); ?></li> <?php endforeach; ?> </ul>
タームごとの記事一覧を出力
<div class="panel-group"> <?php foreach ( $terms as $value ) : ?> <?php $term_slug = $value->slug; $args = array( 'post_type' => $post_type_slug, $taxonomy_slug => $term_slug, 'posts_per_page' => -1, 'order' => 'DESC', 'orderby' => 'date', 'post_status' => 'publish' ); $myquery = new WP_Query( $args ); ?> <div class="panel<?php if( $value === reset($terms) ) : ?> is-show<?php endif; ?>"> <div class="list"> <?php if ( $myquery->have_posts()): ?> <?php while($myquery->have_posts()): $myquery->the_post(); ?> <dl> <?php $cterms = get_the_terms($post->ID, 'recruit_cat');?> <dt><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dt> </dl> <?php endwhile; ?> <?php endif; ?> <?php wp_reset_postdata(); ?> </div> </div> <?php endforeach; ?> </div>
上記であれば後々タームが増えたとしても自動的に新しいタームをタブとして出してくれるので便利でした。