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
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.php
tag body do HTML.
- Abra seu tema WordPress atualmente ativo usando o diretório Twitter Bootstrap. Encontre
header.php
e 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.php
e 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.php
e 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.
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:
fonte
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!<nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>
.fix_wp_overlap { min-height: 32px; } @media screen and (max-width: 782px) { .fix_wp_overlap { top: 46px !important; } }
você pode tentar isso:
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:
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:
Isso pareceu funcionar bem para mim sem os problemas de 28 pixels.
fonte
Não funcionou para mim até que eu adicionei isso à tag body:
Então funcionou bem!
fonte
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 ...
Você mencionou adicionar em lugares diferentes, mas eu sempre fiz isso assim e parece funcionar muito bem. Obrigado pela correção!
fonte
Correção para o Bootstrap 'navbar-fixed-top' para evitar sobreposição do menu do site com o menu de administração do WordPress
fonte