WordPressで複数の検索フォームを設置する際の注意点

WordPressでは、ウィジェットを使えば簡単に複数の場所に検索窓を設置することができます。

ただし、検索フォームをデフォルトのまま複数設置すると「正しくないHTMLのマークアップ」になってしまいます。

というのも、デフォルトの検索フォームにはid属性が記述されており、複数設置すると同一ページに同じidが存在してしまうのです。

W3C Markup Validatorでもエラーになります。

以下はデフォルトの検索ウィジェットで出力されるHTMLです。

<form role="search" method="get" id="searchform" class="searchform" action="URL">
  <div>
    <label class="screen-reader-text" for="s">検索:</label>
    <input type="text" value="投稿" name="s" id="s">
    <input type="submit" id="searchsubmit" value="検索">
  </div>
</form>

id属性の重複を防ぐには、二つの方法があります。

searchform.phpを設置する方法

一つは、テーマにsearchform.phpを作成して、独自にコードを書く方法です。

検索結果を表示するページのテンプレートは「search.php」ですが、検索フォーム部分のテンプレートは「searchform.php」になります。似て非なるものです。

以下は例です。

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <input type="search" class="search-field" placeholder="検索" value="<?php echo get_search_query(); ?>" name="s" />
  <input type="submit" class="search-submit" value="検索" />
</form>

input type=”submit” は、button要素にして画像を使うなどしてお好みに書き換えて下さい。

form の action属性にはトップページのURL、iputのname属性はsにしてGETで送信するようにしてください。

公式テーマの「Twenty Sixteen」あたりを参考にすると良いでしょう。

functions.phpに一行コードを追加する方法

もう一つの方法は、functions.phpを編集するという方法です。

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

add_theme_support( 'html5', array( 'search-form' ) );

こうすることによって、検索フォームをHTML5に対応させることができます。

こっちの方が圧倒的に楽です。

上のコードを追加すると、検索フォームは以下のようなコードで出力されます。

<form role="search" method="get" class="search-form" action="URL">
  <label>
    <span class="screen-reader-text">検索:</span>
    <input type="search" class="search-field" placeholder="検索 …" value="投稿" name="s">
  </label>
  <input type="submit" class="search-submit" value="検索">
</form>

id属性がありません。これなら複数設置しても問題ありませんね。

オリジナルの検索フォームを置きたい人は前者、とりあえず複数設置できれば良い人は後者で対応して下さい。