Ir para o conteúdo principal

Como adicionar um widget ao 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 Aroma: 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 do WordPress et Quantas plugins devo instalar no WordPress.

Então volte para o que estamos aqui.

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

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 depois de postar 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 Tutorial do MailChimp 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 Zona 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 este 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 de widgets marcada " Cabeçalho personalizado Widget Área ".

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. [Grátis]

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.

Isto é o 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á do CSS para que ele 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 »Personalize Para personalizar o tema do WordPress.

Leia também nosso artigo sobre 10 plugins do WordPress para melhorar o tráfego do blog

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

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

Isso permitirá que você exiba a interface do WordPress Customizer. Você terá que clicar na aba « CSS adicional ".

A guia CSS adicional No " Customizer Permite que você adicione seu CSS personalizado enquanto assiste às 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 Vinte e Dezessete.

Descubra também alguns plugins WordPress premium

Você pode usar outros plugins 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

O Smart4y Tooltip é um plug-in WordPress flexível, dedicado à criação de dicas modernas, sem nenhuma 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 desejar, sempre poderá fazê-lo.

Descubra também nossa 10 plugins do WordPress para avaliar os artigos do seu blog

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, suporte para efeitos visuais predefinidos, calcula a posição da dica na janela redimensionada, documentação detalhada etc.

Download | Demo | Web Hosting

2. justificado

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

Justified-Plugin Para WordPress-Fotógrafos,

Ele traz recursos que diferenciam 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, a aparência ecompletamente personalizável, o suporte de pespectadores e muitos outros ...

Download | Demonstração | Web Hosting

3. Programar emails

esse plug-in do WordPress, como o nome sugere, permite que você agende a publicação por email em seu site. Faz parte das extensões de plug-in do WordPress "Follow My Blog Post".

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

Crie facilmente sua loja on-line

Faça o download gratuito do WooCommerce, os melhores plugins de comércio eletrônico para vender seus produtos físicos e digitais no WordPress. [Recomendado]

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 modelos de email diferentes para emails diferentes e, finalmente, tornar o recebimento de seus emails mais digerível. .

Download | Demonstração |Web Hosting

Recursos Recomendados

Descubra outros recursos recomendados que o acompanharão na criação e no gerenciamento do 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 compartilhar 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 na Internet, consultando nosso guia sobre Criação de blogs WordPress.

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

...

Este artigo contém comentários 7
  1. Senhor, eu tentei. De fato, a página de widgets está definindo a adição de widgets. E eu adicionei. Quando a etapa 2 falha ao inserir o código no cabeçalho php. Adivinha 2, qual é o erro, senhor?

  2. No primeiro código exibido, que consiste em gerar uma nova área de widget, comece digitando "function", mas eu diria que ele começa com "function". De fato, esse código possui vários erros que cometem um erro ao escrevê-lo. Eu apreciaria que fosse consertado.

  3. 🙂 Está tudo bem, apenas ninguém no conselho deles explica onde adicionar o código a "functions.php !!! " É importante! Todo mundo usa os temas "diferentes" ...

  4. Olá,

    Obrigado por esses apoios.

    Eu sabia como adicionar minha barra de pesquisa no cabeçalho personalizado. Por contras, personalizar o estilo é mais complicado ...

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

    Agradecemos antecipadamente.

Deixe um comentário

Seu endereço de email não será publicado. Os campos obrigatórios são indicados com *

Este site usa o Akismet para reduzir o spam. Saiba mais sobre como seus dados de feedback são usados.

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