2026年8月20日

WordPressのアバター画像をカスタムアップロードにする方法

メディア・画像

はじめに

本記事では、ユーザーが自分のプロフィール写真をカスタムでアップロードできるように設定する方法について説明します。通常のWordPressでは、アバター画像はGravatarから取得されますが、自社サーバー上の画像を使うことで、独自性とセキュリティを向上させることができます。

症状・背景

このテーマが必要になる主な場面:

自分だけのオリジナルアバター画像を使用したい場合
サイトのユーザー認証や管理機能を強化したい場合
グラタヴァが使用できなくなった場合（通信エラー等）
ユーザー画像の保存と管理を一元化したい場合

手順・設定方法

ステップ1: WordPressテーマまたはプラグインにカスタムフィールド追加

# アバター画像用のカスタムフィールドを新規作成します。
# この例では、「custom_avatar」という名前のフィールドを作成します。
add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
function my_show_extra_profile_fields($user) {
    echo '<h3>プロフィール画像</h3>';
    echo '<table class="form-table">';
    echo '<tr valign="top"><th><label for="custom_avatar">カスタムアバター</label></th>';
    echo '<td><input type="text" name="custom_avatar" id="custom_avatar" value="' . esc_attr( get_the_author_meta( 'custom_avatar', $user->ID ) ) . '" class="regular-text" /><br />';
    echo '<span class="description">URLで指定してください。</span></td>';
    echo '</tr>';
}

# 更新処理を追加します。
add_action('personal_options_update', 'my_save_extra_profile_fields');
function my_save_extra_profile_fields($user_id) {
    if (!current_user_can('edit_user', $user_id)) { return false; }
    update_usermeta( $user_id, 'custom_avatar', $_POST['custom_avatar']);
}

# ユーザープロフィールの表示にカスタムアバター画像を追加します。
add_filter('pre_get_avatar_url', 'my_pre_get_avatar_url', 10, 2);
function my_pre_get_avatar_url($avatar_url, $id_or_email) {
    if (is_object($id_or_email)) {
        $user = $id_or_email;
    } else {
        $user = get_userdata( $id_or_email );
    }
    
    // カスタムアバター画像が設定されている場合、それを使用します。
    if ($custom_avatar_url = esc_url(get_user_meta($user->ID, 'custom_avatar', true))) {
        return $custom_avatar_url;
    }

    // それ以外の場合は通常通りGravatarを取得します。
    return $avatar_url;
}

ステップ2: アバター画像のアップロード機能追加

# ファイルのアップロード処理を追加します。
add_action('show_user_profile', 'my_show_avatar_upload');
function my_show_avatar_upload($user) {
    $custom_avatar = get_the_author_meta( 'custom_avatar', $user->ID );
    echo '<h3>アバター画像のアップロード</h3>';
    echo '<p><input type="file" name="avatar_image" id="avatar_image">';
    echo '<span class="description">PNG, JPEG, GIF形式の画像をアップロードできます。</span></p>';
}

add_action('personal_options_update', 'my_save_avatar_upload');
function my_save_avatar_upload($user_id) {
    if (!current_user_can('edit_user', $user_id)) { return false; }
    
    // アップロードされたファイルがある場合、それを保存します。
    if ($_FILES['avatar_image']['name'] != '') {
        $filename = $_FILES['avatar_image']['name'];
        $upload_dir = wp_upload_dir();
        move_uploaded_file($_FILES['avatar_image']['tmp_name'], $upload_dir['path'] . '/' . $filename);
        
        // アップロードされた画像のURLを保存します。
        update_usermeta( $user_id, 'custom_avatar', $upload_dir['baseurl'] . '/' . $filename );
    }
}

ステップ3: 管理画面にカスタムアバター設定ページ追加

# ユーザープロフィールページのナビゲーションに「カスタムアバター」リンクを追加します。
add_filter('user_profile_navigation', 'my_add_custom_avatar_link');
function my_add_custom_avatar_link($nav) {
    $nav['custom_avatar'] = array(
        'name' => __('カスタムアバター'),
        'href' => admin_url( 'profile.php?page=custom-avatar')
    );
    return $nav;
}

# カスタムページのコンテンツを追加します。
add_action('show_user_profile', 'my_custom_avatar_page');
function my_custom_avatar_page($user) {
    if (isset($_GET['page']) && $_GET['page'] == 'custom-avatar') {
        echo '<h2>カスタムアバター</h2>';
        $custom_avatar = get_the_author_meta( 'custom_avatar', $user->ID );
        
        // カスタムアバターが設定されている場合、それを表示します。
        if ($custom_avatar) {
            echo '<img src="' . esc_url($custom_avatar) . '" alt="カスタムアバター" />';
        } else {
            echo 'カスタムアバターはまだ設定されていません。';
        }
    }
}

ステップ4: ユーザー画像のセキュリティと管理

# アップロードされた画像ファイルを適切にチェックします。
function my_avatar_image_upload_check($file) {
    $file['type'] = wp_check_filetype(basename($file['name']), null);

    if (!in_array($file['type'], array('image/jpeg', 'image/png', 'image/gif'))) {
        return new WP_Error('invalid_file_type', __('許可されていないファイルタイプです。'));
    }

    // 画像の最大サイズを設定します。
    $max_size = 2 * 1024 * 1024; // 2MB
    if ($file['size'] > $max_size) {
        return new WP_Error('image_file_too_large', __('ファイルは2MB以下にしてください。'));
    }

    return $file;
}
add_filter('wp_handle_upload_prefilter', 'my_avatar_image_upload_check');

注意事項

各手順がWordPressのテーマやプラグインの機能と競合しないように注意してください。
アップロードされた画像ファイルは適切なセキュリティチェックを通過すべきです。
カスタムアバター設定ページのURLは外部公開には向きません。管理ユーザーのみがアクセスできるよう、適切な権限制御を行う必要があります。
保存する画像データ量に注意してください。大量の画像データはサーバー負荷増大の原因となります。

まとめ

1. カスタムフィールド追加: ユーザープロフィールページにアバター画像用のフィールドを追加します。

2. アップロード機能: アップロードしたファイルをサーバーに保存し、そのURLをユーザー情報として保存します。

3. 設定ページ追加: 管理画面にカスタムアバター設定ページを追加します。

4. セキュリティチェック: アップロードされた画像ファイルの種類とサイズを確認します。

Post Views: 28