Gravatar头像失效

万花网早就失效了，加上万花本身bug太多，一直以为是主题本身问题，后面发现换了系统2025主题，还是同样存在问题，所以前端用户中心加头像功能势在必行，当然也可以全部使用默认头像。

// 替换所有头像为本地默认头像（增加文件存在性检查）
function custom_local_avatar( $avatar ) {
$local_avatar_path = get_stylesheet_directory() . ‘/images/avatar.png’;
if (!file_exists($local_avatar_path)) {
return $avatar; // 文件不存在则使用默认头像
}

$local_avatar_url = get_stylesheet_directory_uri() . ‘/images/avatar.png’;
$avatar = ‘<img alt=”avatar” src=”‘ . esc_url( $local_avatar_url ) . ‘” class=”avatar avatar-60 photo” height=”60″ width=”6
0″ style=”border-radius: 50%;” loading=”lazy” />’;

return $avatar;
}
add_filter( ‘get_avatar’, ‘custom_local_avatar’, 10, 5 );

当然这种方法会让整个网站所有用户的头像都调用主题目录文件夹/images/avatar.png里面的内容。如果觉着不好看，那就自己上传了。

自定义前端用户头像

机制就是如果前端用户上传头像了，采用上传过的头像，如果是未登录用户或者前端用户没有上传过头像，就显示默认头像/images/avatar.png。

那么看看是怎么组成的，首先是前端用中心/page-user-center里面的片段内容：

<div class=”-avatar” onclick=”document.getElementById(‘avatar-upload’).click()”>
<?php
echo get_avatar($current_user->ID, 70, ”, ”, [
‘class’ => ‘avatar avatar-60 photo’,
‘style’ => ‘border-radius: 50%;’,
‘loading’ => ‘lazy’
]);
?>
<i class=”iconfont” id=”change-avatar-icon”>&#xe600;</i>
<input
type=”file”
id=”avatar-upload”
accept=”image/*”
style=”position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2;”
onchange=”handleAvatarUpload(this)”
>
</div>

我用的是iconfont的图标，以前有写过关于怎么引用，就不多赘述了。下面就是js部分了。

// 从 PHP 输出当前用户 ID 和 nonce
var currentUserID = <?php echo get_current_user_id(); ?>;
var userAvatarNonce = ‘<?php echo wp_create_nonce(“user_avatar_nonce”); ?>’;

function handleAvatarUpload(input) {
if (input.files && input.files[0]) {
const file = input.files[0];
alert(‘✅ 已选择：’ + file.name);

const formData = new FormData();
formData.append(‘avatar’, file); // 文件字段名必须是 ‘avatar’
formData.append(‘action’, ‘update_user_avatar’); // 必须匹配 PHP 的 action 名
formData.append(‘nonce’, userAvatarNonce); // 必须匹配 check_ajax_referer 的 name
formData.append(‘user_id’, currentUserID); // 提供 user_id

fetch(‘<?php echo admin_url(“admin-ajax.php”); ?>’, {
method: ‘POST’,
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert(‘🎉 ‘ + data.data.message);
// 更新头像图片（加时间戳防止缓存）
const img = document.querySelector(‘.-avatar img’);
if (img) {
img.src = data.data.avatarUrl + ‘?v=’ + Date.now();
}
} else {
alert(‘❌ 上传失败：’ + (data.data || data.message));
}
})
.catch(error => {
console.error(‘Error:’, error);
alert(‘❌ 网络错误：’ + error.message);
});
}
}

因为在js中发送了action=upload_user_avatar，那 PHP 必须监听它。所有需要再functions.php里面添加相关函数

// 登录用户可用
add_action(‘wp_ajax_upload_user_avatar’, ‘handle_user_avatar_upload’);

// 如果想让未登录用户也能上传（不推荐），加上这行
// add_action(‘wp_ajax_nopriv_upload_user_avatar’, ‘handle_user_avatar_upload’);

function handle_user_avatar_upload() {
// 验证 nonce
if (!wp_verify_nonce($_POST[‘nonce’], ‘upload_avatar’)) {
wp_send_json_error(‘安全验证失败’);
}

// 检查是否有文件
if (!isset($_FILES[‘avatar’]) || !$_FILES[‘avatar’][‘size’]) {
wp_send_json_error(‘未收到有效的文件’);
}

// 使用 WordPress 的上传函数
require_once(ABSPATH . ‘wp-admin/includes/image.php’);
require_once(ABSPATH . ‘wp-admin/includes/file.php’);
require_once(ABSPATH . ‘wp-admin/includes/media.php’);

$attachment_id = media_handle_upload(‘avatar’, 0);

if (is_wp_error($attachment_id)) {
wp_send_json_error($attachment_id->get_error_message());
}

// 获取头像 URL
$url = wp_get_attachment_image_url($attachment_id, ‘thumbnail’);

// 可选：保存为用户头像（需自定义字段）
update_user_meta(get_current_user_id(), ‘custom_avatar’, $url);

// 返回成功
wp_send_json_success([
‘url’ => $url,
‘attachment_id’ => $attachment_id
]);
}

至此用户自定义头像功能就大功告成了。

可以弃用Gravatar头像了。

// ================
function xiaopiblog_gravatar_url($url) {
$sources = array(
‘www.gravatar.com’,
‘0.gravatar.com’,
‘1.gravatar.com’,
‘2.gravatar.com’,
);
return str_replace($sources, ‘cn.gravatar.com’, $url);
}
add_filter(‘get_avatar_url’, ‘xiaopiblog_gravatar_url’);

删除注释它都可以。

生命不止，折腾不休！