0

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

我将非常感谢任何人提供的任何帮助，帮助我了解在服务器上的位置以及添加内容以确保显示我的替代文本。

这是我在屏幕截图中引用的图标的代码片段：

<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 媒体库中添加的替代文本的屏幕截图

4

1 回答 1

0

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

使用wp_get_attachment_image来自 WordPress 核心的功能。

您可以通过这种方式使用它。

echo wp_get_attachment_image( 49, 'thumbnail' );

和的大小49在哪里。idimagethumbnail

输出：

<img width="150" 
height="150" 
src="http://checkout.io/wp-content/uploads/2021/06/profile-150x150.jpg"
class="attachment-thumbnail size-thumbnail" 
alt="Test Alt Text" 
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 还是性能更新。
于 2021-06-21T18:04:19.923 回答