キャンプ場を探すときはまず都道府県で絞り込みたいと思います。
日本地図の表示
日本地図を表示して都道府県をクリックしてもらう形を採ります。
クリッカブルな日本地図はJapan Map(jQuery plugin)というが有名みたいです。
ですが今回はhtmlテーブルを使用してデザインしたいと思います。
なぜhtmlかというとJapan Mapはレスポンシブルに対応していないからです。htmlであればスマホ表示のときに一応日本地図の形は保ってくれます。
これがPCでの表示です。
そしてこれがスマホ表示。
コードは以下になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<table border style="" class="japanmap" cellspacing="1" cellpadding="0"> <tbody> <tr> <td colspan="14"></td> <td height="40" bgcolor="#8888ff" colspan="2"><a href="?pref=北海道">北海道</a></td> </tr> <tr> <td height="10" colspan="15"></td> <td width="10" rowspan="7"></td> </tr> <tr> <td colspan="14"></td> <td bgcolor="#99ddff"><a href="?pref=青森県">青森</a></td> </tr> <tr> <td colspan="13"></td> <td bgcolor="#99ddff"><a href="?pref=秋田県">秋田</a></td> <td bgcolor="#99ddff"><a href="?pref=岩手県">岩手</a></td> </tr> <tr> <td colspan="13"></td> <td bgcolor="#99ddff"><a href="?pref=山形県">山形</a></td> <td bgcolor="#99ddff"><a href="?pref=宮城県">宮城</a></td> </tr> <tr> <td colspan="10"></td> <td bgcolor="#ccf577"><a href="?pref=石川県">石川</a></td> <td bgcolor="#ccf577"><a href="?pref=富山県">富山</a></td> <td colspan="2" bgcolor="#ccaaff"><a href="?pref=新潟県">新潟</a></td> <td bgcolor="#99ddff"><a href="?pref=福島県">福島</a></td> </tr> <tr> <td bgcolor="#f5e577" width="33"><a href="?pref=長崎県">長崎</a></td> <td bgcolor="#f5e577" width="33"><a href="?pref=佐賀県">佐賀</a></td> <td bgcolor="#f5e577" width="33"><a href="?pref=福岡県">福岡</a></td> <td width="10" rowspan="2"></td> <td bgcolor="#ff88bb" width="33" rowspan="2"><a href="?pref=山口県">山口</a></td> <td bgcolor="#ff88bb" width="33"><a href="?pref=島根県">島根</a></td> <td bgcolor="#ff88bb" width="33"><a href="?pref=鳥取県">鳥取</a></td> <td bgcolor="#80f580" width="33" rowspan="2"><a href="?pref=兵庫県">兵庫</a></td> <td bgcolor="#80f580" width="33"><a href="?pref=京都府">京都</a></td> <td bgcolor="#80f580" width="33"><a href="?pref=滋賀県">滋賀</a></td> <td bgcolor="#ccf577" width="33"><a href="?pref=福井県">福井</a></td> <td bgcolor="#ccaaff" width="33" rowspan="2"><a href="?pref=長野県">長野</a></td> <td bgcolor="#ff99ff" width="33"><a href="?pref=群馬県">群馬</a></td> <td bgcolor="#ff99ff" width="33"><a href="?pref=栃木県">栃木</a></td> <td bgcolor="#ff99ff" width="33"><a href="?pref=茨城県">茨城</a></td> </tr> <tr> <td rowspan="2"></td> <td bgcolor="#f5e577"><a href="?pref=熊本県">熊本</a></td> <td bgcolor="#f5e577"><a href="?pref=大分県">大分</a></td> <td bgcolor="#ff88bb"><a href="?pref=広島県">広島</a></td> <td bgcolor="#ff88bb"><a href="?pref=岡山県">岡山</a></td> <td bgcolor="#80f580"><a href="?pref=大阪府">大阪</a></td> <td bgcolor="#80f580"><a href="?pref=奈良県">奈良</a></td> <td bgcolor="#ffcc88"><a href="?pref=岐阜県">岐阜</a></td> <td bgcolor="#ff99ff"><a href="?pref=山梨県">山梨</a></td> <td bgcolor="#ff99ff"><a href="?pref=埼玉県">埼玉</a></td> <td bgcolor="#ff99ff"><a href="?pref=千葉県">千葉</a></td> </tr> <tr> <td bgcolor="#f5e577"><a href="?pref=鹿児島県">鹿児島</a></td> <td bgcolor="#f5e577"><a href="?pref=宮崎県">宮崎</a></td> <td colspan="5"></td> <td bgcolor="#80f580"><a href="?pref=和歌山県">和歌山</a></td> <td bgcolor="#ffcc88"><a href="?pref=三重県">三重</a></td> <td bgcolor="#ffcc88"><a href="?pref=愛知県">愛知</a></td> <td bgcolor="#ffcc88"><a href="?pref=静岡県">静岡</a></td> <td bgcolor="#ff99ff"><a href="?pref=神奈川県">神奈川</a></td> <td bgcolor="#ff99ff"><a href="?pref=東京都">東京</a></td> <td colspan="2"></td> </tr> <tr> <td colspan="5"></td> <td bgcolor="#ddbb99"><a href="?pref=愛媛県">愛媛</a></td> <td bgcolor="#ddbb99"><a href="?pref=香川県">香川</a></td> <td colspan="9"></td> </tr> <tr> <td bgcolor="#ff8888"><a href="?pref=沖縄県">沖縄</a></td> <td colspan="4"></td> <td bgcolor="#ddbb99"><a href="?pref=高知県">高知</a></td> <td bgcolor="#ddbb99"><a href="?pref=徳島県">徳島</a></td> <td colspan="9"></td> </tr> </table> |
wordpressテーマのテーブルデザインcssが邪魔をしてくるので別途「japanmap」というクラスを指定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.japanmap table{ border-collapse:collapse !important; border:none !important; border-spacing:0 !important; margin:0 !important; } .japanmap td{ text-align:center !important; vertical-align:middle !important; border:1 !important; border-color:#ffffff !important; margin:0 !important; padding:4px !important; font-size: 8px !important; } |
これがjapanmapクラスの定義です。
GETパラメータで指定された値を取得する
都道府県のリンク先に「?pref=○○」と指定しておきます。
すると現在のURL+?pref=○○という形でパラメータが渡ってきます。このパラメータを参照して都道府県を絞り込みます。
現在のURLを表示しているのはarchive-camp.phpです。このファイルを修正していきます。
先にコードを示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<?php $pref = (string)filter_input(INPUT_GET, 'pref'); if ($pref == "") { ?> <!-- 日本地図の表示 --> <?php } else { ?> <?php echo $pref ?>のキャンプ場一覧 <table width="100%" id="myTable" class="tablesorter"> <thead> <tr> <th class="sortless">施設名</th> <th>都道府県</th> <th>AC付きサイト価格</th> <th>テントサイト価格</th> </tr> </thead> <tbody> <?php $args = Array( 'post_type' => 'camp', 'posts_per_page' => -1, 'meta_key' => 'c_pref', 'meta_value' => $pref ); $the_query = new WP_Query($args); if ($the_query -> have_posts()): while($the_query -> have_posts()): $the_query -> the_post(); ?> <tr> <td><?php echo the_title(); ?></td> <td><?php echo get_post_meta($post->ID , 'c_pref' ,true); ?></td> <td align="right"><?php echo get_post_meta($post->ID , 'c_autoprice' ,true); ?></td> <td align="right"><?php echo get_post_meta($post->ID , 'c_tentprice' ,true); ?></td> </tr> <?php endwhile; endif; wp_reset_postdata(); } ?> </tbody> </table> </div> |
2行目でパラメータprefの値を受け取ります。
このページに最初に来た段階ではprefはありませんので日本地図を表示します。
prefに値があるということは日本地図をクリックして都道府県を選択したということなので都道府県でデータを絞って表示します。
22行目の$argsが絞り込みの条件となります。
投稿タイプがcampでカスタムフィールドc_prefの値がGETで受け取ったprefの値で絞りこみということです。
これで都道府県での絞り込み、価格でソートまでが完成しました。
追記
「?pref=都道府県名」でパラメータを渡すとIEで文字化けします。
IE対策でURLエンコードしてからパラメータとして使用することにしました。
|
1 |
<a href="?pref=<?php echo urlencode('北海道'); ?>">北海道</a> |
wordpressで価格比較サイトを作ろう
第1回 ローカルテスト環境の構築
第2回 投稿ページの作成
第3回 並べ替え可能なアーカイブページの作成
第4回 カスタムフィールドの項目で記事を絞り込む
第5回 カスタムフィールドの値を表示する
第6回 口コミの追加
最終回 テスト環境から本番環境へ移行
スポンサーサイト
アフィリエイトはエーハチネット
ドメイン取るならお名前.com
