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

Настройка стилей оформления меню в WordPress | n-wp.ru
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

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

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

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

register_nav_menu( 'header-menu', 'Header Menu');

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

register_nav_menus(
    array(
    	'header-menu' => __( 'Header Menu' ),
    	'Top-menu' => __( 'Top Menu' )
   	)
);

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

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

После этого выводим меню в нужном месте (файл 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;
}

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

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

Создай свой первый сайт на WordPress

Рут
Оцените автора
Добавить комментарий

×
WPShop
честная партнерка!

Зарабатывай до 3225₽ с каждой продажи

Подключиться
к партнерке ⟶