讓 Wordpress 站長頭像使用 Facebook 臉書的大頭貼

因為鸚鵡把 WordPress 的內建迴響關閉，改使用 Facebook 的留言框 (Comments Plugin)，所以開始想把那張預設的站長大頭貼換掉，卻發現 WordPress 是連結 Gravatar 服務，要更換就得註冊 Gravatar 帳號。換臉書照片又得換一次 Gravatar 的，想到就麻煩。

不想透過外掛的方式，就直接上網搜尋了一下，是有找到一些修改方法可以使用本地圖片或其他指定圖片，但一樣還是得要兩邊都更新。

所以稍微研究了一下 WordPress 的 Hook 機制，也看了 get_avatar() 的說明和原始碼，搞懂後寫了一小段程式碼來解決。修改完成後 WordPress 上會直接顯示自己臉書的大頭貼，在 Facebook 上更新大頭貼照後，也會同步顯示最新的照片。

事前準備：

自己的 Facebook ID
連結到 findmyfbid.com 填上自己的臉書頁面網址，再按下 Find numeric ID 按鈕
自己登入 WordPress 的帳號登記的 E-Mail，管理界面的帳號中可以找到
上面的帳號在資料庫中的 ID，這個鸚鵡目前只知道要從資料庫中查看(通常是1)

開啟使用的佈景主題中的 functions.php 檔案，在檔案最後新增以下程式
將 @EMAIL@、＠ID＠、＠FACEBOOK_ID＠分別置換的您的 E-Mail、帳號ID、Facebook ID

function get_avatar_facebook ($avatar, $id_or_email, $args) {
	if( ($id_or_email == "@EMAIL@" || $id_or_email == @ID@) && empty($args['default']) ) {
		$fbId = '@FACEBOOK_ID@';
		$URL = 'http://graph.facebook.com/%s/picture?width=%d&height=%d';
		$url = sprintf( $URL, $fbId, $args['width'], $args['height'] );
		$url2x = sprintf( $URL, $fbId, $args['width'] * 2, $args['height'] * 2 );
		$url3x = sprintf( $URL, $fbId, $args['width'] * 3, $args['height'] * 3 );
		if( is_null($args['class']) ) $args['class'] = array( 'avatar', 'avatar-'.$args['size'], 'photo' );
		return sprintf(
			"<img alt='%s' src='%s' srcset='%s, %s' class='%s' height='%d' width='%d' %s/>",
			esc_attr( $args['alt'] ),
			esc_url( $url ),
			esc_attr( "$url2x 2x" ),
			esc_attr( "$url3x 3x" ),
			esc_attr( is_array($args['class'] ) ? join( ' ', $args['class'] ) : $args['class'] ),
			$args['height'],
			$args['width'],
			$args['extra_attr']
		);
	}
	return $avatar;
}
add_filter('pre_get_avatar', 'get_avatar_facebook', 1, 3);

function get_avatar_facebook ($avatar, $id_or_email, $args) {

if( ($id_or_email == "@EMAIL@" || $id_or_email == @ID@) && empty($args['default']) ) {

$fbId = '@FACEBOOK_ID@';

$URL = 'http://graph.facebook.com/%s/picture?width=%d&height=%d';

$url = sprintf( $URL, $fbId, $args['width'], $args['height'] );

$url2x = sprintf( $URL, $fbId, $args['width'] * 2, $args['height'] * 2 );

$url3x = sprintf( $URL, $fbId, $args['width'] * 3, $args['height'] * 3 );

if( is_null($args['class']) ) $args['class'] = array( 'avatar', 'avatar-'.$args['size'], 'photo' );

return sprintf(

"<img alt='%s' src='%s' srcset='%s, %s' class='%s' height='%d' width='%d' %s/>",

esc_attr( $args['alt'] ),

esc_url( $url ),

esc_attr( "$url2x 2x" ),

esc_attr( "$url3x 3x" ),

esc_attr( is_array($args['class'] ) ? join( ' ', $args['class'] ) : $args['class'] ),

$args['height'],

$args['width'],

$args['extra_attr']

);

}

return $avatar;

}

add_filter('pre_get_avatar', 'get_avatar_facebook', 1, 3);

存檔上傳，應該就可已將 WordPress 全站(包含管理界面)的大頭貼換成臉書的了