{"id":228047,"date":"2022-10-02T17:35:00","date_gmt":"2022-10-02T14:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228047"},"modified":"2022-11-09T00:26:03","modified_gmt":"2022-11-08T21:26:03","slug":"guia-de-cabecalho-personalizado-do-wordpress-maneiras-faceis-de-criar-cabecalhos-perfeitos","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/guia-de-cabecalho-personalizado-do-wordpress-maneiras-faceis-de-criar-cabecalhos-perfeitos\/","title":{"rendered":"Guia de cabe\u00e7alho personalizado do WordPress: maneiras f\u00e1ceis de criar cabe\u00e7alhos perfeitos"},"content":{"rendered":"\n

Um dos elementos visuais mais importantes do seu site \u00e9 representado pelo cabe\u00e7alho. Como est\u00e1 posicionado estrategicamente no topo, o cabe\u00e7alho do WordPress pode ser o primeiro elemento que um visitante percebe quando visita seu site.<\/p>\n

Esta \u00e9 a principal raz\u00e3o pela qual voc\u00ea deve prestar muita aten\u00e7\u00e3o ao projet\u00e1-lo. D\u00ea uma olhada no cabe\u00e7alho do site wpDataTables<\/a><\/strong>.<\/p>\n

O cabe\u00e7alho dita o restante da identidade do site, o que significa que voc\u00ea pode personaliz\u00e1-lo de acordo com os objetivos do seu site. O impacto que um cabe\u00e7alho de site<\/a> tem em um visitante deve ser o fator que o motiva a investir mais do seu tempo na cria\u00e7\u00e3o de um bom.<\/p>\n

Este artigo representa um pequeno guia sobre como criar cabe\u00e7alhos personalizados do WordPress. Continue lendo para saber mais sobre este tema.<\/p>\n

Entendendo o conceito de um cabe\u00e7alho WordPress<\/strong><\/h2>\n

\"Guia<\/a><\/p>\n

Os temas do WordPress t\u00eam um recurso chamado cabe\u00e7alhos personalizados. Esse recurso significa que o tema suporta a modifica\u00e7\u00e3o da imagem do cabe\u00e7alho<\/a> de acordo com seu pr\u00f3prio gosto, para que voc\u00ea possa criar um cabe\u00e7alho personalizado para o seu site.<\/p>\n

Quando esse recurso est\u00e1 habilitado para o tema que voc\u00ea est\u00e1 usando, voc\u00ea pode substituir a imagem de cabe\u00e7alho padr\u00e3o por um cabe\u00e7alho personalizado de sua escolha. Os cabe\u00e7alhos personalizados s\u00e3o muito mais agrad\u00e1veis \u200b\u200b\u200b\u200baos olhos em compara\u00e7\u00e3o com os padr\u00f5es. \u00c9 por isso que voc\u00ea deve usar a op\u00e7\u00e3o de cabe\u00e7alho de edi\u00e7\u00e3o integrada do WordPress.<\/p>\n

Para resumir, o cabe\u00e7alho do WordPress pode influenciar a decis\u00e3o de um visitante de permanecer no site ou n\u00e3o. Como o tempo m\u00e9dio gasto por um visitante em um site \u00e9 de alguns minutos, voc\u00ea precisa usar todas as op\u00e7\u00f5es poss\u00edveis para despertar seu interesse e manter sua aten\u00e7\u00e3o focada no que seu site tem a dizer.<\/p>\n

Os cabe\u00e7alhos do WordPress podem ser personalizados adicionando texto, widgets e assim por diante. Ajust\u00e1-lo de acordo com suas necessidades ter\u00e1 um impacto vis\u00edvel a longo prazo.<\/p>\n

A import\u00e2ncia dos cabe\u00e7alhos do WordPress<\/strong><\/h2>\n

Muitas pessoas evitam ter cabe\u00e7alhos personalizados porque acham que n\u00e3o \u00e9 relevante para os visitantes.<\/p>\n

Na verdade, um cabe\u00e7alho personalizado do WordPress pode ditar como todo o seu site \u00e9 percebido. Se a aten\u00e7\u00e3o de um visitante n\u00e3o for despertada dentro de 10 a 20 segundos a partir do momento em que ele entrou no site, ele sair\u00e1 imediatamente, aumentando a taxa de rejei\u00e7\u00e3o.<\/p>\n

Um cabe\u00e7alho personalizado lhe dar\u00e1 mais controle sobre o que seu site transmite. Modificar o c\u00f3digo do cabe\u00e7alho do WordPress exatamente do jeito que voc\u00ea gosta torna o site muito mais flex\u00edvel do que era inicialmente.<\/p>\n

Outro h\u00e1bito que n\u00e3o \u00e9 ben\u00e9fico para o seu site \u00e9 simplesmente colocar seu slogan no cabe\u00e7alho personalizado do seu site WordPress.<\/p>\n

Invente algo \u00fanico<\/strong> para gerar uma boa impress\u00e3o, caso contr\u00e1rio, seu p\u00fablico n\u00e3o ficar\u00e1 satisfeito com a apar\u00eancia. H\u00e1 tamb\u00e9m uma infinidade de plugins de sites<\/strong> que podem ajud\u00e1-lo a criar um cabe\u00e7alho personalizado.<\/p>\n

Como voc\u00ea pode adicionar um cabe\u00e7alho personalizado ao seu site WordPress?<\/strong><\/h2>\n

\"Guia<\/a><\/p>\n

Widgets de cabe\u00e7alho<\/strong><\/h3>\n

Certos temas do WordPress v\u00eam com widgets. Esses widgets podem ser selecionados no painel de administra\u00e7\u00e3o. Se o tema vier com um widget de cabe\u00e7alho separado, voc\u00ea poder\u00e1 adicion\u00e1-lo ao seu site e obter um cabe\u00e7alho personalizado facilmente.<\/p>\n

Por exemplo, voc\u00ea pode adicionar o AdSense ao seu cabe\u00e7alho simplesmente arrastando o widget e colando o c\u00f3digo. Se o seu tema n\u00e3o possui uma op\u00e7\u00e3o de widget, voc\u00ea precisa editar o cabe\u00e7alho por conta pr\u00f3pria. Algumas op\u00e7\u00f5es s\u00e3o apresentadas a seguir.<\/p>\n

“Os widgets de cabe\u00e7alho s\u00e3o uma solu\u00e7\u00e3o r\u00e1pida que cria a m\u00e1xima flexibilidade de design sem deixar seu site mais lento", diz Jerry Low da Build This<\/a>. “Eles s\u00e3o simples o suficiente para qualquer pessoa implementar e personalizar e permitir que os webmasters insiram rapidamente uma frase de chamariz, an\u00fancio ou qualquer outro elemento de m\u00eddia rico significativo.”<\/p>\n

Imagens de cabe\u00e7alho personalizadas<\/strong><\/h3>\n

Antes de tudo, se voc\u00ea deseja adicionar imagens de cabe\u00e7alho personalizadas, precisa acessar o editor de cabe\u00e7alho do WordPress, que pode ser encontrado em Apar\u00eancia \u2013 Cabe\u00e7alho.<\/p>\n

A faixa Apar\u00eancia pode ser acessada no painel do WordPress no lado esquerdo do seu site. Outra maneira de chegar ao editor seria acessando Apar\u00eancia e, em seguida, Personalizar e M\u00eddia de cabe\u00e7alho. Tenha em mente que as op\u00e7\u00f5es podem diferir de um tema para outro.<\/p>\n

Depois de chegar ao editor, o WordPress abrir\u00e1 seu site em uma demonstra\u00e7\u00e3o ao vivo. Dessa forma, voc\u00ea pode observar as altera\u00e7\u00f5es feitas em tempo real e decidir se gosta ou n\u00e3o da mudan\u00e7a.<\/p>\n

Depois de entrar no modo de visualiza\u00e7\u00e3o ao vivo, altere a imagem de cabe\u00e7alho atual ou a enviada anteriormente, com uma nova foto. Para fazer isso, basta clicar em Adicionar uma nova imagem. Clicar no bot\u00e3o abrir\u00e1 sua Biblioteca de m\u00eddia, na qual voc\u00ea pode escolher fotos que voc\u00ea carregou em seu site antes ou fotos que voc\u00ea pode enviar agora.<\/p>\n

Escolha a foto que deseja usar como imagem de cabe\u00e7alho e corte-<\/a> a de acordo com suas necessidades. As dimens\u00f5es devem caber para que o cabe\u00e7alho se ajuste ao site. Voc\u00ea s\u00f3 deve usar imagens de alta qualidade para esta tarefa.<\/p>\n

Se voc\u00ea quer ter algo muito legal e bem desenhado, como o WebDesignerDepot tinha quando foi lan\u00e7ado, \u00e9 melhor contratar algu\u00e9m que fa\u00e7a servi\u00e7os de design gr\u00e1fico<\/a> no Canva Pro<\/a>, Illustrator<\/a> ou Affinity Designer<\/a>.<\/p>\n

Outra op\u00e7\u00e3o r\u00e1pida para alterar a imagem do cabe\u00e7alho seria clicar em Randomizar cabe\u00e7alhos enviados ou sugeridos. O WordPress escolher\u00e1 uma imagem aleat\u00f3ria para o cabe\u00e7alho do seu site. Este \u00e9 um m\u00e9todo r\u00e1pido para pessoas que desejam alterar a apar\u00eancia de seu site diariamente.<\/p>\n

V\u00eddeos<\/strong><\/h3>\n

Ultimamente, os v\u00eddeos parecem ser muito mais populares do que as imagens.<\/p>\n

As imagens de cabe\u00e7alho ainda s\u00e3o \u00f3timas, mas os v\u00eddeos podem substitu\u00ed-las completamente nos pr\u00f3ximos anos.<\/p>\n

Para adicionar um v\u00eddeo ao seu cabe\u00e7alho do WordPress, voc\u00ea tem duas op\u00e7\u00f5es diferentes. Antes de aprender como fazer isso, voc\u00ea deve saber que todos os v\u00eddeos adicionados ao cabe\u00e7alho devem ser sem som.<\/p>\n

.mp4<\/strong><\/h4>\n

A primeira op\u00e7\u00e3o \u00e9 adicionar um v\u00eddeo .mp4 de sua pr\u00f3pria biblioteca de m\u00eddia. O \u00fanico formato de v\u00eddeo que o WordPress aceita no momento \u00e9 .mp4, ent\u00e3o use um conversor online gratuito se voc\u00ea n\u00e3o tiver esse formato.<\/p>\n

Reduza o tamanho do arquivo o m\u00e1ximo poss\u00edvel sem perder muita qualidade. O tamanho do seu v\u00eddeo deve ser em torno de 2000\u00d71200 px. Depois de organizar seu v\u00eddeo, voc\u00ea pode clicar em Selecionar v\u00eddeo e envi\u00e1-lo. Os resultados agora devem estar vis\u00edveis em seu site.<\/p>\n

Youtube<\/strong><\/h4>\n

A segunda op\u00e7\u00e3o \u00e9 muito mais simples que a primeira. O uso de v\u00eddeos do YouTube requer apenas copiar e colar.<\/p>\n

Depois de encontrar o v\u00eddeo que deseja usar, voc\u00ea pode copiar o URL e col\u00e1-lo no formul\u00e1rio que encontrar no editor de cabe\u00e7alho do WordPress. O v\u00eddeo ser\u00e1 carregado rapidamente e voc\u00ea poder\u00e1 ver a visualiza\u00e7\u00e3o. Veja se ele se encaixa no seu cabe\u00e7alho personalizado e \u2013 se n\u00e3o \u2013 procure outros que possam parecer melhores.<\/p>\n

Plugins que voc\u00ea pode usar para criar um cabe\u00e7alho WordPress personalizado<\/strong><\/h2>\n

Usar um plugin de cabe\u00e7alho do WordPress pode tornar seu trabalho muito mais f\u00e1cil se voc\u00ea n\u00e3o souber como editar o c\u00f3digo t\u00e3o bem. Aqui est\u00e1 uma lista dos melhores plugins que podem ajud\u00e1-lo a criar um cabe\u00e7alho personalizado e uma breve descri\u00e7\u00e3o de seus recursos:<\/p>\n

Cabe\u00e7alho \u00fanico<\/a><\/h3>\n

\"Guia<\/a><\/p>\n

O Unique Header \u00e9 um plugin de cabe\u00e7alho do WordPress que voc\u00ea definitivamente deveria tentar. Voc\u00ea pode adicionar imagens da sua biblioteca de m\u00eddia do WordPress ou fazer upload de novas.<\/p>\n

Os cabe\u00e7alhos personalizados que voc\u00ea envia podem ser classificados com base em tags e categorias, o que \u00e9 \u00f3timo se voc\u00ea quiser alterar a apar\u00eancia do seu cabe\u00e7alho com bastante frequ\u00eancia. O plugin tem v\u00e1rios recursos dos quais voc\u00ea pode se beneficiar tremendamente se n\u00e3o tiver muito conhecimento de codifica\u00e7\u00e3o.<\/p>\n

Voc\u00ea deve saber que, para usar o cabe\u00e7alho exclusivo, voc\u00ea deve encontrar um tema que n\u00e3o tenha uma funcionalidade de cabe\u00e7alho interna, descrita anteriormente neste artigo.<\/p>\n

Os recursos do Unique Header incluem uma interface amig\u00e1vel, adicionando um cabe\u00e7alho a um determinado post ou p\u00e1gina, organizando os cabe\u00e7alhos, habilitando e desabilitando os cabe\u00e7alhos e outros. O plugin tamb\u00e9m pode ser usado por iniciantes.<\/p>\n

Abrindo Barras Laterais e Widgets<\/a><\/h3>\n

\"Guia<\/a><\/p>\n

Para pessoas que querem ter cabe\u00e7alhos personalizados mais avan\u00e7ados, Popping Sidebars & Widgets \u00e9 definitivamente o melhor plugin. O plugin permite que voc\u00ea crie seus pr\u00f3prios widgets personalizados.<\/p>\n

Os widgets podem ser de texto, de formul\u00e1rio ou de m\u00eddia social. Isso \u00e9 muito conveniente porque voc\u00ea pode simplesmente arrastar os widgets depois de cri\u00e1-los. Voc\u00ea pode publicar seus widgets em seu cabe\u00e7alho real ou alter\u00e1-lo completamente. O plugin permite que voc\u00ea publique widgets em outras partes do seu site, como a barra lateral ou o rodap\u00e9.<\/p>\n

Plugin do Carregador de Script de Rodap\u00e9 de Cabe\u00e7alho<\/a><\/h3>\n

\"Guia<\/a><\/p>\n

O plug-in Header Footer Script Loader foi lan\u00e7ado pela CreativeMinds. \u00c9 um plugin especial, pois voc\u00ea tamb\u00e9m pode gerenciar scripts diferentes com ele. A vers\u00e3o premium custa cerca de US$ 40 para um site e US$ 60 para um a cinco sites.<\/p>\n

O plugin tamb\u00e9m \u00e9 apoiado pelo suporte e atualiza\u00e7\u00f5es regulares. O plugin permite aos usu\u00e1rios pr\u00e9-carregar os scripts e estilos, o que lhes d\u00e1 controle total sobre sua apar\u00eancia e posicionamento. O plugin Header Footer Script \u00e9 conhecido por melhorar os tempos de carregamento do site, reduzindo o n\u00famero de scripts usados.<\/p>\n

Inserir cabe\u00e7alhos e rodap\u00e9s<\/a><\/h3>\n

\"Guia<\/a><\/p>\n

Este plugin chamado Insert Headers and Footers \u00e9 t\u00e3o simples quanto o nome diz. \u00c9 um plugin muito compreens\u00edvel que oferece aos usu\u00e1rios a oportunidade de inserir c\u00f3digo diretamente no cabe\u00e7alho que desejam alterar.<\/p>\n

O plugin \u00e9 gratuito e compat\u00edvel com a maioria dos temas que o WordPress oferece. Tem classifica\u00e7\u00f5es muito altas e \u00e9 apreciado pelas pessoas que o usam.<\/p>\n

Mais do que isso, o plugin tem a op\u00e7\u00e3o de alterar todos os c\u00f3digos e scripts, independente de serem criados em Java ou HTML. O plugin \u00e9 muito simples de configurar, o que o torna \u00f3timo para iniciantes no WordPress.<\/p>\n

Para alterar facilmente a apar\u00eancia do seu cabe\u00e7alho do WordPress, baixe o plugin gratuito e comece a brincar com ele. Lembre-se de que voc\u00ea tamb\u00e9m pode adicionar blocos de c\u00f3digo CSS para personalizar ainda mais a apar\u00eancia do cabe\u00e7alho.<\/p>\n

Cabe\u00e7alho e rodap\u00e9<\/a><\/h3>\n

\"Guia<\/a><\/p>\n

Header and Footer \u00e9 um plugin simples que verifica o c\u00f3digo dos cabe\u00e7alhos e rodap\u00e9s do seu site. Voc\u00ea pode editar o c\u00f3digo adicionando linhas sempre de maneira muito r\u00e1pida.<\/p>\n

O plugin pode ser obtido gratuitamente no WordPress.org e atualiza\u00e7\u00f5es regulares est\u00e3o sendo lan\u00e7adas para ele.<\/p>\n

Voc\u00ea tamb\u00e9m deve saber que os criadores do plugin oferecem suporte gratuito caso voc\u00ea encontre problemas com ele. \u00c9 um plugin que pode ser usado confortavelmente em qualquer dispositivo e por todos os usu\u00e1rios.<\/p>\n

Scripts de cabe\u00e7alho e rodap\u00e9<\/a><\/h3>\n

\"Guia<\/a><\/p>\n

Este \u00e9 outro plugin muito f\u00e1cil de usar para criar cabe\u00e7alhos personalizados. O cabe\u00e7alho do WordPress pode ser editado adicionando seus pr\u00f3prios blocos de c\u00f3digo, alterando fontes e at\u00e9 estilos.<\/p>\n

O plug-in Scripts de cabe\u00e7alho e rodap\u00e9 permite inserir c\u00f3digos CSS, tags HTML ou JavaScript no c\u00f3digo padr\u00e3o do cabe\u00e7alho. O plugin \u00e9 muito simples e pode ser usado por iniciantes tamb\u00e9m.<\/p>\n

C\u00f3digo de cabe\u00e7alho e rodap\u00e9 AddFunc<\/a><\/h3>\n

\"Guia<\/a><\/p>\n

O plug-in AddFunc Head and Footer Code oferece aos usu\u00e1rios a chance de editar c\u00f3digo para postagens espec\u00edficas. Isso \u00e9 \u00fatil quando voc\u00ea n\u00e3o deseja editar o site inteiro. O plugin tamb\u00e9m \u00e9 gratuito e provou ser altamente eficaz para esse fim.<\/p>\n

O plugin \u00e9 muito amig\u00e1vel para Google Analytics e Facebook Pixel ou outros servi\u00e7os de rastreamento. As atualiza\u00e7\u00f5es para este plugin s\u00e3o r\u00e1pidas e responsivas. Se voc\u00ea deseja rastrear informa\u00e7\u00f5es em seu site, essa pode ser a melhor op\u00e7\u00e3o que voc\u00ea tem.<\/p>\n

Ei, voc\u00ea sabia que os dados tamb\u00e9m podem ser bonitos?<\/h3>\n

wpDataTables<\/a> pode torn\u00e1-lo assim. H\u00e1 uma boa raz\u00e3o pela qual \u00e9 o plugin n\u00ba 1 do WordPress para criar tabelas e gr\u00e1ficos responsivos.<\/p>\n

\"Guia<\/a><\/p>\n

Um exemplo real de wpDataTables em estado selvagem<\/p>\n

E \u00e9 muito f\u00e1cil fazer algo assim:<\/p>\n

    \n
  1. Voc\u00ea fornece os dados da tabela<\/li>\n
  2. Configure e personalize<\/li>\n
  3. Publique-o em um post ou p\u00e1gina<\/li>\n<\/ol>\n

    E n\u00e3o \u00e9 apenas bonito, mas tamb\u00e9m pr\u00e1tico. Voc\u00ea pode criar tabelas grandes com at\u00e9 milh\u00f5es de linhas<\/a>, ou pode usar filtros e pesquisas avan\u00e7adas<\/a>, ou pode enlouquecer e torn\u00e1-las edit\u00e1veis<\/a>.<\/p>\n

    “Sim, mas eu gosto demais do Excel e n\u00e3o tem nada disso em sites”. Sim, existe. Voc\u00ea pode usar a formata\u00e7\u00e3o condicional<\/a> como no Excel ou no Planilhas Google.<\/p>\n

    Eu te disse que voc\u00ea tamb\u00e9m pode criar gr\u00e1ficos<\/a> com seus dados? E isso \u00e9 apenas uma pequena parte. Existem muitos outros recursos<\/a> para voc\u00ea.<\/p>\n

    Como editar um cabe\u00e7alho do WordPress usando c\u00f3digo<\/strong><\/h2>\n

    Caso voc\u00ea queira saber como editar o cabe\u00e7alho no WordPress usando o c\u00f3digo, voc\u00ea est\u00e1 no lugar certo. Os c\u00f3digos de cabe\u00e7alho n\u00e3o s\u00e3o complicados e voc\u00ea poder\u00e1 modific\u00e1-los simplesmente copiando e colando algumas linhas aqui e ali.<\/p>\n

    Um cabe\u00e7alho do WordPress vem com configura\u00e7\u00f5es padr\u00e3o que podem ser alteradas adicionando outras linhas de c\u00f3digo a elas. Para fazer isso, voc\u00ea precisa encontrar o arquivo que inclui o cabe\u00e7alho. Encontre o painel do WordPress, selecione Apar\u00eancia e depois Editor. Os arquivos listados s\u00e3o os que comp\u00f5em seu site.<\/p>\n

    Deixe o arquivo header.php intocado, pois ele representa as fun\u00e7\u00f5es do cabe\u00e7alho e n\u00e3o a apar\u00eancia dele. A apar\u00eancia do cabe\u00e7alho \u00e9 controlada pelo arquivo styles.css, que voc\u00ea deseja pesquisar e editar. Antes de alterar qualquer coisa, \u00e9 recomend\u00e1vel copiar e colar o arquivo original em algum lugar seguro.<\/p>\n

    Outra op\u00e7\u00e3o para editar o cabe\u00e7alho do WordPress \u00e9 atrav\u00e9s do tema que voc\u00ea usa. A maioria dos temas tem op\u00e7\u00f5es de personaliza\u00e7\u00e3o. Essas op\u00e7\u00f5es permitem que voc\u00ea edite o site e visualize as altera\u00e7\u00f5es feitas ao vivo, para ajud\u00e1-lo a decidir se as altera\u00e7\u00f5es s\u00e3o o que voc\u00ea deseja ou n\u00e3o.<\/p>\n

    A maioria dos temas tem uma op\u00e7\u00e3o CSS. Usando esta op\u00e7\u00e3o, voc\u00ea pode colar linhas de c\u00f3digo aqui para editar a apar\u00eancia do site, neste caso, o cabe\u00e7alho. O comando para alterar a cor de fundo se parece com isso:<\/p>\n

    .header { background: white;}<\/code><\/p>\n

    Outros comandos para personalizar o cabe\u00e7alho do seu site<\/strong><\/h2>\n

    Claro, voc\u00ea pode mudar muito mais do que apenas a cor do plano de fundo. Voc\u00ea pode substituir outras linhas de c\u00f3digo para modificar a apar\u00eancia do cabe\u00e7alho. Alguns deles s\u00e3o:<\/p>\n