【SWELL】ヘッダーロゴを中央配置し、メニューを左右に分割する方法

WordPressテーマ「SWELL」で、ヘッダーロゴを中央に配置し、グローバルメニューを左右に分割表示するカスタマイズ方法を解説します。

この内容はテーマファイルの編集を含みますので、カスタマイズは自己責任でお願いします。もし試される際はファイルを変更する前にバックアップをとり、子テーマのファイルを使用するようにしてください。

完成イメージ

左右に2つずつメニュー項目を配置し、中央にロゴが来るレイアウトです。

手順1: functions.phpでメニュー位置を登録

子テーマのfunctions.phpに以下のコードを追加します。

// カスタムメニュー位置を登録
function my_register_split_nav_menus() {
    register_nav_menus([
        'header_left'  => 'ヘッダー左側メニュー',
        'header_right' => 'ヘッダー右側メニュー',
    ]);
}
add_action( 'after_setup_theme', 'my_register_split_nav_menus' );

注意点：

必ず子テーマのfunctions.phpに追加してください
既存のコードの下に追加すればOKです

手順2: WordPressでメニューを設定

1. メニューを作成

WordPress管理画面で 外観 > メニュー に移動します。

左側メニューの作成：

「新しいメニューを作成」をクリック
メニュー名を「左側メニュー」などと入力
表示したいページ（例：Home, Work）を追加
メニューの位置で「ヘッダー左側メニュー」にチェック
「メニューを保存」をクリック

右側メニューの作成：

同様に新しいメニューを作成
メニュー名を「右側メニュー」などと入力
表示したいページ（例：Service, Contact）を追加
メニューの位置で「ヘッダー右側メニュー」にチェック
「メニューを保存」をクリック

2. 確認

「メニューの位置」で、以下が設定されていることを確認してください。

ヘッダー左側メニュー：左側メニュー
ヘッダー右側メニュー：右側メニュー

手順3: header_contents.phpを編集

子テーマにparts/header/header_contents.phpをコピーして編集します。

1. ファイルをコピー

FTPまたはファイルマネージャーで以下のパスにアクセス
- 親：/wp-content/themes/swell
- 子：/wp-content/themes/swell_child
親テーマのparts/header/header_contents.phpを子テーマにコピーします（ディレクトリも同じにしてください）

2. コードを編集

header_contents.phpの<div class="l-header__inner l-container">部分を以下のように変更します。

<div class="l-header__inner l-container">

    <!-- 左側メニュー -->
    <?php if ( has_nav_menu( 'header_left' ) ) : ?>
    <nav class="l-header__gnav -left">
        <?php
        wp_nav_menu([
            'theme_location' => 'header_left', 
            'menu_class'     => 'c-gnav',
            'container'      => false,
        ]);
        ?>
    </nav>
    <?php endif; ?>

    <!-- ロゴ（中央） -->
    <div class="l-header__logo">
        <?php echo SWELL_PARTS::head_logo(); ?>
        <?php if ( $SETTING['phrase_pos'] === 'head_wrap' ) : ?>
        <div class="c-catchphrase u-thin"><?=esc_html( SWELL_Theme::site_data( 'catchphrase' ) )?></div>
        <?php endif; ?>
    </div>

    <!-- 右側メニュー -->
    <?php if ( has_nav_menu( 'header_right' ) ) : ?>
    <nav class="l-header__gnav -right">
        <?php
        wp_nav_menu([
            'theme_location' => 'header_right',
            'menu_class'     => 'c-gnav',
            'container'      => false,
        ]);
        ?>
    </nav>
    <?php endif; ?>

    <!-- ウィジェットなど -->
    <?php
    \SWELL_Theme::outuput_widgets( 'head_box', [
        'before' => '<div class="w-header pc_"><div class="w-header__inner">',
        'after'  => '</div></div>',
    ]);

    SWELL_Theme::get_parts( 'parts/header/sp_btns' );
    ?>
</div>

手順4: CSSを追加

子テーマの style.css 、もしくは外観 > カスタマイズ > 追加CSS に以下を追記します。

@media (min-width: 960px) {

    /* ヘッダー全体をGridレイアウトに */
    .l-header__inner {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto;
        align-items: center !important;
        min-height: 150px;
        gap: 40px;
        max-width: 1200px;
    }

    /* 左側メニュー */
    .l-header__gnav.-left {
        display: flex !important;
        justify-content: flex-end;
        grid-column: 1;
        grid-row: 1;
    }

    /* ロゴ（中央） */
    .l-header__logo {
        grid-column: 2;
        grid-row: 1;
        text-align: center;
        margin: 0 !important;
    }

    /* 右側メニュー */
    .l-header__gnav.-right {
        display: flex !important;
        justify-content: flex-start;
        grid-column: 3;
        grid-row: 1;
    }
}

カスタマイズのポイント

レイアウトの調整

メニューとロゴの間隔: gap: 40px; の値を変更
ヘッダーの高さ: min-height: 150px; の値を変更

ロゴのサイズはカスタマイザーから変更でき、サンプルサイトは80pxに設定しています。
上記CSSはレイアウトの調整になりますので、細かなデザインもCSSで調整してオリジナルのヘッダーをつくってみてください。

トラブルシューティング

メニューが表示されない場合

キャッシュをクリア
- ブラウザのキャッシュ
- WordPressのキャッシュプラグイン
- SWELLのキャッシュ機能
メニューの設定を確認
- 外観 > メニューで正しく設定されているか確認
- メニューの位置が正しく選択されているか確認
functions.phpを再保存
- 何も変更せずに「ファイルを更新」をクリック

レイアウトが崩れる場合

!important を追加してSWELLの既存スタイルを上書き
ブラウザの開発者ツール（F12）でCSSの適用状況を確認

まとめ

この方法で、SWELLのヘッダーをより柔軟にカスタマイズできます。

メリット：

ロゴを中央に配置できる
メニューを左右に分散させてバランスが良い
スマホ表示では自動的に非表示になる