Оформление произвольного меню

Как я уже говорил, “произвольное меню” в 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) результат будет выглядеть так:

wp-nav-menu
Внешний вид произвольного меню в теме “Twenty Ten”

Оформление скупое и ссылки блока не имеют персональной пиктограммки (иконки). Прошу обратить внимание, что для другой темы внешний вид данного виджета будет отличаться.

Для стилизации пунктов требуется не многое, сами иконки, предварительно загруженные в папку изображений используемой темы и небольшие правки внесенные в файл стилей темы – style.css. Иконки-пиктограммки можно найти так – google.com/search?q=бесплатные+иконки. Файл стилей находится, обычно, в корне папки используемой темы.

Для персонализации ссылок необходимо как-то выделить каждую из них, т.е. сделать так, чтобы она была уникальной по какому-либо из доступных к селекции средствами css признаков. В консоли WordPress можно добавить атрибут title (htmlbook.ru/samhtml/ssylki/atributy-ssylok) к ссылкам произвольного меню. Именно этот атрибут я и предлагаю использовать. Для определения значения этого атрибута нужно заполнить поле “Атрибут title” при редактировании ссылки Консоль > Внешний вид > Меню > Ваше произвольное меню, см. скриншот:

attribute-title-wp
Поле “Атрибут title” в которое необходимо внести уникальное значение

При заполнении значения данного поля важно использовать только латинские символы!

Для пункта “Записи” я использую значение “posts”, т.е. так:

Атрибут title запонен
Заполнено поле “Атрибут 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; можно указать не для каждого из пунктов, а для всего списка сразу, это позволит сократить объем файла стилей. И т.д. В каждом конкретно случае и для каждой конкретно темы можно найти способы оптимизации данного способа, однако, общая методика будет универсальной.

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

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