Arhn - архитектура программирования

Как исправить панель администратора Wordpress, уничтожающую 100% высоты

Я создаю веб-сайт, который подходит для экрана с помощью Wordpress.

Когда владелец сайта войдет в систему, появится панель администратора, но она будет иметь следующий стиль:

html{ margin-top: 28px !important; }

При этом появляется вертикальная полоса прокрутки. Есть ли способ исправить это, используя только CSS?

У кого-то была похожая проблема но ответа не получил.

Моя соответствующая структура html:

<html>
   <body>
       <div id="page">
       <div class="site-main" id="main"> 
               <div class="content-area" id="primary">

                   <div role="main" class="site-content" id="content">

                   </div><!-- #content .site-content -->

               </div><!-- #primary .content-area -->         
           </div><!-- #main .site-main -->
       </div><!-- #page -->

       <div id="wpadminbar">

       </div>

   </body>
</html>

И соответствующий CSS:

html, body, #page {
    width: 100%;
    height: 100%;
    min-width: 350px;
    margin: 0;
    padding: 0;
}
#main {
    height: 100%;
}
#primary {
    float: right;
    width: 100%;
    margin-left: -200px;
    height: 100%;
}
#content {
    margin-left: 250px;
    height: 100%;
}

Для панели администратора:

#wpadminbar {
  height: 28px;
  left: 0;
  min-width: 600px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
}

Я пробовал использовать (отрицательные) поля и отступы, а также устанавливал position панели администратора на absolute вместо fixed, но безуспешно.

wordpress html layout css viewport
21.11.2013

Ответы:


1

Загляните в wordpress/wp-includes/class-wp-admin-bar.php в начале, и вы найдете это. Внимательно следите за комментариями для фактического ответа:

if ( current_theme_supports( 'admin-bar' ) ) {
  /**
   * To remove the default padding styles
   * from WordPress for the Toolbar,
   * use the following code:
   * add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
   */
  $admin_bar_args = get_theme_support( 'admin-bar' );
  $header_callback = $admin_bar_args[0]['callback'];
}

if ( empty($header_callback) )
  $header_callback = '_admin_bar_bump_cb';

add_action('wp_head', $header_callback);

wordpress/wp-includes/admin-bar.php содержит реализацию _admin_bar_bump_cb по умолчанию:

/**
 * Default admin bar callback.
 *
 * @since 3.1.0
 */
function _admin_bar_bump_cb() { ?>
<style type="text/css" media="screen">
  html { margin-top: 28px !important; }
  * html body { margin-top: 28px !important; }
</style>
<?php
}
21.11.2013
  • Я уже могу что-то с этим сделать, но когда я удаляю 28-пиксельное поле HTML-элемента, верхние 28-пиксели сайта просто исчезают под панелью администратора. Что я могу сделать? Конечно, должна быть возможность иметь фиксированные 28 пикселей вверху, а фактический сайт занимает остальную часть высоты? 21.11.2013
  • Возможно, вы могли бы поиграть с box-sizing: border-box и padding-top и height: 100%, см. разработчик. mozilla.org/en-US/docs/Web/CSS/box-sizing 21.11.2013
  • Ни один из этих методов не работает, но я мог бы использовать overflow:hidden; для тега html и overflow:auto для тега body. 22.11.2013

    • 2

    В вашем php-коде (на странице, где вы НЕ хотите, чтобы панель администратора отображалась), просто добавьте следующее:

    add_filter('show_admin_bar', '__return_false');

    См. здесь: http://davidwalsh.name/hide-admin-bar-wordpress

    21.11.2013
  • Это не на конкретной странице, и я хочу, чтобы панель администратора была доступна в любое время, извините... 21.11.2013

    • 3

    Попробуйте следующее:

    add_action('get_header', 'fix_adminbar');

function fix_adminbar()
{
    if (is_admin_bar_showing()) {
        remove_action('wp_head', '_admin_bar_bump_cb');
        add_action(
            'wp_head', function () {
            ob_start();
            _admin_bar_bump_cb();
            $code = ob_get_clean();
            $code = str_replace('margin', 'padding', $code);
            $code = preg_replace('/{/', '{ box-sizing: border-box;', $code, 1);
            echo $code;
        }
        );
    }
}```
    19.06.2019
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..