Сегодня будем создавать горизонтальное верхнее меню в стандартной теме wordpress – Twenty Fifteen.

Скачать исходники для статьи можно ниже

В теме Twenty Fifteen уже есть 2 области меню: “Основное меню” и “Меню социальных ссылок” – однако, располагаются они в боковой колонке (сайдбаре).

В данной же статье мы будем создавать горизонтальное меню в верхней части сайта, вот 3 этапа, которые необходимо выполнить:

1. Регистрируем новое меню в файле functions.php.
2. Размещаем HTML код меню в файле header.php.
3. Прописываем CSS стили для создаваемого нами верхнего горизонтального меню в файле стилей – style.css.

В результате у нас получиться следующее меню:

Приступим же к созданию верхнего горизонтального меню в теме Twenty Fifteen.

1. Регистрируем новое меню в файле functions.php.

Заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл functions.php, переходим в конец его кода и вставляем:

function top_header_menu() {

register_nav_menu('top-header-menu',__( 'Верхнее меню' ));

}

add_action( 'init', 'top_header_menu' );

Теперь если вы перейдете в пункт “Внешний вид” и его подпункт “Меню”, а после создадите новое меню, то wordpress предложит вам указать его расположение уже из 3 областей темы:

2. Размещаем HTML код меню в файле header.php.

Заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл header.php ищем в нем следующую строчку:

<div id="sidebar" class="sidebar">

и перед ней вставляем следующий код:

<div id="navbar" class="top-navbar">
				<nav id="site-navigation" class="navigation top-navigation" role="navigation">							
					<?php wp_nav_menu( array( 'theme_location' => 'top-header-menu', 'menu_class' => 'top-nav-menu' ) ); ?>					
				</nav><!-- #site-navigation -->
			</div><!-- #navbar -->

3. Прописываем CSS стили для создаваемого нами верхнего горизонтального меню в файле стилей – style.css.

Заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css и в конце его кода вставляем:

.top-navigation {
	clear: both;
	margin: 0 auto;
	max-width: 1080px;
	min-height: 45px;
	position: relative;
	float:right;
}

ul.top-nav-menu,
div.top-nav-menu > ul {
	margin: 0;
	padding: 0 40px 0 0;
}

.top-nav-menu li {
	display: inline-block;
	position: relative;
}

.top-nav-menu li a {
	color: #141412;
	display: block;
	font-size: 15px;
	line-height: 1;
	padding: 15px 20px;
	text-decoration: none;
}

.top-nav-menu li:hover > a,
.top-nav-menu li a:hover,
.top-nav-menu li:focus > a,
.top-nav-menu li a:focus {
	background-color: rgba(154,154,154,0.8);
	color: #fff;
}

.top-nav-menu .sub-menu,
.top-nav-menu .children {
	background-color: rgba(154,154,154,0.8);
	border: 2px solid #f7f5e7;
	border-top: 0;
	padding: 0;
	position: absolute;
	left: -2px;
	z-index: 99999;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.top-nav-menu .sub-menu ul,
.top-nav-menu .children ul {
	border-left: 0;
	left: 100%;
	top: 0;
}

ul.top-nav-menu ul a,
.top-nav-menu ul ul a {
	color: #fff;
	margin: 0;
	width: 200px;
}

ul.top-nav-menu ul a:hover,
.top-nav-menu ul ul a:hover,
ul.top-nav-menu ul a:focus,
.top-nav-menu ul ul a:focus {
	background-color: rgba(154,154,154,0.8);
}

ul.top-nav-menu li:hover > ul,
.top-nav-menu ul li:hover > ul,
ul.top-nav-menu .focus > ul,
.top-nav-menu .focus > ul {
	clip: inherit;
	overflow: inherit;
	height: inherit;
	width: inherit;
}

.top-nav-menu .current_page_item > a,
.top-nav-menu .current_page_ancestor > a,
.top-nav-menu .current-menu-item > a,
.top-nav-menu .current-menu-ancestor > a {
	color: #111111;
	font-style: italic;
}



/* Navbar */
.top-navbar {
	background-color: rgba(254,254,254,0.8);
	border-color:rgba(200,200,200,1);
	border-bottom-style:solid;
	border-bottom-width:1px;
	margin: 0 auto;
	max-width: 1400px;
	width: 100%;
	position:fixed !important;
	z-index:1;	
}

PS: Можно создать дочернюю тему и производить все вышеуказанные действия по созданию горизонтального меню в ней.
О том как создать дочернюю тему в wordpress читайте здесь – “codex.wordpress.org/Дочерние_темы”