Gostaria de adicionar um widget WordPress à área de cabeçalho do seu site?

Os widgets permitem que você adicione facilmente blocos de conteúdo em seções designadas de seu tema WordPress.

Neste tutorial, mostraremos como adicionar facilmente um widget do WordPress ao cabeçalho do seu site.

Note: Este é um tutorial de nível intermediário. Você precisará adicionar um código ao arquivos do seu tema WordPress e domine um pouco de CSS.

Mas antes de qualquer modificação, descubra nossa plugins 5 WordPress para backup de seu blog ou Como instalar um tema WordPress et Quantas plugins devo instalar no WordPress.

Então vamos voltar ao porquê de estarmos aqui. 

Por que e quando você precisa adicionar um widget no cabeçalho?

Os widgets permitem adicionar facilmente blocos de conteúdo a uma área designada em seu tema WordPress. Essas áreas designadas são chamadas de " barras laterais "Ou áreas de" Widgets".

Uma área de widget no cabeçalho pode ser usada para exibir anúncios, artigos recentes ou o que você quiser.

Esse domínio específico é usado em todos os sites populares para exibir informações realmente importantes.

Descubra também Como adicionar widgets personalizados após publicar no WordPress

Em geral, Temas do WordPress adicione barras laterais ao lado do conteúdo ou na área do rodapé. Muito poucos temas do WordPress adicionam áreas de widget acima do conteúdo ou no cabeçalho.

Também aconselhamos a descobrir nossa MailChimp tutorial em francês: o guia completo para criar um boletim informativo

É por isso que neste tutorial mostraremos como adicionar uma área de widget ao cabeçalho do seu site WordPress.

Etapa 1: criar uma área de widget

Em primeiro lugar, precisamos criar uma área de widget customizada. Esta etapa permitirá que você veja uma área de widget personalizado em " Aparência> Widgets No seu painel do WordPress.

Você precisará adicionar esse código ao arquivo functions.php Do seu tema.

function bpc_widgets_init () {register_sidebar (array ('name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'bpc_widgets_init');

Esse código salva uma nova barra lateral ou área de widget no seu tema WordPress.

Se você nunca instalou o WordPress localmente, descubra Como instalar o WordPress localmente em um PC / Windows com XAMPP

Você pode ir para " Aparência> Widgets E você verá uma nova área do widget marcada " Cabeçalho personalizado Widget Área ".

Vá em frente e adicione um widget de texto a essa área recém-criada e salve-o.

Tente também nosso guia sobre como adicionar widgets.

Etapa 2: mostre seu widget no cabeçalho

Se você visitar seu site, não poderá ver o widget de texto que acabou de adicionar.

Como ainda não mostramos como exibir as zonas de widgets personalizados WordPress.

É isso que faremos nesta etapa.

Aqui também está para você uma lista de Plugins críticos do WordPress da 5 para aumentar os ganhos do seu blog

Você precisará editar o arquivo header.php No seu tema WordPress e adicione este código onde deseja exibir os widgets.

Não se esqueça de salvar suas alterações.

Você pode visitar seu site e verá o widget de texto em seu cabeçalho.

O resultado não será necessariamente o mais atraente. É por isso que você precisará de CSS para que seja exibido corretamente.

3 Etapa: Dê estilo aos seus cabeçalhos CSS

Dependendo do seu tema WordPress, você precisará adicionar algum código CSS para controlar como o cabeçalho e a área do widget são exibidos.

Uma das maneiras mais fáceis de fazer isso é usar CSS Hero. O último permite que você use uma interface de usuário intuitiva para modificar o CSS de um tema WordPress.

Também recomendamos que você descubra isso O que você pode fazer com o plug-in Yellow Pencil WordPress?

Se você não quiser usar um plug-in, poderá adicionar CSS personalizado ao seu tema WordPress visitando " Aparência »Personalizar Para personalizar o tema do WordPress.

Leia também nosso artigo sobre Plugins 10 WordPress para melhorar o tráfego de um blog

Isso permitirá que você exiba a interface do WordPress Customizer. Você precisará clicar no botão " CSS adicional ".

A guia « CSS adicional No " Customizer Permite que você adicione seu CSS personalizado enquanto visualiza as alterações na visualização à direita.

Por motivos inerentes a este tutorial, assumimos que você usará essa área para adicionar um único widget para exibir anúncios em banner ou um widget de menu personalizado.

Aqui está um exemplo de CSS para você começar:

div # header-widget-área {width: 100%; background-color: #f7f7f7; border-bottom: 1px #eeeeee sólido; text-align: center; } H2.chw-título {margem superior: 0px; text-align: left; text-transform: uppercase; fonte de tamanho: pequena; background-color: #feffce; largura: 130px; padding: 5px; }

Veja como nosso widget personalizado aparecerá no cabeçalho do tema Twenty Seventeen.

Descubra também alguns plugins premium do WordPress  

Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Dica de ferramenta Smart4y

A dica de ferramenta Smart4y é uma WordPress Plugin ferramenta flexível dedicada à criação de dicas de ferramentas modernas sem qualquer dependência da biblioteca Javascript. É totalmente responsivo e oferece a possibilidade de inserir conteúdo HTML.

Seu editor WYSIWYG permitirá que você crie visualmente cada dica de ferramenta sem precisar digitar nenhum código, mas se você estiver disposto, poderá fazê-lo sempre.

Descubra também o nosso 10 WordPress plugins para avaliar artigos do seu Blog

Seus outros recursos são: Suporte à página do construtor, um layout bastante responsivo, a capacidade de definir parâmetros globais para todas as dicas de ferramenta ou de definir parâmetros específicos para cada dica de ferramenta, suporte para efeitos visuais predefinidos, o cálculo da posição da dica de ferramenta na janela redimensionada, documentação detalhada, etc….

Download | Demonstração | hospedagem na web

2. justificado

Le WordPress Plugin Justified é um plugin de galeria responsivo que alinha suas miniaturas em uma grade justificada usando jQuery, como no Flickr. 

Traz recursos que distinguem suas galerias das dos concorrentes!

Suas principais características são: layout responsivo, efeitos especiais de sobrevôo, realinhamento automático da grade,  um editor de shortcode, aparência ecompletamente personalizável, o suporte de pespectadores e muitos outros…

Descarregar | Demo | hospedagem na web  

3. Programar emails

ce WordPress Plugin como o nome sugere, permite agendar a publicação por e-mail em seu site. Faz parte das extensões do plugin WordPress “Follow My Blog Post”.

Agora você poderá agendar a publicação de seus e-mails de acordo com horas, dias ou semanas.

Leia também nosso artigo sobre 10 WordPress plugins para usar mapas em seu site

Oferece a possibilidade de enviar um email combinado para todas as notificações em vez de cada email para cada notificação e também permite definir diferentes modelos de email para diferentes emails, para finalmente tornar a recepção dos seus emails mais digerível. .

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.

• Como criar documentos de Excel e Word em WordPress
• Como personalizar o logotipo do WordPress no painel
• Como encontrar os arquivos para editar um tema WordPress
• Como personalizar o CSS do seu site WordPress

Conclusão

É isso aí! Isso é tudo para este tutorial, espero que ajude a adicionar uma área de widget no cabeçalho do seu tema WordPress. Não hesite em compartilhe com seus amigos em suas redes sociais favoritas. 

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Se você tiver sugestões ou comentários, deixe-os em nossa seção Comentários.

...