閉じる

WordPressの検索フォームをget_search_formで設置・カスタマイズする実装手順とコード解説

広告

WordPressで構築されたWebサイトにおいて、サイト内検索はユーザーが目的の情報に素早く辿り着くための重要なナビゲーション要素です。

特に記事数が多いブログや、複雑な構成を持つコーポレートサイトでは、検索フォームの利便性がユーザーエクスペリエンス（UX）に直結します。

WordPressには検索フォームを簡単に呼び出すためのテンプレートタグ「get_search_form」が用意されており、これを利用することで保守性の高い実装が可能になります。

本記事では、WordPressの検索フォームをテーマ内に設置する基本手順から、searchform.phpを用いたカスタマイズ、さらには検索結果の挙動を制御する方法までを詳しく解説します。

目次 [ close ]
  1. get_search_form関数の基本
    1. 基本的な記述方法
    2. 引数による制御
  2. searchform.phpによるカスタマイズ
    1. 推奨されるHTML5構成のコード例
  3. functions.phpでのフィルターフック活用
    1. get_search_formフィルターの使用例
  4. 検索フォームのデザインをCSSで整える
  5. 検索結果の質を高めるための応用カスタマイズ
    1. 検索対象を投稿のみに限定する
    2. 特定のカテゴリーを除外する
  6. 検索フォームのアクセシビリティ向上
    1. SVGアイコンの利用
  7. まとめ

get_search_form関数の基本

WordPressの検索フォームを表示させる最も標準的な方法は、テンプレートファイル内でget_search_form()を呼び出すことです。

この関数を実行すると、WordPressはテーマ内に特定のファイルがあるかどうかを確認し、適切なHTMLを出力します。

基本的な記述方法

検索フォームを表示させたい場所（例えばサイドバーやヘッダーなど）に、以下のコードを記述します。

PHP
<?php
// 検索フォームを呼び出す
get_search_form();
?>

この関数が実行されると、WordPressは以下の優先順位でHTMLを生成します。

  1. テーマディレクトリ内にsearchform.phpが存在する場合、そのファイルの内容を読み込む。
  2. searchform.phpが存在しない場合、WordPress標準のデフォルト検索フォームを出力する。

デフォルトの出力内容は、テーマがHTML5をサポートしているかどうかで異なります。

現代のテーマ制作においては、HTML5形式での出力が一般的です。

引数による制御

get_search_form()には、出力をカスタマイズするための引数を渡すことができます。

PHP
<?php
$args = array(
    'echo' => true, // falseにすると文字列として返す
    'aria_label' => 'サイト内検索', // スクリーンリーダー用のラベル
);
get_search_form($args);
?>

例えば、PHPの変数にHTMLを格納して後で加工したい場合は、'echo' => falseを指定します。

searchform.phpによるカスタマイズ

独自のHTML構造で検索フォームを作成したい場合は、テーマのルートディレクトリにsearchform.phpというファイルを作成します。

このファイルを作成するだけで、get_search_form()を呼び出した際の出力が、作成したファイルの内容に差し替わります。

推奨されるHTML5構成のコード例

以下は、アクセシビリティに配慮した標準的なsearchform.phpの記述例です。

PHP
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label>
        <span class="screen-reader-text">検索:</span>
        <input type="search" class="search-field" placeholder="キーワードを入力..." value="<?php echo get_search_query(); ?>" name="s" />
    </label>
    <button type="submit" class="search-submit">
        <span class="search-icon">検索</span>
    </button>
</form>

重要な属性の解説

検索フォームを正しく動作させるためには、いくつかのルールを守る必要があります。

属性名役割必須/推奨
method="get"検索クエリをURLに含めて送信するために必要必須
action送信先をサイトのホームURLに設定する必須
name="s"WordPressが検索キーワードとして認識するためのパラメータ名必須
get_search_query()現在の検索ワードをinput要素に再表示させる推奨

特に、input要素のname属性が「s」であることは、WordPressの検索エンジンがクエリを受け取るための絶対条件です。

これが異なると、検索ボタンを押しても正しく検索結果ページが表示されません。

functions.phpでのフィルターフック活用

searchform.phpを作成せずに、functions.phpから検索フォームのHTMLを動的に変更する方法もあります。

これは、プラグイン等で検索フォームを書き換えたい場合や、テンプレートファイルを増やしたくない場合に有効です。

get_search_formフィルターの使用例

以下のコードをfunctions.phpに記述することで、出力されるHTMLをカスタマイズできます。

PHP
function my_custom_search_form( $form ) {
    $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">検索:</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="サイト内を検索" />
    <input type="submit" id="searchsubmit" value="検索" />
    </div>
    </form>';
    return $form;
}
add_filter( 'get_search_form', 'my_custom_search_form' );

この方法は強力ですが、HTMLが文字列として扱われるため、複雑なマークアップを行う場合はsearchform.phpを作成する方がコードの見通しが良くなります。

検索フォームのデザインをCSSで整える

HTMLの構造が決定したら、CSSを適用してサイトのデザインに馴染ませます。

以下は、シンプルでモダンな検索フォームのスタイリング例です。

CSS
/* フォーム全体のコンテナ */
.search-form {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

/* 入力フィールド */
.search-field {
    border: none;
    padding: 10px;
    flex-grow: 1;
    outline: none;
}

/* 送信ボタン */
.search-submit {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-submit:hover {
    background-color: #555;
}

/* スクリーンリーダー用テキスト（非表示） */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

レスポンシブ対応を考慮する場合、flexboxを使用することで、スマートフォンの画面幅に合わせて入力欄が伸縮するように設計するのがベストプラクティスです。

検索結果の質を高めるための応用カスタマイズ

検索フォームを設置するだけでなく、検索結果の精度や対象を制御することで、より使いやすいサイトになります。

検索対象を投稿のみに限定する

デフォルトでは、WordPressの検索結果には「投稿」のほかに「固定ページ」も含まれます。

検索結果をブログ記事（投稿）のみに絞りたい場合は、検索フォーム内にhidden（隠しフィールド）を追加します。

PHP
<!-- searchform.php 内に追記 -->
<input type="hidden" name="post_type" value="post" />

この1行を追加するだけで、検索クエリに&post_type=postが付与され、固定ページが検索結果から除外されます。

カスタム投稿タイプを使用している場合は、valueの部分をその投稿タイプ名（例：news）に変更することで、特定のコンテンツのみを検索対象にできます。

特定のカテゴリーを除外する

特定のカテゴリー（例えば「未分類」や「アーカイブ用」など）を検索結果に出したくない場合は、functions.phpでpre_get_postsアクションフックを使用します。

PHP
function filter_search_results( $query ) {
    // 管理画面ではなく、かつメインクエリの検索の場合
    if ( ! is_admin() && $query->is_main_query() && $query->is_search() ) {
        // 除外したいカテゴリーIDを指定（例：IDが5のカテゴリーを除外）
        $query->set( 'category__not_in', array( 5 ) );
    }
}
add_action( 'pre_get_posts', 'filter_search_results' );

この処理を記述することで、検索フォーム側を変更することなく、システム全体として検索ロジックを最適化することが可能です。

検索フォームのアクセシビリティ向上

2026年現在のWeb制作において、アクセシビリティの確保は必須事項です。

検索フォームにおいても、視覚障害者やキーボード操作ユーザーが迷わずに利用できる設計が求められます。

  1. ラベルの明示: <label>タグを適切に使用するか、aria-label属性を付与します。
  2. プレースホルダーだけに頼らない: 入力欄に何を入力すべきかをプレースホルダー（placeholder）だけで示すのではなく、常に確認できるラベルを併記するのが理想的です。
  3. フォーカス状態の可視化: CSSで:focus時のアウトラインを消さないようにし、現在どこを操作しているかを明確にします。

SVGアイコンの利用

視覚的に分かりやすくするために、虫眼鏡アイコン（SVG）をボタン内に配置するのも有効な手法です。

PHP
<button type="submit" class="search-submit" aria-label="検索実行">
    <svg width="20" height="20" viewBox="0 0 20 20">
        <!-- 虫眼鏡のパスデータ -->
        <path d="M13 13l6 6" stroke="currentColor" fill="none" />
        <circle cx="8" cy="8" r="7" stroke="currentColor" fill="none" />
    </svg>
</button>

SVGを使用することで、高解像度のディスプレイでもアイコンが鮮明に表示され、CSSによる色変更も容易になります。

まとめ

WordPressの検索フォーム設置は、単にget_search_form()を記述するだけの簡単な作業から、searchform.phpを用いた高度なカスタマイズまで幅広い手法が存在します。

まずは基本となるHTML5準拠のフォーム構造を理解し、その上でサイトの目的に合わせて検索対象の制限やスタイリングを行うことが重要です。

また、デザイン性だけでなく、アクセシビリティやユーザーの検索意図に沿った結果表示（pre_get_postsの活用など）を組み合わせることで、真に価値のある検索機能を提供できるようになります。

本記事で紹介したコードやテクニックを参考に、自身のテーマに最適な検索フォームを実装してみてください。

適切な検索機能の実装は、ユーザーの滞在時間向上やコンバージョン率の改善にも大きく寄与するはずです。

URLをコピーしました！