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

Question

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

У меня есть проблема с администраторской панелью WordPress, перекрывающей Начальную загрузку Твиттера (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;
}

но увы это все еще излагает проблему. Я задаюсь вопросом, какие меры доступны?

10

admin-bar twitter-bootstrap navigation html css

Michael Ecklund 23.03.2018, 17:55

Ссылка

6 ответов

Не работал на меня, но я нашел хорошую фиксацию. В Вашем использовании header.php функция Wordpress, чтобы запросить, отображена ли панель инструментов и затем создай пустое отделение ниже 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">

25

Mark Rummel 19.02.2020, 22:00

Ссылка

1

Большая фиксация. Мне нравится этот, это намного более просто, чем принятый ответ и что он ищет is_admin_bar_showing(), не только, если пользователь зарегистрирован, который является хорошим рассмотрением кого-то, может быть зарегистрирован, но выключил администраторскую панель.Спасибо! – Mark Rummel 15.05.2014, 21:49
2

С WordPress 3.8 администраторская высота панели составляет 32 пкс. – cowgill 31.10.2014, 11:41
3

Это - немного Hacky, но я нашел, что это лучшее решение. Upvoted – plushyObject 17.11.2015, 22:12
4

Немного измененное решение с помощью троичной логики и встроенного стиля: <nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>> – Mark Rummel 28.07.2016, 03:28
5

Это хорошо за исключением мобильного устройства, смещение не составляет 32 пкс, но 46 пкс. Для составления этого, я использовал класс CSS вместо стиля. Вот класс, который может быть применен: .fix_wp_overlap { min-height: 32px; } @media screen and (max-width: 782px) { .fix_wp_overlap { top: 46px !important; } } – surfbuds 01.03.2017, 07:58

можно попробовать это:

   .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');

Это, казалось, работало на меня прекрасный без проблем на 28 пкс..

3

Tamara 19.02.2020, 22:00

Ссылка

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

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

Затем это хорошо работало!

2

timhc22 19.02.2020, 22:00

Ссылка

Прекрасно! Что я искал, однако, я сделал что-то немного по-другому на шаге 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');

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

0

user51355 19.02.2020, 22:00

Ссылка

1

И что точно Вы делали отличающийся? – kaiser 07.05.2014, 20:21

Зафиксируйте для Начальной загрузки 'navbar-fixed-top' для предотвращения наложения меню сайта с меню администратора WordPress

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

0

kaiser 19.02.2020, 22:00

Ссылка

Как препятствовать тому, чтобы администраторская панель WordPress наложилась с Вашей панелью навигации Начальной загрузки Твиттера.

В ответ на: администраторская панель WordPress, перекрывающая Твиттер, загружает навигацию

Спрошенный: @TheWebs

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

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

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

Шаг 1

Добавить get_body_class(); к Вашей теме <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 только добавляются к HTML <body> отметьте, если пользователь будет зарегистрирован, то иначе они не будут добавлены к HTML <body> тег.

Таким образом, если Вы не хотите использовать WordPress по умолчанию имена классов CSS, можно добавить собственное очень легко.

Откройте свою в настоящее время активную тему 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 если пользователь будет зарегистрирован, Вы будете видеть "зарегистрированный телом", был добавлен к HTML <body> тег, и если пользователь выходится из системы, Вы будете видеть "вышедший из системы телом", был добавлен к HTML <body> тег.

Шаг 3

Добавьте код CSS к своей теме.

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

Откройте свою в настоящее время активную тему 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 в самом верху Вашей страницы, сразу сопровождаемой Вашим Твиттером Загруженная навигация. Если пользователь вышел из Вашего веб-сайта WordPress, Ваша навигация Начальной загрузки Твиттера должна все еще отобразиться соответственно наверху Вашего веб-сайта.

Почему Вы не помещали CSS в style.css, например, вместо того, чтобы встроить его в HTML? Это было бы более изящное решение. Также спасибо за Вашу работу и идею! — Max Ruf, 14.01.2016, 16:19
@MaxRuf Вы абсолютно правы. Отдельный ставивший в очередь файл CSS был бы лучше. Я просто думал о людях, находящих это сообщение, таким образом, они могли легко просто скопировать/вставить. Менее вероятно встретиться с проблемами. — Michael Ecklund, 23.02.2016, 18:22

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

Как препятствовать тому, чтобы администраторская панель WordPress наложилась с Вашей панелью навигации Начальной загрузки Твиттера.

Шаг 1

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

Шаг 3

Теги

Похожие вопросы