如何获取产品图库附件的alt值并添加为自定义data-name属性？

问题根源 #

1. JS变量赋值错误：原代码中var caption = <?php echo $image_alt;?>未给字符串类型的alt文本添加引号，导致JS将其解析为无效变量，最终出现[object Object]异常。
2. 全局选择器覆盖：jQuery("img").each()会选中页面所有图片，循环时会把所有图片的data-name替换为当前循环的alt值，最终所有图片的属性值都会变成最后一张图的内容。
3. 冗余JS操作：完全可以在PHP生成图片标签时直接添加属性，无需后期用JS修改，更高效且避免冲突。

正确实现代码 #

直接在PHP生成图片标签时添加自定义属性，同时优先使用alt文本，若alt为空则 fallback 到图片标题：

<div class="gallery_thumbs show-all-thumbs">
    <?php       
        $attachment_ids = $product->get_gallery_attachment_ids();
        if ( ! empty( $attachment_ids ) ) {        
            foreach( $attachment_ids as $attachment_id ) {
                // 获取图片alt文本
                $image_alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true);
                // 若alt为空，使用图片标题作为替代
                if( empty($image_alt) ){
                    $image_alt = get_the_title($attachment_id);
                }
                // 定义图片的自定义属性
                $image_attrs = array(
                    'data-name' => esc_attr($image_alt) // 转义处理避免XSS和语法错误
                );
                ?>
                <div class="woocommerce-product-gallery__item">
                   <a href="<?php echo esc_url(wp_get_attachment_image_url( $attachment_id, 'full' )); ?>">
                    <?php 
                        // 输出带自定义data-name属性的图片
                        echo wp_get_attachment_image( $attachment_id, 'full', false, $image_attrs );
                    ?>            
                   </a>  
                  <div class="caption">                   
                    <?php echo esc_html($image_alt); ?>
                 </div>
              </div> 
            <?php 
            }
        }  
    ?>
</div>

核心优化说明 #

• 直接PHP生成属性：避免JS全局选择器的覆盖问题，性能更优。
• 安全转义处理：用esc_attr()处理data-name的值、esc_url()处理图片链接、esc_html()处理标题文本，避免XSS攻击和HTML语法错误。
• 降级逻辑：当图片未设置alt文本时，自动使用图片标题填充data-name，保证属性始终有有效内容。
• 移除冗余JS：原代码中的JS部分完全不需要，删除后避免不必要的DOM操作。

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