Автоматическое добавление (генерация) атрибутов Alt для изображений в WordPress

Обновлено 23 декабря 2023 Просмотров: 52 933 Автор: Дмитрий Петров

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Валидатор Html кода и другие инструменты аудита вашего сайта, будут выдавать предупреждения, если найдут на странице теги изображений IMG без прописанного внутри атрибута ALT.

Мой сайт попадал под санкции за переоптимизацию и я чтобы быстро из-под них выйти убрал все атрибуты Alt и Title в тегах IMG, т.к. подозревал, что именно из-за их переоптимизации был наложен фильтр. Увы, но это не помогло и пришлось пять месяцев убить не переписывание текстов.

Как добавить атрибут Alt в теги Img вашего блога на WordPres

А вот сил на обратное добавление атрибутов ALT в статьи у меня уже не осталось. Сейчас, когда обновляю старые материалы, естественно, дописываю и ALT-ты, но далеко не все статьи я переписываю (не до всего доходят руки). Поэтому я и подумал о том, чтобы поставить «времянку».

Автоматическое добавление ALT к изображениям

Идея очень простая, а реализация изящная. Показанный внизу скрипт (функция для WordPress) просто ищет теги IMG, в которых атрибута alt нет вообще. Найдя такое безобразие она добавляет ALT и тупо прописывается в нем название статьи (содержимое тега Title страницы).

Да, решение не самое изящное, но зато простое и эффективное. Валидатор перестанет ругаться, да и поисковики смогут хоть как-то сориентироваться в том, о чем идет речь на данном изображении.

Итак, показанный фрагмент кода нужно добавить в файл функшион.пхп (тут я о нем подробно писал) используемой вами темы оформления (сделайте его бекап обязательно). Посмотрите, где там уже вставлены подобные конструкции и постарайтесь не впихнуть ее внутрь какой-нибудь другой функции (лучше вставлять перед function другой функции, чтобы уж точно не ошибиться:

function add_alt_tags($content)
{
 global $post;
 preg_match_all('/<img (.*?)\/>/', $content, $images);
 if(!is_null($images))
 {
 foreach($images[1] as $index => $value)
 {
 if(!preg_match('/alt=/', $value))
 {
 $new_img = str_replace('<img', '<img alt="'.$post->post_title.'"', $images[0][$index]);
 $content = str_replace($images[0][$index], $new_img, $content);
 }
 }
 }
 return $content;
}
add_filter('the_content', 'add_alt_tags', 99999);

Теперь посмотрите исходной код какой-нибудь страницы вашего блога, где раньше не было прописано атрибутов ALT. Естественно, что это не должна быть страница из кеша (отдаваемая вашим плагином кеширования), а обновленная страничка, включающая в себя только что сделанные вами изменения.

В ее коде вы найдете ALT-ты хоть и одинаковые, но все же присутствующие.

Автоматически добавленные ALT в теги IMG

Все лучше, чем ничего. ИМХО.

На страницах же, где альты были прописаны ничего не поменяется:

Alt не поменялись

Как добавить атрибуты alt и title миниатюрам в WordPress

И еще на тему. Миниатюры в WordPress по умолчанию выводятся с пустыми тегами Alt (типа alt=""). Если это вам не нравится, то можете добавить в качестве альта к миниатюрам названия статей, из которых они были взяты. Заодно можете и атрибут Title к тегу Img добавить:

//добавление alt и title для миниатюр записей start
function wph_alt_title_for_thumbnail($html) {
 $post_title = esc_attr(get_the_title());
 //добавляем alt
 $html = preg_replace('/(alt=")(.*?)(")/i', '$1'.$post_title.'$3', $html);
 //добавляем title
 $html = str_replace('/>', 'title="'.$post_title.'" />', $html);
 return $html;
}
add_filter('post_thumbnail_html', 'wph_alt_title_for_thumbnail', 10, 1);
//добавление alt и title для миниатюр записей end

Если к миниатюрам хотите добавить только альты, то можно использовать такой код:

//добавление alt и title для миниатюр записей start
function wph_alt_title_for_thumbnail($html) {
 $post_title = esc_attr(get_the_title());
 //добавляем alt
 $html = preg_replace('/(alt=")(.*?)(")/i', '$1'.$post_title.'$3', $html);
 return $html;
}
add_filter('post_thumbnail_html', 'wph_alt_title_for_thumbnail', 10, 1);
//добавление alt и title для миниатюр записей end

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Комментарии и отзывы (5)

Александр

Попробовал. Что-то не работает. :- (

Елена

А у меня все прекрасно встало и заработало.

Влад

«Как добавить атрибуты alt и title миниатюрам в WordPress» — не работает (((

Зато видос прикольный

Иван

Замените вот это:

'//'

на это:

'#]*)>#i'

и все должно работать.

Xenon

Хотел спросить, например в статье два изображения, как сделать так чтобы второму изображению уже с альт тегом добавить цифру 2 чтобы было разница между тегами?

Ваш комментарий или отзыв