Решаем проблему накладки тулбара на меню в Вордпресс

Решаем проблему накладки тулбара на меню в Вордпресс

26 июня 2018

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

20 новейших лендингов для Вордпресс 2018 года

Сразу договоримся, не называть тулбар админ баром. Потому что админ бара в Вордпресс нет уже с версии 3.3. Сейчас он называется тулбар. И точка.

Побороть это вечное противостояние фиксированных блоков очень просто, но сначала покажу на живом примере, о чем вообще идет речь.

Вот так выглядит накладка тулбара на меню. Пользоваться в таком виде навигацией сайта практически нереально.

Накладка тулбара на меню

В идеале должно быть так.

Тулбар Вордпресс без накладки

Мне встречались разные способы решения этой проблемы. От простейших до каких-то сложных с использованием PHP, jQuery. Все решения сводятся к одному: определить, выводится ли тулбар и сместить фиксированный блок вниз на высоту тулбара — 28 px.

Себе на вооружение я взял самый простой и 100% рабочий способ с использованием одного CSS.

У этого способа есть только один недостаток, если можно так выразиться. В теме должна быть задействована функция body_class(). Отсутствие этой функции скорее даже недостаток темы, а не данного способа.

Функция body_class() добавляет к тегу <body> список классов, относящиеся к текущей странице.

Сложно представить тему без функции body_class(), отсутствие которой, например, может стать преградой для добавления темы в официальную директорию Вордпресс или на маркетплейсы. Даже если тема не будет распространяться, мне, как разработчику, не очень понятен смысл отказа от её использования. Функция body_class() очень полезна и упрощает решение многих повседневных задач. Наверное, просто некоторые разработчики не очень внимательно читают Кодекс Вордпресс. Больше объяснений нет.

Итак, как я уже сказал выше, нам нужно решить две простые задачи.

1. Определить, выводится ли тулбар

С помощью body_class() сделать это очень просто. Если пользователь авторизован и тулбар активен, тег <body> будет содержать классы logged-in и admin-bar.

Затем выясняем класс нашего фиксированного блока, с которым конфликтует тулбар. Это можно сделать прямо в Chrome DevTools.

Chrome DevTools

В моем примере прилепленным сверху оказался весь блок <header>. Об этом явно говорят position:fixed и top:0.

2. Сместить фиксированный блок на высоту тулбара

Теперь, когда мы знаем класс фиксированного меню и можем идентифицировать страницы с тулбаром, можно переходить непосредственно к смещению.

body.logged-in.admin-bar header {
 top: 28px;
}

Если на мобильной версии сайта меню тоже фиксированное, можно пойти тем же путем, зафиксировав тулбар и сместив меню на 46 px — высоту мобильного тулбара Вордпресс.

Делается это с помощью медиа-запроса.

@media (max-width: 767px) {
 #wpadminbar {
  position: fixed;
 }
 body.logged-in.admin-bar header {
  top: 46px;
 }
}

Куда добавлять стили в тему и как правильно её кастомизировать я уже рассказывал.

Если нужно повысить узнаваемость бренда, раскрутить новое направление, привлечь новых клиентов, увеличить конверсию и просто иметь стабильно высокие позиции в поиске, без помощи SEO-специалистов не обойтись. https://webakula.ua/service/seo/ — продвижение сайта, раскрутка сайтов.

Всё самое новое и интересное из мира Вордпресс в моём Телеграм-канале. Подписываемся!

Популярное в этом месяце
Иван Данилин
Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

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

Лидер среди российских регистраторов доменных имён и хостинг-провадейров
Подробнее