WordPress图片自动添加Alt和Title的几个方法

使用WordPress写博客的用户,经常会忘记给自己的文章内的图片添加alt属性和title属性,对于真实的访客来说图片有没有alt和title属性不是那么重要,毕竟人类只看你图片中的信息。而搜索引擎则不然,毕竟他是什么都不懂的,也无法从一张图片中或许作者在写文章时需要表达的内容,所以它只能够通过HTML图片的属性去识别这张图片,该怎么区分。

还有经常在百度图片,或者Google图片中看到的图片都是按照自己填写的关键词搜索而来,可是你搜索的这个关键词,对于搜索引擎来说是怎么判别的吗?

主要也是根据网页图片的alt以及title属性来区分这张图片是否符合某一个访客搜索的关键词而来。

所以综上所述,对于一张网页中的图片有没有alt和title属性是比较重要的,(因为它可以让你的网站获得通过图片关键词搜索获得访客)。

图片SEO理论补充

既然已经给大家说了图片中是否有alt和title属性的重要性之后,那现在再跟大家说说alt属性和title属性分别对于搜索引擎产生的作用,以及两者之间的差异。

Alt属性

alt属性是图片的描述,即图片内容的文本介绍。当图片因为一些意外情况出现加载不出来的情况下,img的alt属性这时候就会显示在未加载出来的图片填充范围内,方便用户在浏览网页的时候知道这一段区域内的图片表达的是什么。

alt属性相当于一张图片的内容介绍,当搜索引擎在访问网站的时候索引这张图片时通常第一时间获取的则是这张图片的内容介绍,从而记录这张图片表达的是什么。

Title属性

title属性则是标题,如果放在img标签当中则是表示图片的标题。以前在ie浏览器时代中,有那么一段时间一直使用的是alt属性为鼠标停留图片时展现出来的内容,而现今在Chrome浏览器时代,已经全部使用title替代鼠标悬浮图片时展现的内容了。

对于现在而言alt属性和title属性区分的已经不是那么明显,不过国内的搜索引擎,还没有发展到使用title替代alt属性的地步,所以相对来说alt属性对于图片而言还是重要一些。

说完网页中图片有没有alt属性和title属性的重要性之后,再来说说WordPress网页中图片自动添加alt属性和title属性的方法。

网页图片属性中的alt和title

方法1、代码实现自动添加alt属性和title属性、分类-第N张

注:这个方法相对来说会更加合理一些,可以实现:文章名称 分类-第N张。不过也存在弊端,当图片上传后已经有alt属性或者是title属性的时候,就不会再强制显示。很多WordPress主题虽然上传图片的时候会获取图片的名称,但不会填充到alt属性中。比如说使用的B2主题的用户,就会出现只显示图片的title属性。

/**
    *WordPress图片自动添加Alt和Title的几个方法|WordPress world
    *https://wordpressworlds.com/alt_title_img.html
*/
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);
ifcount($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');

方法2、代码实现图片自动获取文章标题为alt属性和title属性

注:这个方法也是目前网上使用最多的一种方法,同一篇文章内的所有图片都使用文章标题为img标签的alt属性和title属性。但是小编觉得所有的图片都使用文章标题为alt和title属性,即每一张图片都使用相同的alt和title属性。且都是重复的内容,这样容易造成一些问题【具体我也不知道】,所以还是推荐小伙伴们使用“方法1”会好一点。

/**     
*WordPress图片自动添加Alt和Title的几个方法|WordPress world    
*https://wordpressworlds.com/alt_title_img.html 
*/
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);

方法3、代码实现图片上传自动填写alt和title属性

注:这个方法会使你在上传图片到WordPress媒体中心的时候自动获取图片的标题,并将标题填写到图片的所有描述框中。

图片描述和标题以及说明

图片描述和标题以及说明

使用这个的前提是:如果你需要实现对应的功能则需要将图片在上传之前做好命名的操作。否则图片时一段无厘头的名称,那么上传图片似乎反而造成不好的影响。

不过如果你不打算对过去的图片的alt属性和title属性做出变化,那么这个方法倒也比较适合你一些,因为使用这个方法不会对过去上传的图片造成问题,只会对新添加的图片造成影响。

另外所有可以修改的内容,小编已经使用中文做了注释,大家根据自己需求修改。

/**     
*WordPress图片自动添加Alt和Title的几个方法|WordPress world    
*https://wordpressworlds.com/alt_title_img.html 
*/
add_action( 'add_attachment', 'my_set_image_meta_upon_image_upload' );
function my_set_image_meta_upon_image_upload( $post_ID ) {
// 检查上传的文件是否为图像,否则不执行任何操作
if ( wp_attachment_is_image( $post_ID ) ) {
$my_image_title = get_post( $post_ID )->post_title;
// 清除标题:删除连字符,下划线和多余的空格:
$my_image_title = preg_replace( '%\s*[-_\s]+\s*%', ' ', $my_image_title );
// 清除标题:将每个单词的首字母大写(其他字母小写):
$my_image_title = ucwords( strtolower( $my_image_title ) );
// 用要更新的图像元(标题,标题,说明)创建一个数组
// 注意:如果不需要,请注释掉摘录/标题或内容/描述行
$my_image_meta = array(
'ID' => $post_ID, // 指定要更新的图像(ID)
'post_title' => $my_image_title, // 将图像标题设置为已清理的标题
'post_excerpt' => $my_image_title, // 将图像标题(摘录)设置为已清理标题
'post_content' => $my_image_title, //将图像描述(内容)设置为已清理的标题
);
//设置图像Alt-Text
update_post_meta( $post_ID, '_wp_attachment_image_alt', $my_image_title );
// 设置图片元(例如标题,摘录,内容)
wp_update_post( $my_image_meta );
} 
}

使用上面这个方法有一个好处,就是图片的这些信息都是直接写进数据库的,即便是将来忘记使用这一段代码之后,依旧不会对已经做出修改的图片造成问题。

方法4、使用Image Automatic Alt Text and Caption插件

Image Automatic Alt Text and Caption插件可以直接在WordPress应用商城中搜索到这里就不提供了,插件下载后,启用插件即可,没有什么可设置的项目。启用插件后,就会在你的图片上传的时候获取图片的标题自动填充至:替代文本、标题、说明、图像描述这几个框框中。换句话说,如果图片命名的时候很随便的话,那还是使用方法1 会比较好一点。

图片描述和标题以及说明

图片描述和标题以及说明

以上方法使用教程

插件部分就不多说了,如果你连插件都不会下载的话,小编我也无能为力。

代码则直接粘贴到你当前正在使用的主题中的functions.php当中即可。

以上内容就是今天小编介绍的几个实现WordPress文章中图片自动获取alt属性和title属性的方法。虽然小编比较推崇方法1,不过方法1不能强制实现它的那个逻辑还是有一点点的弊端的。总的来说兼容性有待加强,希望日后某一位大佬可以有更好的解决方法,当然如果“亲爱的读者”你有更好的方法的时候,别忘记跟我说一下喔!

人已赞赏
WordPress功能扩展代码

WordPress代码创建数据表【转载】

2020-10-31 1:24:28

WordPress博客主题WordPress资讯主题

Grace主题-WordPress博客主题

2020-6-23 19:07:36

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