【Wordpress】コメントのアバターを表示させて”親しみやすさ”をアップさせる
も・く・じ
ブログに必ず付いてるコメント機能。
ワードプレスの場合、そこにアバターと呼ばれるアイコン画像を付けることができます。
アバター機能
当記事は2014年3月22日公開の記事ですが、2017年7月23日に一部加筆しました。
アバターの表示・非表示の変更は「設定」→「ディスカッション」から行えます。
上の画像のように「アバターを表示する」と「ミステリーマン」にチェックを入れると、下の画像のように表示されます。
でもこれだとちょっと味気ない気がしませんか？
コメントが届いても、なんか殺風景というか無機質というか。
それにミステリーマンって誰やねん？っていう話もあるとかないとか。
ここにオリジナルの顔アイコンなんかが表示されれば、（ちょっとだけかもしれませんが）親近感のようなものがアップするんではないかと思うんです。
ネット上での見ず知らずの人とのコミュニケーションって、感情が表に出にくいでしょう？
でもコメントをもらいコメントを返すっていうやり取りは、少なくとも何らかの意思をもって投稿するわけだから、そこに感情まで表現できればもっと親しみや共有感が増えるんじゃないかなとも思うんですよ。
そのための表現の一種としてアバターの表示は効果的ではないかと思うのです。
たとえちっちゃな効果だと言われようとも。
ただ、デフォルトの『ミステリーマン』では、ちょっと、ねぇ。
そこでコメントをくれた人と管理人（私です）のオリジナルアバターを作ってみようというのが今回の内容です。
ゲスト側のアバター設定
動作検証は行ってますが、カスタマイズ・実装に関しては”サイトが表示されない”などのトラブルが発生する可能性もありますゆえ、失敗した時に元に戻せるようオリジナルファイルのコピーは必ず作っておいてください。
なお導入に際しては自己責任にてお願いします。
最初に、コメントをくれた方のアイコン画像設定です。
後述する「Gravatar」にアイコン画像を登録している方はその画像が表示されます。
アイコン画像はあらかじめ作っておきます。
私は76px四方で作ってみました。こちら↓です。
これをテーマフォルダ内のどこかに保存しておきます。
今回は「image」というフォルダを作ってそこに保存してみました。
そしてfunctions.phpに以下のテキストを書き込みます。
|
0 1 2 3 4 5 6 7 |
function tty_addgravatar( $avatar_defaults ) { $myavatar = get_bloginfo('template_directory') . '/image/avatar-guest.png'; $avatar_defaults[$myavatar] = 'ゲストさん'; return $avatar_defaults; } add_filter( 'avatar_defaults', 'tty_addgravatar' ); |
上記コード内の'/image/avatar-guest.png'というところが画像までのパスになります。
ここでは「image」というフォルダ内に保存した「avatar-guest.png」という名称の画像という意味です。
（フォルダ名や画像名は適宜変えてください）
'ゲストさん'という部分は『ミステリーマン』といった表示上の名称です。
ここも変更可能です。
これで下のように表示されます。
最下段に新たに「ゲストさん」がお目見えしました。
これでさきほどのコメント欄を見ると…ちゃんとアイコンが変わってます。
無機質なイメージがだいぶ和らいだと思うんですがいかがでしょう。
ただこのままだとコメント側も管理人（私）もどちらも同じ画像になっちゃうので、今度は管理人側の画像を別のものに変えてみます。
管理人側のアバター設定
管理人側のアバターは「Gravatar」というWebサービスを利用します。
ここに画像を登録しておくと、自サイトだけでなく他サイトでも自分の画像を表示させることができます。
反対にコメントをくれたゲストの方のアイコンもGravatarに登録されていればその画像が表示されます。
Gravatar への登録
Gravatarを開きます。
「Create Your Own Gravatar」をクリックして新規登録するか、「WordPress.com」のアカウントでログインします。
下はWordPress.comでのログイン画面です。
ログインすると下のような画面になるので「ここをクリックして追加してください」をクリックして画像を登録します。
画像はあらかじめ用意しておきます。
アップする画像を指定します。
今回はPCに保存してある画像をアップロードするので一番上を選択します。
画像が読み込まれるのでトリミングが必要ならこの場で切り取ります。
「切り抜いて完成」をクリックして画像のアップロードが終了します。
最後にレーティングと呼ばれる設定です。
ここは特に指定していなければ制限なしの「G」を選んでおきます。
これで画像の登録は完了です。
下のような画面になりますが特にすることはありません。
これでコメント欄を確認すると、下のように反映されてるのがわかります。
どうでしょう、こっちの方が優しい感じがしませんか？
目立つという意味でもおススメかと。
ここから以降が追記分となります。
Avatarの変更（追記）
一般的なブログだとブログサイトは1個だけという方も多いことでしょう。
しかしアフィリエイトサイトを運営してると、同時にいくつものサイトを構築してる場合があります。
こんなとき、ちょっとしたトラブルに見舞われることがあります。
というのもワードプレスの場合、サイトを新規で作成する時はメールアドレスが必要になってきます。
特に問題なければメールアドレスはおそらくどのサイトも共通したメールアドレスになってるんじゃないでしょうか。
私なんかがそのいい例ですよ。
サイトごとに一つ一つメールアドレスを変えるのが面倒だったものでね。
それにメールアドレスを一つにまとめておけば一つのメールクライアントを開くだけで済みますし。
こんな状態でAvatarを有効にすると、どのサイトでも同じAvatarが表示されちゃいます。
というのも1個のAvatarは1個のメールアドレスと対になってるからです。
しかしサイトによっては最初に作ったAvatar画像がサイトイメージに合わないということもありえます。
そういった場合はAvatarの変更が（具体的には”Avatarの追加”ですね）必要になります。
例えば別サイトのこちら↓のコメント欄をご覧ください。
当サイトと同じメールアドレスで登録してるのでAvatarも同じモノになってます。
これを別のイラスト調のAvatarに変更してみます。
変更方法
まずは管理画面のユーザー→あなたのプロフィールを開いてメールアドレスを新規のものに差し替えます。
GravatarにログインしてマイGravatarを開き「Add email address」をクリックします。
（画像ではすでに2個目を登録済みなので今回は3個目の登録を例に挙げていきます）
新規メールアドレスを入力して「追加」をクリックします。
”入力したメルアドに認証用のリンクを送ったのでそれをクリックしろ”的な文面（汗）が表示されます。
メールをチェックするとGravatarからのメールが届いているのでリンクをクリックします。
無事、3個目のメルアドの登録が完了しました。
そのまま「Add a nwe image」をクリックします。
「Upload new」をクリックします。
予め作っておいたAvatar用の画像を選択して「次へ」をクリックします。
元々正方形で作っていた場合はそのまま「Crop image」をクリック、横長の画像を指定した場合は表示部分する部分を範囲指定して「Crop image」をクリックします。
レーティングは「G」のままで「Set Rating」をクリックします。
ここで新しく登録したメルアドを選択します。
これで無事、新メルアド用のAvatar画像が登録されました。
実際にさきほどのページをリロードしてみると、無事新しいアイコンに変わりました。
以上です。
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓