WordPress 検索フォームのカスタマイズ

検索フォームのデザインを自由にカスタマイズする

検索フォームを表示する

カスタマイズする前にWordPressの検索フォームを表示する方法を確認してみます。

テーマの関数get_search_formを利用することで検索フォームを表示することが可能です。

<?php get_search_form(); ?>

標準の状態では、formタグを最上位とするHTMLが出力されます。

カスタマイズする方法

検索フォームの標準HTMLを確認

get_search_formで出力されるHTMLは、WordPressコアファイルの

wp-includes/general-template.php

内に定義されています。

たくさんのPHP関数が書いてありますが、その中に

get_search_form()

という関数が定義されていることを確認できるはずです。WordPress3.9.1だと、204行目にget_search_formが定義されており、

234行目からHTML5用のHTML
242行目からHTML5以外の場合のHTML

出力されるHTMLを確認することが出来ます。本記事では、HTML5のコードに対してカスタマイズを行います。

searchform.phpを使ったカスタマイズ

ベースとなる検索フォームのHTMLが確認できたので、そのHTMLコードに対してカスタマイズします。

テーマのルートディレクトリに、

searchform.php

という検索フォーム用のテーマファイルを作成することで、カスタマイズすることができます。具体的には、以下のようにしてカスタマイズしたHTMLを書きます。

$form = '<form role="search" method="get" class="search-form navbar-form form-inline" action="' . esc_url( home_url( '/' ) ) . '">
  <div class="form-group">
    <label>
      <span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
    </label>
    <input type="search" class="search-field form-control" placeholder="' . esc_attr_x( 'Search &hellip;', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( 'Search for:', 'label' ) . '" />
  </div>
  <div class="form-group">
    <input type="submit" class="search-submit btn btn-default" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />
  </div>
</form>';

echo $form;

searchform.phpはあくまでもPHPファイルなので、PHPのヒアドキュメントで直接HTMLを記述し変数に格納した上で、最後にechoで出力するやり方です。

ヒアドキュメント内のHTMLは基本的に純粋なHTMLなので、自由にカスタマイズすることが出来ます。

get_search_formフィルターフックでカスタマイズ

searchform.phpというテーマファイルではなく、フィルターフックをfunctions.phpに設定して検索フォームをカスタマイズすることも可能です。

get_search_formフィルターフックを設定します。

add_filter( 'get_search_form', 'new_get_search_form' );

new_get_search_form関数で以下のカスタマイズしたHTMLコードを定義します。

function new_get_search_form( $form ) {

  $form = '<form role="search" method="get" class="search-form navbar-form form-inline" action="' . esc_url( home_url( '/' ) ) . '">
    <div class="form-group">
    <label>
      <span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
    </label>
    <input type="search" class="search-field form-control" placeholder="' . esc_attr_x( 'Search &hellip;', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( 'Search for:', 'label' ) . '" />
    </div>
    <div class="form-group">
      <input type="submit" class="search-submit btn btn-default" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />
    </div>
  </form>';

  return $form;
}

上のHTMLは、カスタマイズされた検索フォームになりますので、class属性やHTMLの構造を自由に変更することで、希望するデザインにすることが可能です。