Как добавить атрибут title в навигационное меню WordPress. Оформление произвольного меню

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

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

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

Если вложение является картинкой, то для нее будет возвращен код, соответствующий указанному размеру (см. параметр $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; }

Начиная с версии 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.

Автоматическая вставка атрибута title, дает возможность сократить время для оптимизации изображений при вставке их в статьи блога. Поэтому, лишний раз, не нужно будет заходить в редактирование изображения и добавлять атрибут title в ручную. Для этого нам нужно сделать некоторые действия и затем наслаждаться результатом.

Атрибут title

Прекрасно. Теперь наш “Атрибут title” будет вставляться автоматически и нам не понадобиться, его вставлять в ручную. Что сэкономит наше драгоценное время при написании статей.

После того, как мы вставляем картинку.

Готовая картинка с “Атрибут title”

Видим, что “Атрибут title” вставляется автоматически (Рис.8). Это видно при наведении курсора мыши на изображение, после чего появляется описание “Наша картинка” (п.1).

В последней версии WordPress, когда был изменен текстовый редактор “Атрибута title” нет и он там не работает, что очень печально. Так как “Атрибут title” используется для оптимизации блога и появления текста при наведении мышью на картинку.

Хотя новый редактор довольно интересен и напоминает мне . Хотя конечно к нему нужно привыкнуть.

Я же использую старый редактор, так как считаю, что новый еще сыроват. Для того, чтобы вернуться к старому редактору нужно просто Classic Editor и работать в привычном редакторе. В котором данный код работает прекрасно.

Ну, а новым блочным редактором можно будет воспользоваться, когда его все же приведут в надлежащее состояние.

Прекрасно! Вот мы и познакомились с прекрасной возможностью автоматической вставки поля “Атрибут title”.

Пользуйтесь и экономьте свое время.

Буду рад Вашим вопросам и комментариям

Успехов Вам
С уважением Владимир Шишков

Похожие статьи