Ir para o conteúdo principal

Como adicionar um widget para o cabeçalho do seu blog WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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

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

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

notas: Este é um tutorial de nível intermediário. Você precisará adicionar 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 que você adicione facilmente blocos de conteúdo a uma área designada no seu tema WordPress. Essas áreas designadas são chamadas " 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

Normalmente, os temas do WordPress adicionam barras laterais ao lado do conteúdo ou na área do rodapé. Muito poucos temas do WordPress adicionam áreas de widgets 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: Criando uma área de widget

Primeiro, precisamos criar uma área de widget personalizada. Esta etapa permitirá que você veja uma área de widget personalizada em " Appearance> Widgets No seu painel do WordPress.

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

função bpc_widgets_init () {register_sidebar (array ('name' => 'Widget de área de cabeçalho personalizado', 'id' => 'widget de cabeçalho personalizado', 'before_widget' => '<div class = "chw-widget"> ',' after_widget '=>' </ div> ',' before_title '=>' <h2 class = "chw-title"> ',' after_title '=>' </ h2> ',)); } 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 " Appearance> Widgets E você verá uma nova área do widget marcada " Cabeçalho personalizado Widget Área ".

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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.

<? Php if (is_active_sidebar ( 'custom-header-widget')):?> <Div id = "-widget-área de cabeçalho" class = "widget-área widget-área-chw" role = "complementar"> <? dynamic_sidebar php ( 'custom-header-widget'); ?> </ Div> <? Php endif; ?>

Não 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 código CSS para controlar como a área do cabeçalho e do widget é exibida.

Uma das maneiras mais fáceis de fazer isso é usar o CSS Hero. Isso permite que você use uma interface de usuário intuitiva para modificar o CSS de um tema do 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ê terá que clicar na aba « CSS adicional ".

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

A guia « CSS adicional No " Customizer Permite adicionar seu CSS personalizado enquanto assiste 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 outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência 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 do Smart4y é um plug-in flexível do WordPress, dedicado à criação de dicas modernas sem nenhuma dependência da biblioteca Javascript. É totalmente responsivo e oferece a capacidade 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.

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

Descarregar | Demo | hospedagem na web

2. justificado

O plug-in justificado do WordPress é um plug-in de galeria responsivo que alinha suas miniaturas em uma grade justificada usando jQuery, como no Flickr.

Justified-Plugin Para WordPress-Fotógrafos,

Traz recursos que distinguem suas galerias das dos concorrentes!

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

Descarregar | Demo | hospedagem na web

3. Programar emails

este plugin do WordPress, como o próprio nome sugere, permite que você agende o e-mail da publicação em seu site. É baseado em extensões do plug-in do WordPress "Follow My Blog Post".

Agora você pode agendar a publicação de seus emails com base em horas, dias ou semanas.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

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 modelos de email diferentes para emails diferentes, finalmente, para tornar a recepção dos seus emails mais digerível .

Descarregar | Demo |hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados que o acompanharão na criação e gerenciamento de seu site.

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.

...

Este artigo contém comentários 5
  1. No primeiro código exibido, que consiste em gerar uma nova zona de widget, comece digitando "function", mas eu diria que ele começa com "function". De fato, este código possui vários erros que cometem um erro ao escrevê-lo. Eu apreciaria que isso fosse corrigido.

  2. 🙂 Tudo está OK, apenas ninguém em suas placas explica onde adicionar o código para "functions.php !!! É importante! Todo mundo usa os temas "diferentes" ...

  3. Olá,

    Obrigado por esses apoios.

    Posso adicionar minha barra de pesquisa no cabeçalho personalizado. Por contra, personalizar o estilo é mais complicado ...

    Gostaria de alterar o tamanho, a posição (que não leva toda a largura do cabeçalho), bem como a cor de fundo.

    Agradecemos antecipadamente.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
6 ações
ação1
chilrear
Enregistrer5