WordPressコメント欄にYouTube風管理者ハートを追加するプラグイン「WP ALike」

reCAPTCHA v3の設定やフォームレイアウトのトラブルシューティングを経て、当ブログのコメント受付が無事に復旧し、9月21日には早速読者からコメントをいただくことができました。

https://donguri3.net/server-tech/wordpress-blog-seo/luxeritas-recaptcha-v3-setup-guide/

ブログを訪れてくれた読者が気軽にリアクションできるようにするため、まずはWordPressで最も実績のあるいいねプラグインである「WP ULike」を導入しました。

WP ULikeは、記事本文やコメント欄に対してAjax通信によるリアルタイムな「いいね」ボタンを設置できる優れたプラグインです。ログインしていない一般の読者でもワンクリックで投票できる手軽さを備えつつ、CookieやIPアドレスを用いた多重投票防止(重複制限)機能が標準で搭載されているため、非ログイン環境が主体のブログでも健全ないいね数を集計できます。

目次

広告

管理者から読者へ感謝を伝える双方向リアクションの構想

WP ULikeによって読者からコメントへのリアクションを受け取れる環境は整いました。しかし、運用を続ける中で「コメントを投稿してくれた読者に対して、管理者側からも手軽に感謝を伝えたい」という思いが強くなりました。

すべてのコメントに対して長文の返信を書く時間が取れない場合でも、「読んだよ」「ありがとう」という意思表示を直感的に返せる仕組みが必要です。

動画配信サイトのYouTubeでは、チャンネル管理者がコメント欄でハートを付けると、管理者の丸いアバターアイコンと小さな赤いハートマークがセットになって表示されます。この視覚的に分かりやすい管理者リアクションをWordPressのコメント欄にも導入し、読者と管理者の双方向コミュニケーションを活性化させたいと考えました。

インラインでの共存とZIP配布による導入の簡素化

今回の機能追加における目標は以下の通りです。

  • 自然なUIの共存: 先に導入した一般読者向けプラグイン(WP ULike)のボタンと競合せず、コメント末尾のインラインで自然に横並び配置できること。
  • 管理運用の効率化: WordPress管理画面のコメント一覧(wp-admin/edit-comments.php)から、1クリックでハートの付与と解除をトグル操作できること。
  • 配布・導入の標準化: テーマの設定ファイルやmu-pluginsにベタ書きするのではなく、他サイトでも管理画面の「プラグインのアップロード」から即座に導入できるよう、GitHub Releasesを通じたZIP配布体制を整えること。

WP ULikeの機能的限界と並列配置で直面した障害

構想を実現するにあたり、既存のWP ULikeだけでは解決できない機能的ギャップと、表示・連携上の課題が浮き彫りになりました。

WP ULike単体では管理者ハートを実現できない

WP ULikeは「不特定多数の読者から投票を集約してカウントする」ことに特化したプラグインです。そのため、YouTubeのように「ブログ管理者が特定のコメントをピックアップして特別なハートを付与し、管理者のアバター画像を添えて差別化表示する」という機能は備わっていません。

補完プラグイン「WP ALike」の開発とGitHub自動リリースの構築

WP ULikeの機能を補完し、管理者リアクションを実現するための専用プラグインとして「WP ALike (Admin/Author Like)」を開発しました。

nando256/wp-alike: Add YouTube-style admin heart badges to WordPress comments. / WordPressのコメント欄にYouTube風の「管理者ハート(いいね)」を追加するプラグイン。

WP ULikeとの共存と表示崩れの解消

WP ULikeのボタンと綺麗に横並びになるよう、双方のコンテナ要素をFlexbox(display: inline-flex)で制御し、自然なインライン配置を実現しました。 また、空の <p> タグが挿入される問題に対しては、comment_text フックの実行優先度を 40 に調整してWP ULike等の処理完了を待つようにし、さらにHTML出力時の改行コードをすべて除去することで wpautop の誤判定を完全に抑え込みました。WordPressコアによって絵文字が画像に置換された場合でも、アバターアイコンの右下に絶対配置が維持されるよう専用のCSSを適用しています。

YouTube風リアクションの実現とReleasesからのZIP導入

WP ALikeを導入したことで、WordPressのコメント管理画面に「管理者いいね」列が追加され、管理者がワンクリックでハートを付与・解除できるようになりました。複数人の管理者がいる場合でも、それぞれのアイコンが並んで出力されます。

フロントエンドのコメント欄においても、WP ULikeの読者いいねボタンと並んで、管理者の丸いアバターアイコンと小さな赤いハートが崩れることなく綺麗に横並びで表示されています。

ライトモードでのコメント欄表示(WP ULikeのいいねボタンとWP ALikeの管理者ハートが綺麗に横並びで表示されている様子)

プラグインのダウンロードは、以下のGitHubリポジトリから行えます。

プラグインのインストール用ZIPファイルは、Releasesページから直接ダウンロード可能です。GitHub Releases(ZIPダウンロード):

Releases · nando256/wp-alike

ダウンロードしたZIPファイルをWordPress管理画面の「プラグイン」→「新規プラグインを追加」→「プラグインのアップロード」から選択するだけで、どのサイトでも即座にYouTube風の管理者ハートを導入できます。

まとめ

読者からのコメントに対して感謝を伝えるため、YouTube風の管理者ハートを付与するプラグイン「WP ALike」を自作しました。先行導入した「WP ULike」に管理者向けリアクション機能がない課題を補完し、両者の美しい横並び表示を実現しました。ソースコードをGitHubで公開するとともに、ReleasesからZIPをダウンロードして手軽に導入できる実用的なコメント拡張機能が完成しました。