Изображения играют решающую роль в повышении визуальной привлекательности веб-сайта и привлечении посетителей. Однако для людей с нарушениями зрения или тех, кто использует программы чтения с экрана, одних изображений недостаточно для понимания контента. Здесь в игру вступает альтернативный текст, также известный как замещающий текст. Замещающий текст предоставляет текстовое описание изображения, позволяя средствам чтения с экрана передавать информацию пользователям, которые не могут видеть изображение. В этой статье мы рассмотрим различные методы добавления замещающего текста к изображениям в WordPress, а также приведем примеры кода.
Метод 1: добавление замещающего текста в медиатеку WordPress
WordPress предоставляет встроенную функцию для добавления замещающего текста к изображениям непосредственно в медиатеке. Вот как это можно сделать:
- Войдите в свою панель управления WordPress.
- Перейдите в раздел «Медиа» Библиотека».
- Выберите изображение, для которого вы хотите добавить замещающий текст.
- Нажмите кнопку «Изменить».
- Найдите поле «Альтернативный текст» и введите описательный текст, представляющий изображение.
- Нажмите кнопку «Обновить», чтобы сохранить изменения.
Метод 2: добавление замещающего текста в классическом редакторе
Если вы используете классический редактор в WordPress, вы можете добавить замещающий текст к изображениям через панель «Сведения об изображении». Выполните следующие действия:
- Отредактируйте публикацию или страницу, на которой находится изображение.
- Нажмите на изображение, чтобы выбрать его.
- Нажмите кнопку «Изменить» (значок карандаша).
- На панели «Сведения об изображении» найдите поле «Замещающий текст» и введите соответствующее описание.
- Сохраните или обновите публикацию/страницу, чтобы применить изменения.
Метод 3: добавление замещающего текста в редакторе блоков (Гутенберг)
Для пользователей редактора блоков (Гутенберг) замещающий текст можно добавить через блок изображения. Вот как:
- Отредактируйте публикацию или страницу, на которой находится изображение.
- Выберите блок «Изображение» или добавьте новый.
- Загрузите или выберите изображение из медиатеки.
- В настройках блока «Изображение» прокрутите вниз и найдите поле «Замещающий текст».
- Введите замещающий текст, описывающий изображение.
- Сохраните или обновите публикацию/страницу, чтобы применить изменения.
Метод 4: программное добавление замещающего текста
Если у вас большое количество изображений и вы хотите автоматизировать процесс, вы можете добавить замещающий текст программно, используя специальный код. Вот пример использования PHP:
// Get the attachment ID of the image
$image_id = get_post_thumbnail_id( $post_id );
// Set the alt text
$alt_text = 'Descriptive alt text goes here';
// Update the alt text
update_post_meta( $image_id, '_wp_attachment_image_alt', $alt_text );Замените $post_idна идентификатор сообщения, к которому прикреплено изображение, а $alt_textна желаемый альтернативный текст.
Применяя эти методы замещающего текста, вы можете повысить доступность и инклюзивность своего веб-сайта, одновременно улучшая его видимость в рейтингах поисковых систем.