WordPressのプロフィール画像をGravatarやプラグインを使わずに変更する方法

詳細

WordPressのプロフィール画像をGravatarやプラグインを使わずに変更する方法

2025.04.17

【WordPressのカスタム】

WordPressのプロフィール画像をGravatarやプラグインを使わずに変更する方法

Gravatar（グラバター）の設定が面倒で、これ以上プラグインを増やしたくない方にぴったりの方法をご紹介します。WordPressでは、メディアに保存した画像のURLを使って、簡単に自分だけのカスタムアバターを設定できます。この方法では、Gravatarに依存せずに、好きな画像をアバターとして表示することができます。手順は非常にシンプルです。

Gravatar（グラバター）とは　

Gravatar（グラバター）とは、Globally Recognized Avatarの略称で、インターネット上でユーザーがプロフィール画像（アバター）を一元管理できるサービスです。このサービスは、特にブログやフォーラム、SNSなど、さまざまなウェブサイトで同じアバターを表示するために使われます。

完成形

事前準備

◎ユーザーに登録する画像（240px × 240px）を「メディア」に保存してください。

プロフィール画像設定のカスタマイズ

➀ワードプレスメニューの [外観] にある [テーマファイルエディタ] をクリック
②テーマのための関数(functions.php)内にコードをペースト
③ペーストし終えたら [ファイルを更新] ボタンをクリックし変更を保存

ペーストする関数はこちら


// プロフィール画像URL取得
function get_the_author_uploaded_avatar_url($user_id = null){
  if (!$user_id) {
    $user_id = get_the_posts_author_id();
  }
  return esc_html(get_the_author_meta('uploaded_avatar', $user_id));
}

// プロフィール画像フィールド追加
function add_avatar_to_user_profile($user) {
  $avatar_url = get_the_author_uploaded_avatar_url($user->ID);
  ?>
  <h3>プロフィール画像</h3>
  <table class="form-table">
    <tr>
      <th><label for="avatar">プロフィール画像URL</label></th>
      <td>
        <input type="text" name="uploaded_avatar" size="70" value="<?php echo $avatar_url; ?>" placeholder="画像URLを入力してください">
        <p class="description">Gravatarよりこちらのプロフィール画像が優先されます。240×240pxの正方形の画像がお勧めです。</p>
      </td>
    </tr>
  </table>
  <?php
}
add_action('show_user_profile', 'add_avatar_to_user_profile');
add_action('edit_user_profile', 'add_avatar_to_user_profile');

// プロフィール画像URLを保存
function update_avatar_to_user_profile($user_id) {
  if (current_user_can('edit_user', $user_id)) {
    update_user_meta($user_id, 'uploaded_avatar', $_POST['uploaded_avatar']);
  }
}
add_action('personal_options_update', 'update_avatar_to_user_profile');
add_action('edit_user_profile_update', 'update_avatar_to_user_profile');

// プロフィール画像を変更する
function get_uploaded_user_profile_avatar($avatar, $id_or_email, $size, $default, $alt) {
  // ユーザーIDの取得処理
  $user_id = 0;
  if (is_numeric($id_or_email)) {
    $user_id = (int) $id_or_email;
  } elseif (is_string($id_or_email) && ($user = get_user_by('email', $id_or_email))) {
    $user_id = $user->ID;
  } elseif (is_object($id_or_email) && !empty($id_or_email->user_id)) {
    $user_id = (int) $id_or_email->user_id;
  }

  if ($user_id) {
    $custom_avatar_url = get_the_author_uploaded_avatar_url($user_id);
    if ($custom_avatar_url) {
      $alt = $alt ?: get_the_author_meta('display_name', $user_id);
      $avatar = "<img alt='" . esc_attr($alt) . "' src='" . esc_url($custom_avatar_url) . "' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
    }
  }
  
  return $avatar;
}
add_filter('get_avatar', 'get_uploaded_user_profile_avatar', 10, 5);

プログラムの解説

1. カスタムアバターURLの取得

◎ get_the_author_uploaded_avatar_url() 関数で、ユーザーがプロフィールに設定したカスタムアバター画像のURLを取得します。

◎ URLが設定されていない場合、Gravatarが使われます。

2. プロフィール編集画面に画像URLフィールドを追加

◎ add_avatar_to_user_profile() で、ユーザーがプロフィール画像URLを入力するためのテキストフィールドをプロフィール編集画面に追加します。

◎ ユーザーがここで画像URLを入力することで、プロフィール画像をカスタマイズできます。

3. カスタムアバターURLを保存

◎ update_avatar_to_user_profile() で、ユーザーが入力した画像URLを保存します。

◎ update_user_meta() 関数を使って、ユーザーメタデータ（uploaded_avatar フィールド）に画像URLを保存します。

4. カスタムアバター画像の表示

◎ get_uploaded_user_profile_avatar() で、ユーザーが設定したカスタム画像URLをGravatarの代わりに表示します。

◎ これにより、投稿やコメントのアバターとしてカスタム画像が優先的に使用されます。

5. フィルタの使用でカスタム画像を優先

◎ add_filter('get_avatar', 'get_uploaded_user_profile_avatar', 10, 5) を使用して、カスタム画像が存在する場合はそれを優先して表示するようにフィルタを設定します。

まとめ

このコードは、WordPressユーザーがGravatarの代わりに自分で指定したカスタムアバター画像を使えるようにするための仕組みです。プロフィール編集画面で画像URLを入力し、その画像を表示するように変更します。

ご相談フォーム

お仕事検索

キーワード検索：

お知らせTOPへ