Вопрос или проблема
Я добавил атрибуты alt, заголовок и описание ко всем изображениям на своем сайте, но они не отображаются, когда я проверяю их в инструментах разработчика в Chrome или Firefox.
Вот скриншот:
А вот скриншот инструмента разработчика того же изображения:
На самом деле это зависит от того, как изображение отображается в шаблоне. Если оно отображается с помощью функции, такой как the_post_thumbnail(), которая возвращает полный HTML-код для отображения изображения с alt, то проблем не должно быть. Но если изображение отображается только при извлечении URL, то это зависит от того, как оно отображается.
Например, ниже приведен фрагмент кода, который извлекает изображение непосредственно на странице вложения WP:
//извлечение URL источника изображения вложения
$attachment_size = apply_filters( 'abc_attachment_size', array( 960, 960 ));
$image_attributes = wp_get_attachment_image_src( $post->ID, $attachment_size);
if( $image_attributes ) {
?>
<img src="https://wordpress.stackexchange.com/questions/253743/<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>">
<?php } ?>
В приведенном выше коде мы отображаем изображение из данных, которые мы извлекли индивидуально. Поскольку alt не используется, он не будет отображаться. Аналогично в вашем случае, я предполагаю, что проблема в том, что тема не имеет указанного alt, и поэтому он не отображается.
Кроме того, я пытался скачать файл вашей темы, но браузер сообщил, что он является вредоносным, поэтому я отказался.
Чтобы атрибут alt отображался вместе с этим изображением, вам нужно изменить тему. Код, который выводит изображение, находится в mediatraining/inc/modules/trainers/shortcode.php. На 13-й строке изображение загружается из параметров:
$img = mbtheme_get_option( 'lead-trainer-image' );
$img_url = $img[ 'url' ];
На 27-й строке оно используется:
<img src="https://wordpress.stackexchange.com/questions/253743/<?php echo esc_url( $img_url ); ?>" />
Чтобы иметь возможность указать атрибут alt здесь, вы можете попробовать что-то вроде этого на 27-й строке:
<img src="https://wordpress.stackexchange.com/questions/253743/<?php echo esc_url( $img_url ); ?>" alt="<?php echo esc_attr( $img['alt'] ); ?>" />
Это не протестировано, и я не уверен в части $img['alt'], потому что не знаю, что именно там сохранено. В качестве альтернативы попробуйте $img['title'] или попробуйте создать дамп $img, чтобы увидеть, можно ли найти текст alt там.
Я нашел скрипт, попробуйте, сработает ли это для вас. Добавьте это в файл functions.php вашей темы:
function isa_add_img_title( $attr, $attachment = null ) {
$img_title = trim( strip_tags( $attachment->post_title ) );
$attr['title'] = $img_title;
$attr['alt'] = $img_title;
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes','isa_add_img_title', 10, 2 );
Похоже, что (начиная с версии 4.7) атрибут alt больше не отображается автоматически. Есть плагины, которые восстанавливают эту функциональность (например, https://wordpress.org/plugins/auto-image-alt/). Если вы имеете в виду SEO, эти плагины полезны лишь отчасти, поскольку атрибут добавляется с помощью JavaScript.
Ответ или решение
Ответ на вопрос о том, почему теги alt и title не отображаются
Здравствуйте! Судя по вашему описанию проблемы, вы уже добавили alt и title атрибуты ко всем изображениям на вашем сайте, однако они не отображаются в инструментах разработчика. Давайте рассмотрим возможные причины и решения этой ситуации.
1. Отображение изображений через функцию
Как вы правильно упомянули, если изображения отображаются с помощью функции, такой как the_post_thumbnail(), атрибуты alt должны выводиться корректно. Однако, если изображения просто загружаются по URL, то вам необходимо убедиться, что атрибуты корректно передаются в HTML-код изображения.
Пример кода, где могут отсутствовать атрибуты:
// Получение источника изображения
$attachment_size = apply_filters( 'abc_attachment_size', array( 960, 960 ));
$image_attributes = wp_get_attachment_image_src( $post->ID, $attachment_size);
if( $image_attributes ) {
echo '<img src="' . esc_url($image_attributes[0]) . '" width="' . esc_attr($image_attributes[1]) . '" height="' . esc_attr($image_attributes[2]) . '" />';
}2. Модификация темы
Чтобы исправить проблему, вам необходимо внести изменения в вашу тему. Например, если вы используете код, схожий с приведённым ниже, вы можете добавить атрибут alt:
$img = mbtheme_get_option('lead-trainer-image');
$img_url = $img['url'];
echo '<img src="' . esc_url($img_url) . '" alt="' . esc_attr($img['alt']) . '" />';Убедитесь, что $img[‘alt’] фактически содержит нужный текст. Если это не так, попробуйте использовать другое поле, например, $img[‘title’].
3. Автоматическое добавление атрибутов
Если в вашей версии WordPress (начиная с 4.7) атрибут alt автоматически не отображается, вы можете использовать следующую функцию для добавления атрибутов alt и title ко всем изображением:
function isa_add_img_title($attr, $attachment = null) {
$img_title = trim(strip_tags($attachment->post_title));
$attr['title'] = $img_title;
$attr['alt'] = $img_title; // здесь можно установить ваш текст alt
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'isa_add_img_title', 10, 2);Добавьте этот код в файл functions.php вашей темы.
4. Плагины для автоматизации
Существуют плагины, которые могут помочь вам в автоматическом добавлении атрибутов alt. Например, вы можете рассмотреть использование плагина Auto Image Alt. Однако учтите, что такие плагины могут добавлять атрибуты с помощью JavaScript, что может быть не лучшим вариантом для SEO.
Заключение
Ваша проблема связана с тем, как атрибуты alt и title передаются и отображаются в вашей теме. Проверьте, как вы выводите изображения, внесите необходимые изменения в код, или используйте плагины для автоматического управления атрибутами изображений. Если у вас возникнут дополнительные вопросы, пожалуйста, не стесняйтесь задавать их. Удачи!