WordPress 自动判断添加图片 alt 和 title 属性

7 Comments

以前博文很少配图,原则是能不配图就不配,图片 alt 和 title 属性压根就没理会过。后来慢慢开始配图(囧~写不出字贴图补上),图片 alt 都是手动填入图片文件名称,或者空着,至于图片 title 属性也是这次折腾才加上了。引子还是:壁纸相册

前言~

前面搬运 macOS Big Sur 11.0.1 新增40张壁纸,分辨率大,40张壁纸有 200MB+,原图贴进来不大好,XnView 批处理,压缩成 800*800 和 160*160 两个版本,160 做相册缩略图,800 做灯箱放大显示。

图片灯箱用的是 fancyBox v2,前几天升级到 fancyBox v3,基本上就是无痛升级(引入新 js,整合新 css,更新 the_content 处理图片加 class……)

<a href="https://cyhour.com/wp-content/uploads/2020/10/1504-dome-1-800.png"><img src="https://cyhour.com/wp-content/uploads/2020/10/1504-dome-1-160.png" /></a>

日常贴图操作是:本地压缩好图片,xftp 上传到服务器,手工半自动插入文章……可是这里一下子就40张图片,并且一个链接两个图……想着日后还会搬运,想了个能稍稍偷懒的方法:

首先,获取所有图片文件名字(Windows下将文件夹下所有的文件名导出成生成TXT文件):

@echo off 
dir /s/b *.* > b.txt exit

将上面代码使用记事本保存为 dir_file_txt.bat,丢进图片目录双击运行即可。

然后,使用 excel 拼接40个灯箱图片链接……alt、title 自然也能拼接进去,折腾个短代码可能更方便(扯得有点远)……暂时还是笨方法将就着吧。

alt、title 用处不是太大,趁机会折腾成自动添加吧,能省多少算多少。最简单是使用博客名字和文章标题作为图片 alt、title,在图片灯箱处理处加上即可,顺带把图片 lazyload 也加进来了,修改后代码:

add_filter('the_content', 'pirobox_auto', 99);
add_filter('the_excerpt', 'pirobox_auto', 99);
function pirobox_auto($content) {
global $post;
$pattern = "/<a(.*?)href=('|\")([A-Za-z0-9\/_\.\~\:-]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")([^\>]*?)>/i";
$replacement = '<a$1href=$2$3$4$5$6 loading="lazy" data-fancybox="gallery" alt="'.get_the_title().'-'.get_bloginfo('name').'" title="'.get_the_title().'-'.get_bloginfo('name').'">';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

这个方法简单粗暴,但是有个缺点:不管图片原本有没有 alt 和 title,都会强制添加新的 alt 和 title,这样就会出现两个 alt……

(温馨提示:操作数据库有风险,操作前建议先备份!!!)

一不干二不休,干脆把原本手工添加的 alt 全部删除,又是个难题。loading="lazy" 这样的固定内容可以直接 sql REPLACE 替换删除掉:

UPDATE wp_posts SET post_content = REPLACE (post_content, 'loading="lazy"', '');

可是以前手动添加的 alt 都是 alt=" 123_10086_10010 " 这样各不相同的,不能简单替换删除,得上正则或者通配符?找了一圈,没搞定……最后在 「phpMyAdmin」-「搜索」-「查找和替换」-「使用正则表达式」成功替换删除掉所有 alt……

操作方法参考上图。

(温馨提示:操作数据库有风险,操作前建议先备份!!!)

折腾完,找到有更好的方法,可以自动判断添加图片 alt 和 title 属性,不过最好的方法也还是有一个小小的缺陷。

以下代码来自:龙笑天下

WordPress 判断自动添加图片 alt 属性、强制添加图片 title 属性

/**
* WordPress 判断并自动添加图片 alt 和 title 属性
*/
function theme_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','theme_image_alt');

/* 强制用文章标题作为图片的 title 属性。不想设置图片的 title 属性的话可删除掉下面的代码! */
function theme_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','theme_image_title',15);

强制使用文章标题做为图片 alt 和 title 属性

/* wordpress 强制使用文章标题做为图片 alt 和 title 属性*/
function theme_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','theme_image_alt_title',15);

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

WordPress 自动判断添加图片 alt 和 title 属性(推荐)

/**
* WordPress 自动判断添加图片 alt 和 title 属性
*/
function theme_image_alt_title($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 (!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', 'theme_image_alt_title');
  • 智能判断,如果没有 alt 或 title 属性,那么就会自动给该图片添加上 alt 和 title 属性;
  • alt 属性显示形式为「文章标题 分类名称 第几张」,title 属性显示形式为「文章标题 分类名称 第几张-站点名称」。
  • 小缺陷:如果 img 标签中有 alt="" 和 title="" 时,不会添加 alt 和 titl 属性。

附送:为 Gravatar 头像添加 alt 属性

一般主题 Gravatar 头像都没有 alt 属性,不过其实 WordPress 自带 get_avatar 函数就有 alt 属性。

function get_avatar( $id_or_email, $size = 96, $default = '', $alt = '', $args = null )

其中:$alt 就是 alt 可选参数,默认是空……

参考代码:

<?php echo get_avatar( $comment, 48, '', get_bloginfo("name").'-'.get_comment_author() ); ?>

使用「博客名字 - 评论者名称」作为头像 alt 属性。

注意:此方法仅适用于使用 get_avatar 输出头像。

免责声明:本博客(https://cyhour.com/)仅为分享信息绝非推荐,网站不参与交易绝非中介,内容均仅代表个人观点绝非权威,所有信息仅供参考,读者请自行考虑后入手并自担风险!一分钱一分货仍是恒久不变之真理,未成年读者(包括生理和心理)请在监护人陪同下访问本站!
除非注明,沙唐桔文章均为原创,本文地址 https://cyhour.com/1506/AMP 移动加速版本)转载时必须以链接形式注明原始出处。
Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息,或支持老杨
浏览: 77 标签:  ,  ,  , 

Comments:7

  1. 技术拉满,哈哈。

    2020.11.02 19:57 # 回复
    1楼
  2. 这玩意7月份也折腾过( https://talk.synyan.net/36845 ),有所不同的是我的常规操作是图像添加caption说明,然后让alt=caption,这样写文的时候就不要重复一遍输入alt了,结果不太容易做,就没干下去了。

    插入图片还在半手工吗,感觉像是我兔已经是191式突步和15式轻坦了,对面阿三还在用英萨斯和T72……

    2020.11.02 23:01 # 回复
    2楼
    • @Yan 对,还在半手工,不过跟使用 WP 媒体库插入相比其实只是多了一个 ftp 上传。
      你那个代码不是可以工作了?已有的 alt 可以数据库里面批量删除掉。

      2020.11.03 09:10 # 回复
      • @老杨 不高兴删啊,而且有些图片不需要带caption,也是个头痛的问题。

        2020.11.03 23:21 # 回复
  3. 沙唐桔-Hades
    Hades

    何不在发布文章的时候直接给图片加上alt说明,通过save_post一劳永逸

    2020.11.07 08:57 # 回复
    3楼
    • @Hades 以前都没想过要加 alt……不写入数据库也有好处:改动方便。

      2020.11.07 09:15 # 回复

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息