人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Wordpressで地域店舗のポ?タルサイトを作ろうとしており、以下について教えてください。
Wordpressの投稿(post)が各店舗の情報となっています。
カスタムフィ?ルドで住所デ?タ(address)を追加しており、各店舗(post)にはそれぞれ住所が入っています。
そして各店舗はそれぞれ、「ペット関係」「家関係」「飲食」というカテゴリ?のいずれかに属しています。
現在、トップペ?ジには入力フォ?ムがあり、そのフォ?ムに住所の一部を入れ「検索」ボタンを押すとマップが表示され、そのマップ上に先ほど入力したワ?ドを住所デ?タ(address)に含んだ店舗のみが表示されるようになっております。
例えばこのフォ?ムに「世田谷区」と入力すると世田谷区にある店舗が、「千代田区」と入力すると千代田区の店舗が表示されるようになっています。

フォ?ムの上にそれぞれのカテゴリ?のチェックボックスを作り、そこにチェックをつけて、更に住所を入れ、「検索」ボタンを押すと、チェックのついたカテゴリ?の、入力された住所にある店舗のみをマップに表示させたいのです。
これをどうすれば上記が満足できるでしょうか。

●質問者: ykhpno1
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

カテゴリ?のチェックボックスにチェックが複数入っている時は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; ?>


1 ● a-kuma3
●500ポイント ベストアンサー

カテゴリーを検索条件に入れるためのパラメータがいくつかあるのですが、質問のケースでは 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 のパラメータに検索条件を追加して、後は元の通り検索をします。


a-kuma3さんのコメント
>> チェックを入れたものしかリクエストパラメータに乗らないので、ひとつもチェックが入っていない場合には、$_POST['cc'] で取得した配列は空の配列になります。 << 嘘でした。 チェックがひとつも入ってない場合には、NULL になってます。 型のしばりが緩いので、空の配列と同じように扱える、ということみたいです。

ykhpno1さんのコメント
完璧なコ?ドを書いていただきました。 思った通りの動作を完璧に実装していただいております。 本当にありがとうございました、最高です!

a-kuma3さんのコメント
[http://q.hatena.ne.jp/1406611375:title=昔の質問]を見ました。 カテゴリーごとにマーカーを変えたい、ってのもあったんですね。 そんなに難しくないんじゃないかなあと思います。

ykhpno1さんのコメント
気にかけていただいてありがとうございます。 その件に関しては、カテゴリ?スラッグと同じ名前のアイコンを作っておき、グ?グルマップのアイコン表示部分のコ?ドを以下としています。 >|| icon: '<?php bloginfo('template_url');?>/images/<?php echo $catslug; ?>.png' ||< 例えば、おすすめというカテゴリ?のカテゴリ?スラッグがosusumeであれば、osusume.pngというアイコンを、建築というカテゴリ?のカテゴリ?スラッグがkenchikuであるなら、kenchiku.pngというアイコンをアップしておくことでカテゴリ?ごとにマ?カ?を変えております。 ぜんぜんスマ?トではないのですが(笑)。 コメントいただきありがとうございます。

a-kuma3さんのコメント
スラッグか ID でアイコンの URL を決めることになると思うので、それで良いと思います <tt>:-)</tt>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ