[WordPress]ゲストの方のコメント欄でのアバター表示方法

コメント機能まわりを少し充実させてみました。

  • サイドバーの「最近のコメント」欄の表示内容の変更
  • コメント時に画像添付可に(JPEGのみ)
  • コメント追加時のメール通知機能を追加(任意)

メール通知機能はニーズがあるか分からなかったのですが、コメント返信があったかを都度見に来ていただいている方には便利かと思います。
各種メッセージを元の英語から翻訳はしていますが、わかりにくいところなどあったらご指摘いただければ全力で修正いたします。

 

さて今回は、当サイトでコメント頂く際のアバター(アイコン画像)を表示する方法をご紹介しますので、設定したい方はぜひお試しください。

gravator_1

ここのことです。

一度登録すれば、あとはコメント時に入力頂いているメールアドレスに紐づいてアバターを表示してくれます。
都度なにかへログインするとかそういった手間はありませんのでご安心ください。

WordPressでのアバター表示

当サイトはwordpressを使って作成していますが、wordpressを含む複数のブログシステムで表示されるアバター画像は、Gravator(グラバター)というウェブサービスで登録することができます。もちろん、wordpressのサイトを持っていない人でも登録することができます。

WordPressを使ったサイト(※)で、コメント時にメールアドレスの入力を行った場合は、どのサイトでも登録したアバターが表示されます。

※Wordpressを使ったサイトかどうかの判別方法をしたい場合は…ソースを表示して“wp-content””wp-includes”といった記載が検索にヒットすればWordpressを使って作成されたサイトと判断することができます。

Gravatorの登録方法

まず、Gravator (https://ja.gravatar.com/)にアクセスします。「Gravatorを作成」をクリックします。

Gravatorゲスト設定方法

メールアドレス・ユーザ名・パスワード(指定された記号必須)を入力します。ユーザ名は、Gravatorでのアカウント名に使用されるだけで、サイトへのコメント時には特に表示されないので、なんでも構いません。

すでにコメント頂いている方は、その時に入力したアドレスで登録すると、過去のコメントでもすべてアバターが表示されます。

入力して「Sign Up」をクリックすると、登録したメールアドレスにメールが送られます。

Gravatorゲスト設定方法  Gravatorゲスト設定方法

届くメールはこんな感じです。「Activate Account」をクリックして、アカウントを有効化します。

Gravatorゲスト設定方法

「Sign in to Gravator」をクリックすると、管理画面へ移行しますので、「Add a new imgage」をクリックします。

Gravatorゲスト設定方法 gravator_7

「Upload image」をクリック後、「ファイルを選択」をクリックして画像を指定し、「Next」へ。

Gravatorゲスト設定方法  Gravatorゲスト設定方法

正方形の形にトリミングし、「Crop and Finish!」をクリック。

レーティングを選択しますが、暴力的・性的表現がなければ、Gを選びます。

Gravatorゲスト設定方法 Gravatorゲスト設定方法

これでアバターの設定は完了です!Log Outしておきましょう。

今後、アバター画像を変更しない限りは、特にGravatorにログインする必要はありません。

Gravatorゲスト設定方法

登録したメールアドレスを入力してコメントすると、こんな風に設定したアバターが表示されます。

Gravatorゲスト設定方法

あとがき

プラグインはサイドバー表示を「WP-RecentComments」、画像添付を「Comment Image」、メール通知は「Subscribe to Comments」を使用しました。

SNSアカウントを使ってコメントできる「Disqus Comment System」「Comments Evolved for WordPress」あたりも見ましたが、うーん、そこまでSNS連携に魅力を感じないので(自分自身がなんでもSNSアカウントと連携というのが好きじゃないので)一旦やめておきました。でもビジターの方はその方が楽なのかなー。

“コメントを送信” ボタンの前後に画像添付とメール通知のオプション表記がばらけていて見栄えが悪いので一方にまとめたいんですが、プラグインのコードをざっと読んでもどこでどうやって挿入位置を決めているんだか…勉強に時間がかかりそうなので保留します。

追記:挿入位置の変更、できたー!!(完全自分用メモ)

プラグイン「Comment Image」のコードcomment-image/plugin.php 内の
add_action(‘comment_form’, ‘commentimage_comment_form’,99); にて
 ‘comment_form’ を ‘comment_form_before_fields’ に変更して、割り込み位置を変更。

add_action (add_filter と類似?)は関数をフックする(本来の処理を横取りして処理を割り込む)関数で、元の関数は wp-includes/comment-template.php にあった。(テーマ内の comment.php をいくら探してもないわけだ)

管理者ログインしていると、そもそも’comment_form_before_fields’ が表示されないことに気付くのに時間がかかった
しかもコードをいじってたらSyntax Error で管理画面もサイト自体も一瞬見れなくなったから焦りながら冷静にFTP側でコード修正かけたよ・・・

格闘すること2時間。体裁変更だけでこれだけ時間が取られるのはちょっと悔しいけど、1%だけコードが読めるようになってきた。
愛用するエディタ(秀丸)にPHP用の定義ファイルも追加して読みやすくなったことだし。

コメントを残す

※表示されるアバターの変更は、こちらをご覧ください。

JPEG画像のみ添付することができます

*