【WordPress】get_search_form() を使ってオリジナル検索フォームを表示する方法

WordPressで検索フォームを表示するには、get_search_form() 関数が便利です。

デフォルトの検索フォームを簡単に呼び出せるだけでなく、自分好みにカスタマイズしたオリジナル検索フォームを表示することもできます。

この記事では、get_search_form() の基本的な使い方と、オリジナル検索フォームを作成して表示する方法を解説します。

get_search_form() とは？

get_search_form() はテーマの任意の場所に検索フォームを表示するための関数です。
呼び出すだけで、デフォルトの検索フォームHTMLを取得・表示できます。

<?php get_search_form(); ?>

これだけで検索フォームが表示されます。

自動で出力されるHTMLをHTML5に対応させる方法

WordPressテーマでHTML5マークアップを利用したい場合、functions.php に以下のコードを追加して add_theme_support() を使いましょう。

function mytheme_setup() {
  add_theme_support( 'html5' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

ポイント

html5 をサポートすると、検索フォームやコメントフォームなどが自動的にHTML5対応のマークアップで出力されます。
上記の配列で、HTML5対応させたい要素を指定します。
これにより、get_search_form() の出力もHTML5準拠のコードになります。
テーマの functions.php に追加するだけで簡単に対応可能です。

この設定を行うことで、テーマ全体のフォームやギャラリーなどがHTML5仕様に最適化され、最新のWeb標準に準拠した出力が期待できます。

オリジナル検索フォームを作る方法

WordPressはテーマ内に searchform.php というテンプレートファイルを置くことで、get_search_form() の出力を上書きできます。

このファイルを編集して、フォームのHTMLを自由にカスタマイズしましょう。

例：シンプルなカスタム検索フォーム

searchform.php に以下のように記述します。

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

このフォームはアクセシビリティにも配慮しつつ、カスタムクラスやプレースホルダーも設定しています。