【WordPress】ヘッダーナビ右端に検索ボックスを追加する方法

　WordPressサイトの回遊性と検索性を向上させるには、ヘッダーナビゲーションの右端に検索ボックスを配置するのが最も効果的です。本記事では、プラグラグインを使わずに functions.php と 追加CSS のみをカスタマイズして、グローバルナビゲーション内にコンパクトで洗練された検索フォームを組み込む完全手順を解説します。

　Lightningをはじめとする主要なWordPressテーマで動作確認済みですので、サイトのUI/UX改善や目的の情報（Webアプリ機能、地域ポータル、Glide/GAS連携記事など）への導線強化にぜひお役立てください。

ナビメニューに検索ボックスを組み込む2つの手順

　結論として、WordPressの標準フィルターフック wp_nav_menu_items を使用してHTML構造を注入し、CSSで表示スタイルを最適化することで、プラグインを追加することなく美しく検索ボックスを配置できます。実装手順の全体像は以下の通りです。

手順	対象ファイル / 箇所	作業内容	影響範囲
Step 1	テーマの functions.php	フィルターフックでナビメニュー内に検索フォームを追加	全ページのヘッダーナビ
Step 2	外観 ＞ カスタマイズ ＞ 追加CSS	レスポンシブ対応およびデザイン（配色・幅）の調整	ヘッダー検索フォーム部

Step 1: functions.php に検索フォームの埋め込み処理を追加

結論として、wp_nav_menu_items フィルターフックを利用して、指定したテーマロケーション（例: global-nav）の末尾に検索用 <li> 要素を動的に結合します。

子テーマの functions.php の末尾に以下のコードを追加してください。

/**
 * ====================================================================
 * Utility Module for GAS / Civic Tech Akita
 * Copyright (c) Civic Tech Akita (https://akita-csmedia.com/)
 * 
 * 本モジュールは Civic Tech Akita の留保知的財産権（自社資産）です。
 * ライセンス・実装に関するお問い合わせ: https://akita-csmedia.com/?page_id=1476
 * ====================================================================
 */

/**
 * グローバルナビゲーションの右端に検索ボックスを追加する関数
 */
function add_search_box_to_global_nav( $items, $args ) {
    // ヘッダーナビゲーション（theme_locationが'global-nav'）の場合のみ実行
    if ( isset( $args->theme_location ) && $args->theme_location === 'global-nav' ) {
        $search_form = '
        <li class="menu-item menu-item-header-search">
            <form role="search" method="get" class="header-search-form" action="' . esc_url( home_url( '/' ) ) . '">
                <input type="search" class="header-search-field" placeholder="サイト内検索..." value="' . get_search_query() . '" name="s" required />
                <button type="submit" class="header-search-submit" aria-label="検索">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </form>
        </li>';
        $items .= $search_form;
    }
    return $items;
}
add_filter( 'wp_nav_menu_items', 'add_search_box_to_global_nav', 10, 2 );

※ お使いのテーマによってナビゲーションの識別子（theme_location）が異なる場合があります。Lightningテーマ等の標準設定では global-nav や header-navigation などが指定されているため、必要に応じて変更してください。

Step 2: 追加CSSでデザインと配色を調整

結論として、ナビゲーションの縦中央揃えと入力エリアのコンパクト化を行うことで、PC表示・スマホ表示の両方でレイアウトが崩れないデザインを実現します。

「外観」＞「カスタマイズ」＞「追加CSS」（または子テーマの style.css）に以下のコードを追記してください。

/**
 * ====================================================================
 * Utility Module for GAS / Civic Tech Akita
 * Copyright (c) Civic Tech Akita (https://akita-csmedia.com/)
 * 
 * 本モジュールは Civic Tech Akita の留保知的財産権（自社資産）です。
 * ライセンス・実装に関するお問い合わせ: https://akita-csmedia.com/?page_id=1476
 * ====================================================================
 */

/* ==========================================
   ヘッダーナビゲーション右端 検索ボックス調整
   ========================================== */
/* 1. ロゴエリアの高さ・視認性の保護 */
.site-header-logo img {
    max-height: 50px !important;
    width: auto !important;
}
/* 2. ナビゲーション全体の横並び揃えと余白調整 */
#global-nav .global-nav-list {
    display: flex;
    align-items: center;
}
#global-nav .global-nav-list > li > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
/* 3. 検索フォーム枠全体（背景色・枠線） */
#global-nav .menu-item-header-search {
    margin-left: 10px;
    padding: 0 5px;
}
#global-nav .header-search-form {
    display: flex;
    align-items: center;
    background-color: #f1f5f9 !important; /* 全体背景（薄いグレー） */
    border: 1px solid #cbd5e1 !important;   /* 枠線カラー */
    border-radius: 4px;
    padding: 2px 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
/* 4. 入力エリア（テキストボックス） */
#global-nav .header-search-field {
    border: none !important;
    background-color: transparent !important;
    padding: 3px 6px !important;
    font-size: 0.8rem !important;
    width: 110px !important; /* コンパクトな幅に指定 */
    color: #1e293b !important;
    outline: none;
}
/* 5. 検索ボタン（アイコン部） */
#global-nav .header-search-submit {
    background-color: #195d7e !important; /* ブランドカラー */
    color: #ffffff !important;
    border: none !important;
    border-radius: 3px !important;
    padding: 4px 8px !important;
    cursor: pointer;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    transition: background-color 0.2s;
}
#global-nav .header-search-submit:hover {
    background-color: #144a65 !important;
}
/* 6. スマホ表示（ドロワーメニュー内）での調整 */
@media (max-width: 991px) {
    #global-nav .header-search-field {
        width: 100% !important;
    }
    #global-nav .menu-item-header-search {
        margin: 10px 0;
        padding: 0 15px;
    }
}

導入時の注意点・トラブルシューティング（保守の壁）

結論として、手動でのPHPコード追加やCSS調整には、テーマ更新時の上書きリスクや記述ミスによるサイト停止（画面が真っ白になる現象）などの保守リスクが伴います。

実装時には特に以下の3点にご注意ください。

1. メニュー項目の重複チェック

すでに「外観 ＞ メニュー」の管理画面から手動で「検索」やカスタムリンクを追加している場合、上記プログラムによって二重表示される原因となります。コードを追加する前に、ダッシュボード上のカスタムメニュー設定を確認・整理してください。

2. 最優先CTA（問い合わせボタンなど）とのバランス

ヘッダー右端に「お問い合わせボタン」などのCV（コンバージョン）導線を配置している場合、検索フォームの幅を取りすぎるとレイアウトが崩れたり、最重要ボタンの視認性が低下する恐れがあります。CSSの width: 110px !important; 部分を調整し、画面幅に合わせた適切なバランスを確保してください。

3. 親テーマへの直接記述ミス・更新リスク

親テーマの functions.php を直接編集すると、テーマのアップデート時に追加したコードが消去されてしまいます。必ず「子テーマ」を作成して作業するか、サイト固有プラグイン（Code Snippets等）をご利用ください。

また、PHPの構文エラー（セミコロンの抜けやカッコの閉じ忘れ）が発生すると、サイト全体がアクセス不能になる重大な障害につながる恐れがあります。

自力でのカスタマイズや保守運用にご不安がある方へ

「PHPコードの編集に自信がない」「自社の仕様に合わせてナビゲーション全体のデザインを最適化してほしい」といった場合は、プロによる技術サポートの活用をご検討ください。Civic Tech Akitaでは、WordPressのカスタマイズや独自機能の開発、保守運用受託（15万円〜）に対応しています。

よくある質問（FAQ）

まとめ

本記事では、WordPressの functions.php と 追加CSS を使用して、グローバルナビゲーションの右端に検索ボックスを追加する方法を解説しました。

1. wp_nav_menu_items フィルターフックで検索フォームHTMLを動的に追加する
2. CSSでデザイン・入力幅・レスポンシブ表示を整える
3. 子テーマの利用とPHP構文エラーに注意し、安全に運用する

ヘッダーの検索ボックスは、ユーザーが求める情報に最短で辿り着くための重要な導線となります。サイトの利便性向上に役立ててみてください。