WordPress Admin Bar и Bootstrap Fixed Bar

  • 19.12.2016
  • 3 361
  • 0
  • 11.09.2022
  • 1
  • 1
  • 0
WordPress Admin Bar и Bootstrap Fixed Bar

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

Исправляем отображение панели администратора

Если вы решили сделать для своего блога свой собственный дизайн на основе популярного фреймворка Bootstrap (Twitter Bootstrap), то в процессе оформления могли столкнуться с таким явлением, как перекрытие панелью администратора WordPress фиксированного меню Bootstrap. Вот как это выглядело в случае с нашим сайтом:

Как видно, панель администратора WordPress попросту перекрывает верхнее меню. Для исправления этого неприятного момента нужно проделать следующие действия:

  1. Для начала нужно убедиться, что к тегу <body> темы дописываются нужные классы. Для этого открываем header.php (или другой файл, где прописан тег), и если там прописан просто только тег <body>, то заменяем его на следующее: <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
  2. В CSS темы добавляем следующий код:
    .admin-bar .fixed-top {
    	top: 32px;
    }

Работает это следующим образом: если вы залогинены и у вас включено отображение панели администратора, то функция WordPress body_class(); дописывает класс admin-bar тегу body. Затем в CSS просто задается отступ в 32 пикселя (высота панели админстратора) для класса navbar-fixed-top, являющегося подэлементом класса admin-bar.

После этого эти два меню должны перестать конфликтовать друг с другом.

Была ли эта статья Вам полезна?

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Напоминаем Вам, что Ваше сообщение будет опубликовано только после проверки администратором сайта. Обычно это занимает 1-2 рабочих дня.