【WordPress】コメント機能強化プラグイン「comments – wpDiscuz」の設定備忘録

WordPressのコメント機能強化プラグイン「comments – wpDiscuz(version7)」の紹介&各種設定の備忘録記事です。

デフォルトのコメントを拡張/強化することでブログ上でのコミュニケーションが楽しくなりそうなプラグインです!

【最終更新:2020年7月】
Internet Explorer(IE11)での挙動について備忘録の項目に追記しました。
IEは眼中になかったので盲点でした。
ファイル添付機能に関連する脆弱性が、[7.0.0~7.0.4]と[5.3.5]以前のバージョンにあったそうです。
最新版で修正されているため速やかに更新しましょう。
関連コメント#comment-1533

スポンサーリンク
スポンサーリンク

「wpDiscuz」について

「Comments – wpDiscuz」はWordPressの標準コメント機能を拡張/強化するプラグイン。

かなり多機能な基本機能を無料で利用することができる。さらに追加の機能が必要な場合は有料のアドオンも用意されている。

数が多いのでプラグインページの機能一覧を機械翻訳して掲載
素敵でモダンな3つのコメントレイアウト
最速のコメント体験をもたらします(ブーストされたコア)
投稿やその他のコンテンツタイプにインタラクティブなコメントボックスを追加します
インラインコメントとフィードバック。投稿内容へのコメント。
リアルタイムのコメント付き吹き出し付きのライブ通知。
多くのソーシャルログインオプションを備えたソーシャルコメント
投稿の評価。星を直接評価して投稿を評価できます。
投稿やその他のコンテンツタイプでのコメントの許可/禁止
レスポンシブコメントフォームとコメントスレッドのデザイン
クリーンでシンプルで簡単なユーザーインターフェイスとユーザーエクスペリエンス
最新、最も古い、そして最も投票されたコメントによるソートのコメントリスト
匿名コメント(名前とメールアドレスは不要に設定できます)
ソーシャルネットワークログインプラグイン(Facebook、Twitter…)との完全な統合
最大レベルの深さ設定オプションを備えたマルチレベル(ネストされた)コメントスレッド
新しいディスカッションスレッドを作成し、既存のコメントに返信できます
単純なコメントのページ付けではなく、Ajaxボタンの「Load More Comments」
スクロール時のwpDiscuzコメントの遅延読み込み
異なるコメントの日付形式、WordPressの日付形式設定を反映
ログインしているユーザーとゲストはコメントを編集できます(時間枠は管理者が制限できます)
コメントテキストの変換をリンクする自動URL
コメントテキスト内の画像(HTML)への自動画像ソースURL
長いコメントのテキスト分割機能(「もっと読む」ボタン)
複数の改行(WordPressコメントフィルターによって制限されます)
コメントフォームに特別なチェックボックスがあるコメント投稿者通知オプション
追加の「サブスクリプションの確認」メールによるサブスクリプションのアクティブ化
メールによるサブスクリプションとコメントのためのPostmaticとの統合
WordPressで許可されている場合、添付ページにコメントシステムを追加する機能
ajax検証とデータ送信を備えた高速で簡単なコメントフォーム
WordPressと完全に統合され、互換性があります
WordPressコメントシステムを使用し、すべての管理機能を備えています
安全なスパム対策機能により、スパマーはコメントできません
肯定的および否定的な結果を伴うコメント投票
ログインしたユーザーとCookieによる追跡機能を備えたスマート投票システム
投稿の共有オプション:Facebook、Twitter、Google +
コメントフォームのtextareaのクイックタグ
カスタムフィールドを含むカスタムコメントフォーム
多数の属性を持つコメントカスタムフィールドによる投稿のショートコードの評価
コメントのテンプレートとスタイルを上書きするオプション
前回の訪問以降の新しいコメントを異なる背景で強調表示
コメントが承認されたときのコメント作成者への通知
返信の表示(x)ボタンで親コメントのみを表示
ロールごとにコメント投稿者を制御する(Webサイトのコメント領域へのアクセスを許可/制限する)
最初のページの読み込み時にすべてのコメントを読み込むオプション
組み込みのGravatarキャッシング
付箋コメント
クローズドコメントスレッド(返信を無効にする)
ユーザー登録/ユーザーフォロー

作者はフォーラムプラグイン「wpForo」なども作っているgVectorsチーム。

インストール方法は、他の一般的なプラグインと同様に「管理画面→プラグイン→新規追加→wpdiscuzで検索→インストール」でOK。

Comments – wpDiscuz
AJAX powered realtime comments. Designed to extend WordPress native comments. Custom comment forms and fields. Making comments has never been so aweso …

見た目はこんな感じになる

コメントスレッド

コメント表示デフォルト

ビフォー

コメント表示wpdiscuz

アフター

コメントフォーム

デフォルトのコメントフォーム

ビフォー

wpdiscuzのコメントフォーム

アフター

【wpDiscuz】コメント投稿機能のテストページ
コメント投稿機能のテストページです。 WordPressのコメント機能を拡張するプラグイン「Comments – wpDiscuz」を導入してみたので、各機能を色々とチェックしています。 テスト用のページなので、コメント投稿を練習してみたい人も気軽に書き込んでみてください。
wpDiscuz 7 Demo - wpDiscuz - WordPress Comment Plugin
Thank you for trying wpDiscuz! wpDiscuz 7 is a revolutionary perspective on the commenting world! This version is mostly focused on website visitors engagement....

コメント機能のテスト用ページを投稿したので、そちらでも確認できます。公式のデモページもあります。
コメントの投稿を試してみたい方もお気軽にどうぞ!

各機能の設定

設定を変えたら各項目ページの下部にある「Save Changes」ボタンをクリックして変更を適用させます。

設定項目がすごく多いので網羅はしていません。自分で設定・確認した部分だけになります。
プラグインのバージョンは「7.0.3」です。

一般設定

General Setting。

Enable wpDiscuz on Home Page

wpDiscuzの有効化設定。

Use WordPress native AJAX functions

使用するAjaxの指定。

この設定を有効にするとWordPressに標準搭載されている「admin-ajax.php」、無効にするとwpDiscuzの独自のajax.phpを使用する。

ヘルプによると標準のajaxよりwpDiscuzの方が高速らしいので、無効に設定してwpDiscuzの方を使用している。

高速化設定

  • Combine JS and CSS Files to Optimize Page Loading Speed
  • Minify JS and CSS Files to Optimize Page Loading Speed
  • Gravatar Cache

JavaScriptとCSSを結合/縮小化する設定。

読み込みを高速化できるので、とりあえず有効でいいと思う。テーマやプラグインとの衝突があるようなら無効に。

グラバターの画像をキャッシュする設定も読み込み速度を上げたいなら有効化しておくといいかも。

その他

    • 初コメント後のリダイレクト設定
    • 特定のページに移動させたい場合に
  • Use WordPress Date/Time Format
    • 日時表示フォーマットの表示設定
    • 管理画面-設定-一般-日付形式でチェック
  • Use Plugin .PO/.MO Files
    • 翻訳ファイルの使用設定
    • 公式の日本語翻訳はver7には無い

コメントフォームの設定

「Comment Form Settings」。

コメントフォームのセッティング全般。

Comment Form View

コメントフォームを初期表示で折りたたむか展開するかの設定。

「collapse」で折りたたみ、「expanded」で展開。

折りたたみ状態で表示されるのは、最低限のテキストエディタのみ。

Load Rich Editor

リッチエディタの適用設定。

「モバイル&デスクトップ」or「デスクトップのみ」or「無効」。

太字・リスト・リンク・引用など11種類を自由に選択できる。

「Load Rich Editor」を有効にしているとIEで正常にフォームを読み込めない。
「None(無効)」にすると表示はされるが、投稿はできない。

Google reCAPTCHA

スパムボット対策「Google reCAPTCHA」の設定。

reCAPTCHAは、「Version2」が無料、「version3」は有料のアドオンが必要となっている(※wpDiscuzの「ver7.0.0」時点)。

認証を追加しないとスパムコメントが大量に投稿されたりする可能生もあるので、できれば導入したいところ。

  • Request Method:Auto
  • Enable for Logged-in Users:必要に応じて
  • Display on Subscription Form:メール通知を使うなら有効

「reCAPTCHA」側の設定(サイトキー/シークレットキーの登録)に関しては、下記関連記事と同じ要領でOK!

サイト登録の設定で「reCAPTCHA v2」の「私はロボットではありません」チェックボックスを選びます。

ユーザーの認証とプロフィール

「User Authorization and Profile Data」。

全部オフにしているので省略。

SNSのログインとシェアボタン

「Social Login and Share」。

「SNSアカウントを使ったログインボタン」&「SNSシェアボタン」の設定。

SNSアカウントでログインしてコメントを書き込むことができる。TwitterやFacebookにログインしっぱなしでブラウジングしているなら結構便利な機能。

ただし、SNS別にアカウントやシークレットキーなどを取得する必要があるため設定が大変。

また、デフォルト設定ではログイン・ログアウト時に「wp-login.php」にリダイレクトするため、ベーシック認証を掛けている場合はURLの変更などが必要になる。

とりあえずSNSログインは無効。Twitterのシェアボタンだけ有効にしている。

評価ボタン

「Article and Comment Rating」。

記事に対する評価ボタンを表示する設定。

星☆マークの5段階評価で表示場所と色の指定ができる。

記事評価

コメントフォームの上に設置した場合

上記画像の「3」と表示されている記事への評価値にマウスオーバーすると、何人が投票したのかも表示される。

この記事への評価ボタン設定は、同時に使用できない2種類がある。一つは上記したコメントに依存しないタイプ、もう一つがコメント(フォーム)に付属するタイプのもの。

後者だと下記画像のようにコメントフォーム内に評価ボタンが表示される。この設定はフォームの設定で行う。この設定のほうが記事に設置する評価ボタンより優先される。

wpdiscuzのコメントフォーム

記事への評価機能は、コメントフォームに埋め込んで、こちらの方は無効にしている。

Comment Thread Displaying

「Comment Thread Displaying」。

コメントスレッドを表示・読み込みする際の設定。

コメントリストの読み込み方法

「Comment List Loading Type」。

    • ページと一緒に読み込み
    • ページのロード後にAjaxをロード
    • コメント表示ボタンを表示(ボタンを押すまで非表示)

「Initiate AJAX loading after page」を選択。

「Load with page」だとページの表示速度に影響がでやすいと思われる。

ページの表示速度で考えると、「ロード後の読み込み」or「コメント表示ボタン」と思われる。とりあえずロード後の読み込みに設定している。

IEでは「Load with page」意外を選択するとコメントリストが表示されない。

コメントのページネーションタイプ

「Comments Pagination Type」。

コメントの分割表示(ページネーション)の設定。

なるべく処理が軽くなるように、ページがスクロールされた際に読み込む「Lazy Load(遅延読込)」を選択している。

この設定は、ワードプレス側のディスカッション設定の影響を受けるようなのでヘルプページで要チェック。

Comment Form Settings - wpDiscuz - WordPress Comment Plugin
wpDiscuz comment forms can be found in Dashboard > wpDiscuz > Forms admin page. By default, there is one Default Form. Comment form editing screen consists of t...

フィルターボタン

  • Display “Most Reacted Comments” filter button
    • 評価の多いコメント順にソート
  • Display “Hottest Comment Threads” filter button
    • ホットなコメント順にソート
  • Display Comment Sorting Options
    • コメント並び替えオプションの表示

コメントを条件にしたがって並び替える機能。全て有効にしている。

コメントスレッドの機能

「Comment Thread Features」。

スレッドのレイアウト

コメントスレッドのレイアウトは3種類から選択可能。

設定は後述するフォームの設定で行う。

コメントの投票/評価ボタン

コメントを評価する「いいねボタン」的なもの。高評価・低評価を別々に表示したりもできる。

「Comment Voting Result Mode」は、「total cout」で総数、「separate count」で個別(プラスとマイナスを別に集計)に評価を表示。

ダウン(ディスライク)の表示有無、ゲスト(非ログインユーザー)に投票を許可するかなども設定可能。

スタイルと色

「Styles and Color」。

スタイルと色を設定できる。

Font Awesomeのロード

「Load Font Awesome css lib」。

テーマや他のプラグインでFont Awesomeをロードしていない(あるいは古いバージョン)場合は、有効化しないとアイコンが正常に表示されない。

カスタムCSSコード

初期値の

.comments-area{width:auto;}

だと、余白ありで横幅100%で表示される。

通知/購読とユーザーフォロー

「Subscription and User Following 」。

Eメールアドレスを登録しておくことで、特定の記事にコメントが投稿された際や、自分のコメントが承認・レスが付いたときに通知を受け取ることができる購読設定。

各表示を日本語化しないと分かりにくいですなあ。

コメント承認時の通知

「Notify comment author once comment is approved」。

コメントが承認された時にメールで通知する設定。

コメント承認時の通知

コメント承認時の通知(初期設定状態)

承認時のメール通知分は初期設定だと英語で分かりにくいので、「管理画面→Phrases→Email→Comment approved」で編集(翻訳)した方が分かりやすくなると思う。

通知の確認・承認

  • Notify comment author once comment is approved
    • 登録ユーザーの通知設定の確認
  • Enable subscription confirmation for registered users
    • ゲストユーザーへの通知設定の確認

メールアドレスが登録された際に確認・承認メールを送信する設定。

いたずらでメールアドレスが登録されるのを防ぐために上記設定は有効にしておいたほうが良いと思われる。

有効にすると下記のような「通知設定にメールアドレスを登録しました?」と確認する(承認を求める)メールが該当アドレスに送信される。

通知登録の確認

通知登録の確認メッセージ(初期設定状態)

こちらも「管理画面→Phrases→Email」の項目で編集(翻訳)した方が分かりやすくて親切だと思う。

通知設定のドロップダウン表示

通知条件を選択する表示の「Subscription types in Subscription Bar drop-down」は、「Both」で両方を選択。

記事に新しいコメントが投稿された場合と、自分のコメントが承認された際に通知を選択できるようにする。

ユーザーラベルとバッジ

「User Labels and Badges」。

特定のユーザーコメントにラベル/バッジを表示する設定。

とりあえず初期値で運用。管理者/著者のコメントが分かりやすくなるので有効化しとくといいかも。

コメント管理

「Comment Moderation」。

コメントの再編集、スレッドのピン留め、1人のユーザーが書き込めるコメント数の上限、などを設定できる。

コメントの再編集関連

投稿後のコメントを再編集できる機能。

  • Edit Button – Allow comment editing for
    • コメント再編集を無効or時間で指定
    • コメントに返信が付いている場合に再編集を許可するか
    • 後から再編集するとやりとりの整合性が保てなくなる可能生がある
    • 再編集した場合の情報表示(編集日と編集者名)

あまり必要性を感じないので無効にしている。

スレッドのピン留め

「Stick Button – Stick a comment thread」。

特定のスレッドを一番上に表示できる。管理者とモデレーターだけが使用可能。

とりあえず有効にしている。

スレッドを閉じる

「Close Button – Close a comment thread」。

特定のスレッドを閉じて、それ以上返信できないようにする。こちらも管理側の機能。

ユーザーあたりのコメント数制限

「Limit Comments per User」。

1ユーザーが投稿・サイト全体に投稿できるコメントの数を制限する設定。

スパム対策の一環にもなりそう。だけど、特に必要性を感じないので無効にしている。

コンテンツと添付ファイル

「Comment Content and Media」。

コメントのテキストの最小/最大数の指定は、添付するファイルの設定。

URLの自動画像変換

「Image Source URL to Image Conversion」。

コメントフォームに入力された画像のURLを、画像として読み込んでコメントに表示する機能。

いわゆる”直リンク”。便利そうに思えるけど利用規約などで禁止されている場合も多いし、特に言及されていなくても相手サーバーの負担になる可能生も高いので無効が無難かも。

ショートコードを有効にする

「Enable WordPress Shortcodes in Comment Content」。

テーマやプラグインで使っているショートコードをコメントでも使えるようにする設定。

動作の遅いショートコードを埋め込むと、読み込み速度に影響を及ぼす可能生があるとのことで、無効にしている。

「続きを読む」の設定

「The number of words before breaking comment text (Read more)」。

コメントの文字数が多い場合に、何文字で分割するか(「続きを読む」を表示するか)の設定。

「0」だと分割しない。

とりあえず分割なしにしている。長文でやり取りすることが多いなら分割するのもいいかな。

添付ファイルの設定

「File Attachment Settings」。

添付ファイル(主に画像)のアップロード設定。ファイルタイプ/ファイルサイズ/サムネイルの生成などを設定できる。

一つのコメントに添付できる画像は1つまで、2つ以上は有料アドオンの機能となっている模様。

「Enable Lightbox for Attached Images」は、ポップアップ風にモーダルダイアログで画像を拡大表示する設定。

このアップロード機能は面白いけど難がある。アップロードするファイルそのものは、コメントの承認やReCaptchaなどのセキュリティ前に実施されてしまうので、イタズラでファイルだけがアップロードされてしまうことがある(された 🙁 )

ゲストユーザーにはアップロード機能を許可しない事も可能だが、そのためには各種ログイン設定が必要になるため敷居が高い。

【wpDiscuz】コメント投稿機能のテストページ
コメント投稿機能のテストページです。 WordPressのコメント機能を拡張するプラグイン「Comments – wpDiscuz」を導入してみたので、各機能を色々とチェックしています。 テスト用のページなので、コメント投稿を練習してみたい人も気軽に書き込んでみてください。

テストページのコメントに画像を添付しているので確認できます。
アップロード機能はとりあえず無効にしました。コメントに画像を付け加えたい場合は、アップローダーサイトなどへのリンクでも代用はできますね。

ライブコメントと通知

「Live Commenting and Notifications」。

コメントフォームにスクロールできる「comment Bubble」や、リアルタイムで新コメントを通知する機能などの設定。

コメントバブル

「Comment Bubble」。

コメントフォームに一発で飛べる、スクロールに追従するボタンを表示する。

コメントバブル

CSSでbottom値を変えて上げるといいかも

表示箇所は3箇所から選択可能。

表示位置をCSSでカスタマイズしたり、メディクエリで表示を振り分ければ結構使えると思うが、とりあえず無効。

表示される位置を注意しないとアドセンスの規約違反(広告の上に表示される/被る)になる可能生もある。

ライブアップデート

Live Update関連の設定は、サーバーに掛かる負担が油断ならないのと、必要性が低いと思われるので全て無効にしている。

コメントが頻繁に書き込まれるサイトならコミュニティが活発になっていいかもしれない。

インラインコメント

「Inline Commenting」。

投稿記事の特定の箇所に簡易的なフォームを設置してコメントを投稿でき、返信をその場所とコメント欄に表示できる機能。

このインラインコメントは、設置した箇所毎に固有のIDが割り振られ、投稿ページのURLと紐付いている(?)らしく、使い方に癖があるので注意したい。

  1. インラインコメントを設置
  2. ページを公開/更新
  1. インラインコメントを設置
  2. プレビュー/下書き/非公開設定で公開

例えば、インラインコメントを設置した後、ページの公開/更新より先にプレビュー/下書きしてしまうと、そのインラインコメントは機能しない。

公開済みの記事に追記する形での更新では正常に機能する。

あと、インラインコメントへの投稿には、reCAPTCHAが適用されない点にも注意したい。承認設定などは通常通り

【wpDiscuz】コメント投稿機能のテストページ
コメント投稿機能のテストページです。 WordPressのコメント機能を拡張するプラグイン「Comments – wpDiscuz」を導入してみたので、各機能を色々とチェックしています。 テスト用のページなので、コメント投稿を練習してみたい人も気軽に書き込んでみてください。
インラインコメントはこんな感じです
0
インラインコメントのテストです!x
←のアイコン部分をクリックで動作します。

詳しい挙動はテストページにもデモを設置しているので、確認したり試してみてください。

フォームの設定

「管理画面→wpDiscuz→Forms→Default Form→編集」からアクセス。

設定を変えたあとは「更新」ボタンクリックで変更を適用。

基本設定

  • Language
    • 言語:ja
  • Disable commenting for role
    • 特定のユーザーロールを表示/非表示にする
    • ログインユーザーにのみ影響する
    • 公開ページで一般利用なら何もチェックしなくていい
  • Allow guests to comment
    • ゲストユーザーのコメント許可
    • Yesにしないとゲスト読者がコメントできなくなる
  • Enable subscription bar
    • メール通知バーの表示/非表示
  • Display agreement checkbox in Comment Subscription bar
    • メール通知の同意・許可を確認するチェックボックスの表示
  • Comment form header text (singular)
    • 単数形のコメントヘッダータイトル
  • Comment form header text (plural)
    • 複数形のコメントヘッダータイトル
  • Display comment form for post types
    • コメントフォームを表示する投稿タイプ
    • post:投稿記事、page:固定ページ、attachment:添付ファイルのページ
    • attachmentは必要性が低そうなので外している
  • Display comment form for post IDs
    • 投稿IDを指定して特定のフォームを表示したい場合に
    • デフォルトフォームでは未入力
  • Comment List Layout
    • コメントスレッドのレイアウト
    • お好みで
  • Enable Post Rating
    • 投稿(記事)への評価を受け付けるか
  • Post Rating Title
    • 評価を受け付ける際のタイトル表示
  • Allow Guests to Rate
    • ↑の評価設定をゲストに許可するかどうか

フォームの入力欄

「Comment Text Field」の部分。

ドラッグ&ドロップでラベルを移動させて並び順を変えられる。

鉛筆アイコンで内容を編集できる。初期状態だと「名前・メール」の入力が必須になっているので、「Field is required」のチェックを外すことで解除できる。

下の方の緑色のプラスボタンから設置可能な機能を表示できる。コメント投稿時の同意チェックボックスや、記事への評価ボタンを設置したりもできる。

詳しくは公式のヘルプに載っているのでチェック!

Comment Form Builder - wpDiscuz - WordPress Comment Plugin
wpDiscuz comment forms can be found and managed in Dashboard > wpDiscuz > Forms admin page. By default, there is one comment form with “Default Form” title. Com...

フレーズの設定

「管理画面→wpDiscuz→Forms→Phrases」からアクセス。

各項目の表示を変更(翻訳)することができる。

ツールの設定

「管理画面→wpDiscuz→Forms→Phrases」からアクセス。

各種設定とフレーズのインポート・エクスポート、コメントの再生成やコメントデータの最適化ができる。

備忘録

  • wpDiscuz:7.0.3
  • WordPress:5.4.2
  • PHP:7.3.19
  • LiteSpeed Cache :3.2.3.2
  • テーマ:Cocoon(2.2.0.5)
  • サーバー:MixHost
LiteSpeed Cacheの「インラインJSの読み込み」で「遅延(defer)」にするとサイト全体のレイアウトが崩れた。
「ページの最適化」→「チューニングの設定」→「JS繰延を除外(deferred)」に「wpdiscuz-combo.min.js」を設定。
「wp-admin」ディレクトリ下の「admin-ajax.php」をベーシック認証で保護していると、フォームやコメントの表示/SNSログインが上手くいかない。
Mixhostの「cPanel→ディレクトリプライバシー→wp-admin」でディレクトリごと保護しちゃうと引っかかる。
リダイレクト先の変更や、別途手動でのベーシック認証が必要。
AMPでは使えない(インラインコメントも)。
IE11(Internet Explorer)で、設定によってはフォームとコメントリストが正常に読み込めない。フォームとリストを表示させてもコメント投稿はできなかった。
IEでのコメント投稿は諦めて、コメントの内容だけでも確認できるようにするのが落としどころになるかな?
下記テストページのコメントも参照。

参考サイト

Disqus Comment Systemとの比較。日本語化ファイルはvesion7だと一部しか機能せず
ツイッターのDeveloper登録(SNSログイン設定のためのアカウント作成)
メール通知設定のカスタマイズ(WordPress側の設定)

まとめ

wpDiscuzは多機能で面白いのですが、設定・導入の難易度はやや高いと思いました。お手軽・簡単って感じではないですけど、色々出来て楽しい!

しかし、それもこれも記事にコメントが投稿されてこそですから、もっといい記事をたくさん投稿しないとなあ(;´∀`)

でも、コメント機能が充実していたらコメントしてくれる読者の割合が増えるかもしれないので、その点はちょっと明るい兆しになるかも!

まだフレーズの設定もあまり出来ていないので、ぼちぼちやっていこうかと思います。

自分でもよく分かっていないところがあるので、「ここはこうした方がいいよ」とか「こんな方法もあるよ」ってのがあったら、是非教えてください!

スポンサーリンク
スポンサーリンク
WordPress
この記事をシェアする
どんぱっぱをフォローする
スポンサーリンク
となはざな
コメントの通知/購読設定
受け取る通知
guest
2 Comments
古い順
新しい順 評価順
Inline Feedbacks
View all comments
タイトルとURLをコピーしました