Você já viu alguém adicionando widgets ao cabeçalho no WordPress e deseja aprender como fazer isso?
Os widgets permitem que você adicione blocos de conteúdo a seções específicas do seu tema com facilidade, mas nem todo tema inclui uma área de widget para o cabeçalho (header).
Neste artigo, mostraremos como adicionar facilmente um widget do WordPress ao cabeçalho do seu site.
Por Que Adicionar Widgets no Cabeçalho do seu Site?
Ao visitar um site WordPress, o cabeçalho é uma das primeiras coisas que chamam a atenção dos visitantes. É uma área importante para capturar a atenção do leitor e transmitir informações essenciais. Uma maneira eficaz de otimizar o cabeçalho do seu site é adicionar um widget do WordPress a essa área.
Geralmente, os cabeçalhos dos sites incluem um logotipo personalizado e um menu de navegação para facilitar a navegação dos visitantes pelo site. No entanto, você também pode aproveitar o espaço acima ou abaixo dessa área para adicionar um widget de cabeçalho. Isso permite que você apresente conteúdo útil, anúncios em banner, ofertas exclusivas por tempo limitado, formulários de contato simplificados e muito mais.
Embora a maioria dos temas WordPress ofereça áreas prontas para widgets na barra lateral e no rodapé do site, nem todos têm uma área de cabeçalho dedicada para widgets. No entanto, não se preocupe! Se o seu tema não possui essa funcionalidade, você ainda pode criar um tema WordPress personalizado do zero, mesmo sem conhecimento em codificação.
Antes de explorarmos a criação de um tema personalizado, vamos dar uma olhada em como adicionar um widget WordPress ao cabeçalho do seu site usando o tema existente. Vamos lá!
1. Adicionando um Widget ao Cabeçalho Usando um Tema WordPress
Ao procurar adicionar um widget ao cabeçalho do seu site WordPress, é importante verificar se o seu tema atual oferece suporte a uma área de widget específica para essa finalidade. Muitos dos melhores temas do WordPress possuem essa funcionalidade e permitem que você personalize o cabeçalho de acordo com suas preferências.
Para verificar se o seu tema atual suporta uma área de widget no cabeçalho, você pode acessar o personalizador de temas do WordPress ou a área de widgets no painel de administração. Basta ir para “Aparência” e selecionar “Personalizar” para ver se há uma opção para editar o cabeçalho.
Neste exemplo, usaremos o tema gratuito Astra, que oferece uma opção chamada “Header Builder”. Mostraremos como utilizar esse recurso específico no Astra, mas é importante ressaltar que cada tema pode ter suas próprias configurações e opções de personalização para o cabeçalho.
Se você clicar nele, será levado a uma tela para editar seu cabeçalho e adicionar widgets.
Na parte inferior da tela, você pode personalizar completamente o cabeçalho, juntamente com as áreas acima e abaixo do cabeçalho. Basta passar o mouse sobre uma das áreas vazias e clicar no ícone ‘Mais’.
Isso abre um menu pop-up onde você pode selecionar ‘Widget 1‘.
Existem opções adicionais para escolher, mas você precisará selecionar uma das opções de ‘Widget’ para deixar o cabeçalho pronto para o widget.
Para adicionar uma área de widget ao seu cabeçalho, clique na caixa ‘Widget 1‘ que está na seção do personalizador de cabeçalho.
Isso traz a opção de adicionar um widget.
Em seguida, clique no ícone de adicionar bloco “Mais” no menu à esquerda.
Isso abre um pop-up onde você pode selecionar um widget para adicionar ao seu cabeçalho.
Você pode continuar personalizando seu cabeçalho e adicionar quantos widgets desejar.
Quando terminar, certifique-se de clicar no botão ‘Publicar‘ para salvar suas alterações.
Agora você pode visualizar sua área de cabeçalho com o widget ou widgets adicionados.
Não está usando o Astra?
Outra maneira de ver se o seu tema já possui um widget de cabeçalho do WordPress é navegando até Aparência » Widgets no painel de administração do WordPress.
Em seguida, veja se há uma seção de widget chamada “Cabeçalho” ou “Header”.
Se houver, basta clicar no ícone de adicionar bloco ‘Mais‘ para abrir o menu de widgets.
Em seguida, você pode adicionar qualquer widget que desejar clicando nele.
Certifique-se de clicar no botão ‘Atualizar‘ para salvar suas alterações na área do widget de cabeçalho.
2. Adicionando um Widget ao Cabeçalho Usando Códigos
Se o seu tema do WordPress não possui uma área de widget no cabeçalho, você pode adicioná-la manualmente inserindo código no WordPress. Para fazer isso, siga as etapas a seguir:
- Caso ainda não tenha feito, consulte nosso guia sobre como copiar e colar código no WordPress para garantir que você esteja familiarizado com o processo.
- Em seguida, adicione o seguinte trecho de código ao arquivo functions.php do seu tema. Você pode acessar esse arquivo por meio do painel de administração do WordPress, navegando até “Aparência” e selecionando “Editor de Temas”. Certifique-se de ter cuidado ao editar o arquivo, pois qualquer erro pode afetar o funcionamento do seu site.
- Se preferir, você também pode utilizar um plugin específico do seu site ou um plugin de trechos de código para adicionar o código fornecido.
Ao adicionar esse código, você estará criando uma área de widget no cabeçalho do seu site WordPress, onde poderá inserir e personalizar os widgets desejados.
function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Custom Header Widget Area',
'id' => 'custom-header-widget',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );Se você for para Aparência » Widgets , verá uma nova área de widget chamada ‘Área de widget de cabeçalho personalizado’.
Agora, você pode adicionar seus widgets a essa nova área.
No entanto, seu widget de cabeçalho ainda não será exibido ao vivo em seu site. Mostraremos como fazer isso a seguir.
Exibindo o Widget no Cabeçalho no WordPress
Agora que você configurou a área de widget do cabeçalho, é importante informar ao WordPress onde exatamente você deseja exibi-la em seu site.
Para fazer isso, você precisará fazer uma edição no arquivo header.php do seu tema. É aqui que você terá controle total sobre o posicionamento do widget.
Você pode adicionar o código a seguir no local onde deseja que o widget seja exibido:
<?php
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
<div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
<?php dynamic_sidebar( 'custom-header-widget' ); ?>
</div>
<?php endif; ?>Ao adicionar esse código, você estará incorporando a área de widget que você criou anteriormente à seção do cabeçalho do seu site.
Agora, é hora de conferir o resultado ao vivo. Visite o seu blog WordPress e você verá a área do widget do cabeçalho em pleno funcionamento, permitindo que você exiba conteúdos personalizados e envolventes para seus visitantes.
Use CSS para Personalizar sua Área de Widget
Dependendo do seu tema, você também pode precisar adicionar CSS ao WordPress para controlar como a área do widget de cabeçalho e cada widget dentro dela são exibidos..
Em seguida, navegue até Aparência » Personalizar no painel de administração do WordPress.
Isso abre o painel do personalizador de temas do WordPress. Você precisa clicar na guia ‘CSS Adicional‘.
Agora você tem a oportunidade de adicionar CSS personalizado diretamente ao seu tema e visualizar as alterações em tempo real.
Aqui está um exemplo de código CSS para você começar:
div#header-widget-area {
width: 100%;
background-color: #f7f7f7;
border-bottom: 1px solid #eeeeee;
text-align: center;
padding: 20px;
}
h2.chw-title {
margin-top: 0px;
text-align: left;
text-transform: uppercase;
font-size: small;
background-color: #feffce;
width: 130px;
padding: 5px;
}Basta copiar esse código CSS e adicioná-lo à caixa “CSS Adicional” disponível no personalizador do tema. A partir daí, você poderá ver imediatamente as alterações estilísticas aplicadas à área do widget do cabeçalho.
Sinta-se à vontade para ajustar as propriedades CSS conforme necessário para atender ao design e estilo desejados. Experimente diferentes cores, tamanhos de fonte e outros estilos para obter o resultado perfeito para o seu site.
Quando terminar de adicionar seu CSS, certifique-se de clicar no botão ‘Publicar‘ para salvar suas alterações.
Aqui está a aparência do widget de cabeçalho personalizado com as alterações de CSS ao vivo.
Esperamos que este artigo tenha ajudado você a aprender como adicionar um widget WordPress ao cabeçalho do seu site.
