如何修复Storefront主题产品特色图片缺失Alt标签的问题？

嗨，Patrick！我帮你搞定Storefront主题产品特色图缺失Alt标签的问题，子主题完全能解决，而且这是最安全的方式（毕竟直接改父主题会被更新覆盖），下面是具体方案：

你只需要在子主题的functions.php文件里加入一段代码，就能自动给所有产品特色图（包括主图和缩略图）补上Alt标签：

// 为Storefront产品特色图添加Alt标签
add_filter( 'wp_get_attachment_image_attributes', 'storefront_product_image_add_alt_tag', 10, 3 );
function storefront_product_image_add_alt_tag( $attr, $attachment, $size ) {
    // 仅在产品页面或产品缩略图场景生效
    if ( is_product() || ( isset( $size ) && $size === 'woocommerce_thumbnail' ) ) {
        global $product;
        if ( ! $product ) return $attr;
        
        // 这里把Alt标签设为产品标题，你也可以换成自定义字段（比如产品的SEO自定义Alt）
        $attr['alt'] = $product->get_name();
        // 可选：添加Title属性（不需要的话可以删掉这行）
        $attr['title'] = $product->get_name();
    }
    return $attr;
}

代码说明： #

• 用wp_get_attachment_image_attributes钩子拦截图片属性的生成，确保只给产品相关的图片加Alt标签
• 默认用产品标题作为Alt文本，如果你有专门的自定义字段来存Alt内容，把$product->get_name()换成$product->get_meta('你的自定义字段键名')就行
• 完全兼容子主题，后续父主题更新也不会影响这段代码

如果还没创建子主题，很简单：

1. 在wp-content/themes/目录下新建storefront-child文件夹
2. 里面创建style.css，填入以下内容：

/*
Theme Name: Storefront Child
Description: 官方Storefront主题的子主题
Author: 你的名字
Template: storefront
Version: 1.0.0
*/

3. 再创建functions.php文件，开头加<?php，然后粘贴上面的代码即可。

Storefront作为WooCommerce官方主题，后续版本大概率会修复这个SEO细节问题。如果不想折腾子主题，你可以关注主题更新日志，等官方推送修复后直接更新父主题就行。不过子主题方案是即时生效的，不用等更新，更推荐前者。

测试方法： #

添加代码后刷新产品页面，右键点击特色图→“检查”，看HTML代码里是否出现alt="你的产品标题"属性，出现就说明生效了。

内容的提问来源于stack exchange，提问作者Patrick