WordPress純代碼自動爲圖片添加Alt和Title屬性


Alt是HTML標簽的屬性,而Title既是HTML標簽,又是HTML屬性。
在圖像標簽IMG中,除了常用的寬度Width和高度Height屬性之外,還有兩個比較重要並且也會用到的屬性,就是Alt和Title,都是用來顯示圖片內容具體信息的,但是這兩個屬性也有不同的地方。
Title作爲標簽時,網頁的標題是寫在這對標簽之內的。Title作爲屬性時,可以爲元素提供額外說明信息。例如,給超鏈接標簽A添加了Title屬性,Title用來給鏈接文字或普通文字提示的。把鼠標移動到該鏈接上面,就會顯示Title的內容,以達到提示的效果。
Alt屬性只能用在IMG、Area和Input元素中,用于網頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息。Alt是圖片的一個屬性,相當于是在告訴搜索引擎這張圖片說的是什麽,這個對于SEO優化有一定的作用。
爲了更好地SEO優化,一般會對圖片添加Alt和Title屬性,但手動一個一個添加比較麻煩,而且圖片Alt和Title的屬性一般來說都是標題,所以使用代碼讓WordPress自動爲圖片添加Alt和Title屬性,是比較省事的一個辦法。
將下面的代碼添加到您所使用主題的functions.php文件最後一個?>後面即可實現自動爲WordPress站點圖片添加Alt和Title屬性。

/**
    *自動添加圖片 alt 和 title 屬性 | 格林尼治源碼 wvw.uttx.me
*/
function image_alttitle( $imgalttitle ){
        global $post;
        $category = get_the_category();
        $flname=$category[0]->cat_name;
        $btitle = get_bloginfo();
        $imgtitle = $post->post_title;
        $imgUrl = "<img\s[^>]*src=(\"??)([^\" >]*?)\\1[^>]*>";
        if(preg_match_all("/$imgUrl/siU",$imgalttitle,$matches,PREG_SET_ORDER)){
                if( !empty($matches) ){
                        for ($i=0; $i < count($matches); $i++){
                                $tag = $url = $matches[$i][0];
                                $j=$i+1;
                                $judge = '/title=/';
                                preg_match($judge,$tag,$match,PREG_OFFSET_CAPTURE);
                                if( count($match) < 1 ) $altURL = ' alt="'.$imgtitle.' '.$flname.' 第'.$j.'張" title="'.$imgtitle.' '.$flname.' 第'.$j.'張-'.$btitle.'" '; $url = rtrim($url,'>');
                                $url .= $altURL.'>';
                                $imgalttitle = str_replace($tag,$url,$imgalttitle);
                        }
                }
        }
        return $imgalttitle;
}
add_filter( 'the_content','image_alttitle');

關于Alt和Title屬性
Title屬性:主要針對用戶,當用戶的鼠標放在圖片上的時候,顯示的文字就是Title屬性。
Alt屬性:主要針對搜索引擎,也針對用戶,在圖片加載失敗的時候,會顯示Alt屬性中的內容。另外,Alt屬性是搜索引擎爬蟲識別圖片的唯一方式。
一個完整優化過的圖片應該同時具有Title屬性和Alt屬性,而且Alt屬性中最好帶有文章的關鍵字。

未經允許不得轉載:格林尼治源碼 » WordPress純代碼自動爲圖片添加Alt和Title屬性

赞 (0) 打賞

覺得文章有用就打賞一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏