WordPressのゲストアバターをいろんな画像で表示するカスタマイズ

wordpressで利用できる自動生成アバターをオリジナルの画像にしてコメント欄をにぎやかにしたい。

WordPressで運営しているブログにいろんな方からコメントをいただくとうれしいですが、Gravatar登録のない場合、同じデフォルトアバターになってしまって味気なく感じませんか?

あらかじめWordpressで用意されている自動生成アバターならいろんな画像を割り当ててくれるのですが選択肢がどれもいまいち。Idenctionがシンプルでまだ使いやすいので利用されてる方よく見かけますね。

デフォルトアバターをオリジナル画像に設定するカスタマイズは多く知られていますが、今回は自動生成アバターのようにゲストのお名前によって表示アバターを変化させるカスタマイズを考えてみました。

WordPress4.8で確認。PHP・FTPの知識が必要です。
get_avatar_data()は4.2から導入された関数ですので、それ以前のバージョンでは使えません。

functions.phpへコードを書き込み、FTPでアバター画像をアップロードしてください。
このサンプルでは19通りのアバターを使用します。

実際に運用しているサイト(サンプルではないのでテスト投稿はお控えください。)

このカスタマイズはコメント情報を元にアバター画像のURLを含む配列を吐き出すワードプレスの関数『get_avatar_data()』のフィルターフックです。

メールアドレスが未入力だったりgravatarが設定されていない場合に入力された名前を元に用意してある画像を表示させます。画像の数が用意できないので19通りになりましたが、ファイル名を作る部分をカスタマイズすることでお好みの数の画像を使うことができます。

スポンサーリンク

コードと使い方

テーマディレクトリ(wp-contents/theme/使用中のワードプレステーマのディレクトリ)以下にavatarディレクトリを作ってその中にavatar_1.png~avatar_19.pngの画像を用意し。

functions.phpに以下のコードをコピペ。

function new_get_avatar_data($args,$id_or_email){
$check_avatar ="";
$user = null;
if($args['found_avatar'] == true){
	if ( ! empty( $id_or_email->user_id )){
		$user = get_user_by( 'id', (int) $id_or_email->user_id );
		$email = $user->user_email;
		}
	
	if ( ( ! $user || is_wp_error( $user ) ) && ! empty( $id_or_email->comment_author_email ) ) {
		$email = $id_or_email->comment_author_email;
		}
 	
 	if(! empty($email)){
 		$hash = md5( strtolower( trim( $email ) ) );
		}
	
	$uri = 'http://www.gravatar.com/avatar/' . $hash . '?d=404';
	$headers = @get_headers($uri);
	
	if (preg_match("|200|", $headers[0])) {
		$check_avatar = TRUE;
		}

	}
if(is_object($id_or_email) && isset( $id_or_email->user_id ) && empty($check_avatar)){
	if(isset ($id_or_email->comment_author)){
		$word = "1".substr(preg_replace("/[^0-9]+/","",md5($id_or_email->comment_author)),1,9);
		$userid1 =substr($word,1,1);
		$userid2 =substr($word,6,1);
		$userid = $userid1 + $userid2 + 1;
		$args['url'] = get_stylesheet_directory_uri().'/avatar/avatar_'.$userid.'.png';
		}
	return $args;
	}
	else{
	return $args;
	}
}
add_filter('get_avatar_data','new_get_avatar_data',10,2);

アバターの保存先や画像のファイル名を変更する場合には
$args['url'] = get_stylesheet_directory_uri().'/avatar/avatar_'.$userid.'.png';
という部分を修正してください。(下から9行目。)

解説

gravatarを呼び出すための関数get_avatar_data()が出力する配列$args[‘url’]の中に画像URLが入っているのでその中身を条件によって書き換えています。

メールアドレス入力時のみgravatarのサーバーにアクセスして画像が存在するかチェックする

$args[‘found_avatar’]trueが代入されている場合、メールアドレスが入力されていますのでそれを利用して必要な場合だけGravatar画像の有無をチェックしています。

引数に利用している$id_or_emailにはコメントループ内であれば$commentの配列が、それ以外ではwordpressユーザーのIDが入っているようなのでそれぞれのパターンに合わせてgravarにアクセスするためのメールアドレスを取得しています。
(このあたりは/wp-includes/link-template.phpにあるget_avatar_data()を参考にしました 。)

メールアドレスからgravatarのURLを生成し画像が存在しているかを確認する方法はWordPress Codexにサンプルがありましたのでそのまま使いました。

Gravatar が存在するかのチェック – Gravatar の使い方

gravatarが存在していた場合のみあらかじめ定義した$check_avatarにTUREを代入し$argsの内容はは変更せずそのまま戻します。

名前を数値化して1~19までの数字に

	if(isset ($id_or_email->comment_author)){
		$word = "1".substr(preg_replace("/[^0-9]+/","",md5($id_or_email->comment_author)),1,9);
		$userid1 =substr($word,1,1);
		$userid2 =substr($word,6,1);
		$userid = $userid1 + $userid2 + 1;
		$args['url'] = get_stylesheet_directory_uri().'/avatar/avatar_'.$userid.'.png';
		}

$word = "1".substr(preg_replace("/[^0-9]+/","",md5($id_or_email->comment_author)),1,9);

名前($id_or_email->comment_author)をMD5でハッシュ値(文字列)に変換、その中から数字以外を削除して9文字取り出し頭に1を足して10桁の数字にしました。
(1を足しているのはなんとなく一文字目が0になるのが嫌だったからです)


$userid1 =substr($word,1,1);
$userid2 =substr($word,6,1);
$userid = $userid1 + $userid2 + 1;

10桁の数字から2つめ($userid1)と7つめ($userid2)を足してさらに1を足しました。

0~9の数字を2つ足して、それに1をプラスするので$useridは1(0+0+1)~19(9+9+1)になります。これで19種類の画像を割り当てる準備ができました。

使用する画像の数を変更したり、名前以外の要素を利用するならこのへんに手を加えてください。

何度もテストしましたが問題点があればご指摘ください。

コメント

  1. まちゃとら より:

    はじめまして。
    まちゃとらと申します。

    wordpressのデフォルトアバターの変更方法、すごく参考になりました!

    ひとつご質問させて頂きたいのですが、wordpressのコメント欄に「男性」と「女性」のラジオボタンを設置し、その選択によって男性と女性の画像をデフォルトアバターとして表示したいと考えています。

    この場合、functions.phpにはどのような記述をすれば良いのでしょうか?

    お手数をお掛けしてしまい、誠に申し訳ございませんがご教授頂けましたら幸いです!
    よろしくお願い致します!

    • minaparu より:

      まちゃとらさま、コメントの承認が遅くなり大変申し訳ありませんでした。

      ご質問の件ですが、コメントフォームの改造とアバター表示の改造が必要になりますね。少し調べてみましたが形にするのは私の力量ではちょっと難しそうかな??
      お役に立てず申し訳ないです。
      ただ、できたら面白そうなのでチャレンジしてみますね。もし上手く行けば記事にします。

  2. ななし より:

    期待してます

    • minaparu より:

      ななし様、コメントの承認がおそくなりました。
      選択式は実装できそうかなと思ったのですが、ランダム表示とは違い受け取ったアバター情報の処理も絡んでくるので
      やらなきゃいけない処理が多そう…と開発の手がとまってます、ごめんなさい。
      https://blog.minaworld.net/archives/gender_choice_customize/