Barra de administración de WordPress Superposición de navegación de Bootstrap de Twitter [cerrado]

10

Tengo un problema con la barra de administración de WordPress superpuesta a la 2.3.0barra de navegación de Twitter Bootstrap ( ). He intentado esta solución:

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;
}

pero, por desgracia, sigue planteando un problema. Me pregunto qué soluciones hay disponibles.

css html navigation twitter-bootstrap admin-bar TheWebs
fuente

17

Cómo evitar que la barra de administración de WordPress se superponga con la barra de navegación de Twitter Bootstrap.

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

Agregue get_body_class();a la <body>etiqueta de su tema .

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.

Michael Ecklund
fuente

1

¿Por qué no pones el css en style.css por ejemplo, en lugar de incrustarlo en el html? Sería una solución más elegante. ¡También gracias por tu trabajo y la idea!

Max Ruf

@MaxRuf Tienes toda la razón. Un archivo CSS separado en cola sería mejor. Estaba pensando en las personas que encontraban esta publicación, para que pudieran simplemente copiar / pegar. Menos probabilidades de encontrar problemas.

Michael Ecklund

25

No funcionó para mí, pero encontré una buena solución. En su header.php, use la función wordpress para consultar si se muestra la barra de herramientas, y luego cree un div vacío debajo del div de la barra de navegación:

<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">

Filtah
fuente

Gran arreglo Me gusta que esto sea mucho más simple que la respuesta aceptada y que busque is_admin_bar_showing(), no solo si el usuario ha iniciado sesión, lo cual es bueno teniendo en cuenta que alguien puede haber iniciado sesión, sino que ha desactivado la barra de administración. ¡Gracias!

Mark Rummel

3

A partir de WordPress 3.8, la altura de la barra de administración es de 32 px.

cowgill

Esto es un poco Hacky, pero he encontrado que esta es la mejor solución. Upvoted

plushyObject

Solución ligeramente modificada usando lógica ternaria y un estilo en línea:<nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>

Mark Rummel

1

Esto es bueno, excepto en un dispositivo móvil, el desplazamiento no es de 32 píxeles sino de 46 píxeles. Para explicar esto, utilicé una clase CSS en lugar de un estilo. Aquí está la clase que se puede aplicar:

.fix_wp_overlap {   min-height: 32px; }  @media screen and (max-width: 782px) { .fix_wp_overlap {     top: 46px  !important;   } }

surfbuds

3

puedes probar esto:

   .navbar-fixed-top { top: 0px; }
    body.admin-bar .navbar-fixed-top { top: 28px !important; }

si eso funciona para usted (¡lo cual debería ser!), entonces tendrá que mover la barra de administración de wp hacia abajo pegando el código a continuación en una carpeta de complementos o en su archivo 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' );

como alternativa puedes usar este plugin

Realmente no me gusta usar complementos porque la mayoría del tema carga mi script con códigos falsos que no necesito ... la solución 1 y 2 anterior funciona bien, pero si no funciona para usted, puede probar la solución 3 a continuación:

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

Eso pareció funcionar bien para mí sin los problemas de 28px.

Tamara
fuente

2

No funcionó para mí hasta que agregué esto a la etiqueta del cuerpo:

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

Entonces funcionó bien!

timhc22
fuente

0

¡Perfecto! Justo lo que estaba buscando, sin embargo, hice algo un poco diferente en el paso 3. No estoy seguro de que importe pero mi código se ve así ...

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

Usted mencionó agregar en diferentes lugares, pero siempre lo he hecho así y parece funcionar bien. Gracias por la solución!

usuario51355
fuente

1

¿Y qué hiciste exactamente diferente?

Kaiser

0

Arreglo para Bootstrap 'navbar-fixed-top' para evitar la superposición del menú del sitio con el menú de administración de WordPress

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

user49936
fuente