![見出し画像](https://assets.st-note.com/production/uploads/images/82331965/rectangle_large_type_2_e90ff5882572e8868bbf5608f7ddc730.jpeg?width=800)
【Nishiki Pro】アーカイブページに記事の表示順を変更する並び替えボタンを付けてみた
SWELLマニアのかんた(@swell_mania)です。
WordPressテーマ「Nishiki Pro」のカスタマイズメモです。
不動産サイトなんかだと定番の、並び替えボタンをNishiki Proのアーカイブページに実装してみました。
デモページ
まずは今回のカスタマイズを実装したデモです↓
![【Nishiki Pro】アーカイブページに記事の表示順を変更する並び替えボタンを付けてみた](https://assets.st-note.com/img/1657421239497-afWnJ2adIk.jpg?width=800)
【ボタン】
並び替えボタンは次の3つです。
掲載日:記事を公開した日付で並び替えするボタンです。
築年数:カスタムフィールドの値で並び替えするボタンです。
賃貸料:カスタムフィールドの値で並び替えするボタンです。
カスタマイズの構成
【概要】
今回のカスタマイズでは、テンプレートファイルを編集しません。
フックとCSSのコードを追加しています。
【テーマ】
Nishiki Pro:1.0.296
※この記事執筆時に利用可能な最新バージョンを利用しています。
【コンテンツ】
物件情報は、標準投稿(post)で入力しています。
並び替えのキーとなる「賃貸料金」、「築年数」はAdvanced Custom Fieldsプラグインで設定したカスタムフィールドです。
![Nishiki Pro並び替えのカスタムフィールド設定](https://assets.st-note.com/production/uploads/images/82370468/picture_pc_a2f9ab6f1df6b08b5897fa55fa68022f.gif?width=800)
それぞれ「フィールドラベル」、「フィールド名」、フィールドタイプ(数値)を設定しています↓
![Nishiki Pro並び替えボタン](https://assets.st-note.com/production/uploads/images/82370515/picture_pc_02b0c9708b1350c24e7c5e124a0eef4d.gif?width=800)
それ以外の設定オプションはデフォルトのままです。
【並び替えボタンの場所】
並び替えボタンはフックを使って、次のページに表示しています。
カテゴリーアーカイブ
タームのアーカイブ
検索結果
<カテゴリーのアーカイブ>
![【Nishiki Pro】カテゴリーページで表示順番を並び替え](https://assets.st-note.com/img/1657422396876-e5dqyjd0A6.jpg?width=800)
※デモサイトではタクソノミーで物件を分類しているので、カテゴリーページはそれほど使っていません。
<タームのアーカイブ>
![【Nishiki Pro】アーカイブページに記事の表示順を変更する並び替えボタンを付けてみた](https://assets.st-note.com/img/1657421239497-afWnJ2adIk.jpg?width=800)
物件はカスタムタクソノミーで分類しています。それぞれのタームのアーカイブページに並び替えボタンを表示しています。
上のデモページは、エリアタクソノミー内の「世田谷区」タームです。
同じく、渋谷区タームなどのアーカイブページなどでも表示されます。
<検索結果>
![【Nishiki Pro】検索結果に表示順を並び替えるボタン](https://assets.st-note.com/img/1657422901026-HwxFJQtmLV.jpg?width=800)
デモサイトではVK Filter Search Proプラグインで絞り込み検索機能を実装しています。
VK Filter Search Proプラグインを有効化している環境の検索結果ページに、並び替えボタンを表示しています。
VK Filter Search Proの基本設定について↓
ここから先は
¥ 9,890
この記事が気に入ったらサポートをしてみませんか?