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

Wordpressのループについて教えてください。
投稿に緯度経度のフィ?ルドを作り、店舗情報としてマップにマ?カ?で配置しております。

さらに、ユ?ザ?に会員有効期限というカスタムフィ?ルド(membership_date)を設定しました(postではなくユ?ザ?のカスタムフィ?ルドです)。
ル?プの中で投稿者(ユ?ザ?)のカスタムフィールド(membership_date)を取得し、それが有効であればマ?カ?を変える、ということをしたく思っており、コ?ドを途中まで書きました(補足に記載)。
現状のコ?ドだと、ユ?ザ?がひとりでもmembership_dateが有効であれば、マップ上のマ?カ?が全て変わってしまいます。
有効なユ?ザ?の店舗だけマ?カ?を変えるにはどうすればいいでしょうか。
絞り込みはいっさいかけずに、マ?カ?だけ変える、ということをやってみたいのです。

ちなみにマ?カ?のチェンジは「marker.png」と、「marker1.png」の2種類のマ?カ?を用意しておりまして、補足に記載しているコ?ドから$markerを読み取って以下のようにしようと思っています。

"/images/marker<?php echo $marker; ?>.png"

よろしくお願いいたします。

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

▽最新の回答へ

質問者から

// 記事の投稿者を取得して、そのカスタムフィールドmembership_dateの値を取得する
$author_id = $post->post_author;
$author_membership_date = get_user_meta($author_id, "membership_date", true);

// 現在の時刻よりも、membership_date(会員有効期間)が長い場合、$markerに1を入れる
if ( strtotime($author_membership_date) >= date_i18n('U')) {
$marker=1;
}


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

以前の、OpenStreetMap を使うようにしたときのコードをベースにしてます。
前は、カテゴリーごとにマーカーを変えるようにしてましたが、それは残しつつ、ログインしているユーザの投稿の場合には、マーカーを別のものに変える、というふうにしてみました。

<?php

 ...

 // address と、指定されていれば category で検索する
 $the_query = new WP_Query($args);

 if ($the_query->have_posts()):
?>
<div id="map" style="width: 99%; height: 650px;"></div>
<script type="text/javascript">
(function() { // こんなので、くるんでみる

 var posts = [];
<?php while ($the_query->have_posts()) :
 $the_query->the_post();

 $googlemap = get_field('lat');
 if (! $googlemap) { // マップ住所が登録されていないこともある
 continue;
 }
 $category = get_the_category();

 // ★ とりあえず、カテゴリーが marker_id
 $marker_id = $category[0]->category_nicename;

 // 記事の投稿者を取得して、そのカスタムフィールドmembership_dateの値を取得する
 $author_id = $post->post_author;
 $author_membership_date = get_user_meta($author_id, "membership_date", true);

 // 現在の時刻よりも、membership_date(会員有効期間)が長い場合、$marker_id を特別なものにする
 if ( strtotime($author_membership_date) >= date_i18n('U')) {
 $marker_id = 101;
 }
?>
 posts.push({
 lat: '<?php echo post_custom("lat")?>',
 lng: '<?php echo post_custom("lon")?>',
 name: '<?php echo post_custom("Name")?>',
 link: '<?php the_permalink();?>',
 title: '<?php the_title(); ?>',
 marker_id: '<?php echo $marker_id; ?>' // ★ marker_id
 });
<?php endwhile; // End the loop. Whew. ?>

 ...

 var icon_map = {
 2: "/images/marker.png",
 3: "/images/marker-blue.png",
 4: "/images/marker-gold.png",
 5: "/images/marker-green.png", // ★ここまでは、カテゴリー用のマーカー
 101: "/images/marker1.png", // ★投稿者用のマーカー
 };

 var epsg4326 = new OpenLayers.Projection("EPSG:4326");
 var epsg3857 = new OpenLayers.Projection("EPSG:3857");

 // マーカーの生成
 var features = [];
 for (var i in posts) {
 var post = posts[i];
 features.push(new OpenLayers.Feature.Vector(
 new OpenLayers.Geometry.Point(post.lng, post.lat)
 .transform(epsg4326, epsg3857), {
 tooltip: post.title,
 marker_image: icon_map[ post.marker_id ], // ★ marker_id
 post: post,
 }
 ));
 }

前は、ひとつの記事を表す javascript のオブジェクトに、カテゴリーを設定していましたが、それをマーカーを表すように変えています。
通常の場合には、マーカーを指し示す数字はカテゴリーの nickname ですが、ログイン中の利用者が投稿者の場合には、カテゴリーの nickname と重複しない値(上記のソースでは 101)を設定して、マーカーの ID と画像をひもづけるところに、投稿者用の画像を指定するようにしています。


ykhpno1さんのコメント
ありがとうございます、文句なくベストアンサ?とさせていただきます! なるほど、条件に合ったユ?ザ?店舗カテゴリ?の方を動かしますか、う?ん、たいへん勉強になりました。 いただいた回答で完全に要望は満たされましたが、もし同じ条件でマ?カ?のURLだけを変えてマ?カ?表示を変えたい場合、akuma3さんであればどうされるのかを後学のために知りたいのですが、もし簡単であれば教えていただけませんでしょうか。 (簡単でない場合、無視してください。要望は満たされております)。 いつもありがとうございます。 今回も本当にお世話さまでした。感謝しております。

a-kuma3さんのコメント
>> いただいた回答で完全に要望は満たされましたが、もし同じ条件でマ?カ?のURLだけを変えてマ?カ?表示を変えたい場合、akuma3さんであればどうされるのかを後学のために知りたいのですが、もし簡単であれば教えていただけませんでしょうか。 << 確かに、あり得ないカテゴリーとして設定した値が、将来 重複するかもしれない、というリスクはあります。 ひとつの記事を表す javascript のオブジェクトに、カテゴリーの ID だけではなく、ログイン中の利用者の投稿かどうかというフラグを持たせる方が良いかもしれません。 画像の URL を設定するところでは、投稿者かどうかを判定して、表から引くか、特別な URL を返す関数を作って、それを呼び出します。 >|php| <?php ... // address と、指定されていれば category で検索する $the_query = new WP_Query($args); if ($the_query->have_posts()): ?> <div id="map" style="width: 99%; height: 650px;"></div> <script type="text/javascript"> (function() { // こんなので、くるんでみる var posts = []; <?php while ($the_query->have_posts()) : $the_query->the_post(); $googlemap = get_field('lat'); if (! $googlemap) { // マップ住所が登録されていないこともある continue; } $category = get_the_category(); // 記事の投稿者を取得して、そのカスタムフィールドmembership_dateの値を取得する $author_id = $post->post_author; $author_membership_date = get_user_meta($author_id, "membership_date", true); // ★現在の時刻よりも、membership_date(会員有効期間)が長い場合、フラグを立てる $owner_post = "false"; if ( strtotime($author_membership_date) >= date_i18n('U')) { $owner_post = "true"; } ?> posts.push({ lat: '<?php echo post_custom("lat")?>', lng: '<?php echo post_custom("lon")?>', name: '<?php echo post_custom("Name")?>', link: '<?php the_permalink();?>', title: '<?php the_title(); ?>', cat_id: '<?php echo $category[0]->cat_ID; ?>', owner_post: <?php echo $owner_post; ?> // ★ marker_id }); <?php endwhile; // End the loop. Whew. ?> ... var icon_map = { 2: "/images/marker.png", 3: "/images/marker-blue.png", 4: "/images/marker-gold.png", 5: "/images/marker-green.png", }; // ★ マーカーの URL を返す関数 function get_marker_image(post) { if (post.owner_post) { return "/images/marker1.png"; // ★投稿者用のマーカー } return icon_map[ post.marker_id ]; // ★カテゴリーに沿ったマーカー } var epsg4326 = new OpenLayers.Projection("EPSG:4326"); var epsg3857 = new OpenLayers.Projection("EPSG:3857"); // マーカーの生成 var features = []; for (var i in posts) { var post = posts[i]; features.push(new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(post.lng, post.lat) .transform(epsg4326, epsg3857), { tooltip: post.title, marker_image: get_marker_image(post), // ★ 関数から画像の URL を取得する post: post, } )); } ||<

ykhpno1さんのコメント
これは凄いです。 フラグを持たせる、ですか。 マーカーの URL を返す関数を作って・・なるほどこれはまたいい勉強の材料をいただきました。 本当にありがとうございます(お手数をおかけいたしました)。 いただいたコ?ド、1行1行大事に勉強していきます。 ありがとうございました! ちなみに、マップのマ?カ?のことでとある疑問がありまして、a-kuma3さんのご意見を一言だけお伺いしたいです。 マップに表示されるマ?カ?をクリックすることで吹き出しが表示されますが、PCでクリックした際に、マ?カ?から即座に吹き出しが表示されないのです。 スマホ(iphone6s)からの操作ではワンクリックでしっかりと吹き出しが表示されるのですが、PCからだと2?3クリック必要な場合があるのです(ポインタは指マ?クになっているのですが)。 これは私のPC環境のせいだと思われますか? わりと最近買ったノ?トPCでも2?3クリック必要だったりするのです。 でもスマホではワンクリックであっさり吹き出しが表示されるので軽く混乱しているのです。 もしなにか原因があって、それに改善の見込みがあるのでしたら上記のことを新たな質問として投稿したいと思うのですが。。

a-kuma3さんのコメント
>> マップに表示されるマ?カ?をクリックすることで吹き出しが表示されますが、PCでクリックした際に、マ?カ?から即座に吹き出しが表示されないのです。 << 以前、xdomain に環境を用意してもらったじゃないですか。 そちらのマップではどうです? 同じ状況ですか? もしかして、Google Chrome 使ってます? Chrome だと、反応が鈍いですねえ... デベロッパーツールを開いた状態だと、ほぼ1クリックで行けるみたいなんですが。

ykhpno1さんのコメント
はい、xdomainの方も鈍いんです。 そしておっしゃるようにスマホ、PCともにChromeを使っています。 なるほど、PCのブラウザ環境でしたか。 情報をいただき有難うございます。 改めて御礼申し上げます。 以前からいただいている回答でも、今回の質問に対していただいた回答でもそうですが、a-kuma3さんの現状把握能力や引き出しの多さに驚嘆しています。 たちまち原因や解決法を的確に探り当てるその腕力が本当に凄いです。 a-kuma3さんのような方を見ると、世の中広いなと実感します。
関連質問

●質問をもっと探す●



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