Barra de administração do WordPress sobreposta à navegação de inicialização do Twitter [fechada]

10

Estou tendo um problema com a barra de administração do WordPress que se sobrepõe à 2.3.0barra de navegação do Twitter Bootstrap ( ). Eu tentei esta correção:

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

mas, infelizmente, ainda está apresentando um problema. Gostaria de saber quais correções estão disponíveis?

css html navigation twitter-bootstrap admin-bar TheWebs
fonte

17

Como impedir que a barra de administração do WordPress se sobreponha à sua barra de navegação do Twitter Bootstrap.

Em resposta a: barra de administração do WordPress sobreposta à navegação de inicialização do twitter

A pedido de: @TheWebs

Se você estiver usando o Twitter Bootstrap com WordPress e tiver um problema com a barra de administração do WordPress sobreposta à sua barra de navegação, provavelmente ficará frustrado com algumas dessas respostas. Procurei soluções em todos os lugares antes de finalmente decidir reduzir a marcha para uma marcha mais baixa e descobrir uma solução que faça exatamente o que eu preciso.

Então, aqui está uma resposta que não oculta a barra de administração do WordPress ou move a barra de administração do WordPress para a parte inferior das suas páginas. Esta resposta manterá a barra de administração do WordPress exatamente onde ela pertence ... No topo de suas páginas.

Observe que serão necessários alguns passos curtos para concluir, mas vale a pena. Não é realmente um processo complicado ou demorado. Eu só queria ter certeza de que a explicação sobre como fazê-lo fosse clara e fácil de seguir / entender.

Passo 1

Adicione get_body_class();à <body>tag do seu tema .

Os temas têm uma tag de modelo para a tag body, que ajudará os autores do tema a estilizar com mais eficácia com CSS. A tag de modelo é chamada body_class. Essa função fornece ao elemento body diferentes classes e pode ser adicionada, normalmente, à header.phptag body do HTML.

Abra seu tema WordPress atualmente ativo usando o diretório Twitter Bootstrap. Encontre header.phpe abra-o.
Encontre <body> .
Substituir com <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

Após concluir as três etapas acima, você ativou com sucesso o seu tema WordPress com as classes de corpo do WordPress.

Etapa 2 (OPCIONAL!)

Adicione classes CSS condicionais personalizadas à <body>tag.

Por padrão, o WordPress já fornece uma lista de classes padrão para a tag HTML, se você estiver usando as funções body_class()ou get_body_class().

Se você visualizar o código-fonte de qualquer página front-end renderizada em seu site WordPress, notará que duas das classes CSS adicionadas automaticamente à <body>tag HTML são "logado" e "barra de administrador".

Você também notará que os nomes das classes CSS são adicionados à <body>tag HTML apenas se o usuário estiver conectado, caso contrário, eles não serão adicionados à <body>tag HTML .

Portanto, se você não quiser usar os nomes de classe CSS padrão do WordPress, poderá adicionar seus próprios facilmente.

Abra seu tema WordPress atualmente ativo usando o diretório Twitter Bootstrap. Encontre functions.phpe abra-o.
Adicione add_filter('body_class', 'mbe_body_class'); ao topo do arquivo.
Adicione o seguinte código, na parte inferior do arquivo.

O código:

function mbe_body_class($classes){
    if(is_user_logged_in()){
        $classes[] = 'body-logged-in';
    } else{
        $classes[] = 'body-logged-out';
    }
    return $classes;
}

Agora, se você visualizar o código-fonte de qualquer página front-end renderizada no seu site WordPress, se o usuário estiver conectado, verá "body-log-in" foi adicionado à <body>tag HTML e se o usuário estiver desconectado, você verá "corpo desconectado" foi adicionado à <body>tag HTML .

etapa 3

Adicione o código CSS ao seu tema.

Esta é a seção de código que corrigirá seu tema para exibir a barra de administração do WordPress e a navegação do Twitter Bootstrap corretamente, independentemente de o usuário estar conectado ou desconectado do seu site.

Abra seu tema WordPress atualmente ativo usando o diretório Twitter Bootstrap. Encontre functions.phpe abra-o.
Adicione add_action('wp_head', 'mbe_wp_head'); ao topo do arquivo.
Adicione o seguinte código, na parte inferior do arquivo.

O 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 PARA 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 versão da função mbe_wp_head inclui uma consulta de mídia móvel primeiro, para garantir que o cabeçalho seja empurrado para a distância correta. Para dispositivos móveis, a barra de administração do WP tem 48px de altura. Após o ponto de interrupção de 783px, a barra de administrador diminui para apenas 28px de altura.

Aí está. Se o usuário estiver logado, agora você deve ter a barra de administração do WordPress na parte superior da sua página, seguida imediatamente pela navegação de inicialização do Twitter. Se o usuário estiver desconectado do seu site WordPress, sua navegação no Twitter Bootstrap ainda deverá ser exibida adequadamente na parte superior do seu site.

Michael Ecklund
fonte

11

Por que você não colocou o css no style.css, por exemplo, em vez de incorporá-lo ao html? Seria uma solução mais elegante. Também obrigado por seu trabalho e pela idéia!

Max Ruf 14/01

@MaxRuf Você está absolutamente certo. Arquivo CSS enfileirado separado seria melhor. Eu estava pensando nas pessoas que encontravam este post, para que elas pudessem copiar / colar facilmente. Menos provável de encontrar problemas.

Michael Ecklund 23/02

25

Não funcionou para mim, mas achei uma boa solução. No header.php, use a função wordpress para consultar se a barra de ferramentas é exibida e crie uma div vazia abaixo da div da barra de navegação:

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

Great fix. Gosto que isso seja muito mais simples do que a resposta aceita e que ela procure is_admin_bar_showing(), não apenas se o usuário estiver conectado, o que é bom, considerando que alguém pode estar conectado, mas desativou a barra de administração. Obrigado!

Mark Rummel

3

A partir do WordPress 3.8, a altura da barra de administração é 32px.

Cowgill

Isso é um pouco Hacky, mas eu achei a melhor solução. Upvoted

plushyObject

Solução ligeiramente modificada usando a lógica ternária e um estilo inline:<nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>

Mark Rummel

11

Isso é bom, exceto em um dispositivo móvel, o deslocamento não é de 32 px, mas 46 px. Para explicar isso, usei uma classe CSS em vez de um estilo. Aqui é a classe que pode ser aplicado:

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

surfbuds

3

você pode tentar isso:

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

se isso funcionar para você (o que deveria!), será necessário mover a barra de administração do wp para baixo, colocando o código abaixo em uma pasta de plug-ins ou no arquivo 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, você pode usar este plugin

Eu realmente não gosto de usar plugins porque a maioria dos temas carrega meu script com códigos falsos que eu não preciso ... as soluções 1 e 2 acima funcionam bem, mas se não funcionar para você, tente a solução 3 abaixo:

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

Isso pareceu funcionar bem para mim sem os problemas de 28 pixels.

Tamara
fonte

2

Não funcionou para mim até que eu adicionei isso à tag body:

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

Então funcionou bem!

timhc22
fonte

0

Perfeito! No entanto, exatamente o que eu estava procurando, fiz algo um pouco diferente na etapa 3. Não tenho certeza se isso importa, mas meu código se parece com isso ...

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

Você mencionou adicionar em lugares diferentes, mas eu sempre fiz isso assim e parece funcionar muito bem. Obrigado pela correção!

user51355
fonte

11

E o que exatamente você fez diferente?

Kaiser #

0

Correção para o Bootstrap 'navbar-fixed-top' para evitar sobreposição do menu do site com o menu de administração do WordPress

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

user49936
fonte