Como criar widget de cabeçalho personalizado no WordPress

Você está procurando maneiras de criar um widget de cabeçalho em seu site? Você veio ao lugar certo. Mostraremos como você pode criar facilmente um widget de cabeçalho personalizado no WordPress .

Ter um cabeçalho atraente é fundamental para impressionar seus visitantes. Além disso, pode ser o local perfeito para exibir ofertas por tempo limitado ou oportunidades especiais. Se o seu tema não suportar esta área de widget, você pode criar uma manualmente. Neste guia, mostraremos como criar um widget de cabeçalho personalizado no WordPress .

Antes de vermos como fazer isso, vamos entender melhor os benefícios dos widgets de cabeçalho personalizados.

Por que criar um widget de cabeçalho personalizado no WordPress?

O cabeçalho é a primeira coisa que os visitantes veem quando chegam ao seu site. É uma das coisas que os usuários prestam mais atenção, então a maioria dos sites exibe seu conteúdo mais importante, como ofertas especiais e menus nos cabeçalhos.

Se esse é o lugar que os usuários prestam atenção, é tentador adicionar muito conteúdo lá. No entanto, você deve evitar ter muitos links em seu menu principal (cabeçalho). Ter muito conteúdo no menu de cabeçalho não é uma prática recomendada porque pode confundir os usuários e fazer com que seu site fique com uma aparência ruim. É aí que um widget de cabeçalho pode ser útil. Você pode adicionar um widget de cabeçalho personalizado abaixo da barra de navegação principal e adicionar widgets extras a esse espaço sem sobrecarregar o menu principal.

Criar um widget de cabeçalho personalizado permite exibir qualquer coisa, seja um anúncio, widget de boletim informativo, banner, conteúdo de texto, ofertas do WooCommerce e widgets personalizados sem problemas. Dessa forma, você pode adicionar conteúdo ao seu cabeçalho enquanto o mantém organizado.

Agora que entendemos melhor a importância de um widget de cabeçalho personalizado, vamos aprender como criar um com o mínimo de esforço.

Como criar widget de cabeçalho personalizado no WordPress

Já vimos métodos diferentes para personalizar o cabeçalho do WordPress. Nesta seção, no entanto, aprenderemos como editar o cabeçalho criando um widget de cabeçalho personalizado. Para isso, usaremos trechos de PHP e CSS.

OBSERVAÇÃO : Antes de prosseguir, como editaremos alguns arquivos principais, recomendamos que você gere um backup completo do seu site e instale um tema filho. Para criar um tema filho, você pode seguir este tutorial ou usar qualquer um desses plugins dedicados.

Feito isso, vá para a próxima seção.

1) Criando um widget personalizado

Primeiro, você precisa criar uma nova área de widget. Para isso, em seu painel do WordPress , acesse Aparência > Widgets .

Uma vez lá, você verá todas as áreas de widgets disponíveis em seu tema ativo. Isso pode mudar dependendo do seu tema, mas na maioria dos casos, você verá várias áreas aqui. Para esta demonstração, estamos usando o GeneratePress, e ele vem com muitas áreas de widgets que já estão registradas e estilizadas.

Você precisa criar uma nova área de widget onde adicionaremos nosso widget de cabeçalho personalizado. Para fazer isso, você precisa ajustar o arquivo functions.php do seu tema filho. Para isso, você pode usar o arquivo diretamente ou usar um plugin como Code Snippets.

Para esta demonstração, usaremos Code Snippets, então vamos em Plugins > Add New e procuramos pelo plugin Code Snippets. Em seguida, nós o instalamos e o ativamos conforme mostrado abaixo.

Após a ativação, você verá as configurações do plugin no lado esquerdo. Vá para Todos os trechos e pressione Adicionar novo para criar um novo trecho.

Dê um nome ao snippet e cole o seguinte snippet na seção Código :

 function quadlayers_widgets_init() {
 registrar_sidebar( array(
 'name' => 'Widget de cabeçalho QuadLayers',
 'id' => 'quadlayers-header-widget',
 'before_widget' => '<div class="ql-widget">',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="ql-title">',
 'after_title' => '</h2>',
 ));
 }
 add_action( 'widgets_init', 'quadlayers_widgets_init');

Este trecho cria um novo widget em seu site WordPress chamado Quadlayers Header Widget.

Em seguida, salve as alterações e, após a ativação, você verá uma nova área de widget na seção de widgets do WordPress.

Dessa forma, você pode registrar um novo widget. Depois disso, você deve adicionar o widget ao cabeçalho do seu site. Vamos ver como fazer isso.

2) Adicionando o widget ao cabeçalho

Você criou com sucesso um novo widget em seu site, mas não especificou o local. Nesta seção, mostraremos como adicionar esse novo widget personalizado ao cabeçalho do WordPress.

Para fazer isso, você precisa editar o arquivo header.php . Você pode encontrar este arquivo no diretório do tema indo para Appearance > Theme Editor > Theme header (header.php) . Antes de editar o arquivo, certifique-se de estar usando um tema filho. Se o seu tema filho não tiver um arquivo header.php , abra a pasta do tema pai, baixe o arquivo header.php de lá e faça o upload para a pasta do tema filho.

Depois disso, cole o seguinte código no arquivo header.php :

 <?php

 if ( is_active_sidebar( 'quadlayers-header-widget' ) ) : ?>
 <div class="ql-widget-area widget-area" role="complementary">
 <?php dynamic_sidebar( 'quadlayers-header-widget' ); ?>
 </div>

 <?php endif; ?>

Depois de colar o código, atualize o arquivo.

Se você não tiver certeza de onde adicionar o código, poderá testar locais diferentes ou entrar em contato com a equipe de suporte do seu tema e solicitar o melhor local de acordo com suas necessidades. Depois de adicionar o código, teste a área do widget adicionando um widget a ela. Neste exemplo, adicionamos um bloco de parágrafo com algum conteúdo fictício.

No front-end do site, você verá o cabeçalho conforme mostrado abaixo.

Isso significa que o widget e o código estão funcionando. Excelente!

É assim que você pode adicionar um widget de cabeçalho personalizado no WordPress. Você pode usar essa área para exibir um banner, anúncios, uma oferta por tempo limitado ou o que quiser.

Mas isso não é tudo. O widget é funcional, mas você ainda pode melhorá-lo. Vamos ver como podemos estilizar o widget com um pouco de CSS para combinar com a aparência do seu site.

3) Personalizando o widget com CSS

Depois de adicionar o widget ao arquivo de cabeçalho, é hora de torná-lo melhor com um pouco de CSS. Você pode inserir seu código CSS no arquivo style.css do tema ou usar o WordPress Customizer. Ambos os métodos funcionam bem, mas recomendamos que você adicione o código CSS usando a seção CSS adicional no painel de administração. Dessa forma, você verá instantaneamente as alterações no assistente de visualização ao vivo. Contudo,

Agora vamos dar uma olhada em um script de exemplo para que você possa personalizar o widget de cabeçalho personalizado que você criou na seção anterior. Copie o código a seguir, vá para Appearance > Theme Editor > Additional CSS e cole-o.

 div#quadlayers-header-widget {
 largura: 100%;
 cor de fundo: #f5f5f5;
 border-bottom:1px sólido #eeeeee;
 alinhamento de texto: centro;
 }

 .ql-widget {
 largura: 100%;
 cor de fundo: #f5f5f5;
 alinhamento de texto: centro;
 }

 h2.ql-título {
 margem superior: 0px;
 alinhamento de texto: esquerda;
 transformação de texto: maiúsculas;
 tamanho da fonte: pequeno;
 cor de fundo: #feffce;
 largura: 130px;
 preenchimento: 5px;
 } 

Depois de atualizar o CSS, ficará assim:

Este é apenas um código de exemplo. Você pode tomá-lo como base e personalizá-lo para adaptá-lo ao estilo e aos requisitos do seu site.

É isso! É assim que você pode criar um widget de cabeçalho personalizado no WordPress com um pouco de código. Não foi tão difícil, foi?

Conclusão

Em resumo, o cabeçalho é uma das seções mais proeminentes de qualquer site e onde você deve ter conteúdo importante que deseja que os visitantes vejam. É por isso que adicionar um widget de cabeçalho é uma excelente opção para chamar a atenção do usuário e exibir uma oferta por tempo limitado, as seções mais importantes do seu site e assim por diante.

Neste post, mostramos como criar um widget de cabeçalho personalizado e personalizá-lo com um pouco de código. Mesmo que você não tenha conhecimentos de programação, você pode seguir o tutorial e adicionar o widget ao seu site. No entanto, para alterar seu estilo, você pode precisar de algum conhecimento básico de CSS. Editar o arquivo header.php pode ser complicado dependendo do seu tema, então se você estiver enfrentando algum problema com ele, você pode entrar em contato com o autor do tema.

Você criou um widget de cabeçalho? Como foi sua experiência? Deixe-nos saber na seção de comentários abaixo.

Para mais maneiras de personalizar seu cabeçalho, dê uma olhada nos seguintes guias:

• 3 Métodos para personalizar o cabeçalho no WordPress
• Como deixar o cabeçalho Divi pegajoso