From the blog

【WordPress】スタイリストやイメージから選ぶヘアスタイル検索システムの構築方法

美容室などで使えそうなヘアスタイル検索システムの構築方法です。

デモとしてはこんな感じ。

ヘアスタイル検索システムデモ

 

構築方法概要

WordPressのプラグイン「Search & Filter 」を使用して構築します。

投稿ページにカスタムタクソノミーを追加して、検索で拾えるように設定し、検索フォームにCSSでデザインを充てたら完了です。

 

流れを説明します。

Search & Filterのインストール

Search & Filterのダウンロードページでダウンロードするか、WordPress管理画面>プラグインで「Search & Filter」を検索しましょう。

Search & Filterのドキュメントはこちら。

ダウンロードしたら有効化しましょう。

 

投稿にカスタムタクソノミーを追加

functions.phpに以下を記載。

これでブログ投稿に「スタイリスト」「ヘアスタイル」「イメージ」の情報を付与できるようになります。

こんな感じですね。

 

検索フォームの設置

次は検索フォームです。

任意の固定ページにSearch & Filterのショートコードを記述します。

ショートコードも色々とカスタマイズできます。

詳細は上記リンクをご覧ください。

今回は設置したコードは以下です。

これで検索フォームの設置は完了です。

あとは、検索される投稿を作成します。

 

ヘアスタイルを投稿

[管理画面]>[投稿]で、右側の「スタイリスト」「ヘアスタイル」「イメージ」に入力するだけです。

 

これで実装完了。

フォームで検索すると一覧ページに飛びます。

 

以上!

 

参考サイト