Наложение административной панели WordPress на навигацию Twitter Bootstrap

Question

Наложение административной панели WordPress на навигацию Twitter Bootstrap

21 февр. 2013 г., 01:32:48

Просмотры: 33.7K

Голосов: 11

У меня возникла проблема с наложением административной панели WordPress на навигационную панель Twitter Bootstrap (версии 2.3.0). Я пробовал следующее решение:

body.admin-bar .navbar-fixed-top {
    top: 28px;
}

.navbar .brand {
    color: #000 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px
        rgba(255, 255, 255, 0.125);
    font-weight: bold !important;
}

.nav-container {
    padding-left: 0;
    padding-right: 0;
}

.nav-tabs, .nav-pills {
    margin-top: -6px;
}

.dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a
    {
    color: #fff !important;
}

#inner-header {
    width: 100%;
}

input,textarea,select,.uneditable-input {
    margin-bottom: 0;
}

.navbar-form,.navbar-search {
    margin: 0 0 9px;
}

.navbar-search {
    padding-left: 0;
}

#s {
    width: 100px;
}

но, увы, проблема все еще существует. Какие есть варианты решения?

TheWebs

1.1K

css html навигация twitter bootstrap админ панель

Все ответы на вопрос

У меня не сработало, но я нашел хорошее решение. В вашем файле header.php используйте функцию WordPress для проверки отображения панели инструментов, а затем создайте пустой div под div с навигацией:

<div class="navbar navbar-inverse navbar-fixed-top">
<?php 
  // Исправление наложения меню
  if ( is_admin_bar_showing() ) echo '<div style="min-height: 32px;"></div>'; 
?>
<div class="navbar-inner">

Filtah

261

6 мар. 2013 г. 17:30:52

Комментарии

Отличное решение. Мне нравится, что этот способ намного проще принятого ответа и что он проверяет is_admin_bar_showing(), а не просто факт входа пользователя, что хорошо, учитывая возможность отключения административной панели для вошедших пользователей. Спасибо!

Mark Rummel

15 мая 2014 г. 21:49:51

Начиная с WordPress 3.8, высота административной панели составляет 32px.

cowgill

31 окт. 2014 г. 11:41:47

Это немного костыльно, но я считаю это лучшим решением. Поддерживаю.

plushyObject

17 нояб. 2015 г. 22:12:34

Слегка измененное решение с использованием тернарной логики и встроенного стиля: <nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>

Mark Rummel

28 июл. 2016 г. 03:28:03

Мне больше понравилось это решение по сравнению с принятым ответом. Я реализовал аналогичную логику, которая учитывает высоту на мобильных устройствах с использованием медиазапроса: http://pastebin.com/dWxm00Hu стиль указан во встроенном теге, но вы можете переместить его в файл style.css вашей темы.

GabLeRoux

29 дек. 2016 г. 21:10:31

Показать остальные 2 комментариев

Комментарии

Почему бы не поместить CSS в style.css, например, вместо вставки его в HTML? Это было бы более элегантным решением. Также спасибо за вашу работу и идею!

therufa

14 янв. 2016 г. 16:19:29

@MaxRuf Вы абсолютно правы. Отдельный подключаемый CSS-файл был бы лучше. Я просто думал о людях, которые найдут этот пост, чтобы они могли легко скопировать/вставить. Меньше шансов столкнуться с проблемами.

Michael Ecklund

23 февр. 2016 г. 18:22:09

Вы можете попробовать это:

   .navbar-fixed-top { top: 0px; }
    body.admin-bar .navbar-fixed-top { top: 28px !important; }

Если это не сработает (хотя должно!), тогда вам придется переместить панель администратора WordPress вниз, добавив следующий код в папку плагинов или файл functions.php:

function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body { 
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// в админке
add_action( 'admin_head', 'fb_move_admin_bar' );
// на фронтенде
add_action( 'wp_head', 'fb_move_admin_bar' );

В качестве альтернативы вы можете использовать этот плагин

Я не очень люблю использовать плагины, потому что большинство из них загружают мой скрипт с ненужным кодом... Решения 1 и 2 выше работают нормально, но если они не сработают для вас, попробуйте третье решение:

function stick_admin_bar_to_bottom_css() {
echo "

html {
padding-bottom: 28px !important;
}

body.admin-bar {
margin-top: -28px;
}

#wpadminbar {
top: auto !important;
bottom: 0;
}

#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}

";
}

add_action('admin_head', 'stick_admin_bar_to_bottom_css');
add_action('wp_head', 'stick_admin_bar_to_bottom_css');

Это решение у меня работало без проблем с отступами в 28px..

Tamara

302

3 мар. 2013 г. 17:51:38

У меня не работало, пока я не добавил это в тег body:

<body <?php body_class(); ?>>

После этого всё заработало отлично!

timhc22

139

21 мар. 2013 г. 12:05:48

Исправление для Bootstrap 2 & 3 navbar-fixed-top, чтобы предотвратить наложение меню сайта на админ-меню WordPress

.admin-bar .navbar-fixed-top {
  top:46px;
  @media screen and (min-width:782px) {
    top:32px;
  }
}

Исправление для Bootstrap 4 fixed-top, чтобы предотвратить наложение меню сайта на админ-меню WordPress

.admin-bar .fixed-top {
  top:46px;
  @media screen and (min-width:782px) {
    top:32px;
  }
}

user49936

21

4 апр. 2014 г. 22:59:52

Отлично! Именно то, что я искал, однако в шаге 3 я сделал немного по-другому. Не уверен, что это имеет значение, но мой код выглядит так...

    function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Используем пользовательский класс CSS.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Используем стандартный класс CSS WordPress.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}
add_action('wp_head', 'mbe_wp_head');

Вы упомянули о добавлении в разных местах, но я всегда делал это таким образом, и это прекрасно работает. Спасибо за решение!

Brandon Morgan

1

7 мая 2014 г. 19:46:21

Комментарии

И что именно вы сделали по-другому?

kaiser

7 мая 2014 г. 20:21:22

Michael Ecklund 6.8K · Accepted Answer · 2013-10-06T20:22:36Z

Как предотвратить наложение админ-панели WordPress на панель навигации Twitter Bootstrap.

В ответ на: Админ-панель WordPress накладывается на навигацию Twitter Bootstrap

Автор вопроса: @TheWebs

Если вы используете Twitter Bootstrap вместе с WordPress и столкнулись с проблемой наложения админ-панели WordPress на вашу панель навигации, вероятно, вы уже разочаровались в некоторых предлагаемых решениях. Я искал ответы везде, прежде чем решил перейти на пониженную передачу и найти решение, которое делает именно то, что мне нужно.

Вот решение, которое не скрывает админ-панель WordPress и не перемещает её вниз страницы. Оно оставляет админ-панель там, где ей и положено быть — вверху страницы.

Обратите внимание, что для реализации потребуется несколько шагов, но оно того стоит. Процесс не сложный и не займёт много времени. Я просто хотел сделать объяснение максимально понятным и лёгким для восприятия.

Шаг 1

Добавьте get_body_class(); в тег <body> вашей темы.

В темах есть специальный теговый шаблон для тега body, который помогает авторам тем более эффективно стилизовать элементы с помощью CSS. Этот шаблон называется body_class. Функция добавляет тегу body различные классы и обычно размещается в HTML-теге body файла header.php.

Откройте директорию вашей активной темы WordPress, использующей Twitter Bootstrap. Найдите файл header.php и откройте его.
Найдите тег <body>.
Замените его на <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

После выполнения этих трёх шагов вы успешно добавили классы WordPress к тегу <body> вашей темы.

Шаг 2 (НЕОБЯЗАТЕЛЬНЫЙ!)

Добавьте собственные условные CSS-классы к тегу <body>.

По умолчанию WordPress уже предоставляет список стандартных классов для HTML-тега <body>, если вы используете функции body_class() или get_body_class().

Если вы посмотрите исходный код любой страницы вашего сайта, то заметите, что два CSS-класса — "logged-in" и "admin-bar" — автоматически добавляются к тегу <body>, но только если пользователь авторизован. В противном случае эти классы не добавляются.

Если вы не хотите использовать стандартные классы WordPress, вы можете легко добавить свои собственные.

Откройте директорию вашей активной темы WordPress, использующей Twitter Bootstrap. Найдите файл functions.php и откройте его.
Добавьте строку add_filter('body_class', 'mbe_body_class'); в начало файла.
Добавьте следующий код в конец файла.

Код:

function mbe_body_class($classes){
    if(is_user_logged_in()){
        $classes[] = 'body-logged-in';
    } else{
        $classes[] = 'body-logged-out';
    }
    return $classes;
}

Теперь, если посмотреть исходный код любой страницы, вы увидите, что при авторизации пользователя к тегу <body> добавляется класс "body-logged-in", а при выходе — "body-logged-out".

Шаг 3

Добавьте CSS-код в вашу тему.

Этот код исправит отображение админ-панели WordPress и панели навигации Twitter Bootstrap, независимо от того, авторизован пользователь или нет.

Откройте директорию вашей активной темы WordPress, использующей Twitter Bootstrap. Найдите файл functions.php и откройте его.
Добавьте строку add_action('wp_head', 'mbe_wp_head'); в начало файла.
Добавьте следующий код в конец файла.

Код:

function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Использование пользовательского CSS-класса.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Использование стандартного CSS-класса WordPress.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

ОБНОВЛЁННАЯ ВЕРСИЯ КОДА

add_action('wp_head', 'mbe_wp_head');
function mbe_wp_head(){
    echo '<style>'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'@media only screen and (min-width: 783px) {'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'}</style>'
    .PHP_EOL;
}

Эта версия функции mbe_wp_head включает медиазапрос для мобильных устройств, чтобы гарантировать правильное смещение шапки. На мобильных устройствах админ-панель WordPress имеет высоту 48px. При ширине экрана больше 783px высота панели уменьшается до 28px.

Вот и всё! Теперь, если пользователь авторизован, админ-панель WordPress будет отображаться вверху страницы, сразу за ней следует панель навигации Twitter Bootstrap. Если пользователь не авторизован, панель навигации по-прежнему будет отображаться корректно в верхней части сайта.