Как стилизировать меню в WordPress

В WordPress 3.0 была добавленна такая значимая функция, как настраиваемые меню WordPress . Однако, совсем недавно обратился читатель с вопросом, каким образом можно самостоятельно стилизировать меню. В этой статье обсудим различные классы, которые добавляются к меню WordPress по-умолчанию, и которые можно использовать для придания ему индивидуальности и эстетичности.

Внимание: Статья требует от вас средних знаний CSS и четкого понимания того, как работает CMS WordPress

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

<!--?php wp_nav_menu(); ?-->

Тогда добавится меню в теге < div > без классов, назначенных этому контейнеру. Ваш маркированный список должен иметь название класса меню с многочисленными списками, у каждого из которых также будут собственные классы. Это работает, только если у вас одно меню. Однако, если хочется еще бОльших настроек, то нужно будет использовать такие параметры: ‘container_class’, ‘container_id’, ‘menu_class’, и ‘menu_id’. Также будет замечательно, если вы дадите каждому меню свое «имя» и определите местоположение на сайте. Так что теперь ваш код для меню должен выглядеть примерно так:

<!--?php wp_nav_menu(array( 'sort_column' =--> 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu', 'container_id' => 'header', 'theme_location'  => 'header') ); ?>

Здесь мы определили, что название нашего меню — «Categories«, и оно должно быть помещено под контейнер, id у которого — ‘header‘, также назначили css-класс для меню — ‘main-menu‘. И это означает, что мы почти создали свое первое меню. Код нужно будет заключить в такие теги:

<div class="main-menu" id="header">
<ul class="menu" id="menu-categories">

Помните, что необязательно добавлять id контейнера, если ваша тема не предполагает его использования. Можно просто обойтись параметром container_class. Также, в своем файле CSS-стилей нужно будет стилизировтаь классы в следующем порядке:

#header .main-menu{}           /* контейнер */
#header .main-menu ul {}       /* первый неупорядоченный список */
#header .main-menu ul ul {}    /* неупорядоченный список в неупорядоченном списке */
#header .main-menu li {}       /* пункт списка */
#header .main-menu li a {}     /* ссылка в пункте списка */
#header .main-menu li ul {}    /* вложенный список в пункте списка */
#header .main-menu li li {}    /* выпадающий элемент навигации */
#header .main-menu li li a {}  /* анкор выпадающего элемента */

Также существуют несколько предопределенных WordPress’ом классов, которые можно стилизировать и которые являются существенными для того, чтобы ваше меню выглядело так, как вы того хотите. Вот список некоторых классов, которые ВП добавляет в пределах меню для возможности их последующей настройки:

.current_page_item{}           /* Класс для текущей страницы */
.current-cat{}                 /* Класс для текущей рубрики */
.current-menu-item{}           /* Класс для любого другого текущего пункта меню */
.menu-item-type-taxonomy{}     /* Класс для таксономии */
.menu-item-type-post_type{}    /* Класс для страницы */
.menu-item-type-custom{}       /* Класс для любого пользовательского элемента, который был добавлен */
.menu-item-home{}              /* Класс для элемента, ведущего на главную страницу блога */

Обратите внимание, что классы, которые указывались выше, находятся в списке тегов. Вам не обязательно редактировать каждый из них. Обычно, никто не заморачивается с, например, классом menu-item-type, ибо в большинстве макетов/шаблонов не требуется такого рода стилизация. Опять же, если в вашей теме это необходимо применить — применяйте!

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

Да, Вордпресс и на этот случай предусмотрел настройку в административной панели в разделе Меню, но по умолчанию она отключена. Поэтому, идем во «Внешний вид -> Меню«, нажимаем на Настройки экрана и включаем галочку Classes (Классы CSS).

После того, как вы отметите этот чекбокс, вы увидите дополнительное поле у каждого элемента меню.

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

wpincode.com