Сегодня будем создавать горизонтальное верхнее меню в стандартной теме 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, переходим в конец его кода и вставляем:
|
1
2
3
4
5
6
7
|
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 ищем в нем следующую строчку:
|
1
|
<div id=«sidebar» class=«sidebar»>
|
и перед ней вставляем следующий код:
|
1
2
3
4
5
|
<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 и в конце его кода вставляем:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
.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/Дочерние_темы»
Статья взята из открытых источников: http://mnogoblog.ru/twenty-fifteen-dobavlyaem-verxnee-gorizontalnoe-menyu