教你简单实现WordPress内容的图片自动加ALT和TITLE标签
简介
我们如果从SEO优化的角度上,文章中的图片是需要加上ALT和TITLE标签的,这样更有利于搜索引擎了解图片的内
容,增加收录。但有些时候我们会忘记去加,那么久可以使用代码来实现自动添加加ALT和TITLE标签,这样即使我们忘
记了也没关系。在本文中,我将使用代码来实现WordPress内容图片自动加上TITLE和ALT标签方法,顺便做个笔记。
教程
这里我举两个方法的例子便于大家使用,下方提供了两个方法的代码示例
方法一
把下方的代码增加到你得function文件中
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');
方法二
把下方的代码增加到你得function文件中
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);
如果不想在function文件增加,也可以使用snippets代码片段,这样换主题也不用担心增加在function的代码会丢
失的问题
详解
顺便说一下ALT和TITLE标签的属性
Alt属性
alt属性是图片的描述,即图片内容的文本介绍。当图片因为一些意外情况出现加载不出来的情况下,img的alt属性
这时候就会显示在未加载出来的图片填充范围内,方便用户在浏览网页的时候知道这一段区域内的图片表达的是什么。
alt属性相当于一张图片的内容介绍,当搜索引擎在访问网站的时候索引这张图片时通常第一时间获取的则是这张图
片的内容介绍,从而记录这张图片表达的是什么。
Title属性
title属性则是标题,如果放在img标签当中则是表示图片的标题。以前在ie浏览器时代中,有那么一段时间一直使
用的是alt属性为鼠标停留图片时展现出来的内容,而现今在Chrome浏览器时代,已经全部使用title替代鼠标悬浮图片
时展现的内容了。
就对于现今的alt属性和title属性区分的已经不是那么明显,不过国内的搜索引擎,还没有发展到使用title替代alt
属性的地步,所以相对来说alt属性对于图片而言还是重要一些。
版权声明:
作者:ivpsr.com
链接:https://ivpsr.com/3128.html
文章版权归作者所有,未经允许请勿转载。
THE END