做 SEO 优化时,给图片加上 alt 属性是很有必要的,于是网上找了方法,很多方法没有判断功能,都是无论你是否添加 alt 属性就直接强制替换并启用文章标题为图片 alt 内容,这样显然不是很好。终于在某一天找到了一个好的方法,使用此代码后,你无需担心是否遗漏 alt 属性,并且可以随自己的喜好添加个性的 alt 属性。
1.判断并自动添加图片 Alt 属性、强制添加图片 Title 属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
/**
* WordPress判断并自动添加图片alt和title属性
*
*/
/* 智能判断添加图片alt属性 来自 @缙哥哥的博客*/
functionlxtx_image_alt($imgalt){
global$post;
$title=$post->post_title;
$imgUrl=“<imgs[^>]*src=(“??)([^” >]*?)\1[^>]*>”;
if(preg_match_all(“/$imgUrl/siU”,$imgalt,$matches,PREG_SET_ORDER)){
if(!empty($matches)){
for($i=0;$i<count($matches);$i++){
$tag=$url=$matches[$i][0];
$judge=‘/alt=/’;
preg_match($judge,$tag,$match,PREG_OFFSET_CAPTURE);
if(count($match)<1)
$altURL=‘ alt=”‘.$title.‘” ‘;
$url=rtrim($url,‘>’);
$url.=$altURL.‘>’;
$imgalt=str_replace($tag,$url,$imgalt);
}
}
}
return$imgalt;
}
add_filter(‘the_content’,‘lxtx_image_alt’);
/* 强制用文章标题作为图片的title属性。不想设置图片的title属性的话可删除掉下面的代码! */
functionlxtx_image_title($content){
global$post;
$pattern=“/<img(.*?)src=(‘|”)(.*?).(bmp|gif|jpeg|jpg|png)(‘|”)(.*?)>/i”;
$replacement=‘<img$1src=$2$3.$4$5 title=”‘.$post->post_title.‘”$6>’;
$content=preg_replace($pattern,$replacement,$content);
return$content;
}
add_filter(‘the_content’,‘lxtx_image_title’,15);
|
因为没有找到判断并自动添加图片 title 属性的代码,所以就使用了强制用文章标题作为图片的 title 属性方法。如果大家有能够通过判断,不覆盖自己设置的图片 title 的方法的话,请不宁赐教!(已找到,见方法 3,感谢 @boke112 导航)。
2.另外在给出一种强制使用文章标题做为图片 Alt 和 Title 属性的方法
1
2
3
4
5
6
7
8
9
10
|
/* wordpress强制使用文章标题做为图片alt和title属性
/* https://www.ilxtx.com/how-to-add-alt-and-title-properties-to-image-automatically.html */
functionlxtx_image_alt_title($content){
global$post;
$pattern=“/<img(.*?)src=(‘|”)(.*?).(bmp|gif|jpeg|jpg|png)(‘|”)(.*?)>/i”;
$replacement=‘<img$1src=$2$3.$4$5 alt=”‘.$post->post_title.‘” title=”‘.$post->post_title.‘”$6>’;
$content=preg_replace($pattern,$replacement,$content);
return$content;
}
add_filter(‘the_content’,‘lxtx_image_alt_title’,15);
|
此方法的特点是,无论图片是否设置 alt 和 title 属性,都会强制使用文章的标题作为图片的 alt 和 title 属性。
3.判断并自动添加图片 Alt 和 Title 属性(推荐)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
/**
* WordPress判断并自动添加图片alt和title属性
* https://www.ilxtx.com/how-to-add-alt-and-title-properties-to-image-automatically.html
*/
functionlxtx_image_alt_title($imgalttitle){
global$post;
$category=get_the_category();
$flname=$category[0]->cat_name;
$btitle=get_bloginfo();
$imgtitle=$post->post_title;
$imgUrl=“<imgs[^>]*src=(“??)([^” >]*?)\1[^>]*>”;
if(preg_match_all(“/$imgUrl/siU”,$imgalttitle,$matches,PREG_SET_ORDER)){
if(!emptyempty($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’,‘lxtx_image_alt_title’);
|
以上代码的特点是:
- 会智能判断,如果没有 alt 或 title 属性,那么就会自动给该图片添加上 alt 和 title 属性;
- alt 属性显示形式为“文章标题 分类名称 第几张”,title 属性显示形式为“文章标题 分类名称 第几张-站点名称”。
一点小缺陷:如果 img 标签中的 alt=””和 title=””时,不会添加相应的 alt 和 titl 属性。
上述 3 种方法,大家取舍着用!