Deseja adicionar um widget WordPress à área de cabeçalho do seu site? Os widgets permitem adicionar facilmente blocos de conteúdo às seções designadas do seu tema. Neste artigo, mostraremos como adicionar facilmente um widget do WordPress ao cabeçalho do site.
Nota: Este é um tutorial de nível intermediário. Você precisará adicionar código aos seus arquivos de tema do WordPress e escrever CSS.
Por que e quando você precisa de um widget de cabeçalho no seu site?
Os widgets permitem que você adicione facilmente blocos de conteúdo a uma área designada no seu tema WordPress. Essas áreas designadas são chamadas barras Áreas prontas para o lado ou widget.
Você pode usar uma área pronta para widget no cabeçalho ou antes do conteúdo para exibir anúncios, artigos recentes ou o que quiser.
Essa área específica é chamada de "Abaixo da dobra" e todos os sites populares a usam para mostrar coisas realmente importantes.
Temas do WordPress geralmente adicionam barras lados próximos ao conteúdo ou na área do rodapé. Poucos temas do WordPress adicionam áreas prontas para widget ao conteúdo ou cabeçalho.
É por isso que neste artigo, abordaremos como adicionar uma área de widget ao cabeçalho do site WordPress.
Ele passou 1. Criar uma área de widget de cabeçalho
Primeiro, precisamos criar uma área de widget personalizada. Esta etapa permitirá que você visualize sua área de widget personalizada em Aparência »Widgets página no seu painel do WordPress.
Você precisará adicionar esse código ao arquivo functions.php do seu tema.
função wpb_widgets_init () {
register_sidebar (array (
'name' => 'Área do widget de cabeçalho personalizado',
'id' => 'widget de cabeçalho personalizado',
'before_widget' => '
',
'after_widget' => '
',
'before_title' => '
',
'after_title' => '
',
));
}
add_action ('widgets_init', 'wpb_widgets_init');
Este código registra uma nova barra lateral ou área pronta para widget para o seu tema.
Agora você pode ir para Aparência »Widgets página, e você verá uma nova área de widget chamada “Área de widget de cabeçalho personalizado”.
Vá em frente e adicione um widget de texto a essa área de widget recém-criada e salve-o. Consulte o nosso guia sobre como adicionar e usar widgets no WordPress para obter instruções detalhadas sobre como adicionar widgets.
Ele passou 2- Mostre seu widget de cabeçalho personalizado
Se você visitar seu site agora, não poderá ver o widget de texto que acabou de adicionar ao seu widget de cabeçalho recém-criado.
Isso ocorre porque ainda não dissemos ao WordPress onde exibir essa área do widget.
Vamos fazer isso nesta etapa.
Você precisará editar o arquivo header.php no seu tema e adicionar este código onde deseja exibir sua área de widget personalizada.
Não esqueça de salvar suas alterações.
Agora você pode visitar o site deles e verá a área do widget de cabeçalho.
Você notará que parece um pouco polido. É aí que você precisará de CSS para torná-lo melhor.
Ele passou 3: Projete a área do widget de cabeçalho com CSS
Dependendo do seu tema, você precisará adicionar CSS para controlar como a área do widget de cabeçalho é exibida e cada widget dentro dela.
A maneira mais fácil de fazer isso é usando o plugin CSS Hero. Ele permite que você use uma interface de usuário intuitiva para alterar o CSS de qualquer tema do WordPress. Para mais detalhes, consulte nossa revisão do CSS Hero.
Se você não quiser usar um plug-in, poderá adicionar CSS personalizado ao seu tema, visitando Aparência »Personalizar página.
Isso iniciará a interface do personalizador de temas do WordPress. Você precisará clicar na guia "CSS adicional".
A guia CSS adicional no personalizador de temas permite adicionar seu CSS personalizado enquanto observa as alterações que aparecem na visualização ao vivo.
Para fins deste tutorial, estamos assumindo que você usará somente essa área para adicionar um único widget para exibir anúncios em banner ou um widget de menu personalizado.
Aqui estão alguns exemplos de CSS para ajudar você a começar.
div # header-widget-area {
largura: 100%;
cor de fundo: # f7f7f7;
borda inferior: 1px sólido #eeeeee;
alinhamento de texto: centro;
}
h2.chw-title {
margem superior: 0 px;
alinhamento de texto: esquerda;
transformação de texto: maiúscula;
tamanho da fonte: pequeno;
cor de fundo: #feffce;
largura: 130px;
estofamento: 5px;
}
Esta é a aparência da nossa área de widget de cabeçalho personalizado no tema padrão Twenty Seventeen.
Pode ser necessário ajustar o CSS para corresponder ao seu tema. Dê uma olhada no nosso guia sobre como adicionar estilos personalizados aos widgets do WordPress.
Esperamos que este artigo tenha ajudado você a aprender como adicionar um widget WordPress ao cabeçalho do site. Você também pode ver nossa lista dos 25 widgets WordPress mais úteis para o seu site.
Se você gostou deste artigo, assine o nosso canal YouTube para assistir a vídeos tutoriais do WordPress. Você também pode encontrar-nos em Twitter e Facebook.
