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

Когда была написана статья "WordPress плагины для организации меню", я понял, что в ней речь пошла о плагинах лишь потому, что сам я никогда не старался до конца понять систему настройки и редактирования меню. Именно тогда я сделал себе "зарубку на память" относительно того, чтобы изучить, как создаются навигационные меню в WordPress. Ранее я научился модифицировать уже существующие меню; но в этот раз предлагаю вам вместе со мной научиться созданию собственных меню "с нуля".

Как устроена система меню в WordPress

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

На первом шаге при создании меню разработчики тем задают заголовки меню и расположение их на странице путем регистрации меню в структуре темы. Следующим шагом является прикрепление меню к заданным локациям и выбор стилей для отображения. Также разработчик темы может задать поддержку множества навигационных меню в своей теме. И последним шагом в работе с меню является редактирование меню самими пользователями с помощью встроенного редактора Menu Editor.

Регистрация и отображение меню навигации в WordPress

Регистрация меню — сравнительно простая процедура, и все что вам надо, — это задать расположение меню, прописать его регистрацию и задать имя для нового меню в теме сайта:

register_nav_menu( 'header-menu', 'Header Menu');
	// Or you can register multiple menus at once:
register_nav_menus(
   		array(
     			'header-menu' => __( 'Header Menu' ),
     			'Top-menu' => __( 'Top Menu' )
   		)
		  );

После регистрации нового меню вы сможете добавлять его к вашим темам оформления сайта. Выглядит это вот так:

<nav id="access" role="navigation">
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav>

Работаем над стилем оформления меню для WordPress

Функция wp_nav_menu позволяет вам задать контейнер для меню, а также значения параметров container id, menu id и menu class. Делается это для того, чтобы позже можно было легко менять стиль вашего меню. Перед тем, как вы углубитесь в настройку стиля для вашего меню WordPress, важно разобраться в классах CSS , которые используются в настройке и работе с меню для WordPress.

Давайте сначала посмотрим на то, как мы будем подгонять стиль для нашего меню навигации:

#access {
	background: #4572BF; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#4572BF, #6187C7);
	background: -o-linear-gradient(#4572BF, #6187C7);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4572BF), to(#6187C7)); /* older webkit syntax */
	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%;
}

Теперь мы стилизуем неупорядоченный список, добавим эффекты и создадим вложенные меню:

#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
#access li {
	float: left;
	position: relative;
}
#access a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
#access 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;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access 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;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: #efefef;
}
#access li:hover > a,
#access a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}
#access ul li:hover > ul {
	display: block;
}

Стилизуем готовую страницу:

#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
	font-weight: bold;
}

Изучение классов CSS используемых в системе меню для WordPress

WordPress отображает меню в виде неупорядоченного списка. Если вы новичок в работе с CSS, тогда вам стоит остановиться, не читать этот пост дальше, а вместо этого почитать довольно ветхое по времени, но все еще актуальное руководство "CSS Design: Taming Lists" для того, чтобы обрести базовое понимание того, как из неупорядоченного списка создать красивое навигационное меню для своего сайта.

В этом неупорядоченном изначально списке WordPress каждому компоненту меню назначает свой класс. Есть класс для контейнера, который содержит весь неупорядоченный список; есть класс container ID, есть класс css для меню и отдельные классы для каждого типа и компонента меню с собственным css.

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

Класс CSS Описание класса
.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 Обеспечивает обратную совместимость, когда меню по умолчанию возвращает к wp_page_nav
.page-item-$ID
.current_page_item

Заключение

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

Источник: WPLift.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

14 комментариев

сначала новые
по рейтингу сначала новые по хронологии
Екатерина

Здравствуйте
а не сможете подсказать, как разделить между собой пункты в горизонтальном меню? Тоесть они в готовом шаблоне идут просто на светлом фоне. Хочется чтобы между ними была черта хотябы разделительная. Спасибо если кто-о откликнется

Добрый день, использую тему i-craft, подскажите пожалуйста как изменить размер шрифта меню без изменения размера шрифта на сайте ? если просматривать в инструментах разработчика каким селектором задается стиль то это body. Пробовал добавить в редакторе новое правило(font-size: 20 px;) для селекторов: menu, nav-container, site-navigation, navbar ничего не получается

Не нужно добавлять новое правило, нужно найти уже существующее правило, которое отвечает за этот шрифт, и изменить его. Это тоже можно посмотреть в инспекторе разработчика в стилях.

Добрый день, может сможете помочь, у меня проблема с меню, а где править не знаю, уже 2 дня сижу. Меню отображается по разному в разных браузерах. и тема то хорошая и новая.

А что именно не так с вашим меню на картинке?

А как отредактировать шрифт в меню?

Помогите wordpress 4.0 создание темы

Поставил пустую обертку с underscores.me
и все равно не работает половина параметров для wp_nav_menu()
беру из http://codex.wordpress.org/Function_Reference/wp_nav_menu

не работает $after , $menu_class задает класс контейнера, $container_class ничего не задает.

Так же пишут что к каждому должен добавляться .menu-item , что тоже не работает.

Что я делаю не так?

Андрей Смоляков

Скажите пожалуйста хочу отредактировать файл СSS плагина, а он собака такая отсутствует в разделе редактора плагинов. В редакторе тем там отдельно прям есть справа заголовок "стили" и ниже файлы CSS, а нет ничего.

Отредактируйте этот файл локально на компьютере и загрузите обновленную версию на сайт. Это самый простой способ.

Андрей Смоляков

Сейчас так и делаю, но может есть какой нибудь плагин редактора для Wordpress?

А я благодарен автору. Более 3 часов искал инфу, пробовал сам там css подгонять - ничего не вышло, не позволяют знания с нуля сделать. А тут вставил, заработало! И уже начал подгонять под себя. Спасибо!

Есть ли способ вывести такое меню с миниатюрами?

Александр

к сожалению, тема не раскрыта :(

Анатолий

Хорошая информация, вот только так сухо подана.