У відповідь на: Адміністраторська панель WordPress перекриває навігацію завантажувального твітера
На запитання: @TheWebs
Якщо ви використовуєте Twitter Bootstrap з WordPress і маєте проблеми з панеллю адміністрування WordPress, що перекривається з вашою панеллю навігації, ви, мабуть, досить засмучені деякими з цих відповідей. Я шукав рішення скрізь, перш ніж врешті-решт вирішив просто переключитися на нижчу передачу і придумав рішення, яке робить саме те, що мені потрібно для цього.
Отож ось відповідь, яка не приховує панель адміністрування WordPress, або перемістіть панель адміністрування WordPress внизу ваших сторінок. Ця відповідь збереже панель адміністрування WordPress там, де вона належить ... У верхній частині ваших сторінок.
Зверніть увагу: для виконання цього знадобиться кілька коротких кроків, але воно того варте. Це насправді не складний або трудомісткий процес. Я просто хотів, щоб пояснення, як це зробити, було зрозумілим і легким для дотримання / розуміння.
Крок 1
У темах є тег шаблону для тегу body, який допоможе авторам тем краще стилізувати CSS. Викликається тег шаблону
body_class. Ця функція дає елементу тіла різні класи і може бути додана, як правило, у header.phpтег HTML HTML.
- Відкрийте поточно активну тему WordPress за допомогою каталогу завантаження програми Twitter. Знайдіть
header.phpі відкрийте.
- Знайдіть
<body> .
- Замінити
<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
Виконавши три кроки вище, ви успішно включили свою тему WordPress за допомогою занять WordPress.
Крок 2 (ОПЦІЙНО!)
- Додайте до
<body>тегу власні умовні класи CSS .
За замовчуванням WordPress вже надає список класів за замовчуванням до тегу HTML, якщо ви використовуєте функції body_class()або get_body_class().
Якщо ви переглядаєте вихідний код будь-якої наданої передньої сторінки на своєму веб-сайті WordPress, ви помітите два класи CSS, які автоматично додаються до <body>тегу HTML, - це "вхід у систему" та "панель адміністратора".
Ви також помітите, що імена класів CSS додаються до <body>тегу HTML лише тоді, коли користувач увійшов у систему, інакше вони не будуть додані до <body>тегу HTML .
Тож якщо ви не хочете використовувати за замовчуванням імена класів WordPress CSS, ви можете додати свої власні дуже легко.
- Відкрийте поточно активну тему WordPress за допомогою каталогу завантаження програми Twitter. Знайдіть
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" було додано до <body>тегу HTML , а якщо користувач - Вийшовши з системи, ви побачите, що " <body>тег -вихід із системи" доданий до тегу HTML .
Крок 3
- Додайте CSS-код до своєї теми.
Це розділ коду, який виправить вашу тему для відображення як адміністративної панелі WordPress, так і належної навігації у Twitter Bootstrap, незалежно від того, чи користувач увійшов або вийшов з вашого веб-сайту.
- Відкрийте поточно активну тему WordPress за допомогою каталогу завантаження програми Twitter. Знайдіть
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 пікселів у висоту. Після точки перерви 783px панель адміністрування скорочується до 28px у висоту.
Там у вас є. Якщо користувач увійшов у систему, тепер у вас має бути адміністраторний рядок WordPress в самому верхньому куті сторінки, одразу слідуючи за навігацією у Twitter Bootstrapped. Якщо користувач вийшов із вашого веб-сайту WordPress, навігація у вашому Twitter Bootstrap все одно повинна відображатися належним чином у верхній частині вашого веб-сайту.