Jetpackプラグインでコメント機能を拡張しよう/WordPress

jetpack_eyecatch2 WordPress
この記事は約9分で読めます。

備忘録_54 / wordpress_22 / jetpack 2⃣

今回から数回にわけてAutomattic社のWordpressプラグイン、Jetpackを使いブログサイトを強化していきます。
検索でこのページにダイレクトに飛んでこられた方は、( ゚Д゚)ハァ?唐突に何を言っているんだ!と思われるかもしれませんが、私の備忘録シリーズは連載記事でして、この投稿記事は備忘録_53から話が繋がっております。
前回のpart1はJetpackプラグインのインストールの仕方でした。インストールから読み始めたい方はコチラです。

今回part2は手始めにこのJetpackプラグインを使ってコメント機能を拡張していきましょう。

Jetpackを使ったコメント欄のカスタマイズ方法

旧コメント欄
[図_1]

[図_1]
左は現在のコメント欄のUIです。
wordpressにcocoonテーマを適用し、さらにスキンはhiroakiさんのカラフルラインを使用しております。

こちらコメント欄をもっと使い勝手が良い様にカスタマイズしていきます。

コメント欄を設けると、お客様からリアクトを頂く事ができます。
双方向である事は重要だと考えます。

ここまで拡張に次ぐ拡張を重ねてきた為、少々面倒な事になっています。と、いうのも…

  • WordPress本体のコメント設定
  • Cocoonテーマのコメント設定
  • Jetpackプラグインのコメント設定

現在、コメント欄の設定を行う為の設定ページがこの3つにまたがっており、別個に設定を行う必要があります。

Jetpackプラグイン側のコメントの設定

jetpack・設定
[図_2]

[図_2]
ダッシュボードの画面です。

管理ツールバーより、
[Jetpack] → 続いて、
[設定] をクリックします。

使用するプラグインの数が増えて来ると設定の入り口がどこか分からなくなって来る事が分りましたので、この辺りも丁寧に書く事にしました。

設定・ディスカッション
[図_3]

[図_3]
ディスカッション画面です。

上のタブより、
[ディスカッション]のタブ
    をクリックします。
訪問者が WordPress.com、Twitter、Facebook、または Google のアカウントを使ってコメントできるようにします。
こちらの機能を有効にします。

こちら[図_1]のwordpress標準のコメント欄は表示が大きく目障りです。その点Jetpackプラグインのコメント欄は見た目がスリムで機能がまとまっております。如何にも如何にも「さぁ、さぁ、何か書いて行って下さい」よりはさり気ない小さい枠の方がデザイン的にも良いかなと思いました。正確に言うと拡張ではなく、wordpress標準のコメントモジュールを廃して、Jetpackプラグインのコメントモジュールが起動しています。プログラム周りは全くの別物です。

もう一つ利点があり、SNSアカウントを使いコメントを書き込めるようになります。
この機能は常時、Twitter、Facebookにログインした状態で使っている方には便利だと思います。

コメントルールについて考える

コメント欄は基本的に誰でも好きに使えば良いと思っております。こんな人気のないブログサイトですから、閲覧者が来てくれるだけでも有難いものです。励みになりますから、せめて足跡でも残して頂けたらそれこそ幸いなのです。

  •  書き込みの制限は緩く誰でも使えるようにしたい。
    • 但し、人間に限る。(ボット不可!)
    • 匿名でも書き込みOKにしたい。(書き逃げ上等!)
    • SNSのアカウントでも書き込めるようにしたい。(書き逃げしたくない人用)

基本の姿勢としてはこのような理念の下に運営したいと思ってます。

cocoonテーマ側のコメントの設定

cocoon・cocoon
[図_4]

[図_4]
再びダッシュボードの画面です。
続いてCocoonテーマの設定をします

管理ツールバーより、
[Cocoon設定] → 続いて、
[Cocoon設定] をクリックします。

cocoon設定・コメント
[図_5]

[図_5]

コメントの設定は[コメント]タブにあります。ここは表示形式を選べます。

ここは個人の好みだと思いますので、基本的に好きにお選び下さい。
一例として、私の設定の場合では…
この様な設定にしています。

わいひら先生の書かれたCocoonマニュアルです。

マニュアルを覗いて頂ければ分かると思いますが、様々な要望に応える形で、バージョンアップを重ねるごとに機能が加えれられてきました。

一つ一つそれなりの理由があるのですねェ…。

コメントタイプの「デフォルト」と「シンプルスレッド」の違いですが、「名前」と「日付」が一行で表示されるか二行で表示されるかの違いです。シンプルスレッドは某巨大掲示板に似た表示形式になります。

お布団ブログは、コメントタイプを一行表示のシンプルスレッドに設定しました。

デフォルト
表示
シンプル
スレッド
お布団 より:
2021年12月6日 20:30
名前:お布団:投稿日2021/12/06(月)20:30:11

コメント欄が大きく邪魔であると言うブロガーの要望を受けて、Cocoon 1.0.2のバージョンアップでコメント入力欄を、表示したり、隠したり、トグル操作で切り替えられる機能が追加されました。デフォルト状態でトグルはONになっています。

お布団ブログは、コメント入力欄表示を常に表示に戻しました。
これはJetpackを導入した事により、表示をスリムに出来たため隠す必要がなくなったからです。

wordpress側のコメントの設定

設定・ディスカッション
[図_6]

[図_6]
またもやダッシュボード画面です。
wordpress本体のコメント設定を行って行きます。

管理ツールバーより、
[設定] → 続いて、
[ディスカッション] をクリックします。

他のコメント設定
[図_7]

[図_7]

ブログサイト運営者の運営方針で全然変わってくるとは思いますが、一例として私のサイトの設定をご紹介しています。

✅ コメントの投稿者の名前とメールアドレスを必須にする。
デフォルトの設定ではチェックボックスがONになっています。が、こちらのチェックを外します。

ヤフーコメント、NewsPicks、BLOGS、はてなブックマークでもそうでしたが、何でも好きに書いて良いとなると、罵詈雑言、誹謗中傷、言いたい放題、荒れ放題になってしまいます。個人運営のブログサイトでは「荒れる」と対処きしれないという理由により自衛の意味でメールアドレスの入力を必須にしているサイトが多いように思えます。

✅ すでに承認されたコメントの投稿者のコメントを許可し、それ以外のコメントを承認待ちにする。
デフォルトの設定ではチェックボックスがONになっています。が、こちらのチェックを外します。

初期設定ではコメントを入力して送信しても、即座には反映されません。まず最初にブログサイト運営者がコメント文に目を通してその内容を掲載しても良いなら承諾のボタンを押して初めてコメント文が投稿記事に掲載されるという2ステップからなります。それは私が面倒なので、お布団ブログでは即座にコメント文が反映されるようにしました。

だから間違えても「うんこ」とか書いて [コメントを送信] とかしないで下さいね^^;
本当にそのまま「うんこ」って載ってしまいますから …。

投稿・投稿一覧
[図_8]

[図_8]
しつこいですがダッシュボードです。

管理ツールバーより、
[投稿] → 続いて、
[設定一覧] をクリックします。

投稿一覧・クイック
[図_9]

[図_9]
投稿一覧の画面です。
クイック編集をクリックするとこの様にパカッと開きます。

コメントを許可
トラックバックを許可
     チェックを付けます。
トラックバックは今回関係なかったりしますが、
ついでです。
②  [更新] をクリックします。

とても便利な一括編集機能
編集・一括操作
[図_10]

[図_10]
投稿記事一つ一つにチェックしていたら大変時間がかかりますが、これを一括で行う方法があります。

✅ タイトル チェック付ける。
記事タイトル全てにチェックが付きます。
プルダウンより 編集 を選び、
[適用]をクリックします。

編集・一括操作②
[図_11]

[図_11]
一括編集画面になります。

コメントのプルダウンメニューより、許可 を選択します。
  [更新] をクリックします。

このように一括で全て記事の属性を変更できます。

Jetpackのコメント欄UI

新・コメント欄
[図_12]

[図_12]
Jetpackを適用した新たなコメント欄の見た目です。だいぶスリムでスッキリと収まっています。
赤枠の部分に、それぞれワードプレス、グーグルアカウント、twitter、facebookのSNSログイン用のクリックボタンがあります。

私はSNSアカウントを持ってないのでどうやって使うのかは分かりません。

恐らく、twitterアカウントでログインすると、twitterで使用しているプロフィール画像が表示されるのだと思います。「メール」「名前」「サイト」の入力は必須ではありません。名前欄を空白にすると「匿名」と表示されます。要らないのでもういっその事、「メール欄」と「サイト欄」を消してしまおうと思ったのですが、コメント周りのプログラム処理がプラグインの中で行われている為、style.cssを弄っても消せません。また、プラグインの中のcssを直接弄って消すことは可能ではありますが、Jetpackのパッチが当たるたび変更を加えた箇所が上書きされて消されてしまう為、これではあまり意味がありません。
不便ですが、ここは我慢してもらうしかないのかしら…

動作テスト
[図_13]

[図_13]
コメントを入力して送信すると、このように表示されます。

もう一つ問題があって、コメントにいっぱいレスが付いてとんでもなく下に伸びて行ってしまった時にどうするかです。
ページが読みにくくなりますよね?

これについては現在考え中です。

一つの案として、折角投稿してくれたコメントを消すわけにもいかないですし、しかし見やすくするためにもコメントごと折り畳めるように出来ないかと考えています。中にはコメント欄を読みたくない人もおられると思いますので…。

コメントの削除ルール

コメントの削除ルールもしっかり決めておきます。

  • ボットの書き込みは(見つけ次第)削除します。
  • 誹謗中傷、脅迫恫喝、公序良俗に反する表現は(あまりにも酷いものは)削除します。
  • 「うんこ」「ちんこ」等の卑猥な放送禁止用語は(見つけ次第)削除します。

コメント欄は好きに使えば良いのではないでしょうか。だって、今の令和が言論の自由を許された最後の時代のような気がしますから…。今の政治家さんって2世、3世議員さん多いでしょう。でもこの世襲が10世、20世と続いて行ったらどうでしょうか?ここまで来るともはやちょっとナーバスどころの話ではありません。この先少しずつ思想チェックと言論統制が厳しくなって行くと思います。私だってこんな政治の話しなんかしたくなかったです。
ですが全ての発言には何かしらの政治的スタンスを含んでますのでどうしても避けては通れないのです。

今回は以上です。

2021/12/19 ピンバックのセキュリティホールを狙ったDDoS攻撃が頻発しております。
現時点では有効な対策が見つからないため、トラックバック機能については一旦サービスを閉じることにしました。
Jetpack1⃣ / Jetpackプラグインのインストールの仕方
Jetpack3⃣ / パブリサイズする
2021/12/01
2022/01/00

Eyecatch image:PhoenixRisingStock,pixabay/Sanたまカフェ,illustAC

  1. わたし女子高生ですが、何でうんこちんこ書いたらいけないのでしょうか?

    • コメントありがとうございます。
      うんこまではまだ許されるにしても、可愛いお嬢様がちんことかはしたない言葉を使ってはなりません(*´з`*)

    • ちんこダメなのですか?因みに白百合付属の女子中学生です。

    • おお!これまた可愛いお嬢様!コメントありがとうございます。う~ん、どうしようかなァ(*^з^*)
      可愛いから女子中学生と女子高生に限ってうんこちんこオーケーにしちゃいましょうか!

    • なにか酷い自作自演が行われている現場を目撃してしまったワケだが…