Здравствуйте, уважаемые читатели блога сайт. Валидатор 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 имеет одно преимущество — он помогает поисковым системам находить изображения на Вашем сайте и отображать их в результатах поиска по картинкам. При этом сайт получает дополнительный трафик из поисковиков. Еще одно преимущество обоих атрибутов — улучшение доступности сайта для людей с особыми потребностями.
) - вещь важная и удобная во многих смыслах.
Один из вариантов его использования – создание блока ссылок, каждая из которых, имеет собственное оформление, например, вот такой Рубрикатор:
Блок ссылок с уникальными пиктограммками
Подобная возможность есть во многих премиум темах, полагаю, есть и плагины создающие подобное меню. Мое решение подойдет для любой темы WP, оно не окажется избыточным или несущим какую-либо дополнительную нагрузку на сервер, как это иногда бывает с плагинами. Для его реализации необходимы минимальные знания css и html (можно почитать об этом тут – htmlbook.ru ) и какой-либо html-редактор, например, бесплатный notepad++ (офсайт – notepad-plus-plus.org ).
Итак, первое, что нужно сделать, это создать произвольное меню – Консоль > Внешний вид > Меню (тут и далее, путь в официально локализованной версии WP ). Затем, в случае использования виджета произвольного меню Консоль > Внешний вид > Виджеты перетащить виджет в блок сайдбара и выбрать созданное ранее произвольное меню. Думаю, что данные действия просты и не нуждаются в скриншотах. Для темы “Twenty Ten” (wordpress.org/extend/themes/twentyten ) результат будет выглядеть так:
Внешний вид произвольного меню в теме “Twenty Ten”Для стилизации пунктов требуется не многое, сами иконки, предварительно загруженные в папку изображений используемой темы и небольшие правки внесенные в файл стилей темы – style.css . Иконки-пиктограммки можно найти так – google.com/search?q=бесплатные+иконки . Файл стилей находится, обычно, в корне папки используемой темы.
Для персонализации ссылок необходимо как-то выделить каждую из них, т.е. сделать так, чтобы она была уникальной по какому-либо из доступных к селекции средствами css признаков. В консоли WordPress можно добавить атрибут title (htmlbook.ru/samhtml/ssylki/atributy-ssylok) к ссылкам произвольного меню. Именно этот атрибут я и предлагаю использовать. Для определения значения этого атрибута нужно заполнить поле “Атрибут title” при редактировании ссылки Консоль > Внешний вид > Меню > Ваше произвольное меню, см. скриншот:
Поле “Атрибут title” в которое необходимо внести уникальное значение
При заполнении значения данного поля важно использовать только латинские символы!
Для пункта “Записи” я использую значение “posts”, т.е. так:
Заполнено поле “Атрибут title”
Осталось изменить свойства данного элемента, для этого прописываем в файл style.css следующее:
Widget_nav_menu a { list-style: none; background: url(images/posts.png) no-repeat left center; }
Поясню. .widget_nav_menu – класс произвольного меню; a – селектор ссылки с атрибутом title, значение которого – posts; list-style: none; – убираем маркер пункта меню; background: url(images/posts.png) no-repeat left center; – определяем фоновый рисунок – пиктограммку данного конкретно пункта, т.е. персонализируем его. С последним свойством и его значениями можно ознакомиться по ссылке – htmlbook.ru/css/background , я лишь поясню, что images/posts.png это относительная ссылка на файл иконки которую вы желаете увидеть для данной ссылки, а left center это правила расположения данной иконки.
Выводит заголовок записи подготовленный для использования в атрибутах 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" => "")); ?>">