n-wp.ru — блог о WordPress
Настройка стилей оформления меню в WordPress | n-wp.ru

Настройка стилей оформления меню в WordPress

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

Настройка стилей оформления меню в WordPress

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

Регистрация одного меню (файл functions.php):

Регистрация двух меню:

Затем необходимо определиться с выбором расположения пунктов, использовав опцию прикрепление меню.

Настройка стилей оформления меню в WordPress

После этого выводим меню в нужном месте (файл header.php, index.php или другой):

Если с формированием и выводом меню проблем обычно не возникает, то вот настройкой внешнего вида меню бывают проблемы — редко кого устраивает стандартное формление, всем хочется, чтобы меню вписывалось в общее обормление блога. WordPress отображает меню в виде неупорядоченного списка, настроить вид которого можно, имея базовые знания разметки CSS и HTML. Давайте познакомимся с основными классами оформления, используемыми стандартным меню.

Функция wp_nav_menu создает контейнер со структурой меню в виде списка. Оформление этого списка задается в файле style.css. Пример оформления светлого навигационного меню с выпадающим, многоуровневым списком пунктов:

В этом коде текущая страница выделяется в меню подсвеченным пунктом. Что мы получим:

Настройка стилей оформления меню в WordPress

Зная, какой класс за что отвечает, вы можете добиться любого вида меню. Вот основные классы, которые используются в контейнере, создаваемом функцией 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 этих тем — в нем вы обнаружите перечисленные выше классы оформления. Можете взять эти готовые примеры и применить их в своем проекте, либо можете использовать их как заготовки для экспериментов, и изменить – экспериментируя, вы сможете самостоятельно получить оригинальный вид навигационного меню.

Комментировать

/* ]]> */