В ответ на: админ-панель WordPress, перекрывающаяся с начальной загрузкой Twitter
На вопрос: @TheWebs
Если вы используете Twitter Bootstrap с WordPress и у вас есть проблема с панелью администратора WordPress, перекрывающейся с панелью навигации, вы, вероятно, довольно разочарованы некоторыми из этих ответов. Я искал решения повсюду, прежде чем в конечном итоге решил просто переключиться на пониженную передачу и найти решение, которое делает именно то, что мне нужно.
Итак, вот ответ, который не скрывает панель администратора WordPress и не перемещает панель администратора WordPress внизу ваших страниц. Этот ответ будет держать панель администратора WordPress там, где она должна быть ... В верхней части ваших страниц.
Обратите внимание, что это займет несколько коротких шагов, но оно того стоит. Это не очень сложный или длительный процесс. Я просто хотел убедиться, что объяснение того, как это сделать, было ясным и простым для понимания / понимания.
Шаг 1
Темы имеют тег шаблона для тега 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 все равно должна отображаться в верхней части вашего сайта.