Wordpressの投稿(post)が各店舗の情報となっています。
カスタムフィ-ルドで住所デ-タ(address)を追加しており、各店舗(post)にはそれぞれ住所が入っています。
そして各店舗はそれぞれ、「ペット関係」「家関係」「飲食」というカテゴリ-のいずれかに属しています。
現在、トップペ-ジには入力フォ-ムがあり、そのフォ-ムに住所の一部を入れ「検索」ボタンを押すとマップが表示され、そのマップ上に先ほど入力したワ-ドを住所デ-タ(address)に含んだ店舗のみが表示されるようになっております。
例えばこのフォ-ムに「世田谷区」と入力すると世田谷区にある店舗が、「千代田区」と入力すると千代田区の店舗が表示されるようになっています。
フォ-ムの上にそれぞれのカテゴリ-のチェックボックスを作り、そこにチェックをつけて、更に住所を入れ、「検索」ボタンを押すと、チェックのついたカテゴリ-の、入力された住所にある店舗のみをマップに表示させたいのです。
これをどうすれば上記が満足できるでしょうか。
カテゴリ-のチェックボックスにチェックが複数入っている時はORで、更にそれらと住所はANDで絞り込まれる、というイメ-ジです。
例えば「家関係」と「飲食」にチェックが入っていれば、それらのカテゴリ-に属する店舗を住所で絞り込みたいのです。
現状のコ-ドは以下となります。
<?php if (have_posts()) { while (have_posts()) { the_post(); get_template_part('content', 'page'); } } ?> <form action="" method="post"> 検索したい地域 <input type="text" name="place"> <input type="submit" name="send" value="検索"> </form> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <?php $place = $_POST['place']; if ($place): $args = Array( 'post_type' => 'post', 'posts_per_page' => -1, 'meta_query' => array(array( 'key' => 'address', 'value' => $place, 'compare' => 'LIKE' )) ); $the_query = new WP_Query($args); if ($the_query->have_posts()): ?> <div id="map" style="width: 99%; height: 650px;"></div> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById( 'map' ); var myOptions = { zoom: 11, center: new google.maps.LatLng( <?php echo post_custom("centerlat")?>,<?php echo post_custom("centerlng")?> ), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var map = new google.maps.Map( mapdiv, myOptions ); var marker = []; var infowindow = []; <?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?> <?php while($the_query -> have_posts()): $the_query -> the_post(); ?> marker[<?php echo $m++; ?>] = new google.maps.Marker({ icon: 'http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png', position: new google.maps.LatLng( <?php echo post_custom("lat")?>,<?php echo post_custom("lon")?> ), map: map, title: '<?php the_title(); ?>' }); infowindow[<?php echo $i++; ?>] = new google.maps.InfoWindow({ content: '<div style="width : 100%;height : 36PX;">'+'<?php echo post_custom("Name")?>:<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>', size: new google.maps.Size( 50, 30 ) }); google.maps.event.addListener( marker[<?php echo $m1++; ?>], 'click', function() { var iw = infowindow[<?php echo $i2++; ?>]; if (iw.getMap() == null){ iw.open(map, marker[<?php echo $m2++; ?>]); } else{ iw.close(); } }); <?php endwhile; // End the loop. Whew. ?> }); </script> <?php else: ?> 該当する店舗はありませんでした。 <?php endif; ?> <?php else: ?> 地域を入力してください。 <?php endif; ?>
カテゴリーを検索条件に入れるためのパラメータがいくつかあるのですが、質問のケースでは category__in を使うのが良いと思います。
→ 関数リファレンス/WP Query - WordPress Codex 日本語版
検索用のフォームには、PHP の配列形式で受け取れるような name を指定した <input type="checkbox"> を追加します。
プログラムの骨子はこんな感じです。
<form action="" method="post"> 検索したい地域 <input type="text" name="place" value="<?php echo $place ?>"> <!-- カテゴリーの指定 --> <label><input type="checkbox" name="cc[]" value="2">飲食 </label> <label><input type="checkbox" name="cc[]" value="3">家関係 </label> <label><input type="checkbox" name="cc[]" value="4">ファッション関係 </label> <label><input type="checkbox" name="cc[]" value="5">ペット関係 </label> <br> <input type="submit" name="send" value="検索"> </form> ... <?php $args = Array( 'post_type' => 'post', 'posts_per_page' => -1, 'meta_query' => array(array( 'key' => 'address', 'value' => $place, 'compare' => 'LIKE' )) ); // カテゴリーのどれかにチェックが入っていたら、検索条件を追加する $cc = $_POST['cc']; if (sizeof($cc) > 0) { $args['category__in'] = $cc; } $the_query = new WP_Query($args); if ($the_query->have_posts()): ...
チェックボックスの value に設定しているのは、カテゴリーの ID です。
チェックを入れたものしかリクエストパラメータに乗らないので、ひとつもチェックが入っていない場合には、$_POST['cc']
で取得した配列は空の配列になります。
カテゴリーのチェックが入っているかどうかを判定して、WP_Query のパラメータに検索条件を追加して、後は元の通り検索をします。
カテゴリーを検索条件に入れるためのパラメータがいくつかあるのですが、質問のケースでは category__in を使うのが良いと思います。
→ 関数リファレンス/WP Query - WordPress Codex 日本語版
検索用のフォームには、PHP の配列形式で受け取れるような name を指定した <input type="checkbox"> を追加します。
プログラムの骨子はこんな感じです。
<form action="" method="post"> 検索したい地域 <input type="text" name="place" value="<?php echo $place ?>"> <!-- カテゴリーの指定 --> <label><input type="checkbox" name="cc[]" value="2">飲食 </label> <label><input type="checkbox" name="cc[]" value="3">家関係 </label> <label><input type="checkbox" name="cc[]" value="4">ファッション関係 </label> <label><input type="checkbox" name="cc[]" value="5">ペット関係 </label> <br> <input type="submit" name="send" value="検索"> </form> ... <?php $args = Array( 'post_type' => 'post', 'posts_per_page' => -1, 'meta_query' => array(array( 'key' => 'address', 'value' => $place, 'compare' => 'LIKE' )) ); // カテゴリーのどれかにチェックが入っていたら、検索条件を追加する $cc = $_POST['cc']; if (sizeof($cc) > 0) { $args['category__in'] = $cc; } $the_query = new WP_Query($args); if ($the_query->have_posts()): ...
チェックボックスの value に設定しているのは、カテゴリーの ID です。
チェックを入れたものしかリクエストパラメータに乗らないので、ひとつもチェックが入っていない場合には、$_POST['cc']
で取得した配列は空の配列になります。
カテゴリーのチェックが入っているかどうかを判定して、WP_Query のパラメータに検索条件を追加して、後は元の通り検索をします。
気にかけていただいてありがとうございます。
その件に関しては、カテゴリ-スラッグと同じ名前のアイコンを作っておき、グ-グルマップのアイコン表示部分のコ-ドを以下としています。
icon: '<?php bloginfo('template_url');?>/images/<?php echo $catslug; ?>.png'
例えば、おすすめというカテゴリ-のカテゴリ-スラッグがosusumeであれば、osusume.pngというアイコンを、建築というカテゴリ-のカテゴリ-スラッグがkenchikuであるなら、kenchiku.pngというアイコンをアップしておくことでカテゴリ-ごとにマ-カ-を変えております。
ぜんぜんスマ-トではないのですが(笑)。
コメントいただきありがとうございます。
スラッグか ID でアイコンの URL を決めることになると思うので、それで良いと思います :-)
気にかけていただいてありがとうございます。
その件に関しては、カテゴリ-スラッグと同じ名前のアイコンを作っておき、グ-グルマップのアイコン表示部分のコ-ドを以下としています。
例えば、おすすめというカテゴリ-のカテゴリ-スラッグがosusumeであれば、osusume.pngというアイコンを、建築というカテゴリ-のカテゴリ-スラッグがkenchikuであるなら、kenchiku.pngというアイコンをアップしておくことでカテゴリ-ごとにマ-カ-を変えております。
2016/05/14 21:06:33ぜんぜんスマ-トではないのですが(笑)。
コメントいただきありがとうございます。
スラッグか ID でアイコンの URL を決めることになると思うので、それで良いと思います :-)
2016/05/14 21:37:05