このブログでは訪問した飲食店の情報をレビュー形式の記事をまとめております。

ブログはwordpressを使っているためプラグインが豊富ですが、自分がイメージしているようなレビューを書けるプラグインはありませんでした。なので自分で作ってみたいと思います。

レビュー情報を充実させたい

求めている要件は次のとおりです。単純なレビュー記事だけではなく、見た目をリッチにして情報を充実させたいというものです。

  1. レイアウトはレスポンシブである
  2. レビュー記事に複数の写真が投稿できて写真がスライドショーで見える
  3. お店や料理を複数の視点で定量的に評価する仕組み。例えば味７点、雰囲気７点、価格８点など
  4. レビュー時に商品や料理に対してコメントを添えられる。例えばこのお店は味は良いが価格が高い等。
  5. お店の補足情報（住所や電話番号など）を投稿できる

レビュー

このうち要件３を満たせそうなのがWP Product Reviewプラグインですが、このプラグインだとデフォルトで投稿できる情報が少ないため、それ以外の要件は満たせませんでした。

悩んだあげく残り要件をWP Product Reviewプラグインを改造して満たすことにしました。対応の備考録としてこちらに残しておきます。

まずこちらがWP Product Reviewプラグインをデフォルトで使った時のイメージです。

07-wp-product-review-look

WP Product Reviewプラグイン　デフォルト

そのまま使っても要件の３（複数項目の定量評価）は満たすことができます。ただし、入力できる情報が限られている点、写真が１枚しか使えない点、ＰＣ用っぽいレイアウトである点が課題になりますので、改造して次のようなものにします。

DD

完成イメージ

それでは具体的な作り方について記載していきます。

要件１　レスポンシブ対応

WP Product Reviewのバージョン 2.8.1を使います。デフォルトでは次のようになってます。

2016-03-27_014942

デフォルトの状態

タイトルバーに商品名と価格。左カラムに商品画像と全体スコアのパイチャート。その下に各項目のスコア。右カラムに良いところと悪いところを書く。全体で２カラムの構成になっています。

レスポンシブにするために全体を１カラムのレイアウトにします。左カラムのパイチャートを除去し、左カラムの領域をそれぞれ幅１００％にします。作業にはＰＨＰの修正とＣＳＳを修正します。

パイチャートのカラム欄の除去

/wp-content/plugins/wp-product-review/inc/wppr-main.phpの関数cwppos_show_reviewにて該当エリアを削除します。

次のコードの<div class=”review-wu-grade”>～</div><!– end .review-wu-grade –>の間を消します。


$commentNr = get_comments_number($id)+1;
$divrating = $rating['overall']/10;
$return_string .= '</div><!-- end .rev-wu-image -->
 　<div class="review-wu-bars">';

こんな出力になるはずです。パイチャートの欄が消えます。

2016-03-27_014942

パイチャートを取った状態

大きな画像を出力する

デフォルトだとサムネイルの小さい画像を使うようにプログラムで制御がかかっていますので大きいマスタ画像を使うようにします。

関数cwppos_show_reviewに該当箇所を次のように書き換えて大きな画像を出力するようにします。これで大きなマスタ画像が使われるようになります。


if(!empty($product_image)) {
 //$product_image_cropped = wppr_get_image_id($id,$product_image);
 $product_image_cropped = $product_image;
}

左カラムの幅を最大にして１カラムにする

ＣＳＳを編集します。

/wp-content/plugins/wp-product-review/css/frontpage.css

それぞれwidthの％指定があるので記述を削除します。明示的に100%で書いても良いです。


#review-statistics .review-wrap-up .review-wu-left {float: left;margin-top:10px; }
#review-statistics .review-wrap-up .review-wu-left .rev-wu-image {text-align:center; float: left; overflow: hidden; border-top: none;padding:0;margin-left: 5%;margin-right: 5%;}

これで１カラムになります。しかし、今度は高さが邪魔をして画像が半分ぐらいまでしか表示されないので次の箇所を直します。

/wp-content/plugins/wp-product-review/css/frontpage.css

一番下の方にviewportの設定があるので修正します。heightの指定があるので、これをmax-height: 100%;します。全部で３箇所あるはずです。

#review-statistics .review-wrap-up .review-wu-left .rev-wu-image, #review-statistics .review-wrap-up .review-wu-left .review-wu-grade {max-height: 100%;}

もう１箇所viewportの設定があります。

/wp-content/plugins/wp-product-review/inc/wppr-main.phpの関数cwppos_dynamic_stylesheetに同様にviewportの設定があるので、これもmax-height: 100%;します。

細かい所は他にも修正が必要ですが、これでレスポンシブ化は一旦完了です。完成したものこちらです。１カラム化に成功しました。

mb-2016-03-27_033911

モバイル表示

要件２　複数写真のスライドショー

投稿フォームを拡張する

WP Product Reviewプラグインは写真が１枚しか登録できませんので、複数登録できるように記事投稿フォームを拡張します。具体的なやり方はこちらの記事を参考に増やします。同じ要領で投稿項目を増やします。

2016-03-27_035833

デフォルト画面。写真登録は１枚まで

2016-03-27_035741

画像投稿フォームを５つに拡大

これで複数枚の写真を登録できるようになりました。

スライドショーライブラリ(bxslider)の導入

スライドショーにはjqeuryのbxsliderを使います。wordpressにも導入しやすく、レスポンシブに対応しており依存関係が起きにくいのでこのライブラリを選定しています。

公式ページhttp://bxslider.com/に飛んでライブラリをダウンロードします。画面の右上のほうにダウンロードリンクがあります。

2016-03-27_042947

ダウンロードしたファイルを下記に格納します。

/wp-content/plugins/wp-product-review/javascript

  • jquery.bxslider.min.js

/wp-content/plugins/wp-product-review/css

  • jquery.bxslider.css

/wp-content/plugins/wp-product-review/css/images ※新規

  • bx_loader.gif
  • controls.png

スライドショーの実装

bxsliderライブラリを実行するプログラムからincludeします。

/wp-content/plugins/wp-product-review/inc/wppr-main.phpのcwppos_show_review関数。wp_enqueue_scriptでbxsliderを読み込めるようにします。これでＨＴＭＬの中にincludeされます。


wp_enqueue_script( 'bxslider-min', WPPR_URL.'/javascript/jquery.bxslider.min.js',array("jquery"),WPPR_LITE_VERSION,true );
 wp_enqueue_style( 'bxslider-css', WPPR_URL.'/css/jquery.bxslider.css',array(),WPPR_LITE_VERSION );

ajaxを動作するようにします。

/wp-content/plugins/wp-product-review/javascript/main.jsのreadyの下の方に処理を追加。delay設定は２枚以降の画像表示が滑らかになるように遅延設定を入れます。


$('.bxslider').bxSlider({
 auto: false,
 captions: 'true',
 pager: false,

});
 $('#img2,#img3,#img4,#img5').delay(5000).css('display','block');

これでbxsliderを使うことができますので記事にスライドショーを組み込みます。

/wp-content/plugins/wp-product-review/inc/wppr-main.phpのcwppos_show_review関数。画像出力している箇所があるので、登録した画像を読み込みＨＴＭＬに出力します。この時にbxsliderが適応されるように<ul class=”bxslider”>としてリストを出力します。


 $return_string .= '<ul class="bxslider">';
 $return_string .= '<li><img class="nolazy" title="' . $product_description . '" id="img' .$phcnt++. '" alt="" src=" ' .$product_image. '" /></li>';

 $product_image = get_post_meta($id, "inp_rev_product_image2", true);
 $product_description = get_post_meta($id, "inp_rev_product_description2", true);
 if(!empty($product_image)) {
 $return_string .= '<li><img class="nolazy" title="' . $product_description . '" id="img' .$phcnt++. '" alt="" src=" ' .$product_image. '" /></li>';
 }
 $product_image = get_post_meta($id, "inp_rev_product_image3", true);
 $product_description = get_post_meta($id, "inp_rev_product_description3", true);
 if(!empty($product_image)) {
 $return_string .= '<li><img class="nolazy" title="' . $product_description . '" id="img' .$phcnt++. '" alt="" src=" ' .$product_image. '" /></li>';
 }
 $product_image = get_post_meta($id, "inp_rev_product_image4", true);
 $product_description = get_post_meta($id, "inp_rev_product_description4", true);
 if(!empty($product_image)) {
 $return_string .= '<li><img class="nolazy" title="' . $product_description . '" id="img' .$phcnt++. '" alt="" src=" ' .$product_image. '" /></li>';
 }
 $product_image = get_post_meta($id, "inp_rev_product_image5", true);
 $product_description = get_post_meta($id, "inp_rev_product_description5", true);
 if(!empty($product_image)) {
 $return_string .= '<li><img class="nolazy" title="' . $product_description . '" id="img' .$phcnt++. '" alt="" src=" ' .$product_image. '" /></li>';
 }
 $return_string .= '</ul>';

これで複数画像のスライドショーができるので要件２はクリアになります。

2016-03-27_052421

実装完了！

要件３　複数項目を定量評価

項目ごとの評価はWP Product Reviewプラグインの標準機能で出来ますが毎回評価項目を入力するのが若干手間です。なのでグルメのレビューを書く場合には、味、価格、雰囲気の３点から評価をするので、投稿フォームにリストボックスを追加してグルメを選ぶと味、価格、雰囲気がデフォルトで入るようにしました。

2016-03-27_190501

投稿フォーム

2016-03-27_190857

投稿フォーム

例えば行ったを選ぶと楽しいなどを評価項目にしています。

/wp-content/plugins/wp-product-review/inc/cwp_metabox.phpの投稿フォームの部分に適当なjavascriptを追加してリストボックスとフォーム値を連動させます。


 <script type="text/javascript">
 window.onload = txtchg;
 function txtchg(){
 
 x=document.post.proGenre.value;
 
 if (x =="guru") {
 document.post.option_1_content.value= "味";
 document.post.option_2_content.value= "価格";
 document.post.option_3_content.value= "雰囲気";
 } else if (x =="mita") {
 document.post.option_1_content.value= "品質";
 document.post.option_2_content.value= "";
 document.post.option_3_content.value= "";
 } else if (x =="mono") {
 document.post.option_1_content.value= "品質";
 document.post.option_2_content.value= "価格";
 document.post.option_3_content.value= "";
 } else if (x =="itta") {
 document.post.option_1_content.value= "楽しい";
 document.post.option_2_content.value= "品質";
 document.post.option_3_content.value= "また行きたい";
 }
 }
 </script>

要件４　レビューコメントを投稿

これもこの記事を元に投稿項目に追加をすることで対応します。テキストエリアの項目を必要数追加して画面に表示します。このブログでは特定のメンバーが発言をするような形式になっていますので、全部で４つのテキストエリアを追加しました。

txtcommetn

テキストエリアを４つ追加

画面を表示する際にＣＳＳで整形を行い表示します。このブログのではＣＳＳを使い噴出し形式でコメント欄を出しています。

2016-03-27_193807

記事にコメントが入れられるようになりました。

要件５　お店の補足情報を投稿

お店の情報としてお店の地図と電話番号を載せます。やり方はこの記事のまんまですが、地図とお店の電話番号を入れられるようにします。

2016-03-26_011552

記事に地図を入れる

 

完成

これで完成しました。実際に完成したものです。レストランオオタニの記事などでも使用しています。

2016-03-27_195002

完成！

WP Product Reviewプラグインは土台が一通り出来てますのでカスタマイズにより簡単に要望を実現できました。さらに登録した情報はデータベース化されますので、次回はこの登録した情報をさらに活用していきたいと思います。

こちらの記事もどうぞ