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