WordPressの検索機能をプラグイン無しで拡張する

WordPress標準の検索機能は、タイトルと本文を対象としたキーワード検索です。機能を拡張するプラグインも存在しますが、ここではプラグインを使わずに、カスタムタクソノミーとカスタムフィールドを検索対象として追加する実装方法を解説します。

【コンテンツ】

  1. WordPressの検索機能のおさらい
  2. この記事で実装する検索機能の概要
  3. 検索キーワード未入力時のリダイレクト処理を追加する
  4. 検索対象を該当するカスタム投稿に絞り込む
  5. 検索フォームをコーディングする
  6. 検索結果ページをコーディングする

【記事執筆時の環境】
Windows 10 Pro 64bit
WordPress 4.9.6
MariaDB 10.1.31
PHP 7.1.15

WordPressの検索機能のおさらい

まずは、標準で搭載されているWordPressの検索機能について、おさらいの意味で説明します。

  • 検索条件は、キーワードのみです。
  • キーワードが含まれているか対象とするのは本文とタイトルです。抜粋に入力した文章は対象としません。カスタムフィールドも検索対象とするには、「functions.php」にフィルターフックを記述することで実現できますが、簡単に実現したいなら、プラグイン「Search Everything」や「Relevanssi - A Better Search」を使うこともできます。
  • 検索対象となるページは、投稿記事と固定ページです。固定ページを除くとか、特定のカスタム投稿だけを検索対象としたい場合は、「posts_search」というフィルターを使い「functions.php」に記述することで実現できます。もちろんプラグインでもできます。
  • 検索結果を表示するページは、「search.php」です。「search.php」が存在しない場合は、「index.php」になります。
  • 検索条件が未入力で検索をかけると、「search.php」ではなく「index.php」を表示します。その場合でも「search.php」を表示したい場合は、リダイレクトをする記述を「functions.php」内にします。
  • 検索フォームを呼び出す関数として、「get_search_form()」があります。「get_search_form()」の動作としては、「searchform.php」が存在する場合はその内容を読み込み、存在しない場合は、組み込みの HTMLコードを出力します。

この記事で実装する検索機能の概要

サンプルとして、パソコン教室で開催している講座を検索する機能を実装します。
各講座の情報は、カスタム投稿で入力しています。

パソコン講座の検索は、以下の項目で AND検索できるようにします。

  • 講座カテゴリー
    カスタムタクソノミーで登録しており、検索はチェックボックスで選択します。
  • 開催曜日
    カスタムフィールドで登録しており、検索はチェックボックスで選択します。
  • 開始時間
    カスタムフィールドで登録しており、検索はチェックボックスで選択します。
  • キーワード
    講座タイトルと本文にテキストフィールドに入力したキーワードが含まれているか検索します。こちらは WordPress の標準機能を使います。

検索機能を提供するプラグインとして、「WP Custom Fields Search」や「FE Advanced Search」がありますが、カスタマイズするのに制限があり応用がきかなくなりますので、今回は使いません。
また、検索対象を指定したり拡張するプラグイン「Search Everything」や「Relevanssi - A Better Search」も使いません。

それらのプラグインは便利ですが、WordPress のバージョンが変わったり、検索条件を変えると動作がおかしくなることもあったので、現在私は限定された用途でしか使わないことにしています。
ただし、カスタムフィールドを登録するのに、プラグイン「Advanced Custom Fields」を使っています。

検索キーワード未入力時のリダイレクト処理を追加する

WordPress のキーワード検索では、input要素の name属性に "s" を指定し GET で送ります。この "s" に値が入っている時は、「search.php」を表示しますが、値が入っていない時は、「index.php」を表示してしまいます。

今回の検索仕様ではキーワードが空欄ということも考えられるし、検索結果表示の処理は「search.php」だけで行いたいので、キーワードが未入力でも「search.php」が表示されるよう、リダイレクト処理を「functions.php」に記述します。

検索対象を該当するカスタム投稿に絞り込む

検索結果に表示したいのは、カスタム投稿で登録している「講座情報」だけですので、カスタム投稿タイプ "course" だけを検索対象とするよう、「functions.php」に記述します。

検索フォームをコーディングする

ここまでできたら、あとは検索フォームと検索結果ページのコーディングです。
まずは検索フォームからコーディングしてみます。

検索フォームは、コードを「searchform.php」の中に記述し、呼び出すときは「get_search_form()」を使う仕組みが WordPress標準で用意されていますが、WordPress組み込みのコードを利用しない場合は特にこだわる必要はありません。
フォームを設置するページに直接記述してもいいですし、別の名前でテンプレートパーツを作成し、それを呼び出しても全く同じです。

まずは、基本となるキーワード検索の部分をコーディングすると、下記のようになります。
なお、サンプルコードは、スタイルは全く考えていません。実際のサイトでは、table要素などを使いCSSできれいに整えます。

次に、講座カテゴリーでの検索部分を、チェックボックスで実装します。
講座カテゴリーは、カスタムタクソノミー名 'coursecategory' で登録していますので、ループで回してそれらをリスト表示しています。
複数選択可能となりますので、input要素の name属性は配列にします。

講座カテゴリー検索部分を加えたコードは下記になります。

同様に、開催曜日と開始時間での検索部分を、チェックボックスで実装します。
value属性には、カスタムフィールドにおける選択肢の値を入れます。

検索フォームの完成コードは下記になります。

検索結果ページをコーディングする

検索結果ページは、「search.php」ですので、その中にコードを記述します。

最終的には検索条件に合致した記事を「WP_Query()」で取得し表示するのですが、問題はどうパラメータを渡すかです。
また、検索条件に合致した記事がない場合の処理と、検索条件が何も入力されていない処理も記述する必要があります。

処理の流れとしては、まずクエリストリングで渡されている文字列を配列変数に代入します。
そして、それらの配列変数を使って、「WP_Query()」に渡すパラメータを定義します。
あとはループで回して、検索結果として出てくる記事のタイトルや内容を表示します。

それではまず、クエリストリングスの文字列を配列変数に代入する部分です。
注意点としては、講座カテゴリーと開始時間は講座につき1つしか選択されていませんが、開催曜日は複数選択されているケースがあることです。

次に、入力された検索条件を表示する部分を作ってみます。もし検索条件が何も入力されていなかったらメッセージを表示するようにします。

最後は、「WP_Query()」に渡すパラメータを定義し、ループで回して記事情報を表示します。
検索条件に合致する記事が1つもない場合は、メッセージを表示する処理も加えます。

これで検索結果ページのコーディングが終了しました。あとはCSSでスタイルを整えれば完成です。
最後に、ここで説明した検索結果ページのすべてのコードを示します。

スポンサーリンク

特集記事

  • 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

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ