この記事では、WordPressサイトで、jQueryとPHPを使用して以下のようにカテゴリー毎の記事一覧をタブ切り替えするパーツの作成を紹介します。
パーツ化することで複数ページに汎用的に使用出来たり、他のサイトにも同じように使用する事が出来ます。
jQueryでタブ切り替え機能を作る
まずはサイト内にjQueryを読み込んで下さい。基本的な使い方は以下のページを確認下さい。
（わかっている人は飛ばして下さい。）
WordPressの場合は「$」の部分を「jQuery」に変換するか、「jQuery(function($) {}」の中で使用するようにしないと動作しないので注意。
jQuery(function($) {
// タブの切り替え（idでもclassでも可能）
$(document).ready(function() {
$(".tab_content").hide();//全ての.tab_contentを非表示
$("ul.tabs li:first").addClass("active").show();//tabs内最初のliに.activeを追加
$(".tab_content:first").show();//最初の.tab_contentを表示
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");//.activeを外す
$(this).addClass("active");//クリックタブに.activeを追加
$(".tab_content").hide();//全ての.tab_contentを非表示
var activeTab = $(this).find("a").attr("href");//アクティブタブコンテンツ
$(activeTab).fadeIn();//アクティブタブコンテンツをフェードイン
return false;
});
});
}やっていることは、jQueryのshowメソッドを使用して「active」クラスを付けるとフェードインで表示、無いと非表示。「active」クラス以外にはdisplay:noneが付く。ってだけです。
PHPでタブ切り替えコンテンツをパーツ化
次にPHPでタブ切り替えのパーツを作成していきます。
ファイルの配置は以下のようにする想定です。
templateparts
┗tab.php
実際のコードは以下です。（ほぼコピペでいけます。）
<!-- カテゴリータブ切り替え -->
<?php
// カテゴリーのスラッグ登録
$C1 = 'category1';
$C2 = 'category2';
$C3 = 'category3';
$C4 = 'category4';
$C5 = 'category5';
$C6 = 'category6';
$C7 = 'category7';
$C8 = 'category8';
// 投稿タイプ
$postData = 'post';
// 表示順の基準
$orderby = 'date';
// 昇順or降順
$order = 'DESC';
// 表示件数
$no = 12;
?>
<ul class="tabs">
<li class="<?php echo $C1 ?>"><a href=".tab<?php echo $C1 ?>">カテゴリー1</a></li>
<li class="<?php echo $C2 ?>"><a href=".tab<?php echo $C2 ?>">カテゴリー2</a></li>
<li class="<?php echo $C3 ?>"><a href=".tab<?php echo $C3 ?>">カテゴリー3</a></li>
<li class="<?php echo $C4 ?>"><a href=".tab<?php echo $C4 ?>">カテゴリー4</a></li>
<li class="<?php echo $C5 ?>"><a href=".tab<?php echo $C5 ?>">カテゴリー5</a></li>
<li class="<?php echo $C6 ?>"><a href=".tab<?php echo $C6 ?>">カテゴリー6</a></li>
<li class="<?php echo $C7 ?>"><a href=".tab<?php echo $C7 ?>">カテゴリー7</a></li>
<li class="<?php echo $C8 ?>"><a href=".tab<?php echo $C8 ?>">カテゴリー8</a></li>
</ul>
<div class="row">
<!-- カテゴリー1 -->
<div class="tab_content tab<?php echo $C1 ?> <?php echo $C1 ?>">
<?php
$cat_posts = get_posts(array(
'post_type' => $postData,
'category_name' => $C1,
'posts_per_page' => $no,
'orderby' => $orderby,
'order' => $order
));
global $post;
if($cat_posts): foreach($cat_posts as $post): setup_postdata($post); ?>
<div class="tab_container">
<div class="tab_card_inner mb-md-4">
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ): ?>
<img src="<?php the_post_thumbnail_url(); ?>" loading="auto">
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt="noimg">
<?php endif; ?>
<div class="tab_card_text">
<p class="mt-1 mb-1"><?php the_title(); ?></p>
</div>
</a>
</div>
</div>
<?php endforeach; endif; wp_reset_postdata(); ?>
</div>
<!-- カテゴリー2 -->
<div class="tab_content tab<?php echo $C2 ?> <?php echo $C2 ?>">
<?php
$cat_posts = get_posts(array(
'post_type' => $postData,
'category_name' => $C2,
'posts_per_page' => $no,
'orderby' => $orderby,
'order' => $order
));
global $post;
if($cat_posts): foreach($cat_posts as $post): setup_postdata($post); ?>
<div class="tab_container">
<div class="tab_card_inner mb-md-4">
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ): ?>
<img src="<?php the_post_thumbnail_url(); ?>" loading="auto">
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt="noimg">
<?php endif; ?>
<div class="tab_card_text">
<p class="mt-1 mb-1"><?php the_title(); ?></p>
</div>
</a>
</div>
</div>
<?php endforeach; endif; wp_reset_postdata(); ?>
</div>
<!-- カテゴリー3 -->
<div class="tab_content tab<?php echo $C3 ?> <?php echo $C3 ?>">
<?php
$cat_posts = get_posts(array(
'post_type' => $postData,
'category_name' => $C3,
'posts_per_page' => $no,
'orderby' => $orderby,
'order' => $order
));
global $post;
if($cat_posts): foreach($cat_posts as $post): setup_postdata($post); ?>
<div class="tab_container">
<div class="tab_card_inner mb-md-4">
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ): ?>
<img src="<?php the_post_thumbnail_url(); ?>" loading="auto">
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt="noimg">
<?php endif; ?>
<div class="tab_card_text">
<p class="mt-1 mb-1"><?php the_title(); ?></p>
</div>
</a>
</div>
</div>
<?php endforeach; endif; wp_reset_postdata(); ?>
</div>
<div>
・
・
・
<!--以下省略 （繰り返すだけ）-->
・
・
・
</div>
</div>3行目〜21行目では全タブ共通で必要な設定をしています。
まずは、カテゴリー毎の記事を読み込むためのカテゴリーのスラッグ情報を登録しときます。カテゴリーのスラッグの確認の仕方は「カテゴリーを編集」から見れます。（この部分は自身の環境に合わせて下さい。）
次に投稿一覧のループを作成するための設定を予め変数に入れて起きます。（全て統一するためと、後で簡単に変更出来る様にするため。）
23行目〜32行目ではタブ切り替えボタンを作成しています。ここをクリックすることで次のコンテンツが表示非表示が切り替わるようになっています。さらに予め格納しといたスラッグをクラス名に入れているので、カテゴリー毎の色分けにも対応する事が可能です。
37行目からはコンテンツの作成です。一つ一つのコンテナにもカテゴリー毎のクラスを入れ込んでいるので色分け可能です。
39行目からは一覧記事のループ処理をしています。予め「$C〜」や「post」などの設定を変数で入れているのでそこの値が入っていきます。
このようにカテゴリーのスラッグをclassに入れ込むことで色分けも楽になります。以下ではその方法と便利なスタイルシートも用意してますので合わせでどうぞ。
これでパーツの完成です。
タブ切り替えパーツを呼び出す
パーツが完成したら、それを呼び出します。
index.phpなどのページ用ファイルに以下のような感じでレイアウトすれば良いかと思います。
<! – タブ着替え（Bootstrap使用） -->
<div class="mt-5 pt-3">
<div class="m-5">
<h2 class="text-center top_h2">タブ切り替え</h2>
<p class="text-center">カテゴリー振り分けなど</p>
</div>
<! – タブ切り替えパーツ呼び出し -->
<?php get_template_part( '/template-parts/tab' ); ?>
</div>10行目のget_template_part関数で指定したファイルを呼び出しています。
今回の場合はtemplate-partsファイルの中にtab.phpという名前でパーツを作成しているのでこのような記述となっています。
タブ切り替えのCSS（SCSS）
最後におまけで、CSS（SCSS）の見本を載せておきます。
基本はBootstrapでレイアウトされているので、それありきでのスタイルになっています。
// タブ着替え
.tabs {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
li {
font-size: 12px;
margin: 0 15px;
width: auto;
height: 100%;
margin-left: 0;
a {
width: 100%;
height: 100%;
padding: 3px;
}
}
}
.tab_content {
display: flex;
justify-content: center;
flex-wrap: wrap;
.tab_container {
width: 22%;
margin: 1%;
.tab_card_inner {
a {
.tab_card_text {
p {
font-size: 13px;
}
}
img {
width: 100%;
height: 120px;
object-fit: cover;
}
}
}
}
}
// スマホ時
@media screen and (max-width:768px) {
.tabs {
flex-wrap: wrap;
li {
margin: 5px 15px;
}
}
.tab_content {
.tab_container {
width: 45%;
margin: 2%;
}
}
}
// ipadのみ
@media screen and (min-width:568px) and (max-width:1024px) {
.tabs {
flex-wrap: wrap;
li {
margin: 5px 15px;
}
}
.tab_content {
.tab_container {
width: 25%;
margin: 4%;
}
}
}これで初めにお見せした、タブ切り替えのコンテンツが完成するかと思います。
以上が「PHPとjQueryでカテゴリー毎の記事一覧をタブ切り替えするパーツの作成」でした。
参考になれば幸いです。
