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

ホームページ作成 2024.06.07 2024.08.23

ホーム
ホームページ作成
【2024】WordPressの記事一覧で「タブ切り替え」を実装する方法

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

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

1 同期通信・非同期通信のどちらを使うか
2 編集するファイル
3 タブの見た目・コード
4 まとめ

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

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

編集するファイル

archive.php
style.css (style.scss)

タブの見た目・コード

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

見た目

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

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

ポイント

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

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

.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%);
            }
        }
    }
}

ポイント

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

コード-JavaScript

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

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");
        }
    });
});

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