wordpressでレビューサイトの作り方。wp-product-reviewをカスタマイズしてレビュー記事を作成
このブログでは訪問した飲食店の情報をレビュー形式の記事をまとめております。
ブログはwordpressを使っているためプラグインが豊富ですが、自分がイメージしているようなレビューを書けるプラグインはありませんでした。なので自分で作ってみたいと思います。
目次
レビュー情報を充実させたい
求めている要件は次のとおりです。単純なレビュー記事だけではなく、見た目をリッチにして情報を充実させたいというものです。
- レイアウトはレスポンシブである
- レビュー記事に複数の写真が投稿できて写真がスライドショーで見える
- お店や料理を複数の視点で定量的に評価する仕組み。例えば味7点、雰囲気7点、価格8点など
- レビュー時に商品や料理に対してコメントを添えられる。例えばこのお店は味は良いが価格が高い等。
- お店の補足情報(住所や電話番号など)を投稿できる
このうち要件3を満たせそうなのがWP Product Reviewプラグインですが、このプラグインだとデフォルトで投稿できる情報が少ないため、それ以外の要件は満たせませんでした。
悩んだあげく残り要件をWP Product Reviewプラグインを改造して満たすことにしました。対応の備考録としてこちらに残しておきます。
まずこちらがWP Product Reviewプラグインをデフォルトで使った時のイメージです。
そのまま使っても要件の3(複数項目の定量評価)は満たすことができます。ただし、入力できる情報が限られている点、写真が1枚しか使えない点、PC用っぽいレイアウトである点が課題になりますので、改造して次のようなものにします。
それでは具体的な作り方について記載していきます。
要件1 レスポンシブ対応
WP Product Reviewのバージョン 2.8.1を使います。デフォルトでは次のようになってます。
タイトルバーに商品名と価格。左カラムに商品画像と全体スコアのパイチャート。その下に各項目のスコア。右カラムに良いところと悪いところを書く。全体で2カラムの構成になっています。
レスポンシブにするために全体を1カラムのレイアウトにします。左カラムのパイチャートを除去し、左カラムの領域をそれぞれ幅100%にします。作業にはPHPの修正とCSSを修正します。
パイチャートのカラム欄の除去
/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">';
こんな出力になるはずです。パイチャートの欄が消えます。
大きな画像を出力する
デフォルトだとサムネイルの小さい画像を使うようにプログラムで制御がかかっていますので大きいマスタ画像を使うようにします。
関数cwppos_show_reviewに該当箇所を次のように書き換えて大きな画像を出力するようにします。これで大きなマスタ画像が使われるようになります。
if(!empty($product_image)) { //$product_image_cropped = wppr_get_image_id($id,$product_image); $product_image_cropped = $product_image; }
左カラムの幅を最大にして1カラムにする
CSSを編集します。
/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%;}
これで1カラムになります。しかし、今度は高さが邪魔をして画像が半分ぐらいまでしか表示されないので次の箇所を直します。
/wp-content/plugins/wp-product-review/css/frontpage.css
一番下の方にviewportの設定があるので修正します。heightの指定があるので、これをmax-height: 100%;します。全部で3箇所あるはずです。
#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%;}
もう1箇所viewportの設定があります。
/wp-content/plugins/wp-product-review/inc/wppr-main.phpの関数cwppos_dynamic_stylesheetに同様にviewportの設定があるので、これもmax-height: 100%;します。
細かい所は他にも修正が必要ですが、これでレスポンシブ化は一旦完了です。完成したものこちらです。1カラム化に成功しました。
要件2 複数写真のスライドショー
投稿フォームを拡張する
WP Product Reviewプラグインは写真が1枚しか登録できませんので、複数登録できるように記事投稿フォームを拡張します。具体的なやり方はこちらの記事を参考に増やします。同じ要領で投稿項目を増やします。
これで複数枚の写真を登録できるようになりました。
スライドショーライブラリ(bxslider)の導入
スライドショーにはjqeuryのbxsliderを使います。wordpressにも導入しやすく、レスポンシブに対応しており依存関係が起きにくいのでこのライブラリを選定しています。
公式ページhttp://bxslider.com/に飛んでライブラリをダウンロードします。画面の右上のほうにダウンロードリンクがあります。
ダウンロードしたファイルを下記に格納します。
/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を読み込めるようにします。これでHTMLの中に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設定は2枚以降の画像表示が滑らかになるように遅延設定を入れます。
$('.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関数。画像出力している箇所があるので、登録した画像を読み込みHTMLに出力します。この時に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>';
これで複数画像のスライドショーができるので要件2はクリアになります。
要件3 複数項目を定量評価
項目ごとの評価はWP Product Reviewプラグインの標準機能で出来ますが毎回評価項目を入力するのが若干手間です。なのでグルメのレビューを書く場合には、味、価格、雰囲気の3点から評価をするので、投稿フォームにリストボックスを追加してグルメを選ぶと味、価格、雰囲気がデフォルトで入るようにしました。
例えば行ったを選ぶと楽しいなどを評価項目にしています。
/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>
要件4 レビューコメントを投稿
これもこの記事を元に投稿項目に追加をすることで対応します。テキストエリアの項目を必要数追加して画面に表示します。このブログでは特定のメンバーが発言をするような形式になっていますので、全部で4つのテキストエリアを追加しました。
画面を表示する際にCSSで整形を行い表示します。このブログのではCSSを使い噴出し形式でコメント欄を出しています。
要件5 お店の補足情報を投稿
お店の情報としてお店の地図と電話番号を載せます。やり方はこの記事のまんまですが、地図とお店の電話番号を入れられるようにします。
完成
これで完成しました。実際に完成したものです。レストランオオタニの記事などでも使用しています。
WP Product Reviewプラグインは土台が一通り出来てますのでカスタマイズにより簡単に要望を実現できました。さらに登録した情報はデータベース化されますので、次回はこの登録した情報をさらに活用していきたいと思います。