Webの記録

WordPressのコメント欄にオリジナルアバター画像を表示させてみた♪

投稿日:2011年11月6日 更新日:

この記事は約 4 分で読めます。

オリジナルアバター表示にチャレンジ♪

WordPressで投稿されたコメント欄で、よくデフォルトの「ミステリーマン」を見掛けます。

何となくそのままでは面白くないので、今回はオリジナルアバターを作って表示したいと思います。

ひとまず、アバター用の画像2種類(自分用とゲスト用)を用意して、チャレンジ開始です♪

サイズは自動変更されるようです。
「Twenty Ten」のテーマでは縦・横40pxでしたが、もう少し大きくても良さそうです。


 

自分のアバターを変更する場合

ここで利用したいのが、Gravatar (グラバター)です。
URL: http://ja.gravatar.com/

 

Gravatarのサイト画面

 

Gravatar (グラバター)は、メールアドレスとプロフィール画像を結びつけるサービスです。
1度登録するだけで、自分のブログだけでなく他の人のブログでもアバターを表示出来ます。

「Wordpress」で利用するのなら、「Wordpress」に登録しているメールアドレスで登録した方が良いと思います。

 

反映されたら、Wordpressの「設定」→「ディスカッション設定」で、画面の一番下にある「アバター」でアバターを表示させる設定をします。

チェックするのは、アバター表示・・・「アバターを表示する」と、評価による制限・・・「G-あらゆる人に好適」の2つです。

私はオリジナルテーマでもすぐに表示が出来ましたが・・・場合によって、表示がされない事があるそうです。(Gravatar (グラバター)サイトの「よくある質問」を参考)

 

ゲスト用のアバターを変更する場合

アバター表示設定をしていれば、Gravatar (グラバター)に登録している人からのコメントにはその人のアバター画像が表示されます。
しかしGravatar (グラバター)に登録していない人のアバターは、「設定」→「ディスカッション設定」の画面の一番下にある「デフォルトアバター」で選択されている画像が表示されるようになっています。

 

そのままでは面白くないので、オリジナル画像をアバターとして設定したいと思います。

「functions.php」に以下のコードを追加します。
4行目のファイルのパス(画像の名前)と、5行目の”ゲストアバター”部分は、人によって違うと思います。

add_filter()は、functionの前でも後(}の後)でも大丈夫です。

//ゲストアバター
add_filter( 'avatar_defaults', 'newgravatar' );
function newgravatar ($avatar_defaults) {
    $myavatar = get_bloginfo('template_directory') . '/images/avatar.gif';
    $avatar_defaults[$myavatar] = "ゲストアバター";
    return $avatar_defaults;
}

 

保存後に、Wordpressの管理画面の「設定」→「ディスカッション設定」で、画面の一番下にある「アバター」の部分を再度見てみます。

ゲスト用アバターの選択画面

すると・・・。
一番下に新たなアバターが追加されています。

ここは、しっかり追加された画像を選択して保存します。

 

さて、ブラウザで表示してみます。

コメント欄のイメージ

ちゃんと、ゲストアバターの表示が出来てました♪

オリジナルアバターになって、何となく自分のサイトらしく感じます。
サイトのイメージによってアバターの画像を変えてみるのも良さそうです。

-Webの記録
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Worepress 前後の記事へリンクをつけたい時。

この記事は約 1 分で読めます。 記事の下に「古い記事へ」「新しい記事へ」という前後の記事へのリンクを表示しています。 単純に投稿順で前後の記事へリンクをさせるのか、または開いている記事と同じカテゴリ …

no image

スマホサイトの画像コピーガード対策

この記事は約 1 分で読めます。 スマホ向けのサイト制作の機会が増えました。 PC向けの時にいろいろとしていた画像コピーガード対策も、スマホ対応しなくてはならなくなってきました。 画面の長押しすると、 …

no image

IE6で透過pngを表示してみました♪

この記事は約 1 分で読めます。IE6対策をいつまですれば良いのかなぁというところですが、まだもう少しIE6を意識してサイトを作ってます。 今回は、IE6ではキレイに表示されない透過pngをキレイに表 …

no image

lang属性に指定できる言語コード

この記事は約 1 分で読めます。 忘れた頃に海外向けの小規模な案件で、外国語のページ制作のお話があったりします。 そんな時に「lang属性に指定できる言語コード」を毎回調べるのが面倒なので、自分用のメ …

no image

WordPress記事中の文章をコピーしたら管理者にお知らせしてくれるプラグイン「Check Copy Contents(CCC)」を試してみた

この記事は約 2 分で読めます。 私の過去記事で人気なのが、「画像のコピーガード」。画像を盗用されることに対して対策を打ちたい方がたくさんいらっしゃるのでしょう。 もしこれが記事中の文章においても、コ …