2019.5.26
Gravatarを使用しないでアバターを設定したい!
Y.Shibuya

ども、Creative Div のShibuyaです。
今回はGravatarを使用しないアバター設定について書いてみようかと。
Y’sサイトリニューアルで、意外と情報が少なくて苦労したもので…。

前提

Advanced Custom Fields有効済みであること。

1.function.phpに追記

こちらを参考にfunction.phpに追記する。
参考URLではAdvanced Custom Fields Proを使用するとして書いてありましたが、未使用でもアバターを取得できました。

add_filter('get_avatar', 'tsm_acf_profile_avatar', 10, 5);
function tsm_acf_profile_avatar( $avatar, $id_or_email, $size, $default, $alt ) {
    // Get user by id or email
    if ( is_numeric( $id_or_email ) ) {
        $id   = (int) $id_or_email;
        $user = get_user_by( 'id' , $id );
    } elseif ( is_object( $id_or_email ) ) {
        if ( ! empty( $id_or_email->user_id ) ) {
            $id   = (int) $id_or_email->user_id;
            $user = get_user_by( 'id' , $id );
        }
    } else {
        $user = get_user_by( 'email', $id_or_email );
    }
    if ( ! $user ) {
        return $avatar;
    }
    // Get the user id
    $user_id = $user->ID;
    // Get the file id
    $image_id = get_user_meta($user_id, 'user_avatar', true); // CHANGE TO YOUR FIELD NAME
    // Bail if we don't have a local avatar
    if ( ! $image_id ) {
        return $avatar;
    }
    // Get the file size
    $image_url  = wp_get_attachment_image_src( $image_id, 'thumbnail' ); // Set image size by name
    // Get the file url
    $avatar_url = $image_url[0];
    // Get the img markup
    $avatar = '<img alt="' . $alt . '" src="' . $avatar_url . '" class="avatar avatar-' . $size . '" height="' . $size . '" width="' . $size . '">';
    // Return our new avatar
    return $avatar;
}

2.Advanced Custom Fieldsでカスタムフィールドを追加

フォールドタイプはもちろん画像。返り値は配列にしました。
フィールドを追加したら、ユーザープロフィールのページで画像を追加しましょう。

3.表示する

ループ内ならget_avatar($author)で取得できます。
ちなみに、返ってくるのはimgタグです。
ループ外で取得する場合は、get_avatar($id)で取得します。
今回、ユーザー全員分のアバターを取得する必要があったので、下記のようにして取得しました。

$authors = get_users();
$result = array();

foreach($authors as $author => $data) {
  $result[$data->ID] = get_avatar($data -> ID);
}

 

終わりに

いかがでしたでしょうか?
先人の知恵のおかげで、意外と簡単に設定・取得できましたね。
ソースを公開してくださったMike Hembergerさんに感謝です!

  • TWEET!
  • SHARE!