默認(rèn)情況下,WordPress 使用自己的第三方網(wǎng)站 “Gravatar“來制作用戶照片(頭像)。不過,使用第三方服務(wù)制作用戶頭像有很多缺點(diǎn)(特別是在國內(nèi))。在本文中,我將向你展示如何在 WordPress 中將媒體庫中的圖片設(shè)置為用戶頭像。
在本教程中,我將主要關(guān)注用戶頭像(而不是評論者),并解釋為什么 Gravatar 的種種缺點(diǎn),以及如何在本地托管自己的用戶頭像。
用戶頭像在哪里顯示?
在WordPress中,用戶頭像主要在以下幾個地方顯示,有些主題和插件還會調(diào)用用戶頭像顯示一些特定信息。
- WordPress 管理工具欄(核心)
- 用戶儀表板(核心)
- 頭像古騰堡區(qū)塊(核心)
- 文章作者簡介(取決于主題)
- 文章元標(biāo)題(取決于主題)
- 會員插件
- 賬戶頁面(如 WooCommerce 賬戶頁面)
- 顯示網(wǎng)站作者的網(wǎng)格(如Total 主題中的用戶網(wǎng)格元素)
為什么不使用 Gravatar 制作用戶頭像?
不使用 Gravatar 的主要是因?yàn)樗鼤黾訌牡谌骄W(wǎng)站獲取和顯示頭像的額外工作量。這會減慢頁面加載速度,降低谷歌頁面速度得分。在實(shí)時(shí)網(wǎng)站上顯示用戶頭像時(shí),這主要是前端的問題。當(dāng)然,加快后臺速度總是有好處的!
但是,還有其他一些原因,你可能想從 WordPress 媒體庫中使用本地托管的頭像,而不是 Gravatar:
- 網(wǎng)站加載時(shí)間較慢。
- 頁面速度分?jǐn)?shù)較低。
- 如果 Gravatar 服務(wù)出現(xiàn)故障,用戶頭像就無法顯示了。
- 對頭像格式和分辨率的控制比較少。
- 更難設(shè)置和/或更新頭像。
如何使用媒體庫圖片作為用戶頭像
在 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 );
這段代碼唯一有點(diǎn)冗長的地方是我們需要解析$id_or_email變量的值來獲取用戶。這是因?yàn)?WordPress 允許通過 ID 或電子郵件獲取頭像數(shù)據(jù),而沒有任何全局函數(shù)可以用來解析這些數(shù)據(jù)。
在這個特定的代碼段中,我們只修改了 ID 為 1 的用戶的頭像 URL。 另外,請注意我是如何使用 “YOUR_ATTACHMENT_ID “作為我們要從媒體庫中抓取的圖片的值的。請確保將此值修改為實(shí)際的圖片 ID。
如何查找用戶 ID?
要找到要在代碼段中使用的用戶 ID,只需登錄 WordPress 網(wǎng)站,進(jìn)入 “用戶 “儀表板。點(diǎn)擊你要更改頭像的用戶,進(jìn)入用戶編輯界面?,F(xiàn)在你可以在 URL 中找到 ID,格式如下:your-site.com/wp-admin/user-edit.php?user_id={ID}。
如何查找圖片 ID?
要查找存儲在 WordPress 網(wǎng)站上的任何圖片的 ID,請進(jìn)入媒體庫編輯您要使用的圖片。您將在 URL 中找到 ID,因?yàn)?URL 的格式如下:your-site.com/wp-admin/post.php?post={ID}。
如何在 “用戶編輯 “屏幕中添加設(shè)置,以設(shè)置自定義頭像圖片
我上面分享的代碼段非常適合對特定用戶進(jìn)行單項(xiàng)編輯。這對于你只修改一個或幾個用戶頭像的小型網(wǎng)站來說是沒有問題的。在用戶較多的網(wǎng)站上,你可能想在 WP 管理中添加一個字段,這樣你就可以定義用戶的頭像,而不必再弄亂代碼。
下面的代碼段在 WordPress 的用戶編輯界面中添加了一個名為 “自定義頭像 “的新字段,并會在設(shè)置該字段時(shí)修改頭像。該字段將允許你輸入媒體庫中圖片的 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;
修改后的結(jié)果如下:

在本教程中,自定義頭像字段是一個簡單的文本字段,因?yàn)?WordPress 沒有本地媒體庫圖片選擇字段。如果你愿意,可以在網(wǎng)站上加載一個額外的 javascript 文件,在字段旁邊添加一個選擇按鈕。這會讓事情變得更加復(fù)雜,在我看來,沒有這個必要,這樣會使代碼變得臃腫。
總結(jié)
在 WordPress 中使用自己的媒體庫圖片作為用戶頭像是個好主意,值得強(qiáng)烈推薦??上У氖牵琖ordPress 本身并不具備這種功能。我相信這是為了鼓勵更多的人使用他們的 Gravatar 服務(wù)。
幸運(yùn)的是,使用一點(diǎn)代碼就可以非常容易地設(shè)置自己的用戶資料照片(頭像),就像我在上面向你展示的那樣。如果您對本文中的觀點(diǎn)和代碼有任何問題,歡迎在評論中提出,我們一起討論!


