默認(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)和代碼有任何問題，歡迎在評論中提出，我們一起討論！