WordPress Admin Bar и Bootstrap Fixed Bar

  • Автор:
  • Опубликовано:
  • Изменено:
  • Просмотры: 368
  • Комментарии: 0
  • Рейтинг: 100,00%
  • Голосов: 3

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

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

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

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (3 оценок, среднее: 5,00 из 5)

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

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