見出し画像

【Nishiki Pro】アーカイブページに記事の表示順を変更する並び替えボタンを付けてみた

SWELLマニアのかんた(@swell_mania)です。

WordPressテーマ「Nishiki Pro」のカスタマイズメモです。


不動産サイトなんかだと定番の、並び替えボタンをNishiki Proのアーカイブページに実装してみました。


デモページ


まずは今回のカスタマイズを実装したデモです↓

【Nishiki Pro】アーカイブページに記事の表示順を変更する並び替えボタンを付けてみた

※デモページはこちら



【ボタン】

並び替えボタンは次の3つです。

  • 掲載日:記事を公開した日付で並び替えするボタンです。

  • 築年数:カスタムフィールドの値で並び替えするボタンです。

  • 賃貸料:カスタムフィールドの値で並び替えするボタンです。




カスタマイズの構成



【概要】

今回のカスタマイズでは、テンプレートファイルを編集しません。

フックとCSSのコードを追加しています。



【テーマ】

Nishiki Pro:1.0.296

※この記事執筆時に利用可能な最新バージョンを利用しています。




【コンテンツ】

物件情報は、標準投稿(post)で入力しています。

並び替えのキーとなる「賃貸料金」、「築年数」はAdvanced Custom Fieldsプラグインで設定したカスタムフィールドです。

Nishiki Pro並び替えのカスタムフィールド設定



それぞれ「フィールドラベル」、「フィールド名」、フィールドタイプ(数値)を設定しています↓

Nishiki Pro並び替えボタン


それ以外の設定オプションはデフォルトのままです。




【並び替えボタンの場所】


並び替えボタンはフックを使って、次のページに表示しています。

  • カテゴリーアーカイブ

  • タームのアーカイブ

  • 検索結果



<カテゴリーのアーカイブ>

【Nishiki Pro】カテゴリーページで表示順番を並び替え

※デモページ

※デモサイトではタクソノミーで物件を分類しているので、カテゴリーページはそれほど使っていません。




<タームのアーカイブ>

【Nishiki Pro】アーカイブページに記事の表示順を変更する並び替えボタンを付けてみた

※デモページ

物件はカスタムタクソノミーで分類しています。それぞれのタームのアーカイブページに並び替えボタンを表示しています。

上のデモページは、エリアタクソノミー内の「世田谷区」タームです。
同じく、渋谷区タームなどのアーカイブページなどでも表示されます。




<検索結果>

【Nishiki Pro】検索結果に表示順を並び替えるボタン

※デモページ

デモサイトではVK Filter Search Proプラグインで絞り込み検索機能を実装しています。

VK Filter Search Proプラグインを有効化している環境の検索結果ページに、並び替えボタンを表示しています。


VK Filter Search Proの基本設定について↓



ここから先は

6,301字 / 1画像

¥ 9,890

この記事が気に入ったらサポートをしてみませんか?