「WP Customer Reviews」をもっとカスタマイズしてみよう
この記事の評価： 4.4（22件のレビュー）
レビュー投票プラグイン「WP Customer Reviews」がマイブームなので何度かカスタマイズしてみました。
ここではもっと使いやすくするためにいろいろといじってみたいと思います(・∀・)
目次 [show]
投稿フォームを初期状態で開く
「WP Customer Reviews」の投稿フォームは初期状態で非表示になっています。
ユーザーが投稿用のボタンをクリックすることで、初めてフォームが表示されます。
最初からフォームが表示されていたほうが、ユーザーも投票しやすくなるのではなかろうか。
と思ったけど、そんな設定はありません。
ですのでＣＳＳをいじって初期状態で表示されるようにしましょう。
あと、フォームに表示される「キャンセル」ボタンを押すとフォームが消えてしまいますので、キャンセルボタンは非表示にしたほうが良いでしょう。
こちらのCSSをコピペで追加します。
1 2 3 4 5 6 7 | .wpcr3_respond_2{ display: block;}.wpcr3_show_btn, .wpcr3_cancel_btn{ display: none;} |
投稿フォームをスマホ用にレスポンシブ化する
スマホで見ると名前やレビュー入力欄などのテキストボックスがはみ出してしまいます。
こんな感じ。
これをレスポンシブ化してスマホ対応しましょう。
基本的にはＣＳＳをいじるだけでなんとかなりますが、細かい設定をしようとするといじる箇所が多くなりそうなので、大まかな設定だけ変更してみます。
下記のCSSをテンプレートのStyle.cssに追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* フォーム全体の最大幅追記 */.wpcr3_div_2 { max-width: 100%;}/* 画面幅600px以下で見出しと入力フォームを２段にする */@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行目あたりにある
1 | $out['post_date'] = date("M j, Y", strtotime($out['post_date'])); |
を
1 | $out['post_date'] = date("Y年n月j日", strtotime($out['post_date'])); |
へ修正します。
テンプレート修正後はプラグインを一度無効にしたあとに、再度有効化すると反映されます。
おまけ：Googleっぽい星の素材
レビューの表示で使える★の画像を作りましたので、ご自由にお使いくださいｗ
Googleの検索結果に表示される★に近い色合いですので、ページを訪問したユーザーにも安心です＼(^o^)／
これっぽい色してます。
【WPCustomerReviews用素材】
まとめ
とりあえずこれくらい弄くれば「WP Customer Reviews」もだいぶ使いやすくなるはず！！
問題はこまめにアップデートが配信されているようで、テンプレートファイルを上書きしようとしてきます(*´Д`)
しっかりバックアップを取っておかないと初期化されてしまうので注意が必要です！！
他にもカスタマイズできるところが見つかったら追記していきますの乞うご期待(・∀・)
22件のレビューがあります
あああ
ありがとうございます。
簡単そうですね
あ
ためしてみた
ああああ
やったぜ。
てす
あ
テスト
テストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
テストテストテストテストテストテスト
レスポンシブ化に手こずってたので本当にありがたかったです！
おてぃんてぃん
こりは！！！！
テスト1
あーあ
てすとします
参考になる！
不足してるよ！
t
すぎょいん！！（ﾋﾞｸﾝﾋﾞｸﾝｯ）
なんかすごいな(*'ω' *)
レビューを投稿しよう＼(^o^)／ | |
