如何允许在我的图像上查看替代文本（wordpress 主题 kallyas）

Posted 2023-04-13

【中文标题】如何允许在我的图像上查看替代文本（wordpress 主题 kallyas）

【英文标题】：How can I allow alt text to be viewed on my images (wordpress theme kallyas)

【发布时间】：2021-06-21 17:11:28

【问题描述】：

我正在尝试更新我公司的网站，以确保所有图片都分配了替代文本，从而对 ADA 更友好。但是，当我在 Wordpress CMS 上添加替代文本时，我无法在 html 中查看它。 请参阅随附的屏幕截图以供参考。

我非常感谢任何人在服务器上查看位置以及添加什么以确保显示我的替代文本方面的任何帮助。

这是我在截图中引用的图标的代码 sn-p：

<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">

在 wordpress 媒体库中添加的替代文本的屏幕截图

【参考方案1】：

当您拥有附件 ID 时，有两种方法可以做到这一点。我将以最好和推荐的方式回答。

使用来自 WordPress 核心的函数 wp_get_attachment_image。

你可以这样使用它。

echo wp_get_attachment_image( 49, 'thumbnail' );

其中49 是image 的id，thumbnail 是大小。

输出：

<img  
 
src="http://checkout.io/wp-content/uploads/2021/06/profile-150x150.jpg"
class="attachment-thumbnail size-thumbnail" 
 
loading="lazy" 
srcset="http://checkout.io/wp-content/uploads/2021/06/profile-150x150.jpg 150w, http://checkout.io/wp-content/uploads/2021/06/profile-300x300.jpg 300w, http://checkout.io/wp-content/uploads/2021/06/profile-60x60.jpg 60w, http://checkout.io/wp-content/uploads/2021/06/profile-110x110.jpg 110w, http://checkout.io/wp-content/uploads/2021/06/profile-100x100.jpg 100w, http://checkout.io/wp-content/uploads/2021/06/profile.jpg 538w" 
sizes="(max-width: 150px) 100vw, 150px">

它的好处。

您会收到您的 alt 文本作为附件。 您会收到loading="lazy"，这是 WordPress 的最新更新。 你会收到srcset。 由于这是 WordPress 的核心功能，您将自动与所有图像功能更新兼容，无论是 SEO 还是性能更新。