В WordPress есть удобная система создания навигационного меню, позволяющая разработчикам сайтов самостоятельно создавать меню и выпадающие списки различного типа. Возможно редактирование навигационного меню, имеется возможность добавления новых подпунктов в самостоятельно созданный список каскадного меню, также имеется ряд полезных кастомизаций.
Начиная с третьей версии WordPress, создатели сайтов получили возможность самостоятельно интегрировать навигационное меню, естественно, имеется продуманная система редактирования.
Для начала требуется условная регистрация меню в структуре выбранной темы, для этого разработчиком задаются параметры заголовка меню и его расположения.
Регистрация одного меню (файл functions.php):
register_nav_menu( 'header-menu', 'Header Menu');
Регистрация двух меню:
register_nav_menus( array( 'header-menu' => __( 'Header Menu' ), 'Top-menu' => __( 'Top Menu' ) ) );
Затем необходимо определиться с выбором расположения пунктов, использовав опцию прикрепление меню.
После этого выводим меню в нужном месте (файл header.php, index.php или другой):
<nav id="acodeess" role="navigation"> 'primary' ) ); ?> </nav>
Если с формированием и выводом меню проблем обычно не возникает, то вот настройкой внешнего вида меню бывают проблемы – редко кого устраивает стандартное формление, всем хочется, чтобы меню вписывалось в общее обормление блога. WordPress отображает меню в виде неупорядоченного списка, настроить вид которого можно, имея базовые знания разметки CSS и HTML. Давайте познакомимся с основными классами оформления, используемыми стандартным меню.
Функция wp_nav_menu создает контейнер со структурой меню в виде списка. Оформление этого списка задается в файле style.css. Пример оформления светлого навигационного меню с выпадающим, многоуровневым списком пунктов:
#acodeess { background: #4572BF; /* сплошной цвет для старых браузеров */ background: -moz-linear-gradient(#4572BF, #6187C7); background: -o-linear-gradient(#4572BF, #6187C7); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4572BF), to(#6187C7)); /* старый webkit синтаксис */ background: -webkit-linear-gradient(#4572BF, #6187C7); -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; clear: both; display: block; float: left; margin: 0 auto 6px; width: 100%; } #acodeess ul { font-size: 13px; list-style: none; margin: 0 0 0 -0.8125em; padding-left: 0; } #acodeess li { float: left; position: relative; } #acodeess a { color: #eee; display: block; line-height: 3.333em; padding: 0 1.2125em; text-decoration: none; } #acodeess ul ul { -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); box-shadow: 0 3px 3px rgba(0,0,0,0.2); display: none; float: left; margin: 0; position: absolute; top: 3.333em; left: 0; width: 188px; z-index: 99999; } #acodeess ul ul ul { left: 100%; top: 0; } #acodeess ul ul a { background: #f9f9f9; border-bottom: 1px dotted #ddd; color: #444; font-size: 13px; font-weight: normal; height: auto; line-height: 1.4em; padding: 10px 10px; width: 168px; } #acodeess li:hover > a, #acodeess ul ul :hover > a, #acodeess a:focus { background: #efefef; } #acodeess li:hover > a, #acodeess a:focus { background: #f9f9f9; /* сплошной цвет для старых браузеров */ background: -moz-linear-gradient(#f9f9f9, #e5e5e5); background: -o-linear-gradient(#f9f9f9, #e5e5e5); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* старый webkit синтаксис */ background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); color: #373737; } #acodeess ul li:hover > ul { display: block; } #acodeess .current-menu-item > a, #acodeess .current-menu-ancestor > a, #acodeess .current_page_item > a, #acodeess .current_page_ancestor > a { font-weight: bold; }
В этом коде текущая страница выделяется в меню подсвеченным пунктом. Что мы получим:
Зная, какой класс за что отвечает, вы можете добиться любого вида меню. Вот основные классы, которые используются в контейнере, создаваемом функцией wp_nav_menu:
.menu-item – главный класс оформления для каждого пункта меню
.menu-item-object-{object} – класс для пунктов меню, являющихся ссылкой на категорию, метку, страницу, и т.д.
пример:
.menu-item-object-category
.menu-item-object-tag
.menu-item-object-page
.menu-item-object-{custom}
.menu-item-type-{type} – параметр {Type} используется для параметров post_type или taxonomy
пример:
.menu-item-type-post_type
.menu-item-type-taxonomy
.current-menu-item – класс, присваеваемый текущей странице
.menu-item-home – класс для меню, отображаемого на главной странице
.page_item – класс, указывающий на признак страницы, например, на ее ID
пример:
.page-item-$ID
.current_page_item
Изменяя описание этих классов, вы можете добиться того, что мнею будет выглядеть так, как вам нужно. Тем, кто еще только учится, овладевает CSS, советую скачать несколько тем, к тогорых вам понравился внешний вид навигационного меню, и изучить файл style.css этих тем – в нем вы обнаружите перечисленные выше классы оформления. Можете взять эти готовые примеры и применить их в своем проекте, либо можете использовать их как заготовки для экспериментов, и изменить – экспериментируя, вы сможете самостоятельно получить оригинальный вид навигационного меню.