応用編課題の絞り込み検索を実装してみよう

応用編課題の「ショップガイド」の作り方について、多くの方々が頭を悩ませているのではないでしょうか。私もその一人です。

この記事では、絞り込み検索の機能を持つプラグインを利用して「検索結果」ページをカスタマイズする手法を紹介します。そのため、実際のサイトとは異なる見た目になります。

実サイトでは投稿を絞り込むためにJavaScriptが使用されていますが、WordPressではクエリを使用する方が適していると思うからです。

外観を一致させたい方は、「カテゴリーで絞り込む」というフォームの後にJavaScriptが記述されていますので、実サイトのソースコードを参考にしていただければと思います。

作り方の一例として、課題制作のヒントになれば嬉しいです。

プラグインを活用しよう!

自分でコーディングして検索機能を実装するのは難しいので、プラグインを活用します。

絞り込み検索の結果は「検索結果」ページに表示されるので、このページをカスタマイズします。

そのため「ショップガイド」の固定ページは不要と考えています。

VK Filter Search

絞り込み検索ができる無料のプラグインです。

投稿タイプ「VK Filter Search」が追加されます。

この投稿タイプを利用して検索フォームを作成します。

「VK Filter Search」ブロックを使って検索フォームを作成します。

「検索結果ページ」や「投稿タイプアーカイブ」でも表示するよう設定できます。

「Call Filter Search」ブロックを使って投稿タイプに登録した検索フォームを呼び出します。

このブロックを利用して検索フォームを設置します。

詳しい使い方については、絞り込み検索プラグイン VK Filter Search | 株式会社ベクトルを参照してください。

Custom Post Type UI

VK Filter Search で選択する「対象投稿タイプ」と「タクソノミー」を作成します。

投稿タイプ「ショップガイド」を作成します。

この投稿タイプを利用して各ショップの投稿を作成します。

3つのタクソノミー「ショップカテゴリー」「ショップ名」「ショップフロア」を作成します。

これらのタクソノミーを利用して各ショップの投稿を分類します。

新規ショップカテゴリーを追加します。

「ファッション」・・・「ビューティー&サービス」

新規ショップ名を追加します。

「あ行」・・・「Z」

新規ショップフロアを追加します。

「B2」・・・「RF」

このプラグインの使い方については、インターネットで多くの情報が見つかるため、ここでは詳しい説明を省略します。

検索フォームを作成してみよう!

  1. [VK Filter Search|新規追加]
  2. タイトルを入力
  3. VK Filter Search ブロックを追加
    • 対象投稿タイプ:「ショップガイド」を選択
    • この検索フォームを検索結果ページでも表示する:「ON」
    • VK Taxonomy Search ブロック:3つ
      • タクソノミー:「ショップカテゴリー」「ショップ名」「ショップフロア」

トップページのリンク設定について

トップページに配置する「ショップガイド」「グルメガイド」「フロアガイド」のリンク先を「検索結果」ページにすることも可能です。

Custom Post Type UI で作成した投稿タイプとタクソノミ―が反映されたリンクになります。また、○○○はVK Filter Search の投稿IDです。

ショップガイド

ファッションに分類された(shop_category=fashion)
ショップガイド投稿(post_type=shop_guide)
の検索結果
/?post_type=shop_guide&shop_category=fashion&shop_name=&shop_floor=&s=&vkfs_form_id=○○○

グルメガイド

レストラン&カフェに分類された(shop_category=restaurant-cafe)
ショップガイド投稿(post_type=shop_guide)
の検索結果
/?post_type=shop_guide&shop_category=restaurant-cafe&shop_name=&shop_floor=&s=&vkfs_form_id=○○○

フロアガイド

B1に分類された(shop_floor=b1)
ショップガイド投稿(post_type=shop_guide)
の検索結果
/?post_type=shop_guide&shop_category=&shop_name=&shop_floor=b1&s=&vkfs_form_id=○○○

まとめ

VK Filter Search Proを購入すると、絞り込み検索フォームを簡単にカスタマイズできるようになります。案件で使用する際は、購入を検討してみてください。

各階のフロアマップを表示するためには「検索結果」ページのカスタマイズが必要です。PHPを使ったカスタマイズ方法については、次の記事で詳しく説明する予定です。

コメントする

上部へスクロール