Что такое атрибуты alt и title в WordPress. Плагины, которые активируют теги WordPress
Здравствуйте, уважаемые читатели блога сайт. Валидатор Html кода и другие , будут выдавать предупреждения, если найдут на странице теги изображений IMG без прописанного внутри атрибута ALT .
Мой сайт и я чтобы быстро из-под них выйти убрал все атрибуты Alt и Title в тегах IMG, т.к. подозревал, что именно из-за их переоптимизации был наложен фильтр. Увы, но это не помогло и пришлось пять месяцев убить не переписывание текстов.
А вот сил на обратное добавление атрибутов ALT в статьи у меня уже не осталось. Сейчас, когда обновляю старые материалы, естественно, дописываю и ALT-ты, но далеко не все статьи я переписываю (не до всего доходят руки). Поэтому я и подумал о том, чтобы поставить «времянку».
Автоматическое добавление ALT к изображениям, где его нет
Идея очень простая, а реализация изящная. Показанный внизу скрипт (функция для WordPress) просто ищет теги IMG, в которых атрибута alt нет вообще. Найдя такое безобразие она добавляет ALT и тупо прописывается в нем название статьи (содержимое тега Title страницы).
Да, решение не самое изящное, но зато простое и эффективное. Валидатор перестанет ругаться, да и поисковики смогут хоть как-то сориентироваться в том, о чем идет речь на данном изображении.
Итак, показанный фрагмент кода нужно добавить в файл функшион.пхп ( я о нем подробно писал) используемой вами темы оформления (сделайте его бекап обязательно). Посмотрите, где там уже вставлены подобные конструкции и постарайтесь не впихнуть ее внутрь какой-нибудь другой функции (лучше вставлять перед function другой функции, чтобы уж точно не ошибиться:
Function add_alt_tags($content)
{
global $post;
preg_match_all("//", $content, $images);
if(!is_null($images))
{
foreach($images as $index => $value)
{
if(!preg_match("/alt=/", $value))
{
$new_img = str_replace("
post_title.""", $images[$index]);
$content = str_replace($images[$index], $new_img, $content);
}
}
}
return $content;
}
add_filter("the_content", "add_alt_tags", 99999);
Теперь посмотрите исходной код какой-нибудь страницы вашего блога, где раньше не было прописано атрибутов ALT. Естественно, что это не должна быть страница из кеша (отдаваемая вашим плагином кеширования), а обновленная страничка, включающая в себя только что сделанные вами изменения.
В ее коде вы найдете 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
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Как в WordPress можно выводить посты из категории с миниатюрами (их создание в Auto Post Thumbnail и catch_that_image)
Создаем для блога на WordPress кнопки добавления в социальные сети и закладки (без плагинов и скриптов)
Как отключить комментарии в WordPress для отдельных статей или всего блога, а так же убрать или наоборот подключить их в шаблоне
Пропало левое меню в админке WordPress после обновления
Хлебные крошки в Вордпресс без плагинов
Как убрать служебные ссылки с WP-JSON из исходного кода страниц вашего блога на WordPress
Файл functions.php из папки с темой WordPress и реальные примеры его использования
Проблема с All in One SEO Pack и ее решение - убираем rel=prev и исправляем rel=canonical, чтобы убрать из индекса дубли
На сегодняшний день изображениям среди всего веб-контента отводится довольно большое место. Однако не все пользователи оптимизируют их для лучшего ранжирования всего сайта в целом. WordPress, среди своих прочих возможностей, предоставляет удобные инструменты для добавления альтернативного текста и заголовка изображения в соответствующие теги. В этом материале рассмотрим разницу между атрибутами alt /title и сферы их применения.
Зачем нужен атрибут alt в картинках?
Альтернативный текст или alt
является HTML
-атрибутом, добавленным к тегу вставки изображения
. Этот текст будет показан в том случае, если изображение по той или иной причине не будет загружено и отображено на странице. Такой ход дает информацию поисковым роботам о том, что именно изображено на фото. Обычно в теге alt
пишут короткое описание изображения. Кроме того, атрибут служит также и для улучшения доступности сайта для людей с ограниченным зрением или для тех, кто использует устройства для чтения с экрана. Программа-читалка будет озвучивать текстовую часть страницы, а когда дойдет до изображения, то прочитает и текст, находящийся в alt
. Благодаря этому, пользователи всегда будут знать, что нарисовано на картинке, даже если они ее не видят.
Как и где заполнять alt в WordPress?
WordPress предоставляет довольно удобные инструменты для заполнения атрибута alt . Так, его можно указать уже при загрузке изображения. Для этого следует открыть запись или страницу, вставить курсор в место вставки изображения и нажать кнопку Добавить медиафайл .
После того, как будет нажата кнопка, откроется окно Медиабиблиотеки WordPress, где нужно будет указать локальное месторасположение файла-картинки. В итоге Вы увидите боковую панель с параметрами загруженного файла.
Как видно, на панели присутствует поле Атрибут alt . По умолчанию, оно является пустым. Задавать текст в атрибуте необходимо длиною из 2-3 слов, причем они должны точно описывать что на фото. Чтобы вставить изображение на сайт, следует нажать кнопку Вставить в запись .
Зачем нужен атрибут title в картинках?
Title
— еще один атрибут HTML
-тега вставки изображения
. Он используется для заголовка картинки и обычно указывает на ее название. Отметим также, что текст внутри title
не будет показан пользователю, если изображение не отображается на странице.
Как и где заполнять title в WordPress?
Атрибут заполняется уже после загрузки изображения на сайт. Для этого в Медиабиблиотеке WordPress следует выделить изображение, после чего появится знакомая боковая панель.
Title или заголовок нужно задавать осмысленно в зависимости от информации, представленной на изображении. В то же время текст должен отличаться от атрибута alt . Заголовок можно писать на русском языке или же использовать транслитерацию. Довольно часто владельцы сайтов используют его для SEO -оптимизации, указывая там ключевые слова. Также атрибут можно задать, находясь на странице редактирования записи или страницы. Для этого необходимо щелкнуть по картинке, и на появившейся дополнительной панели инструментов нажать кнопку редактирования с изображением карандаша. Вообще для оптимизации сайта рекомендуется для изображений использовать оба атрибута. Атрибут alt имеет одно преимущество — он помогает поисковым системам находить изображения на Вашем сайте и отображать их в результатах поиска по картинкам. При этом сайт получает дополнительный трафик из поисковиков. Еще одно преимущество обоих атрибутов — улучшение доступности сайта для людей с особыми потребностями.
Выводит заголовок записи подготовленный для использования в атрибутах html тега.
Функция должна использоваться внутри Цикла WordPress.
Функция идентична функции the_title() , стой лишь разницей, что эта функция "чистит" заголовок от HTML тегов и меняет HTML сущности (< , > , " , ") на их HTML эквиваленты. Например, знак < будет заменен на < . К заголовку применяются функции-фильтры: esc_attr() и strip_tags()
Также эта функция может принимать параметры в виде строки: "before=
&after=
"✈ 1 раз = 0.005307с = очень медленно | 50000 раз = 2.55с = быстро | PHP 7.1.2, WP 4.7.3
Хуков нет.
Возвращает
null/строку. null когда результат выводится на экран (echo=true). Заголовок когда результат возвращается (echo=true).
Использование
$args(массив/строка)Параметры в виде массива или строки. Можно передать следующие параметры:
- post
(число/объект)
ID или объект записи.
По умолчанию: текущая запись
before
(строка)
Текст/HTML код который нужно разместить перед заголовком.
По умолчанию: ""
after
(строка)
Текст/HTML код который нужно разместить после заголовка.
По умолчанию: ""
echo
(логический)
Вывести на экран (true) или возвратить для дальнейшей обработки (false).
По умолчанию: true
По умолчанию: ""
Примеры
#1. Пример использования функции в атрибуте title тега .
Так как в этом атрибуте не допускается использования html тегов кавычек и прочего, то мы не можем там использовать функцию the_title(). Взамен используем the_title_attribute() :
" title=" "Permalink to: ", "after" => "")); ?>">
Код the title attribute : wp-includes/post-template.php VER 5.1.1
"", "after" => "", "echo" => true, "post" => get_post(),); $r = wp_parse_args($args, $defaults); $title = get_the_title($r["post"]); if (strlen($title) == 0) { return; } $title = $r["before"] . $title . $r["after"]; $title = esc_attr(strip_tags($title)); if ($r["echo"]) { echo $title; } else { return $title; } }Начиная с версии 3.5 WordPress из редактора удалена функция автоматического добавления атрибута title, что на мой взгляд очень неудобно. Нет, эта функция осталась в редакторе, но чтобы добраться до нее и добавить к картинке описание нужно проделать несколько лишних манипуляций, а потом вручную заполнить необходимое поле.
В статье рассмотрим стандартный метод добавления к изображениям атрибут «title» и альтернативный, автоматический.
Посмотрим как добавлять атрибут title в редакторе WordPress по умолчанию
Как я упомянул ранее, для меня, лично, добавлять описание к картинкам способом, предложенным разработчиками WordPress, очень неудобно. Тем более, что я вообще не пользуюсь визуальным редактором WordPress и тем более не добавляю через него картинки.
Чтобы добавить атрибут title к изображению в редакторе WordPress по умолчанию нужно проделать несколько манипуляций:
1. Перейти во вкладку «Визуально»;
2. Добавить изображение стандартным способом, кликнуть по нему;
3. Нажать на кнопку редактирования в появившейся вкладке;
4. Найти и заполнить поле «Атрибут title» в «Параметры изображения» (смотрите скриншоты).
И лишь после этого появится желаемая и многострадальная подпись к картинке.
Во вкладке «Параметры изображения» можно так-же назначать собственный класс к картинке и прочие атрибуты. Как по мне, так быстрее прописать атрибут title и добавить класс к изображению вручную, используя текстовую вкладку в редакторе WordPress.
Автоматический вариант добавления title в редактор WordPress
Конечно, можно добавлять описание к картинке и так, а можно один раз добавить небольшую функцию в файл functions.php , либо в альтернативный файлу функций файл, статья Альтернатива файлу functions.php WordPress , со своими надстройками (для тех, у кого много функциональных изменений советую, чтобы при обновлении темы не слетали изменения).
Как вариант установите специальный плагин Restore Image Title . Плагин не ресурсоъемкий и имеет в себе всего-лишь две функции.
И еще один вариант — путем добавления отрывка кода напрямую в файл functions.php .
Посмотрите на скриншоты. Теперь поле «Заголовок» и будет подписью title к картинке.
Добавляем атрибут title в редактор WordPress для изображений
Для этого откройте файл functions.php и в окончание вставьте данный отрывок кода:
Function lcb_restore_image_title($html, $id) {
$attachment = get_post($id);
if (strpos($html, "title=")) {
return $html;
}
else {
$mytitle = esc_attr($attachment->post_title);
return str_replace("
Если вы пользуетесь галереей, то и к миниатюрам из галереи можно добавить атрибут title. Для этого просто к вышеопубликованному отрывку кода добавьте еще один, для галереи WordPress.
