【2024】WordPressの記事一覧で「タブ切り替え」を実装する方法

2025年10月1日

WordPressでテーマを作成している時に、「記事一覧をタブで切り替えるようなデザイン」を実現したい時や、それを実現しているテーマを目にしたことがあると思います。

今回はZeroStartのコラム一覧で実装している「タブ切り替え」風の通信について解説していきます。

TOC

同期通信・非同期通信のどちらを使うか

一般的なタブ切り替えは非同期通信で行いますが、WordPressは非同期通信でDOMを切り替えるような前提設計がされていません。functions.phpに記載することでAjaxによる非同期通信でデータを取得しDOMを生成することも可能なのですが、「ページネーションの問題」「管理画面の投稿表示数設定が反映されない」と課題が多くなるので、今回はシンプルにURL切り替えによる同期通信で処理する方法を紹介します。

編集するファイル

archive.php
style.css (style.scss)

タブの見た目・コード

ZeroStartで使用している記事一覧のタブはこんな感じです。

見た目

コード-archive.php(アーカイブ系のphpファイル)

[code lang=”php”]
<div class="top-bar">
<ul>
<!– 通常の投稿記事一覧 –>
<a class="tab on" data-tab="column" href="/en/</?php echo esc_url(home_url('/')); ?>category/column/">
新着記事
</a>
<!– 投稿記事一覧 PV順 –>
<a class="tab" data-tab="popular" href="/en/</?php echo esc_url(home_url('/')); ?>popular">
人気記事
</a>
<!– 投稿記事一覧 [お知らせ]カテゴリのみ –>
<a class="tab" data-tab="news-post" href="/en/</?php echo esc_url(home_url('/')); ?>category/column/news-post/">
お知らせ
</a>
<!– 投稿記事一覧 [ホームページ作成]カテゴリのみ –>
<a class="tab" data-tab="homepage-post" href="/en/</?php echo esc_url(home_url('/')); ?>category/column/homepage-post/">
Website Creation
</a>
</ul>
</div>
<!– 記事一覧を取得する –>
<div class="post-list" id="post-list">
</div>
[/code]

ポイント

href属性：各カテゴリ一覧のURLを設定する。
data-tab：初期読み込み時に「タブを活性化させる処理」で必要になるパラメーター。カテゴリーのslug名と一致させることが必須です。カスタム投稿を利用している場合はタクソノミー名です。
class：[ on ]というクラスが付与されているタブをCSSで活性化しているような見た目にする

コード-style.css（style.scss）

[code lang=”css”]
.top-bar {
width: 100%;
margin-bottom: 50px;

ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;

a,
li {
position: relative;
width: 25%;
min-width: 160px;
margin-right: auto;
margin-bottom: 10px;
list-style: none;
font-size: 16px;
font-weight: 400;
padding: 20px 20px;
text-align: center;
color: #888;
cursor: pointer;

@media (max-width: $small) {
font-size: 14px;
width: 50%;
}

&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #f5f5f5;
}
}

a {
text-decoration: none;
}

a.on,
li.on {
color: #333;
font-weight: 500;

&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: unset;
background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);
}
}
}
}
[/code]

ポイント

after要素：タブの下に配置する線をafter要素で実装しています。border-bottomプロパティでもよいのですが、border-bottomプロパティの場合はグラデーション背景を指定出来ないため、デザイン性にこだわりを入れたい場合はafter要素で実装すると応用が効きます。

コード-JavaScript

archive.phpの末尾に<script>タグで下記のコードを記入します。

[code lang=”js”]
document.addEventListener("DOMContentLoaded", function() {
// 現在のURLを取得
var currentUrl = window.location.href;

// すべてのタブを取得
var tabs = document.querySelectorAll("a.tab");

// タブをループして、URLにdata-tabの値が含まれているかチェック
tabs.forEach(function(tab) {
var dataTab = tab.getAttribute("data-tab");
console.log(dataTab);
if (currentUrl.includes(dataTab)) {
// すべてのタブからonクラスを削除
tabs.forEach(function(t) {
t.classList.remove("on");
});
// 該当タブにonクラスを追加
tab.classList.add("on");
}
});
});
[/code]

まずページURLと４つのtab情報を取得した後、tabに設定しているdata-tabの中身とURLが一致するものを探します。一致しているものに対してonクラスを付与してCSSで見た目を帰ることで、タブを活性化して他のタブを非活性化させています。