WordPress Admin Bar и Bootstrap Fixed Bar
- Recluse
- 19.12.2016
- 3 361
- 0
- 11.09.2022
- 1
- 1
- 0
- Содержание статьи
Фреймворка Bootstrap используется тысячами людей для создания макетов страниц, простых и сложных сайтов, в том числе и на популярной CMS WordPress. Статья посвещена тем, кто столкнулся с некорректной работой данного фреймворка и панели администратора.
Исправляем отображение панели администратора
Если вы решили сделать для своего блога свой собственный дизайн на основе популярного фреймворка Bootstrap (Twitter Bootstrap), то в процессе оформления могли столкнуться с таким явлением, как перекрытие панелью администратора WordPress фиксированного меню Bootstrap. Вот как это выглядело в случае с нашим сайтом:
Как видно, панель администратора WordPress попросту перекрывает верхнее меню. Для исправления этого неприятного момента нужно проделать следующие действия:
- Для начала нужно убедиться, что к тегу
<body>
темы дописываются нужные классы. Для этого открываемheader.php
(или другой файл, где прописан тег), и если там прописан просто только тег <body>, то заменяем его на следующее:<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
- В CSS темы добавляем следующий код:
.admin-bar .fixed-top { top: 32px; }
Работает это следующим образом: если вы залогинены и у вас включено отображение панели администратора, то функция WordPress body_class(); дописывает класс admin-bar тегу body. Затем в CSS просто задается отступ в 32 пикселя (высота панели админстратора) для класса navbar-fixed-top, являющегося подэлементом класса admin-bar.
После этого эти два меню должны перестать конфликтовать друг с другом.
Добавить комментарий