WordPress Admin Bar и Bootstrap Fixed Bar

  • 687
  • 0
  • 100,00%
  • 4

Если вы решили сделать для своего блога свой собственный дизайн на основе популярного фреймворка 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;
    }

    Если у вас одна из последних версий Bootstrap 4, то код должен быть немного другим:

    .admin-bar .sticky-top {
    	top: 32px;
    }

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

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



Оценить статью

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
(Голосов: 4, Рейтинг: 5,00 из 5,00)

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

Ваш e-mail не будет опубликован.