WordPress自动给文章添加图片 alt 和 title 属性两种方法

先说两者属性然后站长再考虑是否为自己站点文章图片添加该属性。

alt属性：

百度蜘蛛爬取页面图片-识别该图片，没有alt属性，蜘蛛就无法获取该图片信息，还有一个作用就是当网站网络慢，页面加载不出来，加载失败的时候，图片上面就会显示alt的信息。

比如：<img src="/加载失败的图片"alt="这是一张加载失败的图片" >

用户就算不会看到图片，也会看到文字提示这是一张加载失败的图片。

图片的alt属性相对来说对用户和蜘蛛都是非常友好的，建议站长加上alt属性。

title属性：

用户鼠标滑到有该属性的图片上，显示title的属性值。

比如：<img src="/图片路径"alt="这是一张图片"title="这是一张美图" >

用户鼠标放到了上面就会显示  这是一张美图。

图片的title属性，看使用图片地方加上，比如明显的知道这是一张什么图片，就没有多大必要去加title属性了，如果用户不清楚是什么图片，那么是很有必要加上title属性的。

操作方法：

选择下面任意一种方法的代码放入到 /wp-content/themes/主题/functions.php文件中-编辑完以后保存。

下面说第一种方法：

//给文章图片自动添加alt和title属性

function image_alt_title($content){

global $post;

preg_match_all('/<img (.*?)\/>/', $content, $images);

if(!is_null($images)) {

foreach($images[1] as $index => $value) {

$new_img = str_replace('<img', '<img alt="'.get_the_title().'-'.get_bloginfo('name').'"'.'title="'.get_the_title().'-'.get_bloginfo('name').'"', $images[0][$index]);

$content = str_replace($images[0][$index], $new_img, $content);

}

}

return $content;

}

add_filter('the_content', 'image_alt_title', 99999);

这种方法是以文章标题来作为alt和title的属性值。

下面说第二种方法：（推荐使用）

//自动添加图片 alt 和 title 属性

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.'-第'.$j.'张" title="'.$imgtitle.'-第'.$j.'张" ';
$url = rtrim($url,'>');
$url .= $altURL.'>';
$imgalttitle = str_replace($tag,$url,$imgalttitle);
}
}
}
return $imgalttitle;
}
add_filter( 'the_content','image_alttitle');

 

这种方法是以文章标题+文章的第几张图片作为alt和title的属性值，相对用户体验更友好，但是这种方法只是针对img没有alt属性和title属性才能生效，如果alt，title值为空也是无效的。

我们可以查看我们之前发布的，怎么去除alt属性来解alt属性值为空的情况。

WordPress去掉文章正文中图片width、height、alt标签属性