Как добавить атрибут title в навигационное меню WordPress. Как и где заполнять alt в WordPress? Готовая картинка с “Атрибут title”

Не так давно один из наших читателей задал вопрос: можно ли как-то добавить атрибут 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 указывает альтернативный текст для отображения в тех случаях, когда изображение не может быть выведено из-за медленного соединения,…

Иконки - немаловажная часть любого дизайна. Многие иконки являются общепризнанными. К примеру, обозначения уборных в аэровокзалах. Ведь даже без знания языка,…

Получает тег картинки указанного вложения (прикрепленного к посту файла).

Если вложение не удалось найти, то будет возвращена пустая строка.

Если вложение является картинкой, то для нее будет возвращен код, соответствующий указанному размеру (см. параметр $size).

Для прикрепленных файлов типа отличного от картинок (.zip, .xls, .flv) будет возвращена соответствующая этому типу иконка (автоматически определяется WordPress). По умолчанию такая иконка не выводится, чтобы она выводилась нужно выставить 3-й параметр ($icon) в true.

Хуки из функции

Возвращает

Строку. HTML код картинки в тега.

Использование

$img = wp_get_attachment_image($attachment_id, $size, $icon, $attr); $attachment_id(число) (обязательный) ID вложения, картинку которого нужно получить. $size(строка/массив)

Размер картинки. Можно указать в виде:

Строки thumbnail , medium , large , full или название имеющегося размера
В виде массива из 2-х элементов, определяющих размеры сторон выводимой картинки: array(32,32) .

Указание размеров через массив не уменьшает картинку физически, она уменьшается только визуально из наиболее подходящей готовой миниатюры (uploads).

Указание размеров не влияет на размеры выводимых иконок для файлов, они всегда выводятся в оригинальном размере (32х32).

Вместо использования массива, иногда логично зарегистрировать новый размер картинок (add_image_size()) и использовать его наряду с уже установленными (thumbnail , medium , large или full). Такой подход более эффективен, так как нет нужды постоянно проверять какой размер из имеющихся подходил лучше.

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

$icon(логический) Использовать ли медиа иконки, для представления вложения. По умолчанию, для вложений типа файл (не картинок), иконка выводится не будет, если нужно выводить иконки для таких типов вложений выставите этот параметр в true.
По умолчанию: false $attr(массив)

Любые атрибуты для тега в массиве. Например:

Array("class" => "foo bar", "title" => "название картинки",)

Примеры

#1. Выведем готовую для HTML картинку

Выведем картинку среднего размера прикрепленного файла-картинки 651:

Выведет примерно такой HTML:

alt текст будет заполнен, только если он указан для вложения в специальном поле (alt text). В alt не попадает текст из заголовка (title), описания (description) или подписи (caption) картинки...

#2. Пример с указанием произвольного размера

Выведем картинку указанного размера 20х20 пикселей, для вложений типа "картинка" и соответствующую иконку для остальных типов вложений (3-й параметр):

ID, array(20,20), true); ?>

$post->ID - динамическая передача ID внутри цикла. Создать такой цикл можно, использовав функцию get_posts() (get_posts("post_type=attachment")).

Код wp get attachment image : wp-includes/media.php VER 5.1.1

$src, "class" => "attachment-$size_class size-$size_class", "alt" => trim(strip_tags(get_post_meta($attachment_id, "_wp_attachment_image_alt", true))),); $attr = wp_parse_args($attr, $default_attr); // Generate "srcset" and "sizes" if not already present. if (empty($attr["srcset"])) { $image_meta = wp_get_attachment_metadata($attachment_id); if (is_array($image_meta)) { $size_array = array(absint($width), absint($height)); $srcset = wp_calculate_image_srcset($size_array, $src, $image_meta, $attachment_id); $sizes = wp_calculate_image_sizes($size_array, $src, $image_meta, $attachment_id); if ($srcset && ($sizes || ! empty($attr["sizes"]))) { $attr["srcset"] = $srcset; if (empty($attr["sizes"])) { $attr["sizes"] = $sizes; } } } } /** * Filters the list of attachment image attributes. * * @since 2.8.0 * * @param array $attr Attributes for the image markup. * @param WP_Post $attachment Image attachment post. * @param string|array $size Requested size. Image size or array of width and height values * (in that order). Default "thumbnail". */ $attr = apply_filters("wp_get_attachment_image_attributes", $attr, $attachment, $size); $attr = array_map("esc_attr", $attr); $html = rtrim("

$value) { $html .= " $name=" . """ . $value . """; } $html .= " />"; } return $html; }

Большая часть веб-контента содержит изображения, однако немногие владельцы веб-сайтов оптимизируют картинки для лучшего ранжирования сайта в поиске. WordPress предоставляет возможность добавления альтернативного текста и заголовка изображения в соответствующие теги. Рассмотрим, в чем заключается разница между атрибутами alt и title и как их использовать для работы с изображениями на сайте.

Что такое тег alt у изображений - описание картинок

Alt, или альтернативный текст, – это атрибут, добавленный к тегу вставки изображения в HTML-коде. Такой текст появляется внутри контейнера картинки, когда она по какой-либо причине не может быть отображена на странице. Это помогает поисковым системам понять, что показано на этом графическом элементе.

Атрибут alt также используется для улучшения доступности веб-сайта для людей с плохим зрением или тех, кто применяет устройства для чтения с экрана. Программа-читалка будет озвучивать текстовую статью, а когда дело дойдет до изображения, то прочитает текст, находящийся в атрибуте alt. Это позволит пользователям узнать, что нарисовано на картинке, даже если они ее не видят.

Виртуальный хостинг сайтов для популярных CMS:

Что такое атрибут подписи заголовка title для изображений в WordPress

Title – это еще один атрибут, который можно добавить к тегу изображения в HTML-коде. Он используется для заголовка графического элемента и указывает его название. Заголовок показывается во всплывающей подсказке, когда пользователь наводит курсор мыши на картинку. Текст, введенный внутри title, не будет показан пользователю, если изображение не отображается на странице.

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

Атрибут title добавляется к изображению в WordPress уже после его вставки в текст. Если вы используете визуальный редактор для оформления страницы, щелкните мышью по картинке. На появившейся дополнительной панели инструментов следует нажать кнопку редактирования с изображением карандаша.

В результате откроется всплывающее окно для настройки параметров изображения, в котором нужно открыть раздел «Дополнительные настройки». Появится поле для добавления атрибута title, куда и требуется вписать название картинки. В этом же окне доступна настройка атрибута alt на тот случай, если вы забыли ввести его при загрузке изображения. Откорректируйте оба поля и нажмите кнопку «Обновить».

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

Для оптимизации сайта рекомендуется для изображений использовать как атрибут alt, так и 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.

Добавляем атрибут title в редактор WordPress для галереи

function lcb_restore_title_to_gallery($content, $id) { $thumb_title = get_the_title($id); return str_replace(" Эти функции, отрывки кода и есть содержимое плагина Restore Image Title.

Выводит заголовок записи подготовленный для использования в атрибутах html тега.

Функция должна использоваться внутри Цикла WordPress.

Функция идентична функции the_title() , стой лишь разницей, что эта функция "чистит" заголовок от HTML тегов и меняет HTML сущности (< , > , " , ") на их HTML эквиваленты. Например, знак < будет заменен на < . К заголовку применяются функции-фильтры: esc_attr() и strip_tags()

Также эта функция может принимать параметры в виде строки: "before=