En respuesta a: la barra de administración de WordPress se superpone a la navegación de arranque de Twitter
Preguntado por: @TheWebs
Si está utilizando Twitter Bootstrap con WordPress y tiene un problema con la barra de administración de WordPress superpuesta con su barra de navegación, probablemente esté bastante frustrado con algunas de estas respuestas. Busqué soluciones en todas partes antes de decidir finalmente cambiar a una marcha más baja y encontrar una solución que haga exactamente lo que necesito que haga.
Así que aquí hay una respuesta que no oculta la barra de administración de WordPress, o mueve la barra de administración de WordPress al final de sus páginas. Esta respuesta mantendrá la barra de administración de WordPress justo donde pertenece ... En la parte superior de sus páginas.
Tenga en cuenta que esto tomará unos pocos pasos para completar, pero vale la pena. No es realmente un proceso complicado o que consume mucho tiempo. Solo quería asegurarme de que la explicación sobre cómo hacerlo fuera clara y fácil de seguir / comprender.
Paso 1
Los temas tienen una etiqueta de plantilla para la etiqueta del cuerpo que ayudará a los autores de temas a diseñar de manera más efectiva con CSS. Se llama a la etiqueta de plantilla
body_class. Esta función le da al elemento del cuerpo diferentes clases y puede agregarse, típicamente, en la header.phpetiqueta del cuerpo del HTML.
- Abra su tema de WordPress actualmente activo usando el directorio de Twitter Bootstrap. Encuéntralo
header.phpy ábrelo.
- Encuentra
<body> .
- Reemplazar con
<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
Después de completar los tres pasos anteriores, ahora ha habilitado con éxito su tema de WordPress con las clases de cuerpo de WordPress.
Paso 2 (¡OPCIONAL!)
- Agregue clases CSS condicionales personalizadas a la
<body>etiqueta.
Por defecto, WordPress ya proporciona una lista de clases predeterminadas para la etiqueta HTML, si está utilizando las funciones body_class()o get_body_class().
Si ve el código fuente de cualquier página frontal representada en su sitio web de WordPress, notará que dos de las clases CSS agregadas automáticamente a la <body>etiqueta HTML son "iniciar sesión" y "barra de administración".
También notará que esos nombres de clase CSS solo se agregan a la <body>etiqueta HTML si el usuario está conectado, de lo contrario no se agregarán a la <body>etiqueta HTML .
Entonces, si no desea usar los nombres de clase CSS de WordPress predeterminados, puede agregar los suyos muy fácilmente.
- Abra su tema de WordPress actualmente activo usando el directorio de Twitter Bootstrap. Encuéntralo
functions.phpy ábrelo.
- Agregar
add_filter('body_class', 'mbe_body_class'); al principio del archivo.
- Agregue el siguiente código, al final del archivo.
El código:
function mbe_body_class($classes){
if(is_user_logged_in()){
$classes[] = 'body-logged-in';
} else{
$classes[] = 'body-logged-out';
}
return $classes;
}
Ahora, si ve el código fuente de cualquier página front-end representada en su sitio web de WordPress, si el usuario ha iniciado sesión, verá que se ha agregado "body-login-in" a la <body>etiqueta HTML , y si el usuario está desconectado, verá que se ha agregado "desconectado del cuerpo" a la <body>etiqueta HTML .
Paso 3
- Agregue el código CSS a su tema.
Esta es la sección de código que corregirá su tema para mostrar la barra de administración de WordPress y su navegación de Twitter Bootstrap correctamente, ya sea que el usuario haya iniciado sesión o haya cerrado sesión en su sitio web.
- Abra su tema de WordPress actualmente activo usando el directorio de Twitter Bootstrap. Encuéntralo
functions.phpy ábrelo.
- Agregar
add_action('wp_head', 'mbe_wp_head'); al principio del archivo.
- Agregue el siguiente código, al final del archivo.
El código:
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;
}
EDITAR AL CÓDIGO
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;
}
Esta versión de la función mbe_wp_head incluye una consulta de medios móvil primero, para garantizar que su encabezado se empuje hacia abajo la distancia adecuada. Para dispositivos móviles, la barra de administración de WP tiene una altura de 48 px. Después del punto de interrupción de 783 px, la barra de administración se acorta a solo 28 px de alto.
Ahí tienes. Si el usuario ha iniciado sesión, ahora debe tener la barra de administración de WordPress en la parte superior de su página, seguida inmediatamente por su navegación Bootstrapped de Twitter. Si el usuario ha cerrado sesión en su sitio web de WordPress, su navegación de Twitter Bootstrap aún debería mostrarse adecuadamente en la parte superior de su sitio web.