【WordPress】お店の紹介サイトなどでフォームを使った検索機能を追加する方法

お店や地域の紹介サイト、旅行案内のサイトなどでは検索機能は必須要件。WordPressではフリーワードでの検索機能しかないのであきらめている方、複雑なコードの理解ができないという方、プラグインを使うことで簡単にフォームでの検索機能を追加する方法を紹介します。

この機能を実装する大まかな流れとしては

1. 店舗紹介用に投稿とは別の記事（カスタム投稿タイプ）を作る
2. 店舗紹介記事には検索に使うため、カスタムフィールドを設定する
3. 検索フォームを用意して訪問者に検索してもらう環境を作る

の３つになります。

それぞれに使うプラグインとそれぞれの役割は

【Custom Post Type UI】

店舗の登録・表示用のページを作るために使用します（通常の投稿はサイト内の「お知らせ」などに使用するため、それとは別の記事の集まりを作って運用したほうがベターだと思います）。

【Custom Field Suite】

フォームを使った検索で使用する語句を設定していきます（文末のおまけでカスタムフィールドに入力した値を店舗紹介記事の中でも表示する方法を紹介しています）

【Ultimate WP Query Search Filter】

２で作成し、入力したカスタムフィールドの値を元に検索フォームを設定・設置します

の３つを使います。すでに使っているものがあればそれに追加する形で構いませんし、別のプラグインでも同じ用途のものがありますのでそれを流用してもかまいません（当記事ではこの３つを使う前提で紹介していきます）。

※カスタムフィールドの設定を行う有名なプラグインに「Advanced Custom Fields」というのがありますが、このプラグインはカスタムフィールドの仕様が少し特殊なため、うまく動作しないと思われます（詳しくは文末のおまけをご覧ください）。

フォーム検索を使って店舗情報などの検索ができる機能を追加する手順

それではそれぞれの機能についての設定やコツ、設定後のメンテナンス方法などをできるだけ分かりやすく紹介していきます。

１．カスタム投稿タイプを作ろう

これには「Custom Post Type UI」というプラグインを使用します。検索すればすぐにヒットしますのでインストールして有効化しましょう。

有効化すると管理画面のサイドメニューに「CPT UI」というのが追加されますのでクリックします

今回の件で設定するのは次の３か所です。

画面一番上の方にある項目を設定します

①「カスタム投稿タイプスラグ」へ半角英数字と記号でこの投稿タイプの名前を入力します。今回は「m_tenpo」とします。

②「〇〇形のラベル」へ管理画面のサイドバーメニューに表示される名前を入力します（２つとも同じでOKです）。今回は「店舗」とします。

画面をスクロールしていくと次のような項目がありますので「false」を「true」にします

画面をずっと下にスクロールすると以下の画面がありますので、「カスタムフィールド」というところにチェックを入れます

ここまで終わったら「投稿タイプを追加」という青いボタンをクリックして作業は完了です

---

参考までにこのプラグインの詳細機能などについては

カスタム投稿タイプやカスタムタクソノミー（分類）を簡単に作るプラグイン「Custom Post Type UI」

で紹介していますので興味のある方はご覧ください

２．カスタムフィールドを作ろう

カスタムフィールドの設定と管理は「Custom Field Suite」が使いやすいと思います。プラグイン検索するとヘルメットのマークのプラグインが見つかりますのでインストールして有効化します。

今回は「店舗名」「店舗所在地」「サービス内容」という３つのカスタムフィールドを作ります

有効化したら、管理画面のサイドバーメニューにある「フィールドグループ」をクリックし、「新規追加」をクリックします。

下準備として出てきた画面の一番上にある「ここにタイトルを入力」というところへ適当な名前を入力します。ここでは「店舗のカスタムフィールド」とすることにします。

次に「投稿タイプ」欄をクリックして先ほど設定した店舗のカスタム投稿タイプ「m_tenpo」を選択します。こうしておくことで、ここで作成するカスタムフィールドの入力欄が「店舗」での投稿編集画面でのみ表示されるようになります。

以上で下準備は終了です。それではカスタムフィールドを追加していきましょう。

今回追加するカスタムフィールドは３つ、それぞれを以下のようにします

1. 店舗名：実際のお店の名前、テキスト入力できるようにする
2. 店舗所在地：場所の情報をあらかじめ設定しておき、１つだけ選択できるようにする
3. サービス内容：サービスの種類をあらかじめ設定しておき、複数選択できるようにする

「新規フィールドを追加」という青いボタンをクリックします

こんな画面が出てきますので、店舗名の設定をします

1. ①「ラベル」－投稿編集画面に表示される文字列です（今回は「店名」とします）
2. ②WordPressのカスタムフィールドとして認識される半角英数字と記号の文字列です（今回は「cf_shopname」とします）

これで終了です。再度「新規フィールドを追加」という青いボタンをクリックします

次に店舗所在地の設定をします。①と②は上と同じです（今回は①を「場所」、②を「cf_location」とします）

③の設定が少し違います。投稿編集画面で選択できるようにしたいので、以下のように

「セレクト（ドロップダウンリスト）」を選択します。

すると④の「選択肢」という欄が出てくるのでここに所在地を入力します（１か所１行）。店舗の情報はこれで完了です

最後に「サービス内容」の設定をします。基本は「場所」と同じです（ここでは①を「サービス」②を「cf_service」とします）。

「場所」と違うのが⑤の「複数選択を可能にする」にチェックを入れること。１つのお店で複数のサービスを提供している場合がありますからね。

ここまで設定したら画面右上の「公開」をクリックしてカスタムフィールドの設定は完了です。

※各フィールドにある「入力必須フィールド」にチェックを入れると、店舗の情報作成時に未入力や未設定がある場合エラーメッセージを出すことができます

---

参考までにこのプラグインの詳細機能などについては

カスタムフィールドの追加と管理・グループの管理ができるプラグイン「Custom Field Suite」

で紹介していますので興味のある方はご覧ください

３．店舗の情報をいくつか作成しよう

ここまで来たら、次の検索フォームを設置する前にいくつか店舗情報を登録しましょう。

管理画面の左メニューから「店舗」をクリックしてみてください。通常の投稿と同じような画面ですよね？ここから「新規追加」して店舗を登録していきましょう。

通常の投稿編集画面（この場合は「新規　店舗を追加」となってます）と違うのは、本文の下に「店舗のカスタムフィールド」という欄が出ていること。そうです！先ほど設定したカスタムフィールドの入力欄が追加されているのです。

このフィールドの入力をいろいろと変えていくつかの店舗情報を追加していきます。

※「サービス」の項目はキーボードの「ctrl」を押しながらクリックしていくと複数選択できます

いくつかの投稿が完了したら、各記事の表示と一覧のテスト表示をしてみましょう。

一覧の表示は「http://サイトのURL/m_tenpo/」とすれば店舗の情報が表示されます。

※この時表示が１件だけしか表示されないなどといった場合には一覧の表示設定を見直します（この件数は検索結果の表示にも影響します）

1. 管理画面から「設定」→「表示設定」をクリックします
2. 「1ページに表示する最大投稿数」の右の数字が「１」になっていれば適当な数字に変更します

これで再度一覧を表示してみてください。問題なければ次に進みましょう

検索フォームを設定・設置しよう

ではいよいよ最後の検索フォームの設定と設置です。これには「Ultimate WP Query Search Filter」を使います。プラグイン名で検索すればすぐに見つかりますのでインストールして有効化しましょう。

※このプラグインは英語のままでは使いにくいので日本語化しましょう（日本語化した前提で紹介します）。日本語化ファイルはこちら（当サイト内）でダウンロード（有料）できます。

• 有効化すると管理画面のサイドメニューに「検索フォーム　WPQSF」というメニューが追加されますのでクリックします
• 「検索フォームの新規作成」をクリックします
• 画面上の方の項目を入力・設定します

1. 「フォームタイトル」は適当な名前にします。今回は「検索フォーム」とします
2. 「標準の検索テンプレート」を選択します（検索結果が別画面で表示されます）
3. 「投稿タイプ」で先ほど作成したカスタム投稿タイプ「m_tenpo」を選択します

画面下の方の設定をします

「メタフィールドの追加」欄で設定をします

所在地の設定

1. 「メタキー」を「cf_location」にします
2. 「ラベル」を「所在地」にします
3. 「全コンテンツを検索する語句」を「すべての所在地」にします
4. 「条件」を「in(すべてを含む)」にします
5. 「表示方法」を「Check Box」にします
6. 「値を生成する」ボタンをクリックします

今このカスタムフィールドに設定している情報が自動的に読み込まれます

「カスタムフィールドを追加」ボタンをクリックします

※条件を「in」にすることでチェックされたものがすべて含まれるようになります

サービスの設定

1. 「メタキー」を「cf_service」にします
2. 「ラベル」を「サービス」にします
3. 「全コンテンツを検索する語句」を「すべてのサービス」にします
4. 「条件」を「in(すべてを含む)」にします
5. 「表示方法」を「Check Box」にします
6. 「値を生成する」ボタンをクリックします

今このカスタムフィールドに設定している情報が自動的に読み込まれます

「カスタムフィールドを追加」ボタンをクリックします

※条件を「in」にすることでチェックされたものがすべて含まれるようになります

画面イメージはこんな感じなので、↑のように設定をしていきます

※この辺りの条件については実際の結果などを見ながら変更していきましょう

追加が終わったら、右の画面にある「AND」をチェックします

※「AND」はすべての条件を含む場合、「OR」はいずれかの条件を含む場合に使用します。こちらも実際に検索結果を見ながら調整しましょう

ここまで終わったら画面一番下にある「save」をクリックします

フォームの作成が終わると画面一番上に
[ULWPQSF id=〇〇]というショートコードが表示されるので、固定ページなどへ貼り付ければフォームの設置は完了です

※この検索設定画面にはそのほかにもさまざまなオプション項目がありますので、いろいろと試しましょう

※店舗名などをフリーワードで検索できるようにするにはこの設定はしないようにし、画面下の「検索結果の設定その他」で「文字列の検索を有効にする」を有効にして必要な情報を設定してください

これで検索フォームの設置は終了です。実際に検索をして動作を確認しながら調整しましょう。

※今回の例でチェックボックス表示した「所在地」と「店舗」の情報はカスタムフィールドの値を追加・削除しても自動更新されませんので、再設定が必要です（この記事の下のほうにある「選択型のカスタムフィールドを再設定したときは」を参照ください）

参考までにこのプラグインの詳細機能などについては

フォームを使った複雑なサイト内検索が作れるプラグイン「Ultimate WP Query Search Filter」

で紹介していますので興味のある方はご覧ください

---

ここまでで基本的な情報の登録と検索フォームでの検索機能の設定方法は終了です。手順と方法を覚えれば案外簡単にできると思います。

あとは検索フォームの設定などをいろいろと調整したり、フォームの表示方法をCSSで編集したりして気に入ったような動作となるようにしていきましょう。

ここからはこの機能を使う上で知っておくと便利なおまけ情報を紹介していきます。きっと管理の役に立つと思います。

おまけ　選択型のカスタムフィールドを再設定したときは

所在地やサービスなど選択型の情報は「Custom Field Suite」でカスタムフィールドの内容を編集することで自由に追加や編集ができます。

ただし、この項目を変更したものは検索フォームの設定プラグインである「Ultimate WP Query Search Filter」では自動反映されません。

ここでは「Ultimate WP Query Search Filter」の再設定方法を紹介しておきます。

作成したフォームの設定画面を開きます

「メタフィールド」の欄右側にある一覧の中で変更する項目の右側にある「Remove」をクリックします

左画面で再度メタフィールドの設定をし直します（サービスの設定方法をもう一度書いておきます）

1. 「メタキー」を「cf_service」にします
2. 「ラベル」を「サービス」にします
3. 「全コンテンツを検索する語句」を「すべてのサービス」にします
4. 「条件」を「in(すべてを含む)」にします
5. 「表示方法」を「Check Box」にします
6. 「値を生成する」ボタンをクリックします

今このカスタムフィールドに設定している情報が自動的に読み込まれます

「カスタムフィールドを追加」ボタンをクリックします

※条件を「in」にすることでチェックされたものがすべて含まれるようになります

---

自分で編集する方法もありますが、カスタムフィールドの値と検索での選択肢が一致しなくなってしまうなどの漏れが出る可能性がありますので、再設定した方が無難だと思います。

おまけ　カスタムフィールドの値を本文に表示するには

せっかくカスタムフィールドに情報を入力しているのですから、これを実際の店舗紹介記事へ表示したい、でもどうやって？？

残念ながらWordPressの基本機能では表示することができませんので、【Embed Custom Field】というプラグインを使って表示させます。

使い方などは

カスタムフィールドに入力した値をショートコードで本文内へ表示するプラグイン「Embed Custom Field」

で確認ください。

フォーム入力で店舗情報を作る

カスタムフィールドは何も検索のために使うだけの機能ではありません。本文に表示する方法を使えば店舗情報の登録をフォームに入力するだけという感じで量産することができるようになります。

カスタムテンプレートを作成する方法もありますが、そうすると「この項目はこの記事にはない」といった場合など臨機応変に対応できなくなりますので、投稿本文をテンプレートとして使用する方法を紹介しておきます。

これもまたプラグインを使用します。使うのは

定型タグや定型文をボタン１つで挿入できるプラグイン「AddQuicktag」

です。このプラグインは定型文をボタン化できる機能を持つので、あらかじめある程度の情報を作成しておいてボタン化しておき、店舗情報を追加する際にそのボタンをクリックすれば基本的な形は出来上がるというものです。

前述したようにガチガチのテンプレートではありませんが柔軟性という面ではこの方法がおすすめです。逆に店舗情報記事すべての表示方法を一括して変更することはできませんから、そんな場合には１つ１つの記事を修正する必要があります。

おまけ　投稿一覧にカスタムフィールドの値を表示するには

こうなってくるといろいろしたくなりますね。ではついでに管理画面の投稿一覧にカスタムフィールドの情報を表示するようにしてみましょう。これもプラグイン１つで実装できます。使用するのは「Post Lists View Custom」です。

管理画面にあるリストというリストをカスタマイズできるプラグイン「Post Lists View Custom」

で詳しく紹介していますので参照ください。

おまけ　テストなどで作成した不要なカスタムフィールドの項目とデータを削除するには

テストなどで作成したカスタムフィールドの設定や入力した値など不要なものが出てくる場合があると思います。WordPressには何かを追加する機能はあっても削除する機能は実は少ないのをご存知ですか？カスタムフィールドも安易に削除してしまわぬように削除機能は備わっていません。

これをできるようにするのが「Delete Custom Fields」というプラグイン。またプラグイン？？とここまでくると言われそうですが、このプラグインは削除するときだけ有効化すれば済むので普段は停止しておけばいいと思います。

詳しくは

不要なカスタムフィールド名と値を一括削除できるプラグイン「Delete Custom Fields」

を参照ください

おまけ　【Advanced Custom Fields】は使えない？？

カスタムフィールドの機能を拡張させることで有名な【Advanced Custom Fields】。カスタムフィールドを使うならコレ！！位有名なプラグインですし、プラグイン検索でも必ず上位に来ますし、何より記事作成時にいろいろな方法で入力できるようになりますから本当に便利です。

一見いいことずくめに感じるこのプラグインですが、実はWordPress標準のカスタムフィールド機能を拡張しているものではないんです。

どう違うのかというと、このプラグインで作成したフィールドに設定（入力）した値はカスタムフィールド欄として扱われていないのです。試しに【Advanced Custom Fields】で作ったフィールドに何かを入力して、投稿を更新してみてください。

通常カスタムフィールドを拡張しているのであればWordPress標準のカスタムフィールド欄にフィールド名と入力値が表示されるはずですよね？でも確認すると・・・どこにもありません。

そうなんです。実は別のところで管理されているのです。これについては

Advanced Custom Fieldsプラグインを使う際の注意点など

で詳しく書かれていますから是非ご覧になってください。

・・・今回の方法でカスタムフィールドの作成を【Advanced Custom Fields】で行った場合には結果がきちんと表示されなかったり、選択肢がおかしな表示となったり（ a:2:{i:0;s:．．．のような）することがありますから、使用は避けた方がいいと思います。