コメント欄をタブ型に!複数メディアのコメントを同時表示できるプラグイン「Coments Evolved for WordPress」

公開日: : 最終更新日:2015/10/18 webサービス, Wordpress

コメント欄をタブ型に!複数メディアのコメントを同時表示できるプラグイン「Coments Evolved for WordPress」

自分のサイトのコメント欄、どんなものを使ってますか?
よく見かけるのはWordpressデフォルトのものやFacebook、Google+などでしょうか。

FacebookやGoogle+はログインするだけですぐにコメントできる「手軽さ」が魅力です。
しかしそれだけにしてしまうと、登録していない方からのコメントはまず貰えなくなってしまいます。
かといってデフォルトのものは入力項目が多く、気軽にコメントできないんですよね。

せっかく記事を読んで頂けたのだから、コメントを貰える機会は大切にしたいところ。
やはり読者の方に好きなモノを自由に選んでもらうのが良さそうです。

今回はコメント欄をタブ化していろんなメディアのコメント欄を設置できるプラグインをご紹介します。
インストールするだけですぐに使えるお手軽なプラグインですよ。

Sponsored Link

使えるメディアは5種類!

実際に設置してみた様子がこちら。

実際の様子

すっきりとしたクールなデザインです。
設置できるのは

  • Google+
  • Facebook
  • livefyre
  • disqus
  • wordpress
  • トラックバック

  • の6種類。この中から好きなモノを選んで使えます。

    アイコンタップでコメント欄が切り替わる!

    上部のアイコンをタップするとコメント欄が切り替わります。

    アイコンタップでタブチェンジ

    実際の動作が見てみたい!という方はこのページのコメント欄(一番下です)をご覧ください。

    導入方法

    導入方法はとってもカンタン。
    管理画面の「プラグイン」→「新規追加」から「Comments Evolved for WordPress」を検索してください。

    プラグインを追加

    あとはインストールして「有効化」をクリックすればコメント欄がタブ化しているはずです。

    細かな設定方法

    使うコメントの種類や見た目の設定は管理画面から。Comments Evolved for WordPressの「Setting」を選ぶと設定画面に入れます。

    設定画面へはSetting

    設定画面の各項目の詳細は以下のとおりです。

    設定項目の詳細

    各項目を変えるとどうなるのかざっくりと説明しますね。

    メディアの選択

    ここで選択したモノがコメント欄に表示されます。
    表示したいものを左から順にカンマ区切りで入力してください。
    たとえば「Facebook」「Google+」「Wordpress」の順で表示したかったら「facebook,gplus,wordpress」と入力します。

    ※追記
    コメントにて「gplus」より後ろに「facebook」をおくとfacebookコメントが読み込めなくなるとのご報告を頂きました。gplusはfacebookよりも後ろに配置するようにしましょう。

    ○: facebook,gplus,wordpress
    ×: gplus,facebook,wordpress(初期値)

    アイコンの見た目

    デフォルトのものかモノトーンかを選択できます。

    デフォルトかモノトーンか

    コメント欄の説明文

    ここに入力した文章がコメント欄のトップに表示されます。

    コメント欄の説明文

    各メディアのラベル

    入力するとアイコンの横に文字が表示されるようになります。

    アイコンの横に文字が出る

    あとがき

    各側にとって読者の方からのコメントは本当にありがたいもの。
    感謝のコメントだったりを頂くと書いてよかったなーと思えます。

    とてもカンタンに導入できるプラグインなのでぜひ一度試してみてくださいね。

    最後まで読んでいただきありがとうございました。
    Jimon(@jimon_s)でした。

    jimon


     これは!と思ったらシェアして頂けると嬉しいです
    • このエントリーをはてなブックマークに追加
    • Pocket
    • 111 follow us in feedly
    Loading Facebook Comments ...

    Comment

    1. ひろやき より:

      Jimonさん
      こんにちは、ひろやきと申します。

      この記事を参考にさせていただきました、有り難うございます。
      一点質問なのですが、コメントがあった際に通知が来る機能はどのようにしたらつけられますでしょうか。

      Facebookアカウントによるコメントが1件あった際に、視認でしか確認できなかったもので…。
      もしお時間があればお教え頂ければ幸いです。

      • Jimon より:

        ひろやきさんコメントありがとうございます!

        少し調べてみたのですが、Facebookコメントを通知するには特別な設定が必要なようです。
        しかし僕自身うまく設定できず通知が得られない状態です。

        お力になれず申し訳ありません。

    2. FASO より:

      はじめまして。
      この記事を参考に同様の設定を試みているのですが、うまく表示されません。
      デフォルトのコメント欄は削除したほうがいいのでしょうか?

      • Jimon より:

        コメントありがとうございます。
        うまく動作していればデフォルトの<?php comments_template(); ?>の部分にタブ化して表示されると思います。

        表示されない場合は他のプラグインやjQueryと干渉してしまっているかもしれないので、他のものをひとつひとつ停止して原因を探ってみてください。

    3. jiji より:

      はじめまして!
      こちらの記事参考にさせていただきました!
      ありがとうございます。

      なぜかPCだけFACEBOOKコメントを読み込まずコメント記入できなくなってるようなんですが何か原因があるんでしょうか?
      (スマホ・タブレットは問題なく表示してます)

      • Jimon より:

        jijiさん

        こんにちは!
        動作確認を行ってみましたが、僕の環境では問題なくコメントできてしまいました。

        jijiさんのサイトのコメントができないといったことでしょうか?

      • moncho より:

        通りすがりです。おそらくjijiさんと同じ症状でしたが、Tab order欄で、gplusよりfacebookを前にするとなぜか解決しました。このJimonさんのサイトもfacebookが先になっています。
        ○ facebook,gplus,wordpress
        × gplus,facebook,wordpress(初期値)

        • Jimon より:

          monchoさん

          なるほど!記事にも追記させていただきます。
          ご報告ありがとうございます^^

    Message

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    PROFILE

    Jimon Profile
    Jimon
    東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
    お問い合わせ

    About


    おしゃれな小物とiPhone,Macの情報発信ブログ。
    管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

    PAGE TOP ↑