Как стилизировать WordPress меню
Доброго времени суток. В данной статье мы поговорим как изменить внешний вид меню 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