WordPressの検索機能を使ってサイト内検索フォームを設置する

WordPressでは、標準で検索機能が用意されており、簡単なコードの記述で検索フォームを設置することができます。検索する際は、一般の検索エンジンとは少し違う部分があります。ユーザビリティを考えると若干のカスタマイズも必要ですので、それらを解説します。

【コンテンツ】

  1. 検索フォームを設置する場所にコードを記述する
  2. 検索フォーム部分のCSS設定をする
  3. 検索結果を表示するページを用意する
  4. WordPress検索機能の仕様
  5. 検索対象を絞り込む
  6. 検索条件未入力時の処理を追加する

【記事執筆時の環境】
WordPress 3.8.1

検索フォームを設置する場所にコードを記述する

フォームを設置するには、表示したいページの場所に、
<?php get_search_form(); ?>
と記述するだけです。

これで、以下のようなHTMLコードを出力してくれます。
※<?php echo home_url( '/' ); ?>の部分は実際のURLに変換されます。

get_search_form()の動作としては、searchform.phpが存在する場合は、その内容を読み込みます。
searchform.phpが存在しない場合は、上記コードを出力します。

従って、検索フォームをカスタマイズしたい場合は、searchform.phpを作成し、その中に上記コードを参考に内容を記述すればいいわけです。

検索フォーム部分のCSS設定をする

デフォルトでの検索フォームの表示は、下記のようになります。

デフォルトでの検索フォーム

ここでは、searchform.phpを用意せず、デフォルトコードを使用することとしますが、CSSで若干の修正を加えます。

検索ボックスの前の、「検索:」という文字を消すのと、ボックスの幅をCSSで設定してみます。

【注意!】
ボックスやボタンのデザインはブラウザによって違ってきますので、ボックス幅を大きくするとレイアウト崩れが発生する場合があります。各ブラウザで表示確認し、適切なボックス幅を設定するようにします。特にiOS Safariでは注意が必要です。

検索結果を表示するページを用意する

検索結果を表示するページは、search.phpになります。
search.phpが存在しない場合は、index.phpになります。

検索条件にヒットしない場合はメッセージを表示するなど、検索結果を表示する際は工夫が必要ですので、専用ページとしてsearch.phpを用意するのがよいでしょう。

以下は、get_search_query()で検索文字を取得し見出しに表示させているのと、検索条件にヒットしなかった場合の処理を記述した例です。

他によくやるのは、ヒットした件数を「$wp_query->found_posts」を使って表示するくらいです。

WordPress検索機能の仕様

WordPressの検索機能は、一般の検索エンジンとは少し異なる部分があります。
カスタマイズする場合は、それを前提にします。
デフォルト状態での動作仕様は以下のようになっています。

  • 検索対象となるページは、投稿記事と固定ページです。
  • 検索条件は、キーワードのみです。
  • キーワードが含まれているか対象とするのは本文とタイトルです。抜粋に入力した文章は対象としません。
  • AND検索するには半角スペースで区切ります。全角スペースを区切り文字として認識させるには、デフォルトで入っているプラグイン「WP Multibyte Patch」を有効にします。
  • 検索条件が未入力で検索をかけると、index.phpを表示します。

検索対象を絞り込む

検索結果に固定ページを表示したくない、あるいは特定のカスタム投稿タイプを指定したいなど、検索対象を絞り込みたい場合があります。

この場合は、posts_searchというフィルターを使ってfunctions.phpに記述します。

以下は、投稿記事とカスタム投稿タイプ'custompost'のみを検索対象とするコードを、functions.phpに記述した例です。

検索条件未入力時の処理を追加する

検索条件が未入力で検索をかけると、たとえsearch.phpが存在していても、index.phpを呼び出してしまいます。

その場合でも、search.phpを表示させるには、template_redirectというアクションフックを使い、functions.phpに以下のように記述します。

なお、検索条件未入力時には、全件が検索結果となります。
そのケースではメッセージだけを表示し、検索結果を表示しないようにするには、search.phpに条件を追加する必要があります。

以下は、その条件を追加した記述例です。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ