WordPress: добавляем фиксированное навигационное меню

29 Мая 2022г. в 04:33

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



1. Добавляем область меню в файле funсtions.php
Для того, чтобы меню вывести на странице, должна иметься определенная область. Создадим новую с именем ‘topnavigation‘. Ниже приводится пример обычного кода для установки области меню в файле functions.php:

1
register_nav_menus( array(
2
'topnavigation' => __( 'Top Navigation', 'ИМЯ ВАШЕЙ ТЕМЫ' )
3
) );
Если у вас уже есть определение функции register_nav_menus, просто добавьте в нее строку для меню ‘topnavigation‘.



2. Создаем меню
Переходим в панель администратора и открываем закладку для работы с меню. Создаем новое меню и назначаем для него только что созданную область ‘Top Navigation’. Затем заполняем пунктами для переходов на страницы. В примере используются пункты Home, Store, Events и Blog.

Создаем меню



3. Вызываем меню
Нужно вызвать меню в самом верху раздела body в файле header.php. Очень важно разместить меню в собственном контейнере div. В нашем примере элемент div называется topnavigation. Нам нужно будет перемещать все в данном контейнере div со страницей позже. Есть простой способ решить задачу.

Используем следующий код в файле header.php:

1
<div id="topnavigation">
2
<?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?>
3
</div>
В итоге получим следующий результат:

Меню выводится на странице



4. Добавляем стили для меню
Теперь можно поработать над внешним видом. Установим фоновый цвет и ширину на 100% для начала.

Следующий код нужно поместить в файл style.css (или тот, который используется в вашей теме):

1
#topnavigation {
2
width: 100%;
3
background-color: #999;
4
}
Обновляем страницу и видим результат действий:

Изменили стиль меню



5. Сдвигаем меню в центр
Теперь нужно расположить наши ссылки в центре панели. Создадим элемент nav вокруг меню:

1
<div id="topnavigation">
2
<nav><?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?></nav>
3
</div>
И определим для него стили:

1
#topnavigation nav {
2
width: 940px; //у вас ширина контейнера может быть другой
3
margin: 0 auto;
4
}
5
#topnavigation li {
6
display: inline;
7
padding: 10px;
8
margin: 20px 0;
9
}
Теперь наше меню будет выглядеть так:

Обновленное меню



6. Фиксируем меню
Теперь надо зафиксировать меню. Лучше всего установить меню вверху окна и сделать его плавающим поверх остальных элементов страницы.

Изменим стили для #topnavigation:

1
#topnavigation {
2
width: 100%;
3
background-color: #999;
4
position: fixed; // Фиксируем меню вверху окна
5
z-index: 1; // Помещаем его поверх всех остальных элементов
6
height: 50px; // Устанавливаем высоту
7
}
Но если перегрузить страницу, то вы увидите, что другие элементы заходят под наше меню и тогда, когда не нужно (в самом верху страницы).

Закрывание элементов страницы

Для исправления ситуации добавим поле сверху контейнера div для остальных элементов страницы. В нашем шаблоне такой элемент div называется #page. Вносим изменения CSS кода для него:

1
#page {
2
padding-top: 60px; // Высота элемента topnavigation плюс небольшой отступ для визуальной привлекательности
3
}
Получаем окончательный результат:

Финальный вид меню

Внешний вид меню можно делать таким, какой требуется по стилю сайта.