Панель администратора WordPress, перекрывающаяся с навигацией по начальной загрузке Twitter [закрыто]

10

Закрыто. Этот вопрос не по теме . В настоящее время он не принимает ответы.

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он подходил для WordPress Development Stack Exchange.

Закрыто 5 лет назад .

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

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;
}

но увы это все еще создает проблему. Мне интересно, какие исправления доступны?

css html navigation twitter-bootstrap admin-bar TheWebs
источник

17

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

В ответ на: админ-панель WordPress, перекрывающаяся с начальной загрузкой Twitter

На вопрос: @TheWebs

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

Итак, вот ответ, который не скрывает панель администратора WordPress и не перемещает панель администратора WordPress внизу ваших страниц. Этот ответ будет держать панель администратора WordPress там, где она должна быть ... В верхней части ваших страниц.

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

Шаг 1

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

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

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

Выполнив три вышеуказанных шага, вы успешно включили свою тему WordPress с классами тела WordPress.

Шаг 2 (ДОПОЛНИТЕЛЬНО!)

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

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

Если вы просматриваете исходный код любой визуализированной интерфейсной страницы на своем веб-сайте WordPress, вы заметите, что два из классов CSS автоматически добавляются в HTML. <body> тег - это «залогинен» и «админ-бар».

Вы также заметите, что эти имена классов CSS добавляются в <body>тег HTML, только если пользователь вошел в систему, иначе они не будут добавлены в HTML.<body> тег .

Поэтому, если вы не хотите использовать имена классов CSS по умолчанию в 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;
}

Теперь, если вы просматриваете исходный код любой отрендеренной интерфейсной страницы на своем веб-сайте WordPress, если пользователь вошел в систему, вы увидите, что «body-logged-in» был добавлен в <body>тег HTML , и если пользователь Выйдя из системы, вы увидите, что «тело вышло из системы» было добавлено в HTML<body> тег .

Шаг 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;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    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 включает в себя медиа-запрос для мобильных устройств, чтобы гарантировать, что ваш заголовок перемещен на нужное расстояние. Для мобильных устройств панель администратора WP имеет высоту 48 пикселей. После точки останова 783 пикселя админ-бар укорачивается до 28 пикселей в высоту.

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

Майкл Эклунд
источник

1

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

Макс Руф

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

Майкл Эклунд

25

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

<div class="navbar navbar-inverse navbar-fixed-top">
<?php 
  // Fix menu overlap
  if ( is_admin_bar_showing() ) echo '<div style="min-height: 32px;"></div>'; 
?>
<div class="navbar-inner">

Filtah
источник

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

Марк Руммель

3

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

пастушка

Это немного Hacky, но я считаю, что это лучшее решение. Upvoted

plushyObject

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

Марк Руммель

1

Это хорошо, за исключением того, что на мобильном устройстве смещение составляет не 32, а 46 пикселей. Чтобы учесть это, я использовал класс CSS вместо стиля. Вот класс, который можно применить:

.fix_wp_overlap {   min-height: 32px; }  @media screen and (max-width: 782px) { .fix_wp_overlap {     top: 46px  !important;   } }

Surfbuds

3

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

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

если это работает для вас (что и должно быть!), вам придется переместить панель администратора wp вниз, вставив приведенный ниже код в папку плагинов или в файл 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>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

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

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

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.

Тамара
источник

2

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

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

Тогда все работало нормально!

timhc22
источник

0

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

    function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}
add_action('wp_head', 'mbe_wp_head');

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

user51355
источник

1

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

Кайзер

0

Исправлена ошибка, из-за которой Bootstrap 'navbar-fixed-top' предотвращал перекрытие меню сайта с помощью меню администратора WordPress.

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

user49936
источник