【VK Filter Search Pro】検索結果を並び替えるカスタマイズ｜更新日・投稿日・カスタムフィールド対応

※2023年1月4日追記

SWELL最新バージョン（2.7.2.1）、VK  Filter Search Pro最新バージョン（1.11.0）環境での動作確認をしました。

SWELLマニアの、かんた（@swell_mania）です。

絞り込み検索プラグインのVK Filter Search Proのカスタマイズについてです。

絞り込み検索サイトの検索結果ページで、不動産サイトなんかによくある「家賃の安い順に並び替える」みたいな機能って便利だなと思い自作してみました↓

デモサイト

デモサイトの「検索する」をクリックすると、条件にあった物件が表示されます。検索結果ページで「賃貸料」、「築年数」などをキーに順番を並び替えるボタンを配置したのが今回のカスタマイズ内容です。

デモサイトの検索結果ページ

VK Filter Search Proで作成したフォームで絞り込み検索をしたさいに表示されるページに、順番を並び替えるボタンを設置したカスタマイズ作業メモをシェアします。

※VK Filter Search Proの基本的な使い方はこちら

カスタマイズの構成

【プラグイン＆テーマ】

・検索プラグイン：VK Filter Search Pro:（ver.1.11.0）
・テーマ：SWELL

※この記事執筆時に利用可能な最新バージョンです。

Lightning G3でのカスタマイズは次の記事で解説しています。

Snow Monkeyでの並び替えは次の記事で解説しています。

【絞り込み対象】
デモサイトでは標準投稿（Post）で物件を投稿しています。

【並び替えボタン】
・賃貸料： カスタムフィールドでの並び替え
・築年数： カスタムフィールドでの並び替え
・掲載日： 投稿を公開した日付での並び替え
・更新日： 投稿を更新した日付での並び替え

【パーマリンク】
「投稿名」を選択。

※その他のパーマリンクに関する設定は初期設定のまま。

【カスタマイズの概要】

テンプレートを直接編集しない「フックを使う方法」と、「子テーマを使う方法」の2パターンを紹介します。

どちらの方法でも同じように並び替えボタンを表示させることができます。

・フックを使う方法
テーマのアップデートによる影響を考慮したカスタマイズです。Code Snippetsプラグインを使うか、子テーマのfunctions.phpファイルにコードを追加するカスタマイズ。

こちらが基本的におすすめな方法です。

・子テーマを使う方法
子テーマのフォルダに、親テーマのsearch.phpを追加するカスタマイズです。search.phpテンプレートに並び替えボタンのコードを設置します。

【備考】
今回のカスタマイズは「VK Filter Search Proの検索結果ページ」が対象です。カテゴリー、タグなどその他のアーカイブページは対象外です。

更新履歴

• 2023年1月4日更新：最新バージョンのSWELL（2.7.2.1）に対応させました。

• 2022年9月6日：最新バージョンのSWELL（2.6.8.3）に対応しました。