Em alguns momentos, pode ser necessário adicionar pequenos trechos de código ao seu site para integrar serviços externos, realizar verificações de propriedade ou incluir ferramentas de monitoramento. Várias plataformas de rastreamento e sistemas de chat, de atendimento ou de automação de marketing normalmente fornecem códigos que precisam ser inseridos diretamente no HTML da página.
Embora existam plugins para essa finalidade, os sites WordPress que desenvolvemos já oferecem uma opção nativa para inserir esses códigos sem precisar instalar componentes adicionais. Essa tarefa pode ser feita diretamente nas configurações do tema, de forma prática e centralizada.
Neste artigo, vamos mostrar como adicionar códigos personalizados no <head> ou no <body> do seu site (além de CSS personalizado) utilizando os recursos disponíveis no tema do site.
Importante: se você quiser adicionar o Google Analytics, o Google Tag Manager, o Google Search Console ou o Google Ads ao site, recomendamos usar o Google Site Kit. Veja como fazer clicando aqui. Quando adicionar um código no <head>?
A seção <head> da página é carregada antes do conteúdo visível do site. Geralmente, ela é utilizada para:
- Scripts de monitoramento, como Microsoft Clarity.
- Verificações de propriedade do domínio na Meta.
- Meta tags personalizadas.
- Códigos de rastreamento de ferramentas de marketing.
Quando adicionar um código no <body>?
Alguns serviços solicitam que parte do código seja inserida logo após a abertura da tag <body>, enquanto outros recomendam adicioná-lo antes do fechamento (antes de </body>) dessa mesma tag.
Esses casos são comuns em:
- Widgets de atendimento.
- Chats online.
- Ferramentas de automação.
- Scripts de integração com plataformas externas.
Sempre siga a recomendação da ferramenta que forneceu o código.
Quando adicionar um código CSS no site?
O código CSS é usado para definir estilos visuais. Útil, por exemplo, se quiser personalizar elementos específicos do site. Recomendamos sempre usar recursos nativos do tema para personalização de elemento, mas é possível incluir CSS personalizado diretamente na folha de estilos do tema se necessário.
Como adicionar um código personalizado no Impreza
O processo é bastante simples:
- Acesse o painel administrativo do WordPress. Lembre-se de que você precisa ser administrador para fazer essa alteração.
- No menu lateral, procure por “wjk.digital” (em sites antigos, pode ser “wjk mkt” ou “Impreza”) > Opções do tema
- Na lista de opções, vá até “Código personalizado”
- Observe que, nesta tela, você tem 4 campos: CSS personalizado, Código antes de </head>, Código após <body> e Código antes de </body>. Escolha a melhor opção seguindo as instruções do fornecedor do código. Quando terminar, clique em “Salvar alterações”
Observe que em algumas situações, pode acontecer do firewall do Wordfence bloquear a adição de algum código (principalmente scripts). Se isso acontecer, você pode clicar em “Adicionar ação à lista de permissões” e clicar no botão de “Salvar alterações” novamente.
Boas práticas
Antes de adicionar qualquer código ao seu site, considere algumas recomendações importantes:
- Utilize apenas códigos provenientes de fontes confiáveis.
- Evite inserir scripts duplicados, pois isso pode gerar medições incorretas.
- Mantenha um registro dos códigos instalados para facilitar futuras manutenções.
- Sempre que possível, teste as alterações antes de aplicá-las em um ambiente de produção.