# Como editar cabeçalho WordPress O WordPress é o [sistema de gerenciamento de conteúdo (CMS)](https://www.ionos.com/pt-br/digitalguide/hospedagem/cms/melhores-cms-comparacao-de-plataformas-de-sites/) mais popular do mundo. Por ser de código aberto, ele permite que todos os aspectos de sua instalação sejam editados. Seu alto nível de flexibilidade é, portanto, uma de suas maiores vantagens. Salvo poucas exceções, quase todos os sites Wordpress requerem algum tipo de alteração para melhor adequação. Por exemplo, se alguém quiser integrar o Google Analytics ou outra ferramenta de monitoramento a suas páginas, deverá **adicionar *snippets* de código à estrutura do tema**, tarefa que costuma envolver a edição do cabeçalho do WordPress. ## O que é cabeçalho WordPress e quais são seus elementos? O termo cabeçalho WordPress ou, em inglês, *WordPress header*, pode causar confusão. Quase todo site tem um cabeçalho, compreendido como a **área visível no topo de cada página**. Geralmente, é lá que você vai encontrar o logotipo da pessoa ou empresa, e o menu principal. Mas sites têm, também, outro tipo de cabeçalho, presente no documento HTML correspondente. Este é geralmente chamado de **cabeçalho HTML** (``) e seguido do corpo HTML (``). É no corpo que elementos visíveis são adicionados a um site. Já elementos invisíveis são inseridos no cabeçalho. Dica Publique o seu próprio site com a IONOS. O [Hospedagem para WordPress](https://www.ionos.com/hosting/wordpress-hosting "Hospedagem para WordPress —IONOS") proporciona hospedagem profissional para sites WordPress. No WordPress, a expressão **cabeçalho** abrange tanto o **cabeçalho HTML** quanto o **cabeçalho da página**. Portanto, quando falamos em editar cabeçalho WordPress, nos referimos à manipulação de dois elementos distintos: 1. Elementos invisíveis no cabeçalho HTML 2. Elementos visíveis no cabeçalho da página ### Elementos invisíveis do cabeçalho HTML Elementos presentes no cabeçalho HTML **não ficam visíveis para os visitantes**. Eles são acessados somente pelos navegadores e pelos mecanismos de busca. Entre os elementos mais comuns de cabeçalhos HTML estão: - Links para **folhas de estilos** - Links para **arquivos de script** - Links para **fontes** - Links para **favicons** - Diversos tipos de **meta *tags*** Nota *Tags* de script presentes no cabeçalho HTML podem prejudicar o desempenho de um site e deixar seu carregamento mais lento. A depender do tipo de site, este problema poderá ser resolvido pela inclusão dos atributos `async` e `defer`. A recomendação é que essas *tags* de script sejam adicionadas ao [rodapé do WordPress](https://www.ionos.com/pt-br/digitalguide/hospedagem/blogs/editar-rodape-wordpress/ "Editar rodapé WordPress"). ### Elementos visíveis do cabeçalho de página Um **cabeçalho de página contém os elementos visíveis, exibidos pelo navegador**. Desde o HTML5, tornou-se prática comum implementar cabeçalhos de página com o elemento `

`, embora a prática não seja obrigatória (um elemento `

` também pode ser usado). Os seguintes elementos costumam estar presentes em cabeçalho de páginas: - Logotipo - Menu - Imagem de cabeçalho - Barra de pesquisa ## Editar cabeçalho no WordPress Como já explicamos, editar cabeçalho WordPress pode significar tanto adicionar um código ao cabeçalho HTML quanto alterar a aparência visual do topo de um site. Este tutorial tem foco em apresentar orientações sobre a integração de **elementos não visuais ao cabeçalho HTML**. Mudanças visuais no cabeçalho da página são muito mais complexas. Além disso, a abordagem a ser adotada depende do tema de cada site. Por fim, alterações assim exigem conhecimentos de design e programação para serem executadas. Nota Algumas *tags* de script adicionais solicitam o consentimento dos visitantes antes de serem carregadas, por exemplo, às que fazem referência ao uso de cookies e à coleta de dados pessoais. Em casos assim, você deverá considerar como cada um de seus scripts adicionais será integrado à solução existente de consentimento. Todos os três métodos apresentados abaixo podem ser usados para **inserir códigos ao cabeçalho HTML que compõe o cabeçalho WordPress**: 1. Uso de **plugin** 2. Modificação do **código do tema** 3. Uso do **Google Tag Manager** Apresentamos, abaixo, tabela comparativa entre as **vantagens e desvantagens** de cada um dos três métodos:

Método	Vantagens	Desvantagens
Uso de plugin	Aplicação simples.	Snippets de código são armazenados no banco de dados; dificuldade de integração com scripts de consentimento; baixo nível de controle; pode causar problemas de desempenho.
Modificação do código do tema	Snippets de código podem ser integrados ao código-fonte; alterações visuais; controle total sobre aplicações complexas.	Requer a edição do código do tema e habilidades de programação.
Uso do Google Tag Manager	Aplicação simples; snippets de código gerenciados centralmente, fora do site; integração com scripts de consentimento; permite a implementação de aplicações complexas.	Requer configuração única.

## Usar plugin para editar cabeçalho no WordPress No diretório de plugins do WordPress, você pode encontrar variadas soluções com foco em inserir códigos no cabeçalho HTML. Estas são ideais para adicionar meta *tags*, folhas de estilo e scripts a uma página. Contudo, via de regra, plugins para editar cabeçalho no WordPress não permitem a adição de elementos visuais ao cabeçalho da página. Mesmo assim, eles costumam ser **fáceis de usar e podem ser instalados por usuários sem conhecimentos de programação**. Dependendo da extensão escolhida, você terá mais ou menos controle sobre o código em questão. Conheça os plugins de edição de cabeçalho mais populares do WordPress: - [Head, Footer and Post Injections](https://br.wordpress.org/plugins/header-footer/ "Plugin Head, Footer and Post Injections — WordPress.org") - [Header and Footer Scripts](https://br.wordpress.org/plugins/header-and-footer-scripts/ "Plugin Header and Footer Scripts — WordPress.org") - [Header Footer Code Manager](https://br.wordpress.org/plugins/header-footer-code-manager/ "Plugin Header Footer Code Manager — WordPress.org") Acompanhe, abaixo, o **passo a passo para adicionar um código ao cabeçalho HTML do WordPress**, com o plugin Header and Footer Scripts. [![Imagem: Acesse o item Plugins no menu lateral do WordPress](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/3/4/csm_wordpress01_en_7aa0bc1316.webp "Acesse o item Plugins no menu lateral do WordPress")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress01_en.png) Selecione o item Plugins no menu lateral do WordPress e clique em Adicionar Novo [![Imagem: Pesquise pelo plugin Header and Footer Scripts](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/5/9/csm_wordpress02_en_24342e6f90.webp "Pesquise pelo plugin Header and Footer Scripts")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress02_en.png) Digite Header and Footer Scripts no campo de pesquisa do WordPress, no canto superior direito da página [![Imagem: Instale o plugin Header and Footer Scripts no WordPress](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/e/b/csm_wordpress03_en_527608b678.webp "Instale o plugin Header and Footer Scripts no WordPress")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress03_en.png) Selecione o plugin Header and Footer Scripts, e clique no botão Instalar Agora [![Imagem: Ative o plugin Header and Footer Scripts](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/e/5/csm_wordpress04_en_e26b6143e8.webp "Ative o plugin Header and Footer Scripts")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress04_en.png) Após instalar o plugin, clique no botão Ativar para habilitá-lo [![Imagem: Abra o plugin Header and Footer Scripts](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/b/8/csm_wordpress05_en_4bf63393e1.webp "Abra o plugin Header and Footer Scripts")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress05_en.png) Clique no item Configurações, no menu à esquerda, e selecione a opção Header and Footer Scripts para abri-lo [![Imagem: Insira a meta tag robots no cabeçalho HTML](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/6/a/csm_wordpress06_en_0d54dcdc98.webp "Insira a meta tag robots no cabeçalho HTML")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress06_en.png) Na caixa de texto Scripts in header, copie o código que você deseja inserir no cabeçalho WordPress e clique em Salvar alterações ## Modificar código do tema para editar cabeçalho do WordPress Ao optar por modificar o código do tema, você terá controle total sobre o conteúdo do cabeçalho do seu site WordPress. Qualquer alteração feita ali se integra ao código-fonte do tema e se sujeira ao controle de versão. Este é o **método preferido** de usuários mais experientes. Observe, abaixo, formas de modificar o código do tema de um site WordPress: 1. Adicionar código ao *arquivo de template header.php* 2. Adicionar **funções** ao arquivo *functions.php* 3. Criar **tema filho** (*child theme*) e executar as mudanças nele

Método	Vantagens	Desvantagens
\*Adicionar código ao arquivo header.php** \*	Processo simples ser entendido; ordem de inclusão de código controlada com precisão; também funciona para alterações visíveis.	Modificações por\* hardcode\*; alterações executadas repetidamente podem se tornar confusas.
*Criar funções no arquivo functions.php***	Separação clara entre apresentação e funcionalidade; ordem de inclusão de código pode ser especificada.	Maior complexidade; pode ser confuso para iniciantes.
Criar tema filho	Alterações permanecem protegidas de atualizações e podem ser desfeitas, se necessário.	Maior esforço; requer alteração única do tema

### Adicionar código ao arquivo header.php A **forma mais objetiva de editar cabeçalho WordPress** é executar as modificações no arquivo *header.php*, *template* universal do WordPress, presente em praticamente todos os temas. A título de exemplo, editaremos o cabeçalho WordPress no tema [TwentyTwenty](https://themes.trac.wordpress.org/browser/twentytwenty/1.6/header.php "Cabeçalho do template TwentyTwenty — WordPress.org"), para que você possa observar a estrutura típica de um arquivo *header.php*: ```php >