建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

Wordpress建站教程:自动给图片添加Alt和Title标签(WordPress Tag标签自定义样式详解)

GG网络技术分享 2025-03-18 16:13 1


Wordpress建站教程:自动给图片添加Alt和Title标签

作者:悦然wordpress建站(悦然建站)


(此处已添加小程序,请到今日头条客户端查看)

继续分享wordpress建站教程,今天我们再来说说图片SEO优化。我们之前的文章已经给大家讲过图片压缩、图片ALT标签、图片重命名,这些都是wordpress建站的小细节,但如果你在企业网站建设过程中没有做好,那就可能影响到网站整体的效果。


​当一个网站的图片多了之后,如果我们还在一张张图片去设置alt和title标签就太麻烦了,效率低而且非常容易忘记。所以悦然企业网站建设今天给大家分享的教程就是批量自动给图片添加alt和title标签


一、使用插件


我们来看插件的实现方法,使用插件是最简单的,直接安装启用就可以了。


1.Auto Image Attributes


​这个插件的名称有点长(Auto Image Attributes From Filename With Bulk Updater (Add Alt Text, Image Title For Image SEO)),这款插件可以自动添加图像属性,如图像标题,图像标题,描述和替换文本,还可以更新媒体库中新图像和现有图像的图像属性。


这个插件可以免费使用,高级功能要付费。



2.SEO Friendly Images


​SEO Friendly Images这款插件有点老了,很久没有更新,但目前还可以用(但可能在存在一些兼容问题,要试过才知道)。


SEO Friendly Images插件安装好之后还需要进行一些设置,进入插件设置,可以参考上面的设置方法。



二、使用代码


不使用插件我们也可以实现自动添加图片alt和title属性,方法是使用代码。接下来悦然企业网站建设给大家分享两种代码实现方式。


1.图片alt和title属性完全调用标题


//文章图片自动添加alt和title属性(由悦然企业网站建设www.zsxxfx.com整理)

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').'" 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_tag', 99999);


把以上代码添加到当前wordpress模板的functions.php文件中即可。这个代码适合配图不多的情况,每一张图片都会显示为文章标题+网站名。


2.图片alt和title属性依次显示第几张


//文章图片自动添加alt和title属性(由悦然企业网站建设www.zsxxfx.com整理)

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');



把以上代码添加到当前wordpress模板的functions.php文件中即可。这个代码适合同一篇文章配图较多的网站,图片alt和title属性会依次显示“第1张”、”第2张”……


三、模板自带


也有一些wordpress企业网站模板会集成自动图片alt和title标签的功能,如果有直接启用即可。


总结


理论来说手动给图片添加alt和title标签效果会更好一些,但是手动效率实在太低,而且非图片网站的图片SEO优化效果并不明显,这种自动添加的效果对普通的企业网站来说足够了。

WordPress Tag标签自定义样式详解

在我们开发一款WordPress主题中,经常会调用到tag标签的数据,而wp_tag_cloud()函数的作用是用来获取标签云的,该函数可以根据每个标签所关联的文章次数来定义字体大小、标签排序等属性。

从WordPress2.8版本开始,该函数添加了 分类法(taxonomy)参数,这就意味着,除了 标签(tags)以外,还可以将 分类(Categories) 或其他 自定义分类法(Custom Taxonomies)作为“云”显示。

但由于该方法把样式集合到了里面,使用起来不怎么友好,如果想自定义读取标签并修改展示样式该怎么做呢,那也是非常简单的,看代码实例,这里根据get_tags来获取:

$html = \\\'<ul >\\\';foreach (get_tags( array(\\\'number\\\' => 50, \\\'orderby\\\' => \\\'count\\\', \\\'order\\\' => \\\'DESC\\\', \\\'hide_empty\\\' => false) ) as $tag){$color = dechex(rand(0,16777215));$tag_link = get_tag_link($tag->term_id); $html .= \\\"<li><a href=\\\'{$tag_link}\\\' title=\\\'{$tag->name} Tag\\\' class=\\\'{$tag->slug}\\\' style=\\\'color:#{$color}\\\'>\\\";$html .= \\\"{$tag->name} ({$tag->count})</a></li>\\\";}$html .= \\\'</ul>\\\';echo $html;

如果要求随机获取标签在首页显示,那可以使用以下代码,但这种做法貌似不利于seo,可得慎重使用

//获取随机标签function get_rand_tags(){global $post, $wpdb;$sql = \\\"SELECT * FROM {$wpdb->prefix}terms wt INNER JOIN {$wpdb->prefix}term_taxonomy wtt on  wt.term_id=wtt.term_id where wtt.taxonomy=\\\'post_tag\\\' ORDER BY RAND() LIMIT 20\\\";$related_posts = $wpdb->get_results($sql);$html = \\\'<ul >\\\';foreach($related_posts as $tag){$color = dechex(rand(0,16777215));$tag_link = get_tag_link($tag->term_id);$html .= \\\"<li><a href=\\\'{$tag_link}\\\' target=\\\'_blank\\\' title=\\\'{$tag->name} Tag\\\' class=\\\'{$tag->slug}\\\' style=\\\'color:#{$color}\\\'>\\\";$html .= \\\"{$tag->name} ({$tag->count})</a></li>\\\"; }$html .= \\\'</ul>\\\';echo $html;}

以上便是使用 wp_tag_cloud()函数来自定义WordPress的tags标签样式的相关WordPress教程,希望对您有帮助!

扫码关注wpwp自学笔记

精选优质免费WordPress主题模板,分享最新WordPress实用建站教程!

记住我们的网址:ztJun.com

标签: 小程序

提交需求或反馈

Demand feedback