カスタムフィールドの項目で記事を絞り込む

キャンプ場を探すときはまず都道府県で絞り込みたいと思います。

日本地図の表示

日本地図を表示して都道府県をクリックしてもらう形を採ります。
クリッカブルな日本地図はJapan Map(jQuery plugin)というが有名みたいです。
ですが今回はhtmlテーブルを使用してデザインしたいと思います。
なぜhtmlかというとJapan Mapはレスポンシブルに対応していないからです。htmlであればスマホ表示のときに一応日本地図の形は保ってくれます。
htmlで日本地図表示
これがPCでの表示です。
htmlで日本地図表示
そしてこれがスマホ表示。
コードは以下になります。

wordpressテーマのテーブルデザインcssが邪魔をしてくるので別途「japanmap」というクラスを指定しています。

これがjapanmapクラスの定義です。

GETパラメータで指定された値を取得する

都道府県のリンク先に「?pref=○○」と指定しておきます。
すると現在のURL+?pref=○○という形でパラメータが渡ってきます。このパラメータを参照して都道府県を絞り込みます。
現在のURLを表示しているのはarchive-camp.phpです。このファイルを修正していきます。
先にコードを示します。

2行目でパラメータprefの値を受け取ります。
このページに最初に来た段階ではprefはありませんので日本地図を表示します。
prefに値があるということは日本地図をクリックして都道府県を選択したということなので都道府県でデータを絞って表示します。
22行目の$argsが絞り込みの条件となります。
投稿タイプがcampでカスタムフィールドc_prefの値がGETで受け取ったprefの値で絞りこみということです。

これで都道府県での絞り込み、価格でソートまでが完成しました。

追記
「?pref=都道府県名」でパラメータを渡すとIEで文字化けします。
IE対策でURLエンコードしてからパラメータとして使用することにしました。

こんな感じです。

wordpressで価格比較サイトを作ろう
第1回 ローカルテスト環境の構築
第2回 投稿ページの作成
第3回 並べ替え可能なアーカイブページの作成
第4回 カスタムフィールドの項目で記事を絞り込む
第5回 カスタムフィールドの値を表示する
第6回 口コミの追加
最終回 テスト環境から本番環境へ移行


スポンサーサイト
Javaが使えるレンタルサーバー<1stRentalServer>
アフィリエイトはエーハチネット
ドメイン取るならお名前.com
The following two tabs change content below.
KG

KG

サーフィン、キャンプからプラモデル製作まで、多趣味なアラフォーです。システムエンジニアをやっています。Webデザインは専門外ですがwordpressにハマり中。WPカスタマイズや日常のことを書いていきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。