2026年5月20日

WordPressのハンバーガーメニューを実装する方法

テーマ・デザイン

はじめに

ハンバーガーメニューはモバイルサイトの必須UI要素です。CSS+JavaScriptで実装でき、子テーマの functions.php でJSを追加するだけでテーマを改変せずに導入できます。アクセシビリティ（ARIA属性）も合わせて実装します。

症状・原因

スマートフォンでナビゲーションメニューが使いにくい
ハンバーガーアイコンをクリックしてもメニューが開かない
アニメーションを付けたハンバーガーメニューの作り方がわからない
アクセシビリティに対応したメニューを実装したい

解決手順

ステップ1：HTMLにハンバーガーボタンを追加する

// functions.phpでheader.phpのメニュー前にボタンを挿入
add_action('wp_before_admin_bar_render', function(): void {}, 10);

// またはheader.phpに直接追加（子テーマでコピーして編集）
?>
<button
    class="hamburger-btn"
    aria-controls="primary-menu"
    aria-expanded="false"
    aria-label="メニューを開く"
>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
</button>

<nav id="primary-navigation" class="site-navigation">
    <?php wp_nav_menu(['theme_location' => 'primary', 'menu_id' => 'primary-menu']); ?>
</nav>
<?php

ステップ2：CSSでハンバーガーアイコンとメニューを作る

/* 子テーマの style.css に追加 */

/* ハンバーガーボタン */
.hamburger-btn {
    display: none; /* PCでは非表示 */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #1d2327;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* メニューオープン時のアニメーション */
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* モバイルでの表示制御 */
@media (max-width: 768px) {
    .hamburger-btn {
        display: flex;
    }

    #primary-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #1d2327;
    }

    #primary-menu.is-open {
        display: flex;
        animation: slideDown 0.3s ease;
    }

    #primary-menu li a {
        display: block;
        padding: 12px 20px;
        color: #ffffff;
        border-bottom: 1px solid #2c3338;
        text-decoration: none;
    }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

ステップ3：JavaScriptでトグル機能を実装する

// wp-content/themes/my-child-theme/js/hamburger.js
document.addEventListener('DOMContentLoaded', function () {
    const btn  = document.querySelector('.hamburger-btn');
    const menu = document.getElementById('primary-menu');

    if (!btn || !menu) return;

    btn.addEventListener('click', function () {
        const isOpen = btn.getAttribute('aria-expanded') === 'true';

        btn.setAttribute('aria-expanded', String(!isOpen));
        menu.classList.toggle('is-open', !isOpen);

        // aria-label をトグル
        btn.setAttribute('aria-label', isOpen ? 'メニューを開く' : 'メニューを閉じる');
    });

    // ESCキーで閉じる
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') {
            btn.setAttribute('aria-expanded', 'false');
            menu.classList.remove('is-open');
            btn.setAttribute('aria-label', 'メニューを開く');
            btn.focus();
        }
    });

    // メニュー外クリックで閉じる
    document.addEventListener('click', function (e) {
        if (!btn.contains(e.target) && !menu.contains(e.target)) {
            btn.setAttribute('aria-expanded', 'false');
            menu.classList.remove('is-open');
            btn.setAttribute('aria-label', 'メニューを開く');
        }
    });
});

ステップ4：JSをfunctions.phpで読み込む

// 子テーマの functions.php に追加
add_action('wp_enqueue_scripts', function(): void {
    wp_enqueue_script(
        'hamburger-menu',
        get_stylesheet_directory_uri() . '/js/hamburger.js',
        [],          // 依存なし（jQueryも不要）
        wp_get_theme()->get('Version'),
        true         // フッターで読み込む
    );
}, 20);

ステップ5：動作を確認する

# JSファイルが正しく読み込まれているか確認
wp eval "
global \$wp_scripts;
wp_print_scripts();
if (isset(\$wp_scripts->registered['hamburger-menu'])) {
    echo 'hamburger.js: ' . \$wp_scripts->registered['hamburger-menu']->src . PHP_EOL;
} else {
    echo 'hamburger-menu スクリプトが見つかりません' . PHP_EOL;
}"

# テーマのJSファイルを確認
ls -la wp-content/themes/my-child-theme/js/

# デバッグ: ChromeのDevTools Console で確認
# document.querySelector('.hamburger-btn') が null でないことを確認

注意事項

aria-expanded 属性をボタンに設定することで、スクリーンリーダーがメニューの開閉状態を読み上げます
タッチデバイスでは click イベントがタップでも発火するため、タッチイベントの別途実装は不要です
テーマのアップデートで header.php が上書きされないよう、必ず子テーマでカスタマイズしてください

まとめ

ハンバーガーメニューは「CSSで3本線ボタン → JSで aria-expanded トグル + is-open クラス → wp_enqueue_script で読み込み」で実装します。ESCキー対応とメニュー外クリック閉じ機能も追加することでUXが向上します。

Post Views: 14