>  >  >  > 

WordPressのサイト上で簡単に並び替え&絞り込みする方法

WordPressのサイト上で簡単に並び替え&絞り込みする方法

こんにちは、ウラカワです。

WordPressを使っていて、閲覧者側への配慮として並び替えや絞り込み機能をつけたいと思ったことはありませんか?

今回はその機能を簡単に実装する方法をご紹介します。

パラメータについて

WordPressは基本的にURLにパラメータを追加することで良い感じに処理してくれます。
実装するまでもなく、並び替え・絞り込み機能は元から付いているってことですね。

じゃあ、実際にどんな感じで追加すればいいの?という話です。
頻度の高そうなパラメータをまとめてみました。

パラメータ名 内容
author author=1 作成者ID
author_name author_name=taro 作成者名
cat cat=1
cat=1,2,3
カテゴリーID
category_name category_name=designcategory_name=design,coding カテゴリースラッグ
tag tag=event
tag=event,wordpress
タグスラッグ
tag_id tag=1
tag=1,2,3
タグID
post_type post_type=post 投稿タイプ
taxonomy post_type=post&taxonomy=category 分類名
term post_type=post&taxonomy=category&term=design 分類スラッグ
{$taxonomy} taxonomy=term
taxonomy=term1,term2
(taxonomy、termをそれぞれ適切な名前・スラッグに置き換える)
分類スラッグ
p p=10 投稿ID
page_id page_id=10 ページID
year year=2014
monthnum monthnum=10
day day=23
order order=ASC ソート(昇順・降順)
orderby orderby=title ソート対象
s s=keyword キーワード検索

これらのパラメータは以下にて確認可能です。

Privateとなっているパラメータはそのままでは使用出来ませんが、以下のように追加してあげることで使用可能になります。

オリジナルのパラメータも同様に追加可能です。

今回はカスタムフィールド関連を追加してみます。

パラメータ名 内容
meta_key meta_key=url&meta_value=google カスタムフィールドの名前
meta_value meta_key=url&meta_value=google カスタムフィールドの値

並び替えについて

基本さえ分かってしまえば楽勝です。きっと。たぶん。

ではさっそく弊社のブログ記事を適当に並び替えてみます。
デフォルトだと日付の降順なので、昇順にしてみます。

https://magnets.jp/blog/?order=ASC

これだけで簡単に並び替えることが出来ました。
次はタイトルで並び替えてみましょう。

https://magnets.jp/blog/?order=ASC&orderby=title

出会いは一期一会。そんなアナタにはランダムで。

https://magnets.jp/blog/?orderby=rand

タイトルやカスタムフィールドで並び替えて、さらに日付で並び替えたい。
というような複雑な並び替えの場合、そのままだとちょっと辛いです。

そんな場合は自分でパラメータを作ってしまいます。

WordPress 4.0からは複数対象の並び替えが実装されたので昔に比べると簡単になりました。

ざっくりですが、例では作成者と日付での並び替えが出来るようにしてみました。

https://magnets.jp/blog/?author_order=DESC

という感じでパラメータをつけてやれば指定した通りに並びます。

並び替えボタン(リンク)

ページに並び替え専用のボタンをつけたい!という場合はこんな感じで簡単に設置出来ます。

パラメータが複数の場合は以下のように配列で指定します。

絞り込みについて

続いて絞り込みをやってみたいと思います。
並び替え同様パラメータを付けるだけですが…。

「2014年」「10月」の「スペシャル」カテゴリーで絞り込んでみます。

https://magnets.jp/blog/?year=2014&monthnum=10&category_name=special

「スペシャル」「WEBとデザイン」という複数カテゴリで絞り込んでみます。

https://magnets.jp/?category_name=special,web_design

さらに「WordPress」というタグで絞り込んでみます。

https://magnets.jp/?category_name=special,web_design&tag=wordpress

さらにさらに「カスタマイズ」というキーワードで絞り込んでみます。

https://magnets.jp/?category_name=special,web_design&tag=wordpress&s=カスタマイズ

タクソノミーの場合はこんな感じです。

https://magnets.jp?type=ec&type-tag=スマートフォン対応

カスタムフィールドに価格が登録されている場合、●円以上~●円未満といった条件で絞り込みたい場合もあると思います。

そういった場合は、並び替え同様にパラメータ名を登録して以下のように範囲を指定します。

絞り込みボタン(リンク)

絞り込みの場合ヒットする件数が変わってしまうので、3ページ目にそのままパラメータを付けたら404になってしまった!というのがありえます。

なので、絞り込み時に強制的に1ページ目を表示させます。

パラメータ複数指定の場合の例

最後に

仕組みが分かってしまえばシンプルで使いやすいと思います。

不動産サイトや通販サイトでは重宝しますね。もうプラグインに頼らなくてもいいんだよ!

次回は検索周りを書いてみようと思います。

同じカテゴリー(WEB制作・デザイン)の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
究極の間食|おやつの王様