Como adicionar código de cabeçalho e rodapé no WordPress

Personalizar seu site WordPress usando código pode ser assustador. Muitas vezes, você precisará cavar arquivos principais para modificar configurações ou adicionar novos parâmetros, o que pode quebrar seu site se você fizer isso da maneira errada.

No entanto, adicionar código de cabeçalho e rodapé tende a ser muito mais simples. Muitas vezes, você só precisará copiar e colar snippets de código específicos. Isso significa que, se você sabe como acessar seus arquivos de cabeçalho e rodapé, já passou da parte mais assustadora.

Neste artigo, ensinaremos como adicionar código de cabeçalho e rodapé no WordPress manualmente e com um plug-in. Ambas as abordagens são muito diretas, então vamos direto ao assunto!

Por que você pode precisar adicionar código de cabeçalho e rodapé no WordPress

Se você administra um site, provavelmente conhece pelo menos um serviço de terceiros que exige que você incorpore código para se conectar a ele.

Alguns dos exemplos mais populares incluem Google Analytics, Search Console, Facebook Pixel e muitas outras ferramentas que envolvem rastreamento de sites.

Todos esses serviços exigem que você adicione scripts específicos entre as tags de cabeçalho do seu site. O cabeçalho do seu site é um componente crucial, incluindo elementos como scripts, títulos, arquivos de estilo e muito mais.

As tags de rodapé funcionam de maneira semelhante às suas contrapartes de cabeça . Tecnicamente, se você adicionar snippets de código ao rodapé do seu site, eles devem ser executados da mesma forma que se você os incluísse no cabeçalho.

No entanto, é importante entender que seu site executará scripts na ordem em que você os incluir. Além disso, o código do cabeçalho   executado antes que a página seja carregada, enquanto o código do rodapé será executado depois.

Se você tem a opção de escolher e se preocupa com a otimização do site, mover o JavaScript para o rodapé do seu site pode ajudar a acelerar o tempo de carregamento. No entanto, alguns serviços solicitarão explicitamente que você adicione seu código ao seu cabeçalho para evitar problemas de execução.

Como regra geral, se um serviço solicitar isso de você, recomendamos seguir seu conselho. Para outros trechos de código JavaScript, coloque-os no rodapé do seu site WordPress. O código CSS sempre vai para o cabeçalho.

Como adicionar código de cabeçalho e rodapé no WordPress (2 métodos)

Como costuma ser o caso do WordPress, você pode atingir o mesmo objetivo modificando os arquivos manualmente ou usando um plug-in.

Vamos começar falando sobre a abordagem do plugin.

1. Use um plug-in como Head, Footer e Post Injections

Usar um plugin para adicionar código aos seus arquivos de cabeçalho e rodapé no WordPress é a abordagem mais segura. Com um plug-in, você não precisa modificar os arquivos do tema manualmente ou garantir que está adicionando scripts no lugar certo.

Embora existam muitos plugins bons para escolher, nossa recomendação para o trabalho é o plugin Head, Footer e Post Injections.

Este plug-in oferece muito controle sobre onde em seu código você deseja adicionar seus trechos de código. Ele também oferece a opção de adicionar scripts diferentes para renderizações para dispositivos móveis e desktop do seu site.

Para adicionar o plug-in, vá para Plugins > Adicionar novo no seu painel e use o recurso de pesquisa para encontrar o plug-in. Clique em instalar e ative o plugin.

Assim que o plugin estiver ativo, você pode ir direto para Configurações > Cabeçalho e Rodapé . Você verá vários campos onde pode adicionar snippets de código.

Se você pesquisar as opções do plug-in, verá que ele oferece muitos canais adicionais para seus snippets de código. No entanto, na maioria dos casos, você pode usar a guia Cabeçalho e rodapé .

Para código global, certifique-se de colocar esses snippets no campo On Every Page . No entanto, se você precisar apenas que o código seja executado em sua página inicial, use a opção Somente na página inicial .

Depois de terminar de adicionar o código ao seu site, salve as alterações no plug-in e pronto!

2. Adicione trechos de código por meio de seu arquivo functions.php

Adicionar código de cabeçalho e rodapé manualmente no WordPress não é complicado, mas requer mais considerações do que a abordagem do plugin.

Você pode adicionar o código diretamente aos arquivos header.php ou footer.php do seu tema ativo. Você pode encontrar esses arquivos no diretório /public_html/wp-content/themes/ abrindo a pasta do seu tema ativo e olhando dentro:

Você pode acessar esses arquivos via FTP (File Transfer Protocol) e editá-los usando seu editor de código favorito. No entanto, editar arquivos de cabeçalho e rodapé diretamente pode ser confuso. Com isso em mente, temos duas recomendações se você planeja usar a abordagem manual:

1. Crie um tema filho para o seu tema. Dessa forma, você não perderá nenhuma personalização ao atualizar o tema pai.
2. Use ganchos para adicionar o código através do seu arquivo functions.php . Isso oferece uma abordagem mais limpa sobre a edição manual de arquivos de cabeçalho e rodapé.

Idealmente, você deve sempre usar um tema filho se planeja fazer qualquer tipo de personalização de tema. Você pode acessar o arquivo functions.php do seu tema filho em sua pasta dentro do diretório /wp-content/themes .

Abra o arquivo functions.php em seu editor de código. Para adicionar o código desejado, você precisa usar o wp_head   ou wp_footer   gancho.

O snippet de código a seguir adiciona seu código personalizado ao cabeçalho do seu site:

 add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }

Você pode usar o gancho wp_footer em vez de wp_head se quiser colocar o código no rodapé. Você também pode alterar o nome da função (test_script) se desejar.

Quando você terminar de ajustar seu arquivo functions.php , lembre-se de salvar suas alterações e pronto. Qualquer código que você adicionou deve estar funcionando agora!

Conclusão

Muitos serviços de terceiros, como Google Analytics ou Facebook Pixel, exigem que você adicione trechos de código ao seu site para que eles possam se conectar a ele. No entanto, este é apenas um dos muitos casos em que você precisará adicionar código ao seu cabeçalho e rodapé no WordPress, então vale a pena saber como fazê-lo.

Existem duas maneiras de adicionar trechos de código ao seu cabeçalho e rodapé. Você pode usar um plugin como 'Head, Footer and Post Injections' ou adicionar trechos de código através do seu arquivo functions.php .

Você tem alguma dúvida sobre como adicionar código de cabeçalho e rodapé no WordPress? Vamos falar sobre eles na seção de comentários abaixo!