応用編課題の「ショップガイド」の作り方について、多くの方々が頭を悩ませているのではないでしょうか。私もその一人です。
この記事では、絞り込み検索の機能を持つプラグインを利用して「検索結果」ページをカスタマイズする手法を紹介します。そのため、実際のサイトとは異なる見た目になります。
実サイトでは投稿を絞り込むために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 で選択する「対象投稿タイプ」と「タクソノミー」を作成します。
投稿タイプ「ショップガイド」を作成します。
この投稿タイプを利用して各ショップの投稿を作成します。
３つのタクソノミー「ショップカテゴリー」「ショップ名」「ショップフロア」を作成します。
これらのタクソノミーを利用して各ショップの投稿を分類します。
新規ショップカテゴリーを追加します。
「ファッション」・・・「ビューティー&サービス」
新規ショップ名を追加します。
「あ行」・・・「Z」
新規ショップフロアを追加します。
「B2」・・・「RF」
このプラグインの使い方については、インターネットで多くの情報が見つかるため、ここでは詳しい説明を省略します。
検索フォームを作成してみよう！
- ［VK Filter Search｜新規追加］
- タイトルを入力
- VK Filter Search ブロックを追加
- 対象投稿タイプ：「ショップガイド」を選択
- この検索フォームを検索結果ページでも表示する：「ON」
- VK Taxonomy Search ブロック：３つ
- タクソノミー：「ショップカテゴリー」「ショップ名」「ショップフロア」
トップページのリンク設定について
トップページに配置する「ショップガイド」「グルメガイド」「フロアガイド」のリンク先を「検索結果」ページにすることも可能です。
Custom Post Type UI で作成した投稿タイプとタクソノミ―が反映されたリンクになります。また、○○○はVK Filter Search の投稿IDです。
まとめ
VK Filter Search Proを購入すると、絞り込み検索フォームを簡単にカスタマイズできるようになります。案件で使用する際は、購入を検討してみてください。
各階のフロアマップを表示するためには「検索結果」ページのカスタマイズが必要です。PHPを使ったカスタマイズ方法については、次の記事で詳しく説明する予定です。
