WordPress Kallyas主题如何让图片alt文本在HTML中正常显示

问题解决步骤 #

你前端输出的img标签携带data-src属性和lazyloaded类，说明站点启用了图片懒加载功能，90%以上的概率是懒加载逻辑在替换图片资源路径时，遗漏了媒体库配置的alt属性同步输出，按以下优先级排查修改即可：

1. 懒加载配置排查 #

• 如果你使用的是第三方懒加载插件（如WP Rocket、Smush等），进入插件设置的懒加载功能区，找到「保留图片原生属性」类的配置开关，开启后即可自动同步alt属性。
• 如果是主题自带的懒加载能力，进入WordPress后台「外观」-「自定义」的性能优化分类，查找懒加载相关的属性保留配置。

2. 主题模板代码修改（配置无效时操作） #

登录站点服务器，进入wp-content/themes/你当前激活的主题名称/目录，查找输出对应图片的模板文件：

• 常规页面图片输出逻辑通常在page.php、front-page.php、single.php中，部分主题会把公共内容模块放在template-parts/目录下的对应php文件里
• 找到输出图片的代码段，补充alt属性的调用逻辑，WordPress原生获取媒体库alt文本的写法参考：

<img 
  data-src="https://applecareurgentcare.com/wp-content/uploads/2020/04/apple-care-laptop.png" 
  class="lazyloaded" 
  src="https://applecareurgentcare.com/wp-content/uploads/2020/04/apple-care-laptop.png"
  alt="<?php echo esc_attr( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ); ?>"
>

• 更简单的方案是直接使用WordPress原生的wp_get_attachment_image()函数输出图片，该函数会自动读取媒体库配置的alt、title等属性，无需手动拼接。

3. 缓存类功能排查 #

如果站点启用了CDN图片优化、页面静态缓存插件的HTML精简功能，进入对应设置页关闭「无用HTML属性清理」类开关，避免alt属性被误判为冗余内容过滤。

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