WordPressのデフォルトの検索フォームは、外観 > ウィジェットにある「検索」ウィジェットを利用することで表示できます。
しかし、これだとウィジェットエリア以外で検索フォームを表示できないんですね。当記事では、検索フォームを自作する方法についてご紹介します。
サイト内検索フォームを自作する方法
WordPressのサイト内検索フォームを作成する方法についてご紹介します。基本的な方法〜ちょっとしたカスタマイズを順番に解説していきます。
- 検索フォームの基本的な実装方法
- 検索フォームの構造を変更する
- 複数の検索フォームを設置する
- 検索フォームを特定の投稿タイプに限定する
- 検索結果のクエリを書き換える
検索フォームの基本的な実装方法
検索フォームを表示するなら、以下のWordPress関数を利用するのが最も簡単です。
get_search_form();この関数をPHPファイルに記載するだけで検索フォームを表示できるんですね。出力されるフォームは、以下のHTMLになります。
<!-- 出力されるformの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>検索フォームの構造を変更する
次に「get_search_form()」で出力されるフォームの構造を変更する方法についてご紹介します。
「get_search_form()」は、「searchform.php」が存在している場合、そのファイルを優先的に読み込んでくれる仕様となっています。
そのため、テーマフォルダ内に「searchform.php」を作成して、その中に任意のフォームを書き込めば自由に出力内容を変更できるわけなんですね。
「style.css」と同じディレクトリに「searchform.php」を作成して以下をコピペしてみてください。こちらのフォームが表示されるはずです。
<?php /* 最低限必要な検索フォームの要素 */ ?>
<form role="search" method="get" class="my-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" value="<?php echo get_search_query(); ?>" name="s" placeholder="searchform.phpのフォーム"/>
<input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
</form>上記は、サイト内検索フォームに最低限必要な要素だけを残した状態になります。必要に応じてHTMLタグやクラス名を追加して使ってみてください。
複数の検索フォームを設置する
「get_search_form()」を使うと、デフォルトか「searchform.php」のフォームが表示されます。この仕様上、「get_search_form()」を使ってサイト内にフォームを複数設置する場合、どれも同じ構造になってしまうんですね。
そのため、サイト内に複数のフォームを設置する時は、以下を直接PHPファイルに書き込んでください。（searchform.phpに書いた内容）
<?php /* 最低限必要な検索フォームの要素 */ ?>
<form role="search" method="get" class="my-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" value="<?php echo get_search_query(); ?>" name="s" placeholder="searchform.phpのフォーム"/>
<input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
</form>こちらをサイトの各所に応じて構造を変えることで、柔軟に対応できるようになります。
検索フォームを特定の投稿タイプに限定する
サイト内に複数のフォームを設置する際に、特定のフォームのみ投稿タイプを限定したい時があります。
例えば、以下のようなケースです。
- フォームAは「投稿」だけを検索対象にする
- フォームBはカスタム投稿「商品」だけを検索対象にする
これは、formタグの中に以下のinputタグを追加することで対応できます。（valueの中身に限定したい投稿タイプを記載）
<?php /* このフォームの検索結果を「投稿」に限定する */ ?>
<form role="search" method="get" class="my-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php // 以下の1行を追加 ?>
<input type="hidden" name="post_type" value="post">
<input type="text" value="<?php echo get_search_query(); ?>" name="s" placeholder="searchform.phpのフォーム"/>
<input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
</form>検索結果のクエリを書き換える
検索結果をより複雑な条件に書き換える場合は、メインクエリの実行前に呼びだされるフック「pre_get_posts」を利用するのがオススメです。
以下に詳細な使い方を解説してますので、ぜひ参考にカスタマイズしてみてください。なお、「is_search()」を使えば、検索結果ページかどうか判定できます。
WordPressのアーカイブページには、投稿やカスタム投稿で作成したページが一覧で表示されます。この記事数は、WordPressの「1ページに表示する最大投稿数」が反映されるようになっています。 しかし、この設定で入力した数は、すべてのアーカイブページに共通して反映されてしまいます。当記事で...
絞り込み検索を実装するには？
WordPressでサイト内検索フォームを実装する方法についてご紹介しました。
キーワード検索だけなら非常に簡単ですが、カテゴリーやタグによる絞り込み検索を実装する場合は、難易度がかなり上がります。
自分で開発するのは技術力と時間を要するので、すでに組み込まれているテーマやプラグインを利用したほうが、コストパフォーマンスは高いでしょう。
以下に絞り込み検索できるテーマとプラグインを紹介してますので、ぜひご覧ください。
絞り込み検索フォームを利用できる弊社テーマ
全国規模のクチコミサイトが作成できるWordPressテーマ「REHUB」。 プラグインやカスタマイズの必要がなく、クチコミサイトが手軽に作成できるWordPressテーマは、国内ではおそらく「REHUB」だけかもしれません。それだけ「REHUB」には実用的なレビュー・評価機能が実装されていま...
情報量の多いブログを運営している場合には、適切に情報を届けるために簡易的な「検索フォーム」が備わったWordPressテーマを活用したり、必要に応じてカスタマイズして検索機能を設置している人も多いでしょう。 しかし、単純な検索機能では、タイトルや記事コンテンツのキーワードからすべて拾っ...
絞り込み検索フォームを実装できるプラグインまとめ
ウェブサイト内に設置されている検索フォームは、ユーザーが目的のコンテンツに効率よく辿り着くことをサポートするパーツのひとつです。ユーザビリティ向上にも貢献します。サイト内検索フォームの重要度が特に増してくるのは、サイト内のページ数が多いときです。 WordPressには、検索フォームを機能強化...
コメント