默认情况下,WordPress 使用自己的第三方网站 “Gravatar“来制作用户照片(头像)。不过,使用第三方服务制作用户头像有很多缺点(特别是在国内)。在本文中,我将向你展示如何在 WordPress 中将媒体库中的图片设置为用户头像。
在本教程中,我将主要关注用户头像(而不是评论者),并解释为什么 Gravatar 的种种缺点,以及如何在本地托管自己的用户头像。
用户头像在哪里显示?
在WordPress中,用户头像主要在以下几个地方显示,有些主题和插件还会调用用户头像显示一些特定信息。
- WordPress 管理工具栏(核心)
- 用户仪表板(核心)
- 头像古腾堡区块(核心)
- 文章作者简介(取决于主题)
- 文章元标题(取决于主题)
- 会员插件
- 账户页面(如 WooCommerce 账户页面)
- 显示网站作者的网格(如Total 主题中的用户网格元素)
为什么不使用 Gravatar 制作用户头像?
不使用 Gravatar 的主要是因为它会增加从第三方网站获取和显示头像的额外工作量。这会减慢页面加载速度,降低谷歌页面速度得分。在实时网站上显示用户头像时,这主要是前端的问题。当然,加快后台速度总是有好处的!
但是,还有其他一些原因,你可能想从 WordPress 媒体库中使用本地托管的头像,而不是 Gravatar:
- 网站加载时间较慢。
- 页面速度分数较低。
- 如果 Gravatar 服务出现故障,用户头像就无法显示了。
- 对头像格式和分辨率的控制比较少。
- 更难设置和/或更新头像。
如何使用媒体库图片作为用户头像
在 WordPress 中使用自己的图片作为用户头像非常简单,我们可以通过几种方法来修改头像输出,但我个人推荐使用pre_get_avatar_data
钩子,这样你就可以在 WordPress 向Gravatar
.com 提出任何请求之前返回你的自定义 URL。
下面是一个示例代码段,展示了如何使用媒体库中的头像来修改用户的头像:
/**
* Return a media library image for a user's avatar.
*
* @see https://www.wpexplorer.com/how-to-set-media-image-for-user-avatar-wordpress/
*/
add_filter( 'pre_get_avatar_data', static function( $data, $id_or_email ) {
// Process the user identifier.
$user = false;
if ( is_numeric( $id_or_email ) ) {
$user = get_user_by( 'id', absint( $id_or_email ) );
} elseif ( $id_or_email instanceof WP_User ) {
$user = $id_or_email;
} elseif ( $id_or_email instanceof WP_Post ) {
$user = get_user_by( 'id', (int) $id_or_email->post_author );
} elseif ( $id_or_email instanceof WP_Comment && is_avatar_comment_type( get_comment_type( $id_or_email ) ) ) {
if ( is_numeric( $id_or_email->user_id ) ) {
$user = get_user_by( 'id', (int) $id_or_email->user_id );
} elseif( is_email( $id_or_email->user_id ) ) {
$user = get_user_by( 'email', $id_or_email->user_id );
}
}
// Change the avatar for the user with an ID of 1 (generally the main site admin).
if ( $user && 1 === (int) $user->ID ) {
// IMPORTANT - Make sure to change 'YOUR_ATTACHMENT_ID' with the image ID
// You want to use for this user's avatar.
$data['url'] = wp_get_attachment_url( 'YOUR_ATTACHMENT_ID' );
}
// Return avatar data.
return $data;
}, 10, 2 );
这段代码唯一有点冗长的地方是我们需要解析$id_or_email
变量的值来获取用户。这是因为 WordPress 允许通过 ID 或电子邮件获取头像数据,而没有任何全局函数可以用来解析这些数据。
在这个特定的代码段中,我们只修改了 ID 为 1 的用户的头像 URL。 另外,请注意我是如何使用 “YOUR_ATTACHMENT_ID “作为我们要从媒体库中抓取的图片的值的。请确保将此值修改为实际的图片 ID。
如何查找用户 ID?
要找到要在代码段中使用的用户 ID,只需登录 WordPress 网站,进入 “用户 “仪表板。点击你要更改头像的用户,进入用户编辑界面。现在你可以在 URL 中找到 ID,格式如下:your-site.com/wp-admin/user-edit.php?user_id={ID}。
如何查找图片 ID?
要查找存储在 WordPress 网站上的任何图片的 ID,请进入媒体库编辑您要使用的图片。您将在 URL 中找到 ID,因为 URL 的格式如下:your-site.com/wp-admin/post.php?post={ID}
The
如何在 “用户编辑 “屏幕中添加设置,以设置自定义头像图片
我上面分享的代码段非常适合对特定用户进行单项编辑。这对于你只修改一个或几个用户头像的小型网站来说是没有问题的。在用户较多的网站上,你可能想在 WP 管理中添加一个字段,这样你就可以定义用户的头像,而不必再弄乱代码。
下面的代码段在 WordPress 的用户编辑界面中添加了一个名为 “自定义头像 “的新字段,并会在设置该字段时修改头像。该字段将允许你输入媒体库中图片的 ID 或你希望用作用户头像的任何图片的完整 URL。
/**
* Custom User Avatars.
*
* @see https://www.wpexplorer.com/how-to-set-media-image-for-user-avatar-wordpress/
*/
class Wenprise_Custom_User_Avatars {
/**
* Constructor.
*/
public function __construct() {
add_filter( 'user_contactmethods', [ $this, 'filter_user_contactmethods' ] );
add_filter( 'pre_get_avatar_data', [ $this, 'filter_pre_get_avatar_data' ], 10, 2 );
}
/**
* Hooks into the "user_contactmethods" filter.
*/
public function filter_user_contactmethods( $methods ) {
$methods['custom_avatar'] = esc_html__( 'Custom Avatar', 'text_domain' );
return $methods;
}
/**
* Hooks into the "pre_get_avatar_data" filter.
*/
public function filter_pre_get_avatar_data( $data, $id_or_email ) {
// Process the user identifier.
$user = false;
if ( is_numeric( $id_or_email ) ) {
$user = get_user_by( 'id', absint( $id_or_email ) );
} elseif ( $id_or_email instanceof WP_User ) {
$user = $id_or_email;
} elseif ( $id_or_email instanceof WP_Post ) {
$user = get_user_by( 'id', (int) $id_or_email->post_author );
} elseif ( $id_or_email instanceof WP_Comment && is_avatar_comment_type( get_comment_type( $id_or_email ) ) ) {
if ( is_numeric( $id_or_email->user_id ) ) {
$user = get_user_by( 'id', (int) $id_or_email->user_id );
} elseif( is_email( $id_or_email->user_id ) ) {
$user = get_user_by( 'email', $id_or_email->user_id );
}
}
// Check for and assign custom user avatars.
if ( $user && $custom_avatar = get_user_meta($user->ID, 'custom_avatar', true ) ) {
if ( is_numeric( $custom_avatar ) ) {
$data['url'] = esc_url( wp_get_attachment_url( $custom_avatar ) );
} else {
$data['url'] = esc_url( $custom_avatar );
}
}
// Return avatar data.
return $data;
}
}
new Wenprise_Custom_User_Avatars;
修改后的结果如下:
在本教程中,自定义头像字段是一个简单的文本字段,因为 WordPress 没有本地媒体库图片选择字段。如果你愿意,可以在网站上加载一个额外的 javascript 文件,在字段旁边添加一个选择按钮。这会让事情变得更加复杂,在我看来,没有这个必要,这样会使代码变得臃肿。
summarize
在 WordPress 中使用自己的媒体库图片作为用户头像是个好主意,值得强烈推荐。可惜的是,WordPress 本身并不具备这种功能。我相信这是为了鼓励更多的人使用他们的 Gravatar 服务。
幸运的是,使用一点代码就可以非常容易地设置自己的用户资料照片(头像),就像我在上面向你展示的那样。如果您对本文中的观点和代码有任何问题,欢迎在评论中提出,我们一起讨论!