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

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

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

関連記事

no image

WordPressプラグイン「Audio Player」でMP3音源を簡単に再生してみた

この記事は約 1 分で読めます。 WordPressでMP3オーディオプレーヤーを表示させてくれるプラグイン「Audio Player」を試してみました。 「Audio Player」は、Flashで …

no image

画面のスクリーンショット(キャプチャー)をとる3つの方法+1

この記事は約 2 分で読めます。 Webサイトのスクリーンショット(キャプチャー)をとる時、画面に表示されている部分のみの場合や、Webサイト1ページ分全体などあります。 特にWebサイト1ページ全体 …

no image

初心者のアクセス解析勉強メモ【用語と計算式】

この記事は約 1 分で読めます。 Webサイトを制作し、運営していく中でアクセス解析は重要だと思っています。そのWebサイトを育て、サイト目的を達成させ、信の目的(事業)の達成をする為にも、とても興味 …

no image

はじめてのHTML5。

この記事は約 1 分で読めます。 そろそろいろんなところで、HTML5を見かけるようになり・・・今イチバン気になっているのがHTML5です。 これからHTML5を覚えていこうと思っているところなので、 …

no image

WordPressプラグイン「NIVO slider light」でリッチなスライドショー簡単設置

この記事は約 1 分で読めます。 以前「jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪」で、「jquery.nivo.slider.js」というjQueryライ …