サイト内検索フォームを設置する

サイト内検索フォームを設置するには、下記のいずれかで行います。

  1. 設置したい場所で get_search_form() を使用する
  2. 自力で検索フォーム用HTMLを記述する

設置したい場所で get_search_form() を使用する

1の場合は、設置したい場所(header.phpなど)で下記のように記述します。

CSSが入っていない場合、表示は下記のようになります。

スクリーンショット 2015-12-27 17.24.43

HTMLとしては下記のように出力されます。

タグをHTML5用にする

テーマのfunctions.phpに「add_theme_support('html5');」と記載すると、下記のようにHTML5用の出力になります。

placeholder(プレースホルダ。入力前の透かし文字)が追加されたり、クラス名が一部変更になります。

タグをカスタマイズ

タグをカスタマイズしたい場合は、テーマに「searchform.php」というファイルを設置してその中に独自の検索フォーム用HTMLを記述してください。

(例)

自力で検索フォームを記述する

自力で検索フォームを記述する場合は、前の「タグをカスタマイズ」と同じようなタグを好きなところに配置するだけです。(こちらのほうが簡単かもしれません)

配置する際、タグに最低限必要なのは

  • フォームのaction(送信先)をWordPressのサイトのURLにする
  • 検索欄を含め、検索欄のnameをsにする
  • 送信ボタンを含める

の3つです。

(最低限の検索フォームのタグの例)

※「get_search_query()」というテンプレートタグは最低限必要なものではありませんが、検索ページでこのフォームが表示されるときに直前に検索したキーワードが表示されるようになり便利です。

更新履歴

  • 2016/09/25 get_search_query() の前に echo が含まれていない箇所があった問題を修正しました。(抜けがあり申し訳ありません…)
  • 2016/09/11 フォーム用のHTMLでactionのURLを出力する部分にechoが含まれていなかった問題を修正しました。(URL階層が深いと検索がうまく動作しなくなっていました)
  • 2015/12/27 初版

 

コメント

内容の誤りなどがありましたら下記からご連絡をお願いします。頂いたコメントは基本的に公開されることはありません(必要な場合は個別に返信させて頂きます)。

CAPTCHA