動画も可！WordPressのコメント機能を使ったお客様の声・口コミ掲載方法
整体院サイトをリニューアルする過程で、「お客様の声」を掲載するための専用ページをどのようにするか迷いました。
一般的にお客様の声の紹介の仕方としては、「ブログ記事としてアップ」、もしくは「固定ページに追加していく」といった２つのスタイルが誰でもすぐ実践できる方法かと思います。
ただ、お客様の声を掲載する以上は、これから来てくれるであろう見込み客に対して自店舗の魅力を効率よくアピールできなければいけません。
そういうことを踏まえると、私としては上記の２つのスタイルでは以下のようなデメリットを感じました。
ブログ記事としてお客様の声を紹介するデメリット
まず、ブログ記事として[お客様の声]というカテゴリーを作り、掲載していく方法です。
ブログ記事としてお客様の声を紹介する場合
大抵のブログのカテゴリー一覧では本文が抜粋となっているため、全てを読むには個別の記事にアクセスしないといけません。
スマホは画面も小さく一度に表示できる情報も限られるため、PCのようにマウス操作で軽快に画面切り替えができるわけではありません。
そういった状態では、口コミ記事を読んでくれる人は限りなく少なくなるように感じます。
固定ページにお客様の声を追加で更新するデメリット
次に、固定ページに追加していく方法です。
固定ページにお客様の声を追加で更新する場合
こちらの方法だと、お客様の声ごとにページを移動する必要がありません。
全てを一気に読めるというメリットもありますが、お客様の声が増えれば増えるほど行数が長くなり、ページ読み込みが重くなってしまうので長期的にみるとあまりお勧めできません。
ページが長くなりすぎないよう、症状ごとにページを分けるなどの処理で対応するという方法もありますね。
口コミプラグインはカスタマイズが大変だった
WordPressには「WP Customer Reviews」という口コミを表示するためのプラグインがあります。
項目の追加も自由にできて便利なのですが、制作者が海外の方のため設定ページがすべて英語です。
日本語化の方法を紹介してくださっているブログもありますが、プラグイン内のファイルをいじらないといけないため、初心者には結構ハードルが高いです。
何日も試行錯誤し、作ったのがこちらの投稿フォームです。
「WP Customer Reviews」のカスタマイズ例
私としては最高傑作のフォームができたのですが、ふと思いました。
やまかわ通販サイトの個人情報入力と同じで、ああいうのって項目が多ければ多いほど面倒くさくなりますよね。
そもそもこれだと、画像や動画を表示する機能がないので却下としました。
【結論】デフォルトのコメント機能が一番便利
少し前置きが長くなってしまいましたが、お客様の声の紹介をするのにどの方法が一番楽で機能的かを考え出した答えは、
やまかわということです。
コメント機能で口コミを掲載するメリット
お客様の声をコメントで表示すると、以下のようなメリットがあります。
- お客様自身に投稿してもらえる
- 一元管理や確認がとても楽
- コメント返信が簡単
- 表示件数を管理画面から設定可能
お客様自身に投稿してもらえる
コメント機能を使えば、こちらから一方的に口コミを掲載するだけではなく、お客様側からも投稿をしてもらえるようになります。
一元管理や確認がとても楽
口コミごとに記事を書く手間も省けますし、管理画面のコメントページから一覧表示もできるので、管理がとても楽です。
コメント返信が簡単
コメント機能なので当たり前ですが、いただいたお客様の声に返信する機能が初めから付いています。
管理画面から返信可能
管理画面から返信の文章を打ち込むだけで「お店からのお礼」を残すことができます。口コミとお返しメッセージを別フォームで分けて見れるというのが非常に便利です。
表示件数を管理画面から設定可能
ディスカッション設定から1ページ当たりの表示件数を簡単に変更することができます。
1ページ当たりの表示件数
写真や動画を使うと信頼性もアップ！
WordPressのコメントは画像や動画も貼り付けることができます。お客様に紙に書いてもらったものを皆さんご自身でコメント欄に記入すれば現実味も出て信頼性もアップです！
この方法なら、ネットに疎い方や年配の方からの口コミも問題なく公開できます。
それでは、実際に「WordPress標準コメント機能を使った口コミページの作り方」を解説していきます。
カスタマイズ完成イメージ
カスタマイズ完成イメージです。
実際のページは以下からご覧ください。
参考患者様の声 | 山形県山形市の整体で慢性痛の根本改善するなら手もみ整体 癒眠
カスタマイズの手順
口コミページの実装は以下の手順でおこないます。
- page-voice.phpを作る
- お客様の声の固定ページにテンプレートを設定する
- コメントの投稿を許可する
- コメント入力欄を「名前」と「メッセージ」のみにする
- コメント表示の承認制をなしにする
- CSSでデザインを整える
- YouTube動画が表示されるようにする
- （おまけ１）スパム対策で入れておきたいプラグイン
- （おまけ２）コメント送信してくれた方に特別なページを表示する
なお、WordPressテーマはSTINGER8を例として使用します。
細かい部分は各自使用のテーマに合わせて修正してください。
１．page-voice.phpを作る
「お客様の声」専用の固定ページテンプレートを作成します。
FTPソフトを使い、親テーマのpage.phpをダウンロード。
親テーマからダウンロード
ファイル名をpage-voice.phpと変更し、子テーマにアップロードします。
子テーマにアップロード
コピーの方法はこちらに詳しく書きました。
WordPressのテーマ編集画面から、page-voice.phpの中身を編集します。
まず、1行目の下記のコードを、
<?php get_header(); ?>
このように変更します。
<?php /* Template Name: お客様の声 */ get_header(); ?>
すると、ファイルがテンプレートファイルとなって名前が付きます。
お客様の声 固定ページテンプレート
次に、page-voice.phpの中の<?php the_content(); ?>の下にコメントフォームを表示するためのコードを追加します。
以下のコードを
<?php the_content(); //本文 ?>
このように変更します。
<?php the_content(); //本文 ?>
<?php comments_template(); //コメント欄 ?>
以上で、page-voice.phpの編集は終了です。
２．固定ページを作り、テンプレートを設定する
「お客様の声」ページを固定ページで作成します。
「お客様の声」ページを作成
コメントフォームの上に何かメッセージや画像を表示したい場合は記入し、固定ページの属性のテンプレートをお客様の声に設定します。
３．コメントの投稿を許可する
表示オプションから「ディスカッション」と「コメント」のチェックを入れます。
ディスカッションを表示させる
編集ページ下部にディスカッションとコメントの設定オプションが追加されるので、ディスカッションの「コメントの投稿を許可」にチェックを入れます。
コメントの投稿を許可する
これで、「お客様の声」ページを公開してください。
４．コメント入力欄をカスタマイズする
コメントを投稿するには基本的にメールアドレスが必要ですが、少しでもコメントをしてもらいやすくするためにメールアドレスとURLの項目を削除しましょう。
子テーマにcomments.phpをコピーして、中身を以下に変更してください。
※STINGER8の仕様なのでほかのテーマの方は気を付けてください。
<hr class="hrcss" />
<div id="comments">
<?php
if ( have_comments() ):
?>
<h5 id="resp"><i class="fa fa-commenting"></i> 頂いたメッセージ</h5>
<ul class="commets-list">
<?php wp_list_comments( 'callback=custom_comment' ); ?>
</ul>
<?php
endif;
$args = array(
'title_reply' => 'メッセージを入力',
'comment_notes_before' => '',
'fields' => array(
'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
'email' => '',
'url' => '',
),
'label_submit' => __( 'メッセージを送信' ),
);
comment_form( $args );
?>
</div>
<?php
if( $wp_query -> max_num_comment_pages > 1 ):
?>
<div class="st-pagelink">
<?php
$args = array(
'prev_text' => '« Prev',
'next_text' => 'Next »',
);
paginate_comments_links($args);
?>
</div>
<?php
endif;
?>
<!-- END singer -->
さらに、functions.phpに以下を追加します。
//コメント欄カスタマイズ
function custom_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-listCon">
<span class="comment-name">
<?php printf(__('<cite class="fn">%s</cite> <span class="says">より:</span>'), get_comment_author_link()) ?>
</span>
<span class="comment-date-edit">
<?php comment_date('Y/m/d(D)');?> <?php comment_time();?> <?php edit_comment_link(__('Edit'),' ','') ?>
</span>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('あなたのコメントは管理者の承認待ちです。') ?></em><br />
<?php endif; ?>
<?php comment_text() ?>
</div>
</div>
<?php
}
//名前の入力だけ必須にする
function preprocess_comment_author( $commentdata ) {
if ("" === trim( $commentdata['comment_author'] ))
wp_die('名前を入力して下さい。');
return $commentdata;
}
add_filter('preprocess_comment', 'preprocess_comment_author', 2, 1);
//コメントと名前を逆にする
function move_comment_field( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}
add_filter( 'comment_form_fields', 'move_comment_field' );
以上のコードは、こちらのサイトからお借りしました。
参考STINGER7：コメント欄をカスタマイズする方法【シンプル掲示板風】 – うぇぶあしび
５．コメント表示の承認制をなしにする
コメントはデフォルトで承認制となっていますが、これを解除します。
解除する理由も上記サイトに記載されていますが、メールアドレスの入力がない場合、「このコメントは承認待ちです」のメッセージが表示されなくなってしまうので、コメントが送信されたかどうかお客様が判断できなくなってしまうからです。
設定 → ディスカッションから「コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックを外します。
メールアドレスを必要なしにする
さらに、「コメントの手動承認を必須にする」と「すでに承認されたコメントの投稿者のコメントを許可し、それ以外のコメントを承認待ちにする」のチェックも外します。
承認待ちなしにする
６．CSSでデザインを整える
コメント欄のデザインを整えます。
以下のCSSを追加してください。
/*--------------------------------------
コメント欄
--------------------------------------*/
#comments { /* コメント欄全体の枠 */
margin: 20px -20px;
}
#comments p { /* コメント欄全体の文字の大きさ */
font-size: 15px;
}
h5#resp { /* コメントがあった時の見出し */
font-size: 20px;
}
h3#reply-title { /* コメント入力欄の見出し */
font-size: 20px;
color: #333;
}
ul.commets-list { /* コメントリストを中央へ */
margin-left: 20px;
}
.comment-listCon { /* コメント毎のボックス */
margin: 10px -15px 10px -20px;
padding: 20px 15px 20px 20px;
border: 1px solid #CCCCCC;
}
.comment-name .fn { /* コメントした人の名前 */
font-size: 16px;
font-weight: bold;
color: #333;
}
.comment-name .says { /* 「より：」の部分 */
font-weight: bold;
color: #333;
}
.comment-date-edit { /* 「日付」とログイン者が見れる「編集」の部分 */
font-weight: bold;
color: #333;
}
#comments input[type="submit"] { /* 送信ボタン */
background: #FF9933;
color: #fff;
border-radius: 3px;
padding: 10px;
}
@media only screen and (max-width: 413px) { /* スマホで日付を改行して文字サイズ変更 */
.comment-date-edit {
font-size: 12px;
display: block;
}
}
７．YouTube動画が表示されるようにする
WordPressにはoEmbedという機能があり、URLを動画に変換することができます。
この機能を使い、メッセージにYouTube動画のURLを記入すると動画に変換されるようにカスタマイズします。
以下のコードをfunctions.phpに追加してください。
// YouTube oEmbed Code
function custom_youtube_oembed($code){
if(strpos($code, 'youtu.be') !== false || strpos($code, 'youtube.com') !== false){
$html = preg_replace("@src=(['\"])?([^'\">\s]*)@", "src=$1$2&showinfo=0&rel=0", $code);
$html = preg_replace('/ width="\d+"/', '', $html);
$html = preg_replace('/ height="\d+"/', '', $html);
$html = '<div class="youtube">' . $html . '</div>';
return $html;
}
return $code;
}
add_filter('embed_handler_html', 'custom_youtube_oembed');
add_filter('embed_oembed_html', 'custom_youtube_oembed');
このままだと、スマホで見たときの動画枠のアスペクト比が合わなくなるので、以下のCSSを子テーマに追加してください。
PCで見たときと同じ比率に綺麗に揃うようになります。
/*--------------------------------------
YouTube oEmbed Code
--------------------------------------*/
.youtube {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
これで以下のようにURLをメッセージ欄に記入するだけで、コメント欄に動画が表示されるようになります。
https://www.youtube.com/watch?v=動画のID
（おまけ１）スパム対策で入れておきたいプラグイン
メールアドレスの記入欄を無くしてしまったので、スパムコメントの心配がでてきます。
スパムを回避するプラグインは「Aksmet」と「Throws SPAM Away」がお勧めです。この2つを入れておけば、まず心配はないかと思います。
Aksmet
Aksmetはスパムコメントを自動判別して振り分けてくれるプラグインです。
Throws SPAM Away
Throws SPAM Awayはコメントに日本語が含まれないとき、受け取らずにそのままごみ箱に捨ててくれるプラグインです。
参考Throws SPAM Away – 海外から投稿されたコメントスパムを無視できるWordPressプラグイン | ネタワン
（おまけ２）コメント送信してくれた方に特別なページを表示する
口コミを送信してくれたお客様に、キャンペーンやクーポン配布などの特別なページを表示出来たら面白いなと思い作ってみました。
カスタマイズ方法は下記リンクからどうぞ。
