WordPressでチェックボタンの絞り込み検索を自作する方法
3477 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
実務で不動産サイトの物件検索でWordPressのカスタムタクソノミーのタームの内容でチェックボタンを使った絞り込み検索を実装しないといけなかったのですが初めてで相当苦労しました。
ネットを探しても初めて実装する人が実装できる完璧な記事はありませんでした。（実装関係の記事自体はたくさんあります）
一番いいと思える内容で実装しても完璧ではなくて最終的に記事を書いた人に質問をして解決できたのですが私の様に初めて実装してどうすればいいかがわからなくて困っている人が絶対にいるはずです。
特に私は会社で1人でサイトを作っているので頼る人がいなくて困り果てました。
そんな想いがあってこの記事を書いているのですがコードはコピペでできる解説にしていますので誰でも真似ができるはずです。
それでは説明します。
説明しない内容
説明すると話がブレるので下記の内容は説明しません。
解説の記事を書いているのでそれを読んでください。
- カスタムフィールド
- カスタムタクソノミー
- ターム
仕様
最初の状態はチェック項目のボタンと検索ボタンがあって下に表示する物件が全てあります。
カスタム投稿タイプとカスタムタクソノミーを紐付けてカスタム投稿タイプの記事の編集画面でターム（カスタムタクソノミーのカテゴリー）を選択します。
表示する内容（物件名、家賃、画像など）は全てカスタムフィールドで書きます。
そしてタームの内容（↑の赤枠）でチェック項目のボタンを作って選択して検索することで絞り込んだ内容が表示されるようにします。
内容が表示されてからもまたチェックボタンで別の内容が探すことができる様に検索結果の物件の上にチェックボタンを表示します。
絞り込みで物件がない場合は「物件はありません」と表示できるようにします。
複数のチェックボタンの項目を持つのはカスタム投稿タイプの投稿画面のターム（カテゴリ）選択でできます。
↓の赤枠です。
表示する物件ですが1つのカスタム投稿タイプで作った記事の内容になっています。
カスタム投稿タイプとカスタムタクソノミーとタームの設定
カスタム投稿タイプとカスタムタクソノミーの設定をします。
functions.phpのコードを↓にします。
2行目でカスタム投稿タイプのslug名（manshon）を決めて22行目でカスタムタクソノミー（custom_taxonomy_manshon）と紐付けています。
21行目はカスタムタクソノミー名です。
この2つのみ自由に決めて後はそのままで大丈夫です。
これで管理画面にカスタム投稿タイプの項目ができます。
カスタムタクソノミーのカテゴリー（ターム）の設定
カスタム投稿タイプ（マンション）から新規で記事作成する画面に移動してほしいのですが↓の赤枠の部分はこれは表示されていますがデフォルトは空っぽになっています。
空っぽになっているカテゴリー（ターム）にカテゴリー（ターム）名をつけてそれぞれのカテゴリーにslugをつけます。
「マンションのカテゴリー名を追加」をクリックします。
すると投稿画面の時と同じカテゴリー名とslugをつける画面になりますが私が設定した内容のスクショを掲載します。
タームを「ファミリー用」、「ペットOK」「土地」「戸建」にしていてターム名とslugの対応は下記になります。
- ファミリー用:manshon-family
- ペットOK:manshon-petok
- 土地:manshon-land
- 戸建:manshon-kodate
検索チェックボックスの実装
必要なファイルは下記になります。
- searchform.php(searchform.phpを呼び出さない場合は必要ないです)
- search.php
私はsearchform.phpを呼び出さなくindex.phpにsearchform.phpの内容を書きます。
index.php、search.phpのコードを↓にします。
9行目、30行目の「custom_taxonomy_manshon」はカスタムタクソノミー名です。
32行目の「manshon-family」、「manshon-petok」、「manshon-land」、「manshon-kodate」はタームのslug名です。
46行目〜49行目はカスタムフィールドの内容なので自分で設定した内容を書いて下さい。
9行目、30行目の「custom_taxonomy_manshon」はカスタムタクソノミー名です。
37行目の「manshon」はカスタム投稿タイプ名です。
53行目〜56行目はカスタムフィールドの内容なので自分で設定した内容を書いてください。
63行目は該当物件がない場合の表示です。
カスタムフィールド以外で私と設定が全く同じ場合はそのままコピペでカスタムタクソノミー名、ターム名やタームのslug名が違う場合は自分が設定した内容にして下さい。
これで完成です。