カスタム投稿タイプの投稿一覧をカテゴリーごとにタブで切り替える【WP】
こんにちは！今回はWordpressのカスタム投稿タイプに関するトピックです。
カスタム投稿タイプが複数存在し、それらの投稿一覧をタブで切り替える仕組みについてお話をしていきたいと思います。
目次
作成する機能の概要
今回はあるメディアサイトを作ることを想定します。
そのメディアサイトには「イベント」「特集」「お役立ち」という3つのジャンルがあり、
これらをそれぞれカスタム投稿で作成した上で、一覧をタブで切り替えながら表示できるようにしていくイメージです。
ユーザーがタブをクリックすると、選択した投稿タイプの記事一覧が表示される仕組みです。
↓こんな感じのものを作っていきます
実装のポイントは以下の3点です。では早速見ていきましょう！
- ・3種類のカスタム投稿タイプ（イベント・特集・お役立ち）を用意
- ・タブをクリックすると、該当する投稿一覧が表示される
- ・すべての投稿をあらかじめHTMLに出力し、JavaScriptで表示を切り替える
実装手順
HTMLとCSSの基本構造を作成
まず基本的なタブと投稿一覧のHTMLは以下の通りです。
投稿タイプごとに、タブと投稿一覧を構成する要素に対して共通のdata属性を付与しておきましょう。
今回はdata属性を「data-type」にカスタマイズし、例えばイベントなら data-type="event" とつけておきます。
この属性値は後でJavaScriptで値を呼び出す際に役に立ちます。
また、あらかじめ選択表示させておきたいタブに対してクラスactiveも設定しておきます。
レイアウトに関してはCSSで適宜整えてあげてください。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
カスタム投稿タイプの登録（functions.php）
次にfunctions.php に以下のコードを追加して、イベント・特集・お役立ちの3つのカスタム投稿タイプを作成します。
<?php
function custom_post_types() {
$post_types = [
'event' => 'イベント',
'feature' => '特集',
'useful' => 'お役立ち'
];
foreach ($post_types as $key => $label) {
register_post_type($key, [
'labels' => [
'name' => $label,
'singular_name' => $label
],
'public' => true,
'has_archive' => true,
'supports' => ['title', 'editor', 'thumbnail'],
'menu_position' => 5,
]);
}
}
add_action('init', 'custom_post_types');
?>PHPで投稿一覧を出力
次に各投稿タイプの一覧（#post-list以下）をWordPressで出力します。
WP_Query を使って各投稿タイプの最新投稿を取得し、それぞれの投稿タイプに対応したデータ属性を付加した形で出力します。
以下の事例では投稿タイトル・抜粋文を出力させています。
<div id="post-list">
<?php
$post_types = ['event' => 'イベント', 'feature' => '特集', 'useful' => 'お役立ち'];
foreach ($post_types as $type => $label) :
$query = new WP_Query(['post_type' => $type, 'posts_per_page' => 5]);
?>
<div class="post-content" data-type="<?php echo $type; ?>" <?php echo $type !== 'event' ? 'style="display:none;"' : ''; ?>>
<?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
<div class="post-item">
<h3><?php the_title(); ?></h3>
<p><?php the_excerpt(); ?></p>
</div>
<?php endwhile; else : ?>
<p>投稿がありません。</p>
<?php endif; wp_reset_postdata(); ?>
</div>
<?php endforeach; ?>
</div>JavaScriptでタブの切り替えを実装
最後にJavaScriptでタブ切り替え時の仕組みの実装を行います。
タブをクリックした際に該当するdata属性（data-type）の値を変数postTypeに入れ、
クリックしたタブにクラスactiveの付与、加えて先ほどの変数の値が入った投稿タイプの投稿内容を表示させます。
$(function(){
$('.tab-menu li').on('click', function () {
var postType = $(this).data('type');
$('.tab-menu li').removeClass('active');
$(this).addClass('active');
$('.post-content').hide();
$('.post-content[data-type="' + postType + '"]').show();
});
})これで完了です。
冒頭でお見せした、タブと投稿内容が切り替わる仕組みが実装できたと思います！
クラスや属性の値などは必要に応じて書きかえて使用しましょう。
カスタム投稿の一覧表示切り替えの仕組みを実装したい時は、ぜひこの方法を参考に行ってみてください。
STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください！
