Adicionar JavaScript às suas páginas ou posts do WordPress pode melhorar a funcionalidade e o engajamento do usuário. No entanto, o WordPress não permite que você insira JavaScript diretamente em seu conteúdo por padrão.
Entendemos que essa limitação pode ser frustrante, especialmente se você deseja personalizar seu site com recursos interativos ou scripts de rastreamento.
Felizmente, existem maneiras simples de adicionar JavaScript ao seu site WordPress. Você pode aplicá-lo a páginas ou posts específicos, ou até mesmo em todo o seu site. Além disso, você pode usar um plugin de trechos de código como o WPCode, como fazemos no WPBeginner, para facilitar tudo.
Neste artigo, vamos guiá-lo por dois métodos fáceis para implementar JavaScript em suas páginas ou posts do WordPress.
O que é JavaScript?
JavaScript é uma linguagem de programação que é executada no navegador do usuário, não no seu servidor. Essa programação do lado do cliente permite que os desenvolvedores façam muitas coisas interessantes sem desacelerar seu site.
Se você deseja incorporar um reprodutor de vídeo, adicionar calculadoras ou algum outro serviço de terceiros, você geralmente será solicitado a copiar e colar um trecho de código JavaScript em seu site WordPress.
Um trecho de código JavaScript típico pode parecer assim:
<script type="text/javascript"> // Some JavaScript code </script> <!-- Another Example: --!> <script type="text/javascript" src="/path/to/some-script.js"></script> Mas, se você adicionar um trecho de código JavaScript a um post ou página, o WordPress o excluirá quando você tentar salvá-lo.
Com isso em mente, mostraremos como adicionar facilmente JavaScript a páginas ou posts do WordPress sem quebrar seu site. Você pode usar os links rápidos abaixo para pular diretamente para o método que deseja usar.
- Método 1. Adicione JavaScript em Qualquer Lugar do Seu Site WordPress Usando WPCode (Recomendado)
- Método 2. Adicionando Código JavaScript ao WordPress Manualmente Usando Código (Avançado)
- Dica Bônus: Mais Guias de Snippets de Código
Vamos lá!
Método 1. Adicione JavaScript em Qualquer Lugar do Seu Site WordPress Usando WPCode (Recomendado)
Às vezes, um plugin ou ferramenta precisará que você copie e cole um snippet de código JavaScript em seu site para funcionar corretamente.
Geralmente, esses scripts vão na seção de cabeçalho ou rodapé do seu blog WordPress, para que o código seja carregado em cada visualização de página.
Por exemplo, ao instalar o Google Analytics, o código precisa ser executado em todas as páginas do seu site para que ele possa rastrear seus visitantes.
Você pode adicionar manualmente o código aos seus arquivos header.php ou footer.php, mas essas alterações serão substituídas quando você atualizar ou alterar seu tema.
É por isso que recomendamos o uso do WPCode para adicionar JavaScript em qualquer lugar do seu site WordPress.
WPCode é o plugin de snippets de código mais poderoso disponível para WordPress. Ele permite que você adicione facilmente código personalizado a qualquer área do seu site e, o melhor de tudo, é gratuito.
Primeiro, você precisa instalar e ativar o plugin gratuito WPCode. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.
Após a ativação, você precisa ir para Snippets de Código » Cabeçalho e Rodapé.
Aqui, você verá três campos separados rotulados como 'Cabeçalho', 'Corpo' e 'Rodapé'.
Agora você pode adicionar seu código JavaScript a uma destas caixas e, em seguida, simplesmente clicar no botão ‘Salvar’. O WPCode carregará automaticamente o código que você adicionou a todas as páginas do seu site.
Você também pode adicionar trechos de código em qualquer outro lugar do seu site, como dentro de posts ou páginas.
Para fazer isso, basta ir em Trechos de Código » + Adicionar Trecho e, em seguida, clicar em ‘Criar o Seu Próprio’.
Em seguida, selecione ‘Trecho de JavaScript’ como o tipo de código na lista de opções que aparecem na tela.
Agora você verá uma página ‘Criar Snippet Personalizado’ onde você pode adicionar um título para o seu código. Isso pode ser qualquer coisa para ajudá-lo a lembrar para que serve o código.
Depois disso, cole seu código na caixa ‘Pré-visualização do Código’.
Em seguida, você vai querer rolar até encontrar a seção ‘Inserção’.
Agora, tudo o que você precisa fazer é selecionar um ‘Local’ para o código no menu suspenso. Encontre ‘Página, Post, Tipo de Post Personalizado’ e escolha onde você quer que o código apareça na página ou post.
Se você escolher que o WPCode insira o snippet antes ou depois de um parágrafo, você poderá escolher em qual parágrafo específico do post ele aparecerá antes ou depois.
Por exemplo, se você colocar 1 no campo ‘Número de Inserção’, o snippet de código aparecerá antes ou depois do primeiro parágrafo. Use 2 para o segundo parágrafo, e assim por diante.
Depois disso, você só precisa clicar no alternador perto do topo da tela para mudar para ‘Ativo’ e, em seguida, clicar no botão ‘Salvar Snippet’ ao lado dele.
É tudo o que é preciso para tornar seu snippet de código ativo no site!
Método 2. Adicionando Código JavaScript ao WordPress Manualmente Usando Código (Avançado)
Nota: Os métodos a seguir são para iniciantes e proprietários de sites. Se você está aprendendo desenvolvimento de temas ou plugins do WordPress, então você precisa enfileirar corretamente JavaScript e folhas de estilo em seus projetos.
Com este método, você precisa adicionar código aos seus arquivos do WordPress. Se você nunca fez isso antes, então você vai querer conferir nosso guia sobre como copiar e colar código no WordPress.
Primeiro, mostraremos como adicionar código ao cabeçalho do seu site WordPress. Você precisa copiar o seguinte código e adicioná-lo ao seu functions.php.
function wpb_hook_javascript() { ?> <script> // your javscript code goes </script> <?php } add_action('wp_head', 'wpb_hook_javascript'); Adicionando JavaScript a uma Postagem Específica do WordPress Usando Código
Se você deseja adicionar JavaScript a apenas uma única postagem do WordPress, precisará adicionar lógica condicional ao código.
Vamos primeiro dar uma olhada no seguinte trecho de código:
function wpb_hook_javascript() { if (is_single ('5')) { ?> <script type="text/javascript"> // your javscript code goes here </script> <?php } } add_action('wp_head', 'wpb_hook_javascript'); O código acima executará o JavaScript apenas se o ID da postagem corresponder a '5'. Certifique-se de substituir o '5' pelo seu próprio ID de postagem.
Para encontrar o ID da postagem, basta abrir a postagem onde você deseja que o JavaScript seja executado. Em seguida, na URL da página, você encontrará o ID da postagem.
Adicionando JavaScript a uma Página Específica do WordPress Usando Código
Se você deseja adicionar JavaScript a apenas uma única página do WordPress, precisará adicionar lógica condicional ao código, assim como acima.
Dê uma olhada no seguinte exemplo:
function wpb_hook_javascript() { if (is_page ('10')) { ?> <script type="text/javascript"> // your javscript code goes here </script> <?php } } add_action('wp_head', 'wpb_hook_javascript'); O código acima executará o JavaScript apenas se o ID da página for '10'. Certifique-se de substituir o '10' pelo seu próprio ID de página.
Você pode encontrar o ID da página usando o mesmo método acima. Simplesmente abra a página onde você deseja que o JavaScript seja executado e anote o ID da página na URL.
Adicionando JavaScript a uma Postagem ou Página Específica do WordPress Usando Código no Rodapé
Se você deseja que o JavaScript seja executado no rodapé do seu site em vez do cabeçalho, você pode adicionar o seguinte trecho de código ao seu site.
function wpb_hook_javascript_footer() { ?> <script> // your javscript code goes </script> <?php } add_action('wp_footer', 'wpb_hook_javascript_footer'); Este trecho de código se conecta a wp_footer em vez de wp_head. Você também pode adicionar tags condicionais para adicionar JavaScript a postagens e páginas específicas, como nos exemplos acima.
Dica Bônus: Mais Guias de Snippets de Código
Agora que você aprendeu como adicionar facilmente JavaScript a páginas ou postagens do WordPress, vamos ver mais alguns trechos de código personalizados para expandir ainda mais a funcionalidade do seu site!
Adicionando um Acordeão de FAQ com jQuery no WordPress
jQuery, uma biblioteca JavaScript útil, adiciona recursos interativos ao seu site.
Usar um acordeão de FAQ em jQuery no WordPress ajuda a manter seu conteúdo organizado. Ele exibe perguntas e respostas em um formato recolhível, facilitando para os visitantes encontrarem informações sem ter que rolar por textos longos.
Mas isso não é tudo.
Um acordeão de FAQ pode impulsionar seu ranking nos motores de busca ao estruturar o conteúdo de uma forma que os motores de busca gostam. Na WPBeginner, também achamos os acordeões de FAQ em jQuery úteis para lidar com perguntas comuns, atrair mais visitantes e melhorar o SEO.
Para mais informações, você pode conferir nosso artigo sobre como adicionar um acordeão de FAQ com jQuery no WordPress.
Incorporando Código iFrame no WordPress
Um iFrame, ou quadro embutido, permite que você incorpore vídeos ou outro conteúdo em seu site sem hospedar os arquivos você mesmo. Isso economiza largura de banda e espaço de armazenamento, tornando-o uma escolha melhor do que fazer upload de vídeos diretamente para o WordPress, o que você nunca deveria fazer em primeiro lugar.
O uso de um iFrame também pode aumentar a velocidade e o desempenho do seu site, pois ele puxa conteúdo de uma fonte externa.
Para saber mais, você pode consultar nosso guia sobre como incorporar facilmente código iFrame no WordPress.
Criando um Feed RSS Separado para Cada Tipo de Postagem Personalizado no WordPress
O WordPress permite que você crie tipos de postagem personalizados adaptados às suas necessidades de conteúdo específicas, como resenhas de filmes, produtos ou depoimentos. Esse recurso ajuda a organizar melhor seu site e a aprimorar a experiência do usuário.
Observe que você pode configurar feeds RSS para cada tipo de postagem personalizado, fornecendo aos visitantes feeds especializados que permitem um engajamento mais personalizado com seu conteúdo.
Se você quiser mais informações, pode ler nosso guia sobre como criar um feed RSS separado para cada tipo de postagem personalizada no WordPress.
Para mais ideias de snippets personalizados, sinta-se à vontade para conferir nossas seleções de especialistas dos snippets de código do WordPress mais úteis para iniciantes.
Esperamos que este artigo tenha ajudado você a aprender como adicionar JavaScript facilmente a páginas ou posts do WordPress. Você também pode querer ver nosso guia sobre como adicionar corretamente JavaScripts e estilos no WordPress e nossas seleções de especialistas de truques extremamente úteis para o arquivo functions do WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Mesht
Com o primeiro método (Wpcode), posso adicionar um script a apenas 1 página?
WPBeginner Support
You can use the first method to add it to multiple pages not just one
Admin
Dennis Muthomi
Eu gerencio muitos sites de clientes, e o WPCode tem sido minha ferramenta preferida. É super confiável quando preciso adicionar scripts de rastreamento ou recursos personalizados aos sites dos clientes.
Uma coisa que devo fazer ao adicionar código é sempre fazer backup do seu site antes de usar o WPCode. Eu testo tudo em staging primeiro. Confie em mim, isso me poupou tantas dores de cabeça! Especialmente quando os scripts entram em conflito com os recursos do tema.
E a melhor parte é que, se algo der errado, você pode simplesmente desativar o trecho de código problemático. Tão simples!
Jiří Vaněk
O WPCode salvou meu site inteiro assim, que eu já tinha concluído, mas eventualmente descobrimos que o menu funciona muito mal em dispositivos móveis. Encontrei uma solução na forma de JavaScript, mas não sabia onde ou como inseri-lo no site. Isso me poupou todo o trabalho e resolveu o problema de fechar o menu em dispositivos móveis.
WPBeginner Support
Que bom saber que o plugin foi útil!
Admin
asa
Eu me pergunto por que não usar o método mais simples, apenas usar diretamente o bloco “HTML Personalizado” do WordPress para inserir código JavaScript em uma postagem ou página. Eu tentei e testei. Nenhum problema. Método muito, muito, muito simples.
WPBeginner Support
Dependeria do código específico, os métodos que mostramos neste guia são para adicionar o código à seção head, pois a maioria dos JavaScripts quer ser executada na seção head.
Admin
Rejane
Tenho um tema filho ativo e usei o plugin “Insert Headers and Footer” para adicionar um código JavaScript para um serviço de marketing por e-mail. Funcionou! Mas, infelizmente, tive que cancelar minha conta com este serviço e agora gostaria de remover o código JavaScript. Como faço isso quando estou usando um tema filho? Existe alguma maneira fácil ou outro plugin para isso?
WPBeginner Support
You would remove the code from the Insert Headers and Footers plugin and it would remove the code from your site
Admin
Paul Liles
Não consigo encontrar o menu de três pontos em lugar nenhum? Preciso de ajuda.
WPBeginner Support
Deveria estar no topo da página de edição. se você estiver usando o editor clássico, ele estará em Opções de Tela.
Admin
Eleni
Não estou vendo a opção Campos Personalizados na aba Opções de Tela. Estou usando um site auto-hospedado e instalei e ativei o plugin Code Embed.
WPBeginner Support
Se você estiver usando o editor de blocos, a configuração foi movida para a área de preferências.
Admin
Ashley
Este site é INCRÍVEL!!! Este é o terceiro post seguido em que acertei em cheio o que precisava e fiz da maneira mais fácil possível. Obrigado!!
WPBeginner Support
Glad our guides were helpful
Admin
Cara
Ei, ótimo conteúdo WPbeginners! O segundo método funcionou perfeitamente. Tive uma dúvida, porém. Se eu quisesse adicionar outro código js para outro propósito, como o código deveria começar. Porque tudo o que adiciono depois do código fica esmaecido. Estou perdido aqui. Quero que faça o mesmo, mas para outra página. Alguma ideia será apreciada.
WPBeginner Support
Dependeria muito do código que você está usando, mas você gostaria de garantir que o código esteja antes da tag
/scriptAdmin
Jonathan
Obrigado. Este artigo foi extremamente útil. Optei pela opção functions.php. Funcionou bem.
WPBeginner Support
Glad our guide was helpful
Admin
Elise
Isso funcionou. Muito obrigado!
WPBeginner Support
You’re welcome
Admin
Martin
Pergunta sobre o Método 3:
Após inserir o valor e clicar em “adicionar campo personalizado”, como faço para o código ser exibido no frontend do meu site?
Devo inserir “{{CODEmyjscode}}” usando um widget de shortcode ou um editor de texto na página?
WPBeginner Support
por enquanto, você vai querer usar o editor de texto ou de código.
Admin
Bret Bernhoft
Quando comecei a trabalhar com WordPress, JavaScript parecia uma impossibilidade para mim. Mas, avançando para hoje, estou escrevendo a linguagem todos os dias; muitas vezes em associação com o WordPress.
Gostaria que tivesse sido mais claro para mim o quão fácil teria sido escrever JavaScript, quando comecei essa jornada. Obrigado pelas ferramentas e dicas. Vou ter que tentar.
WPBeginner Support
Glad we could share some easy methods for adding JavaScript to your site!
Admin
ibrahim
Funcionou e me ajudou muito. Obrigado!
WPBeginner Support
You’re welcome
Admin
Kat
Tentei adicionar JS personalizado em meu post, mas nada acontece. Segui suas instruções exatas para o Método 3, mas quando vou pré-visualizar a página, é apenas um espaço em branco onde o JS deveria estar. Alguma ideia do porquê?
WPBeginner Support
Você vai querer dar uma olhada no FAQ do plugin para os motivos mais comuns desse problema e como resolvê-lo.
Admin
Samuel
Como isso funciona com o novo sistema de blocos do WordPress?
Estou tentando incorporar isso em uma página, mas ele aparece apenas como {{code1}} na pré-visualização
WPBeginner Support
Dependeria do método que você está usando em seu site para o plugin, eles têm uma atualização em sua seção de FAQ sobre como usá-lo no momento.
Admin
Akash
Obrigado por esta informação. Post realmente incrível e útil.
WPBeginner Support
You’re welcome, glad our article was helpful
Admin
Alex
Olá, ótimo guia! O problema é que não tenho "Campos Personalizados" nas opções de tela... Alguma ideia do porquê?
WPBeginner Support
Seu site está no WordPress.com?
Admin
James
Olá. Contratei um programador para criar uma ferramenta, que ele fez em Javascript. Eu estava usando o Weebly, mas o Weebly se tornou irresponsável em pedidos de ajuda, o que centenas de blogs testemunham. Então, estou procurando alternativas ao Weebly. O Wordpress conseguiria lidar com uma ferramenta Javascript de 2 MB?
Obrigado,
WPBeginner Support
Sua hospedagem determinaria se uma ferramenta como essa poderia ser usada, não a plataforma do seu site, e dependendo de como a ferramenta foi configurada, determinaria se você pode transferir a ferramenta.
Admin
Matt
E se eu precisar adicionar o script apenas em uma página específica, mas no head e não no body? Estou tentando adicionar um pixel de conversão do Google apenas na página de agradecimento do envio do meu formulário.
WPBeginner Support
You would want to take a look at the section of the article called: Adding JavaScript to a Specific WordPress Post or Page Using Code
Admin
quy
funciona como mágica. Muito obrigado
WPBeginner Support
You’re welcome, glad our article could help
Admin
Manjeet Chhillar
Obrigado por este post muito útil.
Minha pergunta é: Como posso implementar o "Método 2" em vários posts? Preciso adicionar o ID do Post de cada post individual separado por vírgula?
WPBeginner Support
sim, você precisaria colocar as vírgulas fora das aspas simples e iniciar um novo conjunto de aspas para este método
Admin
Deborah
Obrigado por compartilhar os três métodos que os usuários do WordPress podem usar para adicionar JavaScript a posts ou páginas. Pelo que li na página do plugin Insert Headers and Footers no repositório, o plugin não usa o método enqueue para adicionar os scripts. Que é o método recomendado para adicionar scripts no WordPress.
Eu entendi errado? Ou o Insert Headers and Footers usa enqueue para adicionar scripts? Se não estiver usando enqueue, você sabe quando o plugin será atualizado para usar enqueue?
WPBeginner Support
O plugin não está enfileirando scripts adicionados a ele no momento, pois nem tudo adicionado com nosso plugin pode querer ser enfileirado. Se você quisesse enfileirar o código adicionado, você usaria outro método.
Admin
Dave G
Legal, obrigado por isso. Acontece que o ID exato da postagem em que eu precisava executar JavaScript era o número 16. “`if (is_single (’16’)) { “`
Você é do futuro?
WPBeginner Support
Not yet at least
Admin
Golu Arjun
Obrigado por esta postagem. É muito útil. É possível personalizar
WPBeginner Support
You’re welcome
Admin
Thomas
Preciso adicionar um script a todas as postagens do meu blog. Tenho o plugin para cada postagem individual. O problema é que existem milhares de postagens e precisamos adicionar o script a todas elas. Alguma sugestão? Agradeço antecipadamente.
WPBeginner Support
A opção Inserir Cabeçalhos e Rodapés colocará um código em cada postagem e página para você se elas estiverem usando o mesmo código.
Admin
Thomas
Obrigado pela sua rápida resposta.
Só queremos que o script seja executado em Postagens. Não queremos que ele seja executado em todas as páginas.
WPBeginner Support
Se você tivesse um widget que é adicionado apenas a postagens, poderia tentar adicionar o código em um widget.
Ann
Tentei usar os scripts de Cabeçalhos e Rodapés e o jQuery simplesmente não parece estar funcionando corretamente.
WPBeginner Support
Dependeria do código específico que você está adicionando ao site para os possíveis motivos pelos quais ele pode não estar funcionando. Você pode querer garantir com quem obteve o código que o próprio código está funcionando.
Admin
Andrew Golay
Por favor, corrija seu plugin de Cabeçalhos / Rodapés ou altere este artigo, obrigado.
WPBeginner Support
Nosso plugin está funcionando atualmente em testes, mas certamente daremos outra olhada nele.
Admin
lynn
obrigado!! Isso foi muito útil.
WPBeginner Support
Glad it was helpful
Admin
Remco
Obrigado por este ótimo post!
É possível implementar Dados Estruturados em páginas do Woocommerce com este método (JSON-LD)?
WPBeginner Support
Você provavelmente poderia, mas se você tem um plugin de SEO que está usando atualmente, você deve verificar com esse plugin para ver se ele já faz isso.
Admin
graham
Uma compilação bem apresentada das opções mais conhecidas para o que está se tornando uma necessidade comum. No entanto, muitos usuários do WordPress não são (e não querem ser) programadores. Para eles, JavaScript em qualquer forma é muito assustador; é por isso que eles usam WordPress com a promessa de “nenhuma programação necessária”.
Existe outra possibilidade; usar scripts personalizados em vez de JavaScript e incorporá-los diretamente na página. Você pode colocá-los em qualquer componente, embora eu prefira .
Tudo o que você precisa então é algo que possa compilar e executar o script. É difícil encontrar plugins que possam fazer isso; minhas próprias buscas ainda não encontraram nenhum. No entanto, como programador JavaScript, eu fui capaz de escrever um e colocá-lo na biblioteca como EasyCoder. Os scripts se assemelham ao inglês, têm aproximadamente a mesma complexidade que SQL e podem fazer a maioria das coisas comumente necessárias para gerenciar conteúdo e interatividade em uma página da web. EasyCoder também é totalmente extensível para que outros programadores possam adicionar módulos eles mesmos.