「WP Customer Reviews」をもっとカスタマイズしてみよう

2018年10月17日

この記事の評価: 4.5(41件のレビュー)

レビュー投票プラグイン「WP Customer Reviews」がマイブームなので何度かカスタマイズしてみました。

 

ここではもっと使いやすくするためにいろいろといじってみたいと思います(・∀・)

投稿フォームを最初から開いた状態にする

弄るところ→CSS

「WP Customer Reviews」の投稿フォームは初期状態で非表示になっています。
ユーザーが投稿用のボタンをクリックすることで、初めてフォームが表示されます。

最初からフォームが表示されていたほうが、ユーザーも投票しやすくなるのではなかろうか。
と思ったけど、そんな設定はありません。

ですのでCSSをいじって初期状態で表示されるようにしましょう。

あと、フォームに表示される「キャンセル」ボタンを押すとフォームが消えてしまいますので、キャンセルボタンは非表示にしたほうが良いでしょう。

こちらのCSSをコピペで追加します。

.wpcr3_respond_2{
	display: block;
}

.wpcr3_show_btn, .wpcr3_cancel_btn{
	display: none;
}

投稿フォームをスマホ用にレスポンシブ化する

弄るところ→CSS

スマホで見ると名前やレビュー入力欄などのテキストボックスがはみ出してしまいます。

こんな感じ。

これをレスポンシブ化してスマホ対応しましょう。

基本的にはCSSをいじるだけでなんとかなりますが、細かい設定をしようとするといじる箇所が多くなりそうなので、大まかな設定だけ変更してみます。

下記のCSSをテンプレートのStyle.cssに追記します。

/* フォーム全体の最大幅追記 */
.wpcr3_div_2 {
    max-width: 100%;
}

/* 画面幅600px以下で見出しと入力フォームを2段にする */
@media (max-width: 600px){
.wpcr3_table_2 td {
    text-align: left;
    display: block;
}
}

/*  レビューフォームの幅設定 */
.wpcr3_respond_2 textarea {
    min-width: 300px;
    width: 100%;
    max-width: 100%;
}

サイズは任意で変更して構いません。

変更後はこんな感じに表示されます。

スマホでも見やすくなったのではないでしょうか\(^o^)/

投稿フォームをレビューの下に表示する

弄るところ→テンプレートファイル
※プラグインをアップデートするとリセットされてしまいます

「WP Customer Reviews」では投稿フォームがレビューの上に表示されます。
好みが分かれるところかもしれませんが、自分としてはレビュー一覧が表示されたあとに投稿フォームがあったほうが良いかなぁと。
だいたい他の人のレビューを読んでから、「私もレビューしてみよう」と思ったりするのかと。
コメント欄もフォームは下に表示されていますし。

というわけで、投稿フォームの表示位置を修正します。
こちらは直接にテンプレートファイルを修正します。

【ファイルの場所】
wp-content/plugins/wp-customer-reviews/include/templates

【対象ファイル】
frontend_review_holder.html

【いじるところ】
{{review_form}}が投稿フォームが表示されるところになりますので、これを{{/power}}の下辺りに持っていきます。

テンプレート修正後はプラグインを一度無効にしたあとに、再度有効化すると反映されます。

レビュー表示をblockquoteから別のタグに変える

弄るところ→テンプレートファイル
※プラグインをアップデートするとリセットされてしまいます

「WP Customer Reviews」では投稿されたレビューが、Blockquoteタグで括られて表示されます。
つまり引用文として扱われてしまうわけなんです。

SEO的に引用とは「人様のサイトから文章をお借りしていますよ」みたいな認識になってしまいます。

レビューもオリジナルコンテンツとして評価されるべきかと思いますので、Blockquoteで括るのは避けたいですね。

というわけで、出力されるタグを変更しましょう。
こちらも直接テンプレートファイルを修正します。

【ファイルの場所】
wp-content/plugins/wp-customer-reviews/include/templates

【対象ファイル】
frontend_review_item_reviews.html.html

【いじるところ】
レビューとリプがそれぞれblockquoteで括られていますので、それらをDIVに変更しましょう。

ただしデザインが崩れる可能性があるので、CSSの修正を任意で行ってください。

テンプレート修正後はプラグインを一度無効にしたあとに、再度有効化すると反映されます。

「WP Customer Reviews」を日本語化する

弄るところ→テンプレートファイル
※プラグインをアップデートするとリセットされてしまいます

このプラグインは残念なことに日本語化されていないので、いろんなところが英語表記のままです。
ユーザーがとっつきにくいと、せっかくレビューをしようと思ってもためらってしまうかもしれません。

できる限り日本語化しておきましょう。

というのをこちらのサイトでやってくれていますので、そちらをご紹介します(・∀・)
WordPressサイトにレビュー機能!WP Customer Reviewsを日本語化@ナカノマサミツ

テンプレートファイルをまるっと上書きすることになるので、上で説明した修正を行っていた場合は注意してください。

もし修正するならば、先に日本語化をおこない、その後で個別でテンプレートファイルを修正したほうが良いでしょう。

日付の表示を日本語向けにする

弄るところ→テンプレートファイル
※プラグインをアップデートするとリセットされてしまいます

レビューの投稿日の表示がデフォルトだと『mar,31 2019』のように海外向けのフォーマットになっています。
こちらを日本向けに『2019年3月31日』のような表示に変える方法を説明します。

【ファイルの場所】
wp-content/plugins/wp-customer-reviews/

【対象ファイル】
wp-customer-reviews-3.php

【いじるところ】
441行目あたりにある

$out['post_date'] = date("M j, Y", strtotime($out['post_date']));


$out['post_date'] = date("Y年n月j日", strtotime($out['post_date']));


へ修正します。

テンプレート修正後はプラグインを一度無効にしたあとに、再度有効化すると反映されます。

レビュー表示項目のレイアウトをカスタマイズ

2019/12/11追記

弄るところ→テンプレートファイル
※プラグインをアップデートするとリセットされてしまいます

レビューの表示はデフォルトではこんな感じになっています。

テーマによって多少見た目は異なりますが、項目の配置はほぼ一緒になるかと思います。

これを星やら投稿者やらの表示場所をカスタマイズして見やすくしたのがこちら↓

このような変更の方法を書いていきます。

【ファイルの場所】
wp-content/plugins/wp-customer-reviews/include/templates

【対象ファイル】
frontend_review_item_reviews.html.html

【いじる内容】

テンプレートファイルの内容をざっくり項目別に分けるとこうなります。

レビュー項目の配置を変えたい場合は、この赤枠ごとにまるっとカット&ペーストして移動させればOKです。

ちなみにコード内の

<div class="wpcr3_clear"></div>

が改行扱いになります。改行したくなければこの1文を削除、改行を追加したければこの1文を加えてください。

参考までに、このブログのレビュー表示はこうなっております。

同じように表示したい方は、この通りに項目を並び変えればOKです\(^o^)/

※テンプレート修正後はプラグインを一度無効にしたあとに、再度有効化すると反映されます。

おまけ:Googleっぽい星の素材

レビューの表示で使える★の画像を作りましたので、ご自由にお使いくださいw
Googleの検索結果に表示される★に近い色合いですので、これを評価に使うとページを訪問したユーザーにも安心感を与えられます\(^o^)/

【WPCustomerReviews用素材】





↓これっぽい色してます。

まとめ

とりあえずこれくらい弄くれば「WP Customer Reviews」もだいぶ使いやすくなるはず!!

ただし、プラグインが頻繁にアップデートを行っているようで、すぐにアップデートを促されます。アップデートしてしまうとテンプレートファイルが上書きされ初期化されてしまうので注意が必要です!!

他にもカスタマイズできるところが見つかったら追記していきますの乞うご期待(・∀・)

41件のレビューがあります

平均評価:
 (4.487804878048781)
テストさん
てすてす

すごいね!

てすとです
mon

どうもテストです

実装したいわぁ
テスト

できたらいいな

xc

わかりやすかった!

いい感じの記事
ヒヒイロカネ

とてもいい感じの記事で参考になりました!
自サイトにも取り入れてみます!ありがとう!

ラジオボタン
ポスト

ラジオボタンを導入したいので、やり方を解説していただけると嬉しいです。

ばーか
ばーけ

バーカ

ありがたや
ありがたやおばさん

案件で使うためにさんこうにしたわよありがたや

時代はだよ
fdさkjdl

いいね!

あああ
ああ

カスタム投稿ページだと使えないね、フォームはでるが結果が表示されない

テスト太郎
テスト太郎

テスト太郎
テスト太郎2

テスト太郎3

r

tasukaimasu

ありがとう

参考になります!記事一覧に平均評価点を表示したり、平均評価点順にソートしたりする事って可能でしょうか?

役に立った
参考になったマン

この記事の評価: 4.5(27件のレビュー)を私もやりたい
教えてもらえるとありがたいです。
それ以外は本当にありがたい情報でした
ありがとうございます。

なるほど!
なるほど!

なるほど!

ありがとうございます
K.Y

分かりやすく記載して下さったのですごく助かりました。
ありがとうございます。

tst
ytyt

tsttst

ああ
あああ

ナイスカスタムですね。
ナイス

はじめのレビューは3件のみ表示して、残りは「もっと見る」ボタンで下にアコーディオンで開く仕様を模索しています。

あああ

あああ

ああああああ
あaaa

ありがとうございます。

出来てますか?
ねーんや

簡単そうですね

てすと
てすと

ためしてみた

ああああ

ああああ

書けるんか?
ほんまか?

やったぜ。

てす

てす

テスト

テスト
テスト

テストテストテストテストテストテストテスト

テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト



テストテストテストテストテストテスト

めっちゃ助かりました
通りすがり

レスポンシブ化に手こずってたので本当にありがたかったです!

おてぃんてぃん
おてぃんてぃん

おてぃんてぃん

すごいで
ほんま

こりは!!!!

テスト1
テスト1

テスト1

あああ
あああ

あーあ

てすてす
てす

てすとします

参考になる
めっちゃ

参考になる!

光素材
◉ンガ

不足してるよ!

夢も希望もない
夢も希望もない人

t

すっすっすっ
い◎た

すぎょいん!!(ビクンビクンッ)

なんだ
ねーやん。

なんかすごいな(*'ω' *)

レビューを投稿しよう\(^o^)/
1
2
3
4
5
投稿する
     
Cancel

Create your own review