【SWELL】タームのアーカイブページに並び替えボタンを付けるカスタマイズ

※2023年1月4日追記
SWELL最新バージョン（2.7.2.1）でも有効です。

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

最近Web制作の仕事でタームのアーカイブページに、新着順や更新順で投稿の表示順を並び替えするボタンを設置しました↓

【今回のカスタマイズを実装したデモサイト】

デモサイト

カスタマイズした作業メモをシェアします。

カスタマイズの構成

【テーマ】

・SWELL（ver2.7.2.1）
・WordPress（6.1.1）

※記事執筆時の最新バージョンです。

デモサイトは不動産サイトです。

物件は投稿（post）で管理。エリアやこだわり条件などをタクソノミーで設定し、家賃や物件の築年数などの詳細情報をカスタムフィールドを使い運用することを想定した構成です。

【並び替えボタン】

以下4つのボタンを設置しました。

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

※カスタムフィールドはAdvanced Custom Fieldsプラグインで作成。

【ターム】

Custom Post Type UIプラグインで作成しました。コードによるカスタマイズはしていません。

物件は標準投稿に以下タクソノミーを設定しています。

・エリア：渋谷区、世田谷区
・こだわり条件：2階以上、オートロック などなど。

【パーマリンク】

「投稿名」を選択しています。

パーマリンクに関する設定はこれだけです。コードによるリライトはしていません。

【カスタムフィールドの設定】

Advance Custom Fieldsプラグインで設定しました。

・家賃：fee
・築年数：age

フィールドタイプは、家賃、築年数ともに「数値」を選択。その他のオプションはデフォルトのまま。

※今回のカスタマイズはプラグインに依存しないので、ACF以外のプラグインやプラグインを使わずカスタムフィールドのコードを書いても問題なし。

【備考】
今回のカスタマイズはタームのアーカイブページが対象です。カテゴリー、タグなどその他のアーカイブページは対象外です。

※VK Filter Search Proの検索結果の並び替え機能は次の記事で紹介しています。

カテゴリー、タグのアーカイブページの並び変えは次の記事で解説しています。