SWELLのヘッダー下にメニューを追加する方法｜子テーマでの出力例と確認点

2024.12.292026.10.31

SWELLのヘッダー直後に別のナビゲーションを置く実装例です。

子テーマのheader.phpに出力位置を追加し、画面上の位置とHTMLの順序をそろえます。

この記事ではSWELL 2.19.0のテンプレート構造を参照し、Pjaxを使わない通常の固定ページを対象にします。

現在のサイトへの適用や画面操作は未検証です。

旧方式のCSS並べ替えでは解決できないこと

旧稿では、フッター直前ウィジェットをflexのorderで本文より前に表示していました。

orderは見た目の順序を変えるため、読み上げやTabキーによる移動の順序も一緒に変わるとは限りません。

ナビゲーションを上に置いたつもりでも、キーボードでは本文の後に到達する構成になり得ます。

SWELL 2.19.0では、Pjax有効時に本文などがBarbaのコンテナ内へ入ります。

フッター前ウィジェットとは親要素が異なるため、旧CSSのorder指定をそのまま使って並べ替えることもできません。

ヘッダー用の既存クラスを広く変更するCSSと併せ、旧例を新規導入の手順から取り下げました。

CSSの表示順と操作順についてはMDNのorderの説明を参照してください。

以下は見た目の並べ替えではなく、テンプレートの出力位置を変更する方法です。

1．対象と復元手段を用意する

検証環境で有効な子テーマと、使用中のSWELLの版を確認します。

この例はis_page()が真になる固定ページに表示し、投稿・アーカイブ・検索結果には表示しません。

固定ページをトップに指定した場合も対象に含まれます。

Pjaxが有効な場合はサンプルの条件判定で出力しません。

Pjaxを使うサイトでは、固定されたヘッダー部分と遷移ごとに変わる本文の関係を別途設計してください。

この例を動かすためだけに本番のPjax設定を変更する手順ではありません。

子テーマ内の既存ファイルをバックアップし、ファイルマネージャーなどで戻せる状態にします。

すでに子テーマにheader.phpがある場合は内容を比較し、既存の変更を上書きしないでください。

なければ、使用中の親テーマからheader.php全体を子テーマへコピーします。

親テーマのファイル自体は編集しません。

WordPress公式の子テーマの説明も参照できます。

2．追加するメニューを作る

「外観 → メニュー」で表示するリンクを登録します。

メニューを選択した管理画面URLのmenu=の値がメニューIDです。

投稿IDとは異なります。

以下の例の94は自分のメニューIDへ変更します。

子階層の操作を増やさないため、例では第1階層だけを表示します。

以下の2枚は旧稿の表示例とメニュー設定画像です。

2026年10月11日に掲載された管理画面も、コード中のID94を実証するものではありません。

今回の新しい出力例を実行した画面ではありません。

SWELLでヘッダーの下に別のナビメニューを表示させたカスタマイズの完成イメージ。

WordPressの外観メニュー画面で編集するメニューを選択する欄。 — 2026年10月11日、Windows Chromeで撮影。外観 → メニューの読取画面。記事のID94は例で、この画面のメニューIDを示すものではありません。画像を開くと原寸で確認できます。

3．子テーマのheader.phpへ出力を追加する

SWELL 2.19.0のheader.phpでは、次の呼び出しで通常ヘッダーを出力しています。

この行を残したまま、その直後のPHP領域へ追加コードを入れます。

Barba用wrapperを開始する処理より前の位置です。

版が異なり同じ位置を確認できない場合は、そのまま貼り付けずテンプレートを比較してください。

SWELL_Theme::get_parts( 'parts/header/header_contents', null, $cache_key );

追加するコードは次のとおりです。

これはheader.phpの既存PHP領域へ貼る断片なので、PHP開始タグを重ねません。

functions.phpやCode Snippetsへ貼るコードではありません。

// 固定ページ・Pjax無効の構成だけに出力します。
if ( is_page() && ! SWELL_Theme::is_use( 'pjax' ) ) {
    $waza_menu_id = 94; // 自分のメニューIDへ変更
    $waza_menu = wp_get_nav_menu_object( $waza_menu_id );
    if ( $waza_menu && ! is_wp_error( $waza_menu ) ) {
        $waza_menu_html = wp_nav_menu( array(
            'menu'        => $waza_menu_id,
            'container'   => false,
            'menu_class'  => 'waza-header-links__list',
            'fallback_cb' => false,
            'depth'       => 1,
            'echo'        => false,
        ) );
        if ( $waza_menu_html ) {
            echo '<nav class="waza-header-links" aria-label="関連ページ">' . $waza_menu_html . '</nav>';
        }
    }
}

存在しないメニューIDは先に判定して出力を止めます。

fallback_cb=falseだけでは、指定メニューが見つからない場合に別のメニューへ切り替わる挙動まで防げないためです。

空のメニューでもナビゲーションの枠を出さない構成です。

4．追加メニューだけのCSSを設定する

追加CSSまたは子テーマのstyle.cssへ保存します。

テーマ標準のヘッダークラスやフッターのorderは変更しません。

狭い幅では項目を折り返し、長い文字列にも対応する指定です。

.waza-header-links {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    background: #1c1c1c;
    color: #fff;
}
.waza-header-links__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.waza-header-links__list > li { max-width: 100%; }
.waza-header-links a {
    display: block;
    padding: 12px;
    color: inherit;
    text-decoration: underline;
    overflow-wrap: anywhere;
}
.waza-header-links a:hover { background: #fff; color: #222; }
.waza-header-links a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}