Оформление произвольного меню. Атрибут title wordpress в меню что это

Добавляем атрибут Title к изображениям WordPress

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

Что такое атрибут Title у изображений?

В HTML изображения выводятся с помощью тега img. Вот так:

Однако, роботы поисковиков не могут увидеть ваши изображения. Для того, чтобы помочь им, вы можете добавить атрибут для того, чтобы задать альтернативный текст для области изображения. Это атрибут описывает то, что отображает картинка. Вот так:

Тег alt также отображается, когда изображение не найдено или когда браузер не может загрузить картинки. Вот так:

broken-img2[1]

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

Этот атрибут title появляется во всплывающей подсказке, когда пользователь наводит мышь на изображение. Люди, пользующимся экранными дикторами (схожим программным обеспечением) могут настроить программу для чтения этого заголовка (title).

image-title-popup[1]

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

Проблема

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

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

Добавление атрибута Title к изображениям WordPress

Первым делом вам необходимо установить и активировать плагин Restore Image Title. После активации просто перейдите в редактор записей и попробуйте загрузить изображение. После того, как оно будет загружено, используйте поле Title для добавления любого нужного текста, который вы хотите видеть в атрибуте title.

title-attribute-wp[1]

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

title-displayed-editor[1]

Плагин берет значение, которое вы ввели в заголовке изображения и добавляет его в код вставки картинки в качестве title атрибута.

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

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

VN:F [1.9.22_1171]

Rating: 5.0/5 (1 vote cast)

wpincode.com

Remove Title Attributes | WordPress.org

The title attribute is best used to add optional advisory information to a page element. WordPress’s default behaviour is to add title attributes to pretty much every link that it can, whether it has advisory information about it to offer or not. For example, links in Page lists, archive menus, and in the default «Recent Posts» widget simply duplicate the link text in their title attributes. This helps no one but hinders some users.

Remove Title Attributes lets you remove these title attributes, making your website more accessible.

Download the plugin’s zip file, extract the contents, and upload them to your wp-content/plugins folder.
Login to your WordPress dashboard, click «Plugins», and activate Remove Title Attributes.
Customise your settings on the Settings > Remove Title Attributes page.

Why aren’t all of my title attributes removed?

There are two ways that title attributes are added to WordPress websites. Some title attributes are added by WordPress functions such as wp_list_pages(), wp_list_categories(), wp_get_archives(), etc.; these can be removed with Remove Title Attributes. Other title attributes are hard-coded in theme files, so cannot be removed using a plugin. To remove these, you will need to edit your theme files.

Why aren’t title attributes removed from my Recent Posts sidebar widget?

WordPress includes a built-in Recent Posts sidebar widget that includes hard-coded title attributes that can’t be removed using a plugin. Remove Title Attributes creates an alternative Recent Posts (No Title Attributes) sidebar widget that you can use in its place.

«Remove Title Attributes» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

ru.wordpress.org

Оформление произвольного меню | blog.verha.net

Как я уже говорил, “произвольное меню” в WordPress (codex.wordpress.org/Function_Reference/wp_nav_menu) — вещь важная и удобная во многих смыслах.

Один из вариантов его использования – создание блока ссылок, каждая из которых, имеет собственное оформление, например, вот такой Рубрикатор:

Блок ссылок с уникальными пиктограммками

Подобная возможность есть во многих премиум темах, полагаю, есть и плагины создающие подобное меню. Мое решение подойдет для любой темы 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[title="posts"] { list-style: none; background: url(images/posts.png) no-repeat left center; }

Поясню. .widget_nav_menu – класс произвольного меню; a[title="posts"] – селектор ссылки с атрибутом title, значение которого – posts; list-style: none; – убираем маркер пункта меню; background: url(images/posts.png) no-repeat left center; – определяем фоновый рисунок – пиктограммку данного конкретно пункта, т.е. персонализируем его. С последним свойством и его значениями можно ознакомиться по ссылке – htmlbook.ru/css/background, я лишь поясню, что images/posts.png это относительная ссылка на файл иконки которую вы желаете увидеть для данной ссылки, а left center это правила расположения данной иконки.

Указанный выше код потребуется повторить для каждого пункта меню!

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

Код можно улучшить, например, за счет того, что все изображения-пиктограммки собираются в т.н. спрайт (google.com/search?q=css-спрайт), что приведет к уменьшению количества запросов к серверу, т.е. ускорит работу сайта. Затем, свойство list-style: none; можно указать не для каждого из пунктов, а для всего списка сразу, это позволит сократить объем файла стилей. И т.д. В каждом конкретно случае и для каждой конкретно темы можно найти способы оптимизации данного способа, однако, общая методика будет универсальной.

Опубликовано 28.9.2012

Обратите внимание на предыдущие записи:

blog.verha.net