Сегодня будем создавать меню в подвале сайта (футере, footer) в стандартной теме wordpress — Twenty Fifteen.
Вот 3 этапа, которые необходимо выполнить для создания нижнего меню в футере сайта:
1. Регистрируем новое меню в файле functions.php.
2. Размещаем HTML код меню в файле footer.php.
3. Прописываем CSS стили для создаваемого нами меню в подвале сайта — в файле стилей — style.css.
В результате у нас получиться следующее меню:
Приступим же к созданию меню в подвале сайта, в теме Twenty Fifteen.
1. Регистрируем новое меню в файле functions.php.
Заходим в админку wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл functions.php, переходим в конец его кода и вставляем:
|
1
2
3
4
5
6
|
function footer_menu() {
register_nav_menu(‘footer-menu’,__( ‘Меню в подвале сайта’ ));
}
add_action( ‘init’, ‘footer_menu’ );
|
Теперь если вы перейдете в пункт «Внешний вид» и его подпункт «Меню», а после создадите новое меню, то wordpress предложит вам указать его расположение уже из 3 областей темы:
2. Размещаем HTML код меню в файле footer.php.
Заходим в админку wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл footer.php ищем в нем следующую строчку:
|
1
|
<footer id=«colophon» class=«site-footer» role=«contentinfo»>
|
то есть ищем открывающий тег — footer — и после него вставляем следующий код:
|
1
2
3
4
5
|
<div id=«navbar» class=«navbar»>
<nav id=«site-navigation» class=«navigation footer-navigation» role=«navigation»>
<?php wp_nav_menu( array( ‘theme_location’ => ‘footer-menu’, ‘menu_class’ => ‘footer-nav-menu’, ‘depth’ =>‘-1’ ) ); ?>
</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
|
.footer—navigation {
clear: both;
margin: 0 auto;
max—width: 1080px;
min—height: 45px;
position: relative;
}
ul.footer—nav—menu,
div.footer—nav—menu > ul {
margin: 0;
padding: 0 40px 0 0;
}
.footer—nav—menu li {
display: inline—block;
position: relative;
}
.footer—nav—menu li a {
color: #141412;
display: block;
font—size: 15px;
line—height: 1;
padding: 15px 20px;
text—decoration: none;
}
.footer—nav—menu li:hover > a,
.footer—nav—menu li a:hover,
.footer—nav—menu li:focus > a,
.footer—nav—menu li a:focus {
background—color: rgba(20,20,20,0.8);
color: #fff;
}
.footer—nav—menu .current_page_item > a
{
color: #000000;
font—weight: bold;
font—style: italic;
}
.menu—toggle {
display: none;
}
/* Navbar */
.navbar {
background—color:rgba(240,240,240,0.8) ;
margin: 0 auto 20px auto;
max—width: 1600px;
width: 100%;
border—bottom:solid 2px rgba(200,200,200,0.8);
}
|
PS: Можно создать дочернюю тему и производить все вышеуказанные действия по созданию нижнего меню непосредственно в ней.
О том как создать дочернюю тему в wordpress читайте здесь — «codex.wordpress.org/Дочерние_темы»
Статья взята из открытых источников: http://mnogoblog.ru/twenty-fifteen-dobavlyaem-menyu-v-podvale-sajta