Что такое атрибут title в wordpress. Персональный атрибут 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(") - вещь важная и удобная во многих смыслах.
Один из вариантов его использования – создание блока ссылок, каждая из которых, имеет собственное оформление, например, вот такой Рубрикатор:
Блок ссылок с уникальными пиктограммками
Подобная возможность есть во многих премиум темах, полагаю, есть и плагины создающие подобное меню. Мое решение подойдет для любой темы 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 это правила расположения данной иконки.
Не так давно один из наших читателей задал вопрос: можно ли как-то добавить атрибут 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("Выводит заголовок записи подготовленный для использования в атрибутах 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" => "")); ?>">
Загрузка...
