Добавляем атрибут title в редактор WordPress. Автоматическая вставка атрибута title в WordPress

08.07.2019

Выводит заголовок записи подготовленный для использования в атрибутах 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(массив/строка)

Параметры в виде массива или строки. Можно передать следующие параметры:

    before (строка)
    Текст/HTML код который нужно разместить перед заголовком.
    По умолчанию: ""

    after (строка)
    Текст/HTML код который нужно разместить после заголовка.
    По умолчанию: ""

    echo (логический)
    Вывести на экран (true) или возвратить для дальнейшей обработки (false).
    По умолчанию: true

  • post (число/объект)
    ID или объект записи.
    По умолчанию: текущая запись

По умолчанию: ""

Примеры

#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; } }

Здравствуйте, уважаемые читатели блога сайт. Валидатор 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, чтобы убрать из индекса дубли

Не так давно один из наших читателей задал вопрос: можно ли как-то добавить атрибут title в меню WordPress ? Этот атрибут отображает дополнительную информацию о ссылке в виде текстовой подсказки, которая появляется при наведении курсора. В данной статье мы покажем, как добавить атрибут title в меню WordPress .

Зачем нужен Title в меню?

title – это HTML-атрибут , который можно задать для любого элемента. Но чаще всего он используется именно в ссылках и изображениях.

Данный атрибут отображает дополнительную информацию о ссылке или картинке:


Обычно браузеры отображают title при наведении курсора мыши. Это позволяет пользователям увидеть, куда ведет ссылка.

Некоторые SEO-специалисты считают title HTML атрибут бесполезным, другие же верят, что этот атрибут крайне полезен для SEO , так как он позволяет предоставлять больше контента.

Разработчики WordPress удалили атрибут title из окна добавления ссылки в версии 4.2 . Раз уж мы заговорили об этом, то научимся добавлять title в меню WordPress .

Добавление атрибута Title в элементы навигационного меню WordPress

Зайдите в раздел Appearance=> Menus (Внешний вид=>Меню ) и перейдите на вкладку Screen Options (Настройки экрана ), расположенную в правом верхнем углу:


Там откроется меню, в котором нужно будет поставить галочку в свойстве «Атрибут title ».

Затем пролистайте страницу и нажмите на любой элемент меню для его открытия. В нем вы увидите поле для атрибута title :


Теперь вы сможете добавлять любой текст в атрибут title WordPress для всех элементов навигационного меню. Не забудьте нажать на кнопку «Сохранить », чтобы не потерять изменения.


С помощью jQuery можно довести до ума этот атрибут, добавив разных эффектов при наведении курсора. Надеемся, что данная статья помогла вам разобраться в настройке атрибута title в меню WordPress .

Перевод статьи «How to Add Title Attribute in WordPress Navigation Menus » был подготовлен дружной командой проекта

Хорошо Плохо

    Обязательный атрибут 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 это правила расположения данной иконки.

На сегодняшний день изображениям среди всего веб-контента отводится довольно большое место. Однако не все пользователи оптимизируют их для лучшего ранжирования всего сайта в целом. 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 имеет одно преимущество — он помогает поисковым системам находить изображения на Вашем сайте и отображать их в результатах поиска по картинкам. При этом сайт получает дополнительный трафик из поисковиков. Еще одно преимущество обоих атрибутов — улучшение доступности сайта для людей с особыми потребностями.