Como adicionar Javascript (arquivos ou scripts) sem quebrar seu site WordPress (functions.php, template ou plugin)

Adicionar Javascript ao WordPress

Normalmente, há muitos motivos pelos quais você deseja adicionar Javascript ao WordPress, seja um pequeno ajuste em um recurso ou talvez você esteja procurando adicionar um script de terceiros. Respeitoless do motivo pelo qual você deseja fazer isso, você quer ter certeza de não errar - porque você pode arruinar seu site.

Existe uma boa maneira de adicionar Javascript ao WordPress. E há também as formas ruins, que podem prejudicar o seu site ou criar um impacto negativo no desempenho.

Neste artigo, vamos sugerir várias maneiras diferentes de adicionar código Javascript a sites e quais devem ser usadas nas diferentes circunstâncias que você possa encontrar.

 

 

WordPress é tão extensível que permite adicionar facilmente novos recursos e funcionalidades ao seu site sem realmente ter que redesenhar ou substituir todo o seu tema. Em vez de recriar o tema WordPress do zero, você pode adicionar a funcionalidade simplesmente adicionando plug-ins.

E se a funcionalidade que você gostaria de adicionar for bastante pequena e não houver necessidade de criar ou instalar um plug-in, você pode usar o arquivo functions.php ou várias outras maneiras de adicionar Javascript ao WordPress sem ter que criar um plugin separado.

(Nota especial: Você está procurando uma lista de ajustes / truques que você pode fazer facilmente em seu site WordPress sem usar um plug-in? Você pode consultar nosso guia aqui: 101 truques de WordPress que todo blogueiro sério deve saber.)

A melhor coisa sobre o arquivo de funções é que ele atua como um plugin, que pode ser usado para adicionar recursos e estender a funcionalidade tanto do tema quanto do próprio WordPress.

Embora você possa adicionar facilmente Código Javascript diretamente para o seu arquivo header.php, há um problema com este método.

Na verdade, pode causar conflitos com outros plug-ins quando eles carregam seus próprios scripts JS.

Neste artigo por CollectiveRay, damos uma olhada na maneira certa de adicionar javascript aos temas do WordPress. Como desenvolvedores do WordPress, esta é uma das coisas que teremos que fazer com frequência.

Se você não tem certeza de ajustar o código sozinho, talvez queira ler este artigo para aprender como recrutar o melhor desenvolvedor de WordPress para o seu negócio: https://www.collectiveray.com/wordpress-developers-for-hire, ou descubra as seguintes opções de desenvolvimento baratas. 

Se você não tem certeza se isso é certo para você e o que fazer rapidamente, verifique alguns shows de Fiverr que podem fazer isso para você rapidamente

logotipo da fiverr

Clique aqui para encontrar especialistas baratos em correções de WordPress

 

Como adicionar JavaScript ao WordPress

Existem várias maneiras de adicionar código Javascript personalizado ao seu site WordPress, cada uma com seus próprios usos:

  1. Adicione o script a uma página específica ou única de sua escolha, ou a várias páginas usando functions.php
  2. Adicione um script em páginas selecionadas usando plug-ins como cabeçalhos e rodapés
  3. Adicione um arquivo Javascript ao cabeçalho do seu tema

1. Usando functions.php

Única página ou postagem

Este ajuste de código usará o funções arquivo encontrado em sua pasta de modelo para adicionar um arquivo .JS de sua escolha a uma única página de sua escolha apenas.

Ele usa a função IS_PAGE, que você pode encontrar aqui: https://developer.wordpress.org/themes/basics/conditional-tags/. Na verdade, você pode usar várias outras opções se quiser adicionar o script apenas em condições específicas, como:

  • is_single(),
  • is_front_page(),
  • is_home,
  • is_admin etc. 

Se você preferir assistir a um vídeo no YouTube sobre como fazer isso, este pequeno vídeo é bastante bom, sobre como adicionar Javascript a uma única página:

Fw6VDOZYqrM

Temos instruções detalhadas na página, portanto, depois de ver o vídeo, você pode usar este artigo como sua referência.

Se você precisar adicionar o arquivo a todas as páginas, continue rolando para encontrar outras alternativas para este método abaixo.

  • Primeiro, você precisará identificar o ID da página à qual deseja adicionar o script. Para fazer isso, vá para a página à qual deseja adicionar o arquivo e clique em Editar e, em seguida, pegue o ID da página no URL, como você pode ver abaixo. O ID é o número encontrado no URL da barra do navegador.
  • id da página do wordpress

  • Agora que você tem o ID da página, precisará fazer upload do arquivo .js para um local. Recomendamos que você carregue o arquivo .js para a pasta do seu modelo, talvez no diretório filho.
  • Depois de fazer o upload, você precisa anotar exatamente o diretório e o nome do arquivo .JS, que usamos em vez de PATH_TO_JS_FILE abaixo. Por exemplo, seu arquivo pode estar em: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
  • Anote completamente o URL completo e substitua o PATH_T_JS_FILE abaixo. Você também precisará substituir o ID que encontrou acima.
  • Adicione o código completo abaixo ao final do funções arquivo do seu modelo.

função collectiveray_load_js_script () {
  if (is_page (ID)) {
    wp_enqueue_script ('arquivo-js', 'PATH_TO_JS_FILE', array ('jquery'), '', falso);
    // ou use a versão abaixo se você souber exatamente onde o arquivo está
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  }
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Se você sabe exatamente onde colocou o arquivo JS, pode usar uma pequena variação do wp_enqueue_script: 

wp_enqueue_script ('arquivo js', get_template_directory_uri (). '/js/myscript.js');

Nesse caso, o arquivo /js/mysript.js é o local do arquivo que você deseja adicionar.

Depois de recarregar a página, você descobrirá que o arquivo foi adicionado. Você pode confirmar isso clicando em Exibir código-fonte da página.

Se, em vez de adicionar o arquivo Javascript a uma página, você deseja adicioná-lo a uma única página, podemos usar um pequeno ajuste nesta função para aplicá-la a uma única postagem. Você pode usar qualquer variação do seguinte:

  • is_single ('17') - usa o ID da postagem
  • is_single ('Título da Minha Postagem') - usa o título da postagem para verificar se esta é a postagem à qual o arquivo será adicionado
  • is_single ('my-post-title') - verifica contra o peso do poste
  • is_single (array (17, 'my-post-title', 'My Post Title')) - verifica se alguma das condições do ID do post é "17", slug é "my-post-title" ou o título é "My Post Title"
  • é único() - outras variações da função is_single usando uma matriz de valores para verificar

O código, neste caso, seria o seguinte ou uma ligeira variação dependendo dos parâmetros da função is_single. 

função collectiveray_load_js_script () {
  if (is_single ('17 ')) {
    wp_enqueue_script ('arquivo-js', 'PATH_TO_JS_FILE', array ('jquery'), '', falso);
    // ou use a versão abaixo se você souber exatamente onde o arquivo está
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  } 
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Se você tiver o título do post, pode usá-lo, em vez do parâmetro "17". Mais uma vez, o wp_enqueue_script também pode ser ajustado para:

wp_enqueue_script ('arquivo js', get_template_directory_uri (). '/js/myscript.js');

Adicione Javascript a todas as páginas 

Como vimos, o método mais fácil e limpo de adicionar um arquivo javascript ao seu tema WordPress é usando functions.php arquivo com wp_enqueue_script. Nesse caso, em vez de criar uma condição para adicionar o conteúdo a páginas específicas, vamos adicionar uma função genérica.

Veja como fazer isso:

Abra o seu functions.php arquivo e copie o trecho de código abaixo para ele. Certifique-se de substituir o URL do modelo pelo seu antes de salvar.

função collectiveray_theme_scripts_function () {
  wp_enqueue_script ('arquivo js', get_template_directory_uri (). '/js/myscript.js');
}
add_action ('wp_enqueue_scripts', 'collectiveray_theme_scripts_function ');

Se vocês são usando um tema infantil, você precisará usar get_stylesheet_directory_uri () em vez de get_template_directory_uri () 

2. Usando plug-ins

Se você quiser simplesmente usar um plug-in para incorporar uma referência javascript ao arquivo de cabeçalho ou rodapé do tema WordPress, o plug-in 'Inserir cabeçalhos e rodapés' é uma opção fácil.

Como o nome diz, permite que você adicione scripts aos arquivos de cabeçalho e rodapé conectando-se a wp_head e wp_footer funções do WordPress. 

Este plugin é uma boa opção porque permite adicionar qualquer script sem correr o risco de quebrar coisas. Além disso, você não precisa alterar ou ajustar nenhum código (se não se sentir confortável fazendo isso), como fizemos no exemplo anterior.

Alterar o código diretamente é normalmente a melhor opção para web designers. O método usando este plugin é mais fácil.

Em vez de modificar os arquivos do tema diretamente com o código Javascript personalizado, o plugin permite inserir o código, que será adicionado ao cabeçalho ou rodapé do seu site, dependendo das opções escolhidas. 

Este plugin oferece suporte a duas opções:

  1. Adicionando o caminho para um arquivo Javascript específico que você carrega
  2. Adicionar o script diretamente (por exemplo, para Analytics ou outros scripts de terceiros)

Vamos começar: 

Você pode baixar Inserir cabeçalhos e rodapés Aqui.

Instale o plugin:

  • Faça login no back-end ou administrador do seu site.
  • Vá para Plugins> Adicionar novo
  • Procure o plugin "Cabeçalhos e rodapés" e clique em Instalar agora.
  • Depois de instalado, clique em Ativar
Cabeçalhos e rodapés
Dependendo do seu cenário, agora você precisa seguir a opção 1 ou 2. Por exemplo, para adicionar o Google Analytics, você precisa seguir a opção 2.

Opção 1: fazer upload de um arquivo Javascript personalizado

  • Primeiro, você precisa preparar o arquivo para inclusão
  • Salve seu código ou arquivo JavaScript em um novo arquivo de teste com o . Js extensão.
  • Faça upload em seu site para a seguinte pasta: wp-content / themes / / js /
  • Vá para Configurações> Inserir cabeçalhos e rodapés.

Agora temos algumas opções para carregar nosso arquivo:

  1. Scripts no cabeçalho (carregar dentro marcação)
  2. Scripts no rodapé (carregar antes de fechar marcação)

Use o local que melhor corresponda às suas necessidades específicas usando o seguinte como exemplo. Observe que precisa ser alterado para o nome do diretório do tema que você está usando, por exemplo, vinte e vinte

/js/file.js">
 
Insira o script no cabeçalho
  • Clique no botão "Salvar" para terminar e salvar.

Opção 2: carregar o script personalizado sem um arquivo

A 2ª opção que você pode usar com este plugin, é adicionar o código diretamente no WordPress sem a necessidade de usar um arquivo específico.

Isso pode ser usado quando você está usando um serviço de terceiros, como Google Analytics, Drip ou outra ferramenta que precisa de algum script adicionado ao seu site. Basta pegar o script e soltá-lo no Scripts no cabeçalho janela:

adicionar script / código diretamente
 
Mais uma vez, clique em "Salvar" para finalizar.

 

Recarregue o front-end e verifique o código-fonte do seu site para ter certeza de que o código está sendo exibido. Também é uma boa ideia navegar algumas páginas para confirmar se tudo ainda está funcionando bem.

 

Mesmo que pareça bastante simples, pode estar fora da sua zona de conforto, então se você quiser fazer isso rapidamente, verifique alguns desenvolvedores no Fiverr que podem fazer isso para você.

logotipo da fiverr

Clique aqui para encontrar especialistas baratos em correções de WordPress

 

Se você achou esta dica útil, você pode querer verificar mais de nossas dicas de WordPress no menu relevante na parte superior da página.

3. Adicione JavaScript ao cabeçalho do tema

Em certos casos, você pode desejar que o arquivo JavaScript seja usado em todo o seu site, mas não deseja usar um plug-in para fazer isso.

Por exemplo, se você deseja adicionar um script de terceiros em todas as suas páginas (por exemplo, o script instantpage.js para tornar o seu site mais rápido), você pode inserir o script ou adicionar o próprio arquivo de script referenciado no head de sua header.php arquivo de modelo. 

ISTO NÃO É IDEAL. Se você atualizar seu tema, poderá perder essas alterações. Se ainda quiser fazer isso diretamente, é altamente recomendável criar um tema filho.

Para este cenário, onde você deseja que este script seja adicionado em todos os lugares, você pode adicionar o arquivo diretamente ao modelo de acordo com as instruções abaixo:

Esta chamada para o arquivo (ou script) deve ser adicionada entre as metatags e o link da folha de estilo. É exatamente o mesmo que adicionar código Javascript a qualquer página HTML. 

Para "adicionar" o arquivo Javascript ao seu site, no head, você usa o seguinte código:


Certifique-se de ter definido o type corretamente, caso contrário, seu site não será válido. Certifique-se também de que o diretório / scripts existam no tema e de ter adicionado myscript.js a ele.

Você pode então adicionar qualquer referência às funções usadas dentro do arquivo que você acabou de adicionar ao HTML onde você precisa usá-lo. 

Por exemplo, este é um exemplo de uso da função que você acabou de adicionar.

" >O título vai aqui

 

Baixe a lista de 101 truques do WordPress que todo blogueiro deve saber

101 truques do WordPress

Clique aqui para baixar agora
 

PERGUNTAS FREQUENTES

Como adiciono um arquivo Javascript ao WordPress?

A maneira mais fácil de adicionar um arquivo Javascript ao WordPress é usando o plug-in Inserir cabeçalhos e rodapés. 

  • Faça login no seu site e instale o plugin de cabeçalhos e rodapés.
  • Depois de instalado, clique em Ativar
  • Salve seu código ou arquivo JavaScript em um novo arquivo com o . Js extensão.
  • Faça upload em seu site para a seguinte pasta: wp-content / themes / / js /
  • Vá para Configurações> Inserir cabeçalhos e rodapés.
  • Adicione o seguinte ao Scripts in Header:  <script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>

 

Posso usar Javascript no WordPress?

Sim, existem muitas maneiras de usar Javascript no WordPress. Se quiser adicionar um script simples, você pode usar o plug-in Inserir cabeçalhos e rodapés para adicionar o script ao cabeçalho e, em seguida, chamar o script de qualquer parte do tema, post ou plug-in a partir do qual precise usá-lo.

Como adiciono meu próprio código ao WordPress?

A melhor maneira de adicionar seu próprio código ao WordPress é por meio do arquivo functions.php. É recomendável que você crie um tema filho e, em seguida, adicione suas próprias modificações ao tema filho, de forma que não interrompa a capacidade de atualização do seu tema.

Como edito Javascript no WordPress?

A melhor maneira de editar Javascript no WordPress é criando um tema filho e, em seguida, adicione suas edições de Javascript ou personalização de outras funções no tema filho. Isso permite que você edite o Javascript conforme necessário sem quebrar o resto do seu tema ou a capacidade de atualização do tema.

Conclusão

Os três métodos acima são a maneira mais limpa de adicionar Javascript ao WordPress. Em geral, o ajuste direto do código deve ser feito por usuários avançados que têm uma experiência significativa de código e podem ter certeza de que sabem como reverter todas as alterações feitas. Caso contrário, é melhor manter os plug-ins. Se você não se sentir confortável em ajustar o código sozinho, seria ótimo entrar em contato com nossos parceiros no Fiverr, que podem fazer isso para você hoje

logotipo da fiverr

Clique aqui para encontrar especialistas baratos em correções de WordPress

 

Sobre o autor
David Attard
Autor: David AttardSite: https://www.linkedin.com/in/dattard/
David tem trabalhado na ou em torno da indústria online / digital nos últimos 18 anos. Ele tem vasta experiência nas indústrias de software e web design usando WordPress, Joomla e nichos ao seu redor. Como consultor digital, seu foco é ajudar as empresas a obter uma vantagem competitiva usando uma combinação de seu website e plataformas digitais disponíveis hoje.

Mais uma coisa... Você sabia que as pessoas que compartilham coisas úteis como esta postagem também parecem FANTÁSTICAS? ;-)
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!

Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.

Autor (es) em destaque em:  Logotipo da revista Inc   Logotipo do Sitepoint   Logotipo do CSS Tricks    logotipo do webdesignerdepot   Logotipo WPMU DEV   e muitos mais ...