Lognote

ネット集客に強い整体院サイトを制作

wordpress-comment-voice-thumbnail

動画も可!WordPressのコメント機能を使った口コミ掲載方法

公開日:2017-07-07
最終更新日:

整体院サイトをリニューアルする中で、「お客様の声」を掲載するための専用ページをどのようにするか迷いました。

一般的にお客様の声の紹介の仕方としては、「ブログ記事としてアップ」、もしくは「固定ページに追加していく」といった2つのスタイルが誰でもすぐ実践できる方法かと思います。

ただ、お客様の声を掲載する以上は、これから来てくれるであろう見込み客に対して自店舗の魅力を効率よくアピールできなければいけません。

そういうことを踏まえると、私としては上記の2つのスタイルでは以下のようなデメリットを感じました。

ブログ記事としてお客様の声を紹介するデメリット

まず、ブログ記事として[お客様の声]というカテゴリーを作り、掲載していく方法です。

wordpress-comment-voice-01

大抵のブログのカテゴリー一覧では本文が抜粋となっているため、全てを読むには個別の記事にアクセスしないといけません。

これがPCならいいですが、スマホだったらどうでしょう。

スマホは画面も小さく一度に表示できる情報も限られるため、PCのようにマウス操作で軽快に画面切り替えができるわけではありません。

そういった状態では、全ての口コミ記事を読んでくれる人は限りなく少なくなるように感じます。

もちろん、お店に本当に興味のある見込み客であれば読んでくれる可能性はありますが、たまたまホームページに来てくださった方はまず読まないでしょう。

固定ページにお客様の声を追加で更新するデメリット

次に、固定ページに追加していく方法です。

wordpress-comment-voice-02

こちらの方法だと、お客様の声ごとにページを移動する必要がないので、全てを一気に読めるというメリットがあります。

デメリットは、お客様の声が増えれば増えるほど行数が長くなり、ページ読み込みが重くなってしまうということです。

ページが長くなりすぎないよう、「症状ごとにページを分ける」などの処理で対応することもできます。

口コミプラグインはカスタマイズが大変だった

WordPressには「WP Customer Reviews」という口コミを表示するためのプラグインがあります。

項目の追加も自由にできて便利なのですが、制作者が海外の方のため設定ページがすべて英語です。

日本語化の方法を紹介してくださっているブログもありますが、プラグイン内のファイルをいじらないといけないため、初心者には結構ハードルが高いです。

何日も試行錯誤し、作ったのがこちらの投稿フォームです。

wordpress-comment-voice-03

私としては最高傑作のフォームができたのですが、ふと思いました。

ヤマカワ
これ、書いてくれる人いるかな?

通販サイトの個人情報入力と同じで、ああいうのって項目が多ければ多いほど面倒くさくなりますよね。

そもそもこれだと、画像や動画を表示する機能がないので却下としました。

【結論】デフォルトのコメント機能が一番便利

少し前置きが長くなってしまいましたが、お客様の声の紹介をするのにどの方法が一番楽で機能的かを考え出した答えは、

「お客様の声を全てコメントで表示する」

という方法です。

コメント機能で口コミを掲載するメリット

お客様の声をコメントで表示すると、以下のようなメリットがあります。

  • スマホからも気軽に投稿してもらえる
  • 一元管理や確認がとても楽
  • コメント返信が簡単
  • 一ページで口コミを一気に表示できる
  • 勝手にSEOが強くなる

スマホからも気軽に投稿してもらえる

コメント機能を使えば、こちらから一方的に口コミを掲載するだけではなく、お客様側からも投稿をしてもらえるようになります。

一元管理や確認がとても楽

口コミごとに記事を書く手間も省けますし、管理画面のコメントページから一覧表示もできるので、管理がとても楽です。

コメント返信が簡単

コメント機能なので当たり前ですが、いただいたお客様の声に返信する機能が初めから付いています。

wordpress-comment-voice-04

CSSであらかじめデザインさえ決めておけば、管理画面から返信の文章を打ち込むだけで「お店からのお礼」を残すことができます。

一ページで口コミを一気に表示できる

ホームページを見に来られた方もわざわざ個別ページに移動することなく、一ページで全ての口コミを読むことができます。

勝手にSEOが強くなる

そしてなにより最大のメリットは、コメントを書いてもらえばコンテンツが勝手に増えるので、それがSEO対策になるということです。

以前、「エキテンの正会員を退会しました」という記事をアップしました。

エキテンは口コミ投稿サイトですが、口コミが増えれば増えるほどエキテンのGoogleからの評価が上がります。

これがエキテンがずっとランキング上位に居続ける理由です。

エキテンだけではないですが、ポータルサイトやまとめサイトというのは全て同じ仕組みで、利用者が勝手に上位表示のお手伝いをしているようなものです。

これって非常にもったいなくないですか? 自分のお店への口コミなのにエキテンが優位になるんです。

すぐに効果が出るわけではありませんが、長期的にみたら自分のホームページに直接口コミを記入してもらった方がいいですよね。

写真や動画を使うと信頼性も増します

逆に、コメント機能でお客様の声を掲載するデメリットはあるでしょうか。

しいていえば、「ネットに疎い方や年配の方にお願いしたら投稿してもらえるか」ということですが、これに関しては全く問題ありません。

WordPressのコメントは画像や動画も貼り付けることができるので、紙に書いてもらったものを皆さんご自身でコメント欄に記入すればいいだけです。

紙や動画という証拠があれば信頼性も増しますので、こちらもうまく活用していくといいですね。

それでは、ここから「WordPress標準コメント機能を使った口コミページの作り方」を解説していきます。

最終完成イメージ

カスタマイズ完成イメージです。


大きい画面で見たい方は、画面内右下の[YouTube]の文字をクリックしてください。

実際のページは以下からご覧ください。

カスタマイズの手順

口コミページの実装は以下の手順でおこないます。

  • page-voice.phpを作る
  • お客様の声の固定ページにテンプレートを設定する
  • コメントの投稿を許可する
  • コメント入力欄を「名前」と「メッセージ」のみにする
  • コメント表示の承認制をなしにする
  • CSSでデザインを整える
  • YouTube動画が表示されるようにする
  • (おまけ1)スパム対策で入れておきたいプラグイン
  • (おまけ2)コメント送信してくれた方に特別なページを表示する

なお、WordPressテーマはSTINGER8を例として使用します。

細かい部分は各自使用のテーマに合わせて修正してください。

1)voice-page.phpを作る

「お客様の声」専用の固定ページテンプレートを作成します。

FTPソフトを使い、親テーマのpage.phpをダウンロード。

wordpress-comment-voice-05

ファイル名をpage-voice.phpと変更し、子テーマにアップロードします。

wordpress-comment-voice-06

WordPressのテーマ編集画面から、page-voice.phpの中身を編集します。

まず、1行目の下記のコードを、

<?php get_header(); ?>

このように変更します。

<?php /* Template Name: お客様の声 */ get_header(); ?>

すると、ファイルがテンプレートファイルとなって名前が付きます。

wordpress-comment-voice-07

次に、本文の部分にコメントフォームを表示するための記述を追加します。

以下のコードを探し、

<div class="entry-content">
  <?php the_content(); //本文 ?>
</div>

このように変更します。

<div class="entry-content">
  <?php the_content(); //本文 ?>
  <?php comments_template(); //コメント欄 ?>
</div>

以上で、page-voice.phpの編集は終了です。

2)固定ページを作り、テンプレートを設定する

「お客様の声」ページを固定ページで作成します。

コメントフォームの上に、何かメッセージや画像を表示したい場合は記入してください。

記入し終えたら、固定ページの属性の[テンプレート]をお客様の声に設定します。

3)コメントの投稿を許可する

表示オプションから[ディスカッション]と[コメント]のチェックを入れます。

すると、編集ページ下部にディスカッションとコメントの設定オプションが追加されるので、ディスカッションの[コメントの投稿を許可]にチェックを入れます。

wordpress-comment-voice-10

これで、「お客様の声」ページを公開してください。

4)コメント入力欄をカスタマイズする

コメントをしてもらいやすくするために、コメント入力欄から[メールアドレス]と[URL]を削除します。

子テーマにcomments.phpをコピーして、中身を以下に変更してください。

※STINGER8の仕様なのでほかのテーマの方は気を付けてください。

<hr class="hrcss" />
<div id="comments">
     <?php
     if ( have_comments() ):
          ?>
	<h5 id="resp"><i class="fa fa-commenting"></i>&nbsp;頂いたメッセージ</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' => '&laquo; Prev',
'next_text' => 'Next &raquo;',
);
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' );

以上のコードはこちらのサイトからお借りしました。

5)コメント表示の承認制をなしにする

コメントはデフォルトで承認制となっていますが、これを解除します。

解除する理由も上記サイトに記載されていますが、メールアドレスの入力がない場合、承認待ちのメッセージが表示されないからです。

[設定] ⇒ [ディスカッション]から[コメントの投稿者の名前とメールアドレスの入力を必須にする]のチェックを外します。

さらに、[コメントの手動承認を必須にする][すでに承認されたコメントの投稿者のコメントを許可し、それ以外のコメントを承認待ちにする]のチェックも外します。

6)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;
	}
}

7)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

(おまけ1)スパム対策で入れておきたいプラグイン

ここまでで、完成イメージと同じようなページができたかと思います。

あとは、個々のテーマに合わせてCSSで微調整をおこなってください。

ここからはおまけです。

メールアドレスの記入欄を無くしてしまったので、スパムコメントの心配がでてきます。

私はスパムを回避するプラグインとして「Aksmet」と「Throws SPAM Away」を入れています。

Aksmetはスパムコメントを自動判別して振り分けてくれるプラグインです。

Throws SPAM Awayはコメントに日本語が含まれないとき、受け取らずにそのままごみ箱に捨ててくれるプラグインです。

以上の2つを入れておけば、まず心配はないかと思います。

(おまけ2)コメント送信してくれた方に特別なページを表示する

口コミを送信してくれたお客様に、キャンペーンやクーポン配布などの特別なページを表示出来たら面白いなと思い作ってみました。


大きい画面で見たい方は、画面内右下の[YouTube]の文字をクリックしてください。

カスタマイズ方法は下記リンクからどうぞ。

以上、「動画も可!WordPressのコメント機能を使った口コミ掲載方法」という記事をお届けしました。

-WordPress, 整体院経営
-

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

動画も可!WordPressのコメント機能を使った口コミ掲載方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

none-plugin-custom-field-amazon-thumbnail

WordPressのカスタムフィールドを使ったAmazon商品紹介エリア作成方法

以前、カスタムフィールドテンプレートというプラグインを使った、記事下のAmazon商品の貼り替え方法を紹介しま …

tax-account-transfer-thumbnail

確定申告で発生した所得税の納税は納付期限が1ヶ月も長い銀行口座振替がオススメ!

確定申告も先週で終わりましたね。とりあえず皆さん、お疲れさまでした。 肩の荷もおり、よしまた頑張るぞ! と意気 …

wordpress-category-tag-change-thumbnail

WordPressのカテゴリー⇔タグを変換して訪問者に親切なブログ作りをしよう

ブログ訪問者はサイドバーなどに設置されたカテゴリーから「Wordpressの記事数が多いから参考になる記事があ …

mfcloud-square-cooperation-thumbnail

現金取引の仕訳も可!MFクラウド会計とSquareの連携が完璧すぎた!

個人事業主の強い味方クラウド会計ソフト。 私は今年分の確定申告から「MFクラウド会計」を契約し、大変便利に使わ …

views-display-thumbnail

WordPressで記事ごとに閲覧回数を表示する方法

「自分のブログもそこそこ読まれるようになってきたなー」 そんなとき、どれくらい読まれているのか訪問者に見せたく …

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい