Adicionando código a um cabeçalho ou rodapé do WordPress

Por uma ampla variedade de razões, é possível que em algum momento você queira ou precise adicionar código ao cabeçalho ou rodapé do seu site WordPress. Infelizmente, a plataforma não oferece uma maneira simples ou direta de fazer isso imediatamente.

A boa notícia é que você pode remediar isso facilmente com a ajuda de um tema filho e seu arquivo functions.php ou um plug-in do WordPress. Qualquer que seja o método escolhido, você poderá aprimorar facilmente seu site com recursos personalizados, dados do usuário e estratégias de aumento de desempenho.

Nesta postagem, explicaremos alguns casos em que você pode precisar ou querer adicionar código ao cabeçalho e rodapé do seu site WordPress. Em seguida, compartilharemos instruções passo a passo para dois métodos que permitem editar esses elementos para criar um cabeçalho ou rodapé personalizado. Vamos começar!

Por que editar seu código de cabeçalho e rodapé do WordPress?

Os motivos pelos quais você pode querer editar o cabeçalho ou rodapé do WordPress são muitos e variados. Provavelmente, o mais óbvio é que, às vezes, você deseja estilizar seu site usando um código personalizado e precisa adicionar esse código ao cabeçalho e/ou rodapé.

No entanto, esses também são locais privilegiados para códigos de rastreamento, como o usado para o Google Analytics. Esses códigos podem fornecer informações valiosas sobre o comportamento do usuário para aprimorar suas estratégias de marketing e conteúdo.

Além disso, o WordPress não inclui meta tags por padrão. Eles são adicionados ao cabeçalho do seu site para ajudar os mecanismos de pesquisa a rastrear suas páginas. Embora eles não sejam tão relevantes agora quanto costumavam ser, não há problema em adicioná-los ao seu cabeçalho – eles só podem ajudar na visibilidade do seu site.

Por último, você pode estar familiarizado com a prática de mover o JavaScript de bloqueio de renderização 'abaixo da dobra'. Isso normalmente significa adicioná-lo ao rodapé do WordPress, o que exigirá a edição de seu código. Essa técnica pode ajudar a melhorar o desempenho do seu site diminuindo o tempo de carregamento.

Como adicionar código ao cabeçalho ou rodapé do WordPress manualmente (em 2 etapas)

Existem dois métodos principais para adicionar código ao cabeçalho ou rodapé do WordPress. A primeira é editar manualmente o tema do seu site e a segunda é usar um plug-in. Embora a edição manual dos arquivos do seu tema seja mais arriscada e difícil, para alguns usuários mais avançados é o método preferido.

Etapa 1: criar um tema filho

A adição manual de código ao cabeçalho ou rodapé do WordPress envolve a edição de alguns dos arquivos do tema. Quando você precisa fazer isso, é sempre aconselhável editar um tema filho em vez de mexer diretamente nos arquivos do tema pai. Dessa forma, você pode evitar perder suas alterações ao atualizar seu tema.

Felizmente, o processo para criar um tema filho manualmente é bastante simples e você pode acessar os tutoriais do WordPress necessários para personalizar os cabeçalhos. No entanto, se você precisar criar um tema filho rapidamente, um plug-in de criação de tema, como o Child Theme Configurator, pode ajudar.

Com um plug-in do construtor de temas, você pode gerar facilmente um tema filho com o clique de um botão, embora a abordagem totalmente manual possa ser tão rápida quanto você tiver o método.

Passo 2: Edite o arquivo functions.php do seu tema filho

Assim que seu tema filho estiver configurado, você precisará acessar e editar seu arquivo functions.php . Antes de começar, é sempre aconselhável fazer backup de seu site, caso você cometa algum erro e queira restaurá-lo facilmente para um estado anterior.

A maneira usual de editar seu arquivo functions.php é via File Transfer Protocol (FTP) e um cliente FTP como o FileZilla. No entanto, você também pode editar determinados arquivos no painel do WordPress. Para acessá-lo, navegue até Appearance > Theme Editor .

Você receberá um aviso de que está prestes a editar os arquivos do seu tema – clique no botão Entendo para continuar. Em seguida, certifique-se de ter selecionado o arquivo correto. Na barra lateral à direita do editor do site, verifique se as funções do tema (functions.php) estão selecionadas.

Agora você pode adicionar seu código personalizado no final deste arquivo e clicar em Atualizar arquivo quando terminar.

Como adicionar código ao cabeçalho ou rodapé do WordPress com um plug-in (em 2 etapas)

Embora em alguns casos possa ser mais fácil editar manualmente os arquivos do seu tema WordPress para adicionar código à sua seção de rodapé ou cabeçalho, usar um plug-in geralmente é o caminho mais seguro. Para os fins deste artigo, usaremos um dos plug-ins mais populares e bem avaliados para a tarefa, Header, Footer e Post Injections.

No entanto, existem muitos plug-ins disponíveis no Diretório de plug-ins do WordPress e em outros lugares que podem ajudar nessa tarefa.

Etapa 1: instale e ative o plug-in de sua escolha

Para começar, você precisará instalar e ativar o plug-in que deseja usar. Você pode fazer isso baixando o arquivo .zip do plug-in no diretório de plug-ins ou em outro mercado on-line e, em seguida, fazendo o upload para o seu site. Como alternativa, navegue até Plugins > Adicionar novo em seu painel.

Aqui você pode procurar o plug-in de rodapé ou cabeçalho que deseja usar. Qualquer que seja o método escolhido, você concluirá esta etapa clicando no botão Instalar e, em seguida, em Ativar quando a opção for apresentada.

Etapa 2: adicione seus trechos de código ao cabeçalho, rodapé e pós-injeções

Depois que o plug-in estiver instalado, você poderá navegar para Configurações > Cabeçalho e Rodapé em seu painel.

Aqui você encontrará um editor de texto para adicionar trechos de código – como um código de rastreamento do Google Analytics ou JavaScript personalizado – que deseja incluir em seu cabeçalho e/ou rodapé.

Há muito que você pode realizar nesta página. Nos dois primeiros campos, você pode adicionar código à sua seção de cabeçalho. O campo à esquerda adiciona o código a todas as páginas do seu site – isso é útil para o Google Analytics, por exemplo. O campo à direita adicionará o código apenas à sua página inicial.

Os próximos campos adicionam código ao código do corpo e do rodapé de suas páginas. Os campos à esquerda são para visualização em desktop, enquanto os à direita são para versões móveis do seu código. Quando terminar de editar, não se esqueça de clicar no botão Salvar na parte inferior da tela.

Melhore a experiência do seu site com o WP Engine

Não há dúvida de que você deseja que seu site WordPress forneça uma experiência digital de alto nível para seus usuários. Adicionar código ao rodapé ou cabeçalho do WordPress é uma tática útil para personalizar seu site, implementar o Google Analytics ou melhorar o desempenho.

No WP Engine, temos uma ampla variedade de recursos para desenvolvedores que podem ajudá-lo a levar a experiência do seu site WordPress a novos patamares. Confira-os hoje!