wordpress レビュー記事に地図を付ける

このブログでは飲食店のレビュー記事を書いてます。お店ごとに味や雰囲気を評価して点数をつけたりしています。

記事を書く中でお店の場所を忘れないようにと思い、記事と一緒にお店の地図も一緒に載せたいと思うようになりました。イメージとしては食べログに近い感じですね。お店や料理の内容を記事で書いて最後の方に地図を載せるイメージです。

参考：食べログ

このブログはwordpressを使っていますが、wordpressを使って簡単に実現する方法を紹介します。

実現イメージとしては記事を書く時に住所項目を設けて住所を入力しデータベースに登録。記事を表示するとデータベースから住所を取得して地図が表示されるイメージです。住所の項目をわざわざ作るのは住所をデータベースに登録しておきたいという狙いもあります。

記事を書く時に住所を登録する

まず飲食店のレビューですが、wordpressのWP Product Reviewプラグインを使ってレビューを書いてます。このプラグインは記事と投稿した物のレビュー情報を投稿することができます。

WP Product Reviewプラグイン

このプラグインでは記事を投稿する時にレビューする物の写真やコメントを入れる欄がありますので、少し改造して今回は住所を登録できるようにします。これは記事投稿フォーム画面です。今回住所に加えてお店の名前、電話番号、訪問した日、営業時間も欄を追加してみました。

投稿フォーム

追加するには次のＰＨＰを少しだけ直します。

/wp-content/plugins/wp-product-review/inc/cwp_metabox.php

このプログラムの関数cwp_review_meta_box_callbackの中に入力フォームを定義している箇所があるので、下記のようにフォームを用意し入力欄を増やします。

<div class="review-settings-notice">
add paramt
</div>
<div class="review-settings-group">
<div class="review-settings-group-option">
 <ul>
 <li>
 <label for="inp_rev_shop_name"><?php _e("shop_name", "cwppos"); ?></label>
 <input type="text" name="inp_rev_shop_name" id="inp_rev_telno" value="<?php

 if(isset($inp_review_stored_meta['inp_rev_shop_name'][0])) {
 echo $inp_review_stored_meta['inp_rev_shop_name'][0];
 }

 ?>"/>
 </li>
 <li>
 <label for="inp_rev_telno"><?php _e("telno", "cwppos"); ?></label>
 <input type="text" name="inp_rev_telno" id="inp_rev_telno" value="<?php

 if(isset($inp_review_stored_meta['inp_rev_telno'][0])) {
 echo $inp_review_stored_meta['inp_rev_telno'][0];
 }

 ?>"/>
 </li>
 <li>
 <label for="inp_rev_address"><?php _e("address", "cwppos"); ?></label>
 <input type="text" name="inp_rev_address" id="inp_rev_address" value="<?php

 if(isset($inp_review_stored_meta['inp_rev_address'][0])) {
 echo $inp_review_stored_meta['inp_rev_address'][0];
 }

 ?>"/>
 </li>
 <li>
 <label for="inp_rev_visit"><?php _e("visit", "cwppos"); ?></label>
 <input type="date" name="inp_rev_visit" id="inp_rev_visit" value="<?php

 if(isset($inp_review_stored_meta['inp_rev_visit'][0])) {
 echo $inp_review_stored_meta['inp_rev_visit'][0];
 }

 ?>"/>
 </li>
 <li>
 <label for="inp_rev_opentime"><?php _e("openTime", "cwppos"); ?></label>
 <input type="text" name="inp_rev_opentime" id="inp_rev_opentime" value="<?php

 if(isset($inp_review_stored_meta['inp_rev_opentime'][0])) {
 echo $inp_review_stored_meta['inp_rev_opentime'][0];
 }

 ?>"/>
 </li>

 <ul>
</div>
</div>

これで入力欄を増やすことができますので、後はformをsubmitする時に追加したフォームから値がデータベースに登録されるようにします。

/wp-content/plugins/wp-product-review/inc/cwp_metabox.php

このプログラムの関数cwp_review_meta_boxes_saveの中にformから受け取った値をデータベースに登録する処理があるので、追加した値を加えてデータベースに登録します。

if( isset( $_POST[ 'inp_rev_telno' ] ) ) {
 update_post_meta( $post_id, 'inp_rev_telno', $_POST[ 'inp_rev_telno' ] );
}

if( isset( $_POST[ 'inp_rev_visit' ] ) ) {
 update_post_meta( $post_id, 'inp_rev_visit', $_POST[ 'inp_rev_visit' ] );
}

if( isset( $_POST[ 'inp_rev_address' ] ) ) {
 update_post_meta( $post_id, 'inp_rev_address', $_POST[ 'inp_rev_address' ] );
}

if( isset( $_POST[ 'inp_rev_shop_name' ] ) ) {
 update_post_meta( $post_id, 'inp_rev_shop_name', $_POST[ 'inp_rev_shop_name' ] );
}

if( isset( $_POST[ 'inp_rev_opentime' ] ) ) {
 update_post_meta( $post_id, 'inp_rev_opentime', $_POST[ 'inp_rev_opentime' ] );
}

これでデータベースにそれぞれのカスタムフィールドがpostmetaテーブルに登録されますので、記事を表示する時にデータベースから住所を取って来れます。

記事を表示するときに地図（GoogleMap）を表示する

地図はGoogleMapを使います。wordpressの記事の中にGoogleMapを表示させる方法はいくつかありますが、ここでは導入が簡単なsimple-mapのプラグインを使います。このプラグインのショートコードを使って地図を出せるようにします。

WP Product Reviewプラグインを使った場合、次のプログラムが記事表示処理になりますので、この中に先ほどのデータベースに登録した住所を参照して、ＨＴＭＬに出力する処理を追加します。

/wp-content/plugins/wp-product-review/wp-product-review.php（新しいばinc/wppr-main.phpを修正します）

関数cwppos_show_reviewの中にレビュー本体のＨＴＭＬを出力する処理があります。あとはショートコードを動的に作成してdo_shortcode関数を使って展開します。中で使われているＣＳＳやＨＴＭＬタグは実際に出力するレイアウトにあわせる必要があります。


$map_work = get_post_meta($id, "inp_rev_address", true);
if (!empty($map_work)) {
 $map_tel .= get_post_meta($id, "inp_rev_telno", true);
 $return_string .='<div class="map">';
 $return_string .= '<div class="cwpr-review-top2"><h2 class="cwp-item">地図</h2><span class="cwp-item-price2">tel:';
 $return_string .= $map_tel;
 $return_string .= '</span></div>';
 $map_address .= ';
 $map_address .= get_post_meta($id, "inp_rev_address", true);

 $map_address .=';
 $return_string .= do_shortcode($map_address);
 $return_string .='</div><!-- end .map -->';
 $return_string .= '<div class="cwpr-review-top2"><a href="https://dq310.com/map/map.html?id=';
 $return_string .= $id;
 $return_string .= '" target="_blank"><span class="cwp-item-price3">ご近所グルメはこちら</span></a></div>';
}

これで記事を表示させる時に地図が出ます。この例だと電話番号も一緒に出力できるようにしました。