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

以前博文很少配图，原则是能不配图就不配，图片 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 输出头像。