給WordPress緩存在本地的gravatar頭像增加Alt屬性

編輯：狂族晨曦 來源：WordPress技巧 日期：2016-04-27 閱讀： 4,259 次 7 條評論 » 百度已收錄

看過SEO教程的朋友都知道，圖片優化指的是給圖片標簽增加Alt屬性。Alt屬性的作用是當圖片無法顯示的時候會以文字的形式顯示出設置的Alt內容，這是給人看的。而對于SEO而言，它可以令搜索引擎更正確的認識你的圖片，進而有機會得到索引的機會，即在百度圖片可以搜索相關詞顯示出你的圖片，這就有可能為你的網站增加流量了。對于一些確實沒什么意義的圖片，最好也不要省略，而應該留空，即alt=''。

先森在博客龍笑天下：給 WordPress 頭像加上 Alt 標簽 那里看到了提醒給評論頭像增加alt屬性的文章，問了下，果然先森的博客上也沒有加alt屬性。所以回到電腦旁先森果斷又開始折騰了。

首先看了一下，先森的博客上其實不是沒有加Alt屬性，只是加了，但沒有設置值，也就是空。這主要是因為先森在調用的時候沒有加上alt參數。

alt為空

但是既然注意到這里了，那就還是給它加上些內容吧。上圖就可以看出，先森的Gravatar頭像都是緩存到本地了的，這是先森為了加快訪問速度的，估計很多站長都用了。

添加Alt屬性

龍笑天下博主提出了兩種修改方式，一種是將調用頭像函數參數寫全，另一種是在functions.php中添加一個新的鉤子。

將調用頭像函數的參數寫全這一種，需要調用頭像的地方有兩處，而是填寫評論上方的那個默認頭像，二是已經提交的評論頭像，這樣添加起來就要加兩次，有點麻煩，先森不考慮。

在functions.php添加新的鉤子這種，我們已經使用了Gravatar頭像緩存本地的頭像，所以沒有必要再新加鉤子了，在原有的基礎上修改即可:

function fa_cache_avatar($avatar, $id_or_email, $size, $default, $alt)
{
        if ( is_user_logged_in() ){$alt = '博主的Gravatar 頭像';}
	else{$alt = 'Gravatar 頭像';}
	$avatar = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar);
    $tmp = strpos($avatar, 'http');
    $url = get_avatar_url( $id_or_email, $size ) ;
    $url = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $url);
    $avatar2x = get_avatar_url( $id_or_email, ( $size * 2 ) ) ;
    $avatar2x = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar2x);
    $g = substr($avatar, $tmp, strpos($avatar, "'", $tmp) - $tmp);
    $tmp = strpos($g, 'avatar/') + 7;
    $f = substr($g, $tmp, strpos($g, "?", $tmp) - $tmp);
    $w = home_url();
    $e = ABSPATH .'avatar/'. $size . '*'. $f .'.jpg';
    $e2x = ABSPATH .'avatar/'. ( $size * 2 ) . '*'. $f .'.jpg';
    $t = 1209600; //緩存更新時間
    if ( (!is_file($e) || (time() - filemtime($e)) > $t) && (!is_file($e2x) || (time() - filemtime($e2x)) > $t ) ) { 
        copy(htmlspecialchars_decode($g), $e);
        copy(htmlspecialchars_decode($avatar2x), $e2x);
    } else { $avatar = $w.'/avatar/'. $size . '*'.$f.'.jpg';
        $avatar2x = $w.'/avatar/'. ( $size * 2) . '*'.$f.'.jpg';
        if (filesize($e) < 1000) copy($w.'/avatar/default.jpg', $e);
        if (filesize($e2x) < 1000) copy($w.'/avatar/default.jpg', $e2x);
        $avatar = "<img alt='{$alt}' src='{$avatar}' srcset='{$avatar2x}' class='avatar avatar-{$size} photo' id='real-time-gravatar' height='{$size}' width='{$size}' />";
    }
    return $avatar;
}
add_filter('get_avatar', 'fa_cache_avatar',1,5);

如果有和先森已經，開了全站CDN，并使用WP Super Cache設置了“讓已知用戶匿名使他們瀏覽的內容是緩存文件”的博主，上面這種設置可能不會識別出博主，所以可以將上面的代碼改成下面這種：

function fa_cache_avatar($avatar, $id_or_email, $size, $default, $alt)
{
    if ( is_user_logged_in() ){$alt = '博主的Gravatar 頭像';}
	else if ( $id_or_email == '這里改成博主郵箱' ){$alt = '博主的Gravatar 頭像';}
	else{$alt = 'Gravatar 頭像';}
	$avatar = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar);
    $tmp = strpos($avatar, 'http');
    $url = get_avatar_url( $id_or_email, $size ) ;
    $url = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $url);
    $avatar2x = get_avatar_url( $id_or_email, ( $size * 2 ) ) ;
    $avatar2x = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar2x);
    $g = substr($avatar, $tmp, strpos($avatar, "'", $tmp) - $tmp);
    $tmp = strpos($g, 'avatar/') + 7;
    $f = substr($g, $tmp, strpos($g, "?", $tmp) - $tmp);
    $w = home_url();
    $e = ABSPATH .'avatar/'. $size . '*'. $f .'.jpg';
    $e2x = ABSPATH .'avatar/'. ( $size * 2 ) . '*'. $f .'.jpg';
    $t = 1209600; //緩存更新時間
    if ( (!is_file($e) || (time() - filemtime($e)) > $t) && (!is_file($e2x) || (time() - filemtime($e2x)) > $t ) ) { 
        copy(htmlspecialchars_decode($g), $e);
        copy(htmlspecialchars_decode($avatar2x), $e2x);
    } else { $avatar = $w.'/avatar/'. $size . '*'.$f.'.jpg';
        $avatar2x = $w.'/avatar/'. ( $size * 2) . '*'.$f.'.jpg';
        if (filesize($e) < 1000) copy($w.'/avatar/default.jpg', $e);
        if (filesize($e2x) < 1000) copy($w.'/avatar/default.jpg', $e2x);
        $avatar = "<img alt='{$alt}' src='{$avatar}' srcset='{$avatar2x}' class='avatar avatar-{$size} photo' id='real-time-gravatar' height='{$size}' width='{$size}' />";
    }
    return $avatar;
}
add_filter('get_avatar', 'fa_cache_avatar',1,5);

使用上面代碼時，記得修改第4行的郵箱地址。

添加title屬性

其實也可以順便把圖片的title屬性加上了，這個簡單，將上面的倒數幾行的$avtar的內容加上就行了，即：

$avatar = "<img alt='{$alt}' title='{$alt}' src='{$avatar}' srcset='{$avatar2x}' class='avatar avatar-{$size} photo' id='real-time-gravatar' height='{$size}' width='{$size}' />";

看看最終的效果：

最終的效果

最后

生命不止，折騰不休，WordPress就是折騰嘛。