wordpress自动为图片添加alt和title属性

对应SEO来说,图片的alt标签和titer标签是搜索引擎识别图片的一个重要因素。尤其是alt标签,对于SEO来说还是挺重要的。

虽然大家都知道图片的 alt 和 title 属性非常重要,但是有点小伙伴也会坚持不下来或者有时候会漏掉它们,这个对于图片的优化应该是非常不利的。

所以,今天就跟大家说一说如何让 WordPress 站点的图片自动添加上漏掉的 alt 和 title 属性。

在这里,跟大家普及一下图片的alt和title属性:

title 属性:主要针对用户,当用户的鼠标放在图片上的时候,显示的文字就是 title 属性。

alt 属性:主要针对搜索引擎,也针对用户,在图片加载失败的时候,会显示 alt 属性中的内容,另外,alt 属性是搜索引擎爬虫识别我们的图片的唯一方式。

想了解详情的小伙伴也可以到这里查看:

HTML 图像-w3school

HTML <img> 标签的 alt 属性-w3school

HTML title 属性-w3school

一个完整的优化过的图片应该同时具有 title 属性和 alt 属性,而且 alt 属性中最好带有文章的关键字。

回归正题,仔细分析我们站点图片的 alt 和 title 属性,不外乎以下四种情况:

  • 没有 alt 和 title 属性;
  • 有 title 属性但没有 alt 属性;
  • 有 alt 属性但没有 title 属性;
  • 同时拥有 alt 和 title 属性。

现在我们重点是要为前面三种情况的图片补齐 alt 和 title 属性,但是如果人工补齐的话,这个可是一个浩大的工程,很多人都会放弃的,包括我在内。

幸好,WordPress 是强大的,而且网络上的资源也挺多的,经过本站修改测试,发现只需要将以下代码添加到我们所使用主题的 functions.php 文件最后一个?>即可实现自动为 WordPress 站点图片添加 alt 和 title 属性。

下面我们就来说一下wordpress实现为自动为图片添加图片alt和title属性的几种方法:

方法一:(来源:boke112 导航*https://boke112.com/2912.html )

/**
*自动添加图片 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.’ ‘.$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 属性为“文章标题 分类名称 第几张-站点名称”。

特别说明:

1、以上代码只针对没有 alt 或 title 属性的图片,如果该图片已经有 alt 或 title 属性,那么它们的值为空也是无效的。比如某张图片的 alt=””,那么对这个 alt 属性也是失效的。

2、以上代码会智能判断,如果都没有 alt 和 title 属性,那么就会自动给该图片添加上 alt 和 title 属性;如果都没有 alt 属性,那么就会自动给该图片添加上 alt 属性;如果都没有 title 属性,那么就会自动给该图片添加上 title 属性。大家慢慢体会吧。

方法二:(来源:缙哥哥博客*https://www.dujin.org/1145.html)

//Wordpress判断并自动添加图片ALT属性
function image_alt( $imgalt ){
global $post;
$title = $post->post_title;
$imgUrl = "<img\s[^>]*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','image_alt');

方法二的特定是只添加alt属性

和方法一一样是会自动自动判断的。

wordpress5.0以上版本会自动添加一个alt标签(不设置标签属性值则是一个空标签),这就意味着我们的方法一和方法二自动判断则会判断标签存在,而导致不会添加。

方法三:

/** 自动给图片添加Alt标签 */
function image_alt_tag($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').'"', $images[0][$index]);
$content = str_replace($images[0][$index], $new_img, $content);}}
return $content;
}
add_filter('the_content', 'image_alt_tag', 99999);

方法三的特点是,无论图片是否设置 alt 和 title 属性,都会强制使用文章的标题作为图片的 alt 和 title 属性。

wordpress技巧

彻底关闭wordpress自动生成缩略图

2021-9-10 11:16:25

wordpress技巧

如何查看Wordpress网站使用是什么主题

2021-9-10 11:53:55

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索