えじの自由帳

今の自分を書きためるブログ

Wordpress

【Disqusやめました】複数のSNSへのコメントをタブで管理。「Comments Evolved for WordPress」の設定方法

2014/09/06

miyako

今回はコメント欄に注目してカスタマイズしていきたいと思います。

SNSへの露出は記事がヒットするには欠かせませんね。身近な人がコメントつきでURLをシェアしていたらとりあえず読んでみようかなという気になるものです。

あなたはコメント欄、何を使ってますか？

デフォルトのWordPressコメントを使っている人も多いでしょう。
オシャレなDisqusを使っている人もいると思います。
はたまたFacebookコメントを設置している人もいるんじゃないでしょうか。

今回は、それらをまとめて設置することができる「Comments Evolved for WordPress」の紹介です。

(アイキャッチ画像は過ぎ去りし夏を懐かしんで海辺にしました。プラグイン名を入れた結果、正方形に切ったら男のほうが見切れたのは事故です。故意ではありません)

Comments Evolved for WordPressってなんだい？

Comments Evolved for WordPressとは、

  • Google+
  • Facebook
  • livefyre
  • WordPress
  • Disqus

の5種類のソーシャルコメントに加え、トラックバックを見ることができるプラグインです。

見た目もシンプルでわかりやすいですし、タブ型で動作も軽快です。

Disqusを組み込むこともできるのでDisqusも使い続けたいけどFacebookコメントも併設したい、みたいな人にもおすすめできます。

導入方法

WordPressの管理画面で「プラグイン」>「新規追加」>「Comments Evolved for WordPress」で検索

comment2_090414_025312_PM

インストールして有効化するだけで使えるようになっているはずです。

細かい設定をしよう

「設定」>「Comments Evolved」から設定をしていきましょう。

表示するSNSを決める

comment-setting_090414_025846_PM

1のところに、表示したいSNSをカンマ区切りで書いていきます。

デフォルトは

gplus,facebook,wordpress

で、僕はfacebookを一番に持ってきたかったので

facebook,gplus,wordpress,trackback

にしました。

Disqusを使いたい人は

Disqusを使いたい人はその下にあるDisqus Shortnameに記入しなければなりません。

https://disqus.com/admin/にアクセスします。

comment-disqus_090414_032055_PM

上の画像のようにクリックして表示したいブログを選ぶと、アドレスバーに

https://xxxxx.disqus.com/admin/

のように表示されるはずです。このxxxxxがDisqus Shortnameです。

参考URL:What's a shortname? - Disqus

アイコンの色を変える

comment-setting_090414_035533_PM

DefaultとMonotoneの2種類が選べます。

デフォルト。

comment-default

モノトーン。

comment-mono

よっぽどのことがない限りデフォルトでいいと思います。

コメント欄の上にラベルを表示する

comment-setting_090414_035634_PM

コメント欄の上に表示する説明文を書くことができ、

comment-descr_090414_035828_PM

このように表示されます。HTMLタグが使えるので、<p></p>などでくくってあげるといいでしょう。

アイコンにラベルを添える

comment-setting_090414_035952_PM

各SNSアイコンに添えるラベルを書くことができます。

comment5_090414_040106_PM

表示はこんな感じ。(少し邪魔かな……)

FacebookのLike Boxが英語に変わってしまう現象の修正

さて。ソーシャルコメントの設置はこれで大丈夫なわけですが、Comments Evolved for WordPressは英語のプラグインのため、Facebookのコメント欄の説明も英語で書かれています。

オシャレだと思う方はそのまま放置でいいのですが、どうやらページに貼ったLike Boxの言語も書き換えてしまうみたいです。

その場合は、FTPソフトで/wp-content/plugins/gplus-comments/includes/templates/partialsにアクセスし、その中にあるfacebook.phpを書き換えましょう。

facebook.phpを開くと

< ?php
/**
* @author         Brandon Holtsclaw <me@brandonholtsclaw.com>
* @copyright      2013 Brandon Holtsclaw
* @license        GPL
*/
defined('ABSPATH') or exit;
?>
<div id="fb-root"></div>
<div id="fb-comments">Loading Facebook Comments ...</div>
<script type="text/javascript">
jQuery(document).ready(function($)
{
$('#fb-comments').html('<div class="fb-comments" data-width="'+window.comment_tab_width+'" data-href="<?php echo the_permalink(); ?>" data-num-posts="20" data-colorscheme="light" data-mobile="auto"></div>');
});
</script>
<script async type="text/javascript" src="//connect.facebook.net/en_US/all.js#xfbml=1">FB.init();</script>
<noscript>Please enable JavaScript to view the <a href="https://www.facebook.com/">comments powered by Facebook.</a></noscript>

というコードが載っていると思うので、

これの下から2行目。

<script async type="text/javascript" src="//connect.facebook.net/en_US/all.js#xfbml=1">FB.init();</script>

を

<script async type="text/javascript" src="//connect.facebook.net/ja_JP/all.js#xfbml=1">FB.init();</script>

に書き換えてアップロードすれば、コメント欄もLikeBoxも日本語になります。

(ついでにこのページのLikeBoxをぽちっと押していただけると感謝感激雨霰です)

あとがき

WordPressプラグイン「Comments Evolved for WordPress」の紹介と設定方法、日本語化について解説しました。

お役に立てたら嬉しいです。それでは！

 Wordpress