Доброго времени суток. В данной статье мы поговорим как изменить внешний вид меню WordPress. Если Вы не знаете как включить поддержку меню в Вашу тему, то прочитайте мою статью «Добавление поддержки собственного меню в тему для WordPress». В данной статье мы рассмотрим различные CSS классы, которые WordPress добавляет при генерации меню. А вот эти уже классы мы можем использовать для изменения внешнего вида меню. И так, приступим…

Первое, что нужно знать о меню WordPress – это то, что меню 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 ‘ и классом ‘ main-menu ‘. Таким образом наше меню выглядит следующим образом:

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

Теперь в нашем файле стилей следует задать CSS свойства для:

#header .main-menu{} // container class
#header .main-menu ul {} // container class first unordered list
#header .main-menu ul ul {} //unordered list within an unordered list
#header .main-menu li {} // each navigation item
#header .main-menu li a {} // each navigation item anchor
#header .main-menu li ul {} // unordered list if there is drop down items
#header .main-menu li li {} // each drop down navigation item
#header .main-menu li li a {} // each drap down navigation item anchor

Теперь рассмотрим CSS классы, которые добавляет WordPress:

.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

Вот и все. Теперь меняя CSS стили для приведенных выше классов Вы можете создать отображения меню такое, как захотите.

Статья подготовлена по материалам сайта http://www.wpbeginner.com