Adicionar Javascript ao site WordPress - 3 maneiras fáceis (postagens/páginas)

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ê quer fazer isso, você quer ter certeza de que não está errado - porque você pode quebrar seu site ou criar um gargalo de desempenho.

Não é possível adicionar Javascript diretamente às páginas e postagens do WordPress, por isso sugerimos várias maneiras diferentes de adicionar código Javascript a sites e quais devem ser usadas nas diferentes circunstâncias que você pode encontrar. 

Se você estiver com pressa, use o índice abaixo para rolar até a parte relevante do artigo.

 

Este artigo inclui alterações no código do WordPress. Se você não tiver certeza de ajustar o código por conta própria, consulte este artigo para saber como recrutar o melhor desenvolvedor 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 um script em páginas selecionadas usando um plug-in como o WPCode
  2. Adicione o script a uma página específica ou única de sua escolha, ou a várias páginas usando functions.php
  3. Adicione um arquivo Javascript ao cabeçalho do seu tema

Vamos passar por cada um desses métodos em detalhes.

1. Use um plugin como o WPCode

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 WPCode é uma opção fácil e GRATUITA.

Como o nome diz, permite que você adicione pequenos pedaços de código, como scripts, aos arquivos de cabeçalho e rodapé, onde eles precisam estar na maioria das vezes. 

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 suporta várias opções diferentes, então descreveremos apenas as mais comuns que você precisará usar.

Você pode baixar código WPC aqui ou instale-o usando a função Instalar Plugins do WordPress.

Instale o plugin WPCode:

  • Faça login no back-end ou administrador do seu site.
  • Vá para Plugins> Adicionar novo
  • Procure o plugin "WPCode" e clique em Instalar agora.
  • Depois de instalado, clique em Ativar

instalar wpcode

 

Agora você pode carregar um script personalizado sem um arquivo (por exemplo, para adicionar um script que recebeu, como o Google Analytics) ou fazer upload de um arquivo Javascript personalizado. 

A opção mais comum que você pode usar com este plugin é a opção de adicionar o código diretamente no WordPress.

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 Cabeçalho e rodapé globais janela.

Você pode optar por adicionar o script ao Cabeçalho, Corpo ou Rodapé. Você deve ter orientação do provedor do script em qual dessas seções você precisa adicionar o script.

Digamos que você queira adicioná-lo ao cabeçalho:

adicionando código javascript ao cabeçalho do wordpress

Clique em "Salvar alterações" para finalizar.

O plugin WPCode agora adicionará o código a cada página do seu site.

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.

O WPCode também permite que você crie seus próprios trechos de código.

Você também pode inserir trechos de código em qualquer lugar do seu site, como dentro de postagens ou páginas, antes ou depois de uma postagem, antes ou depois do conteúdo ou várias outras opções que você pode precisar.

Simplesmente navegue até Code Snippets > Add Snippet e selecione 'Create Your Own'.

adicione seu código personalizado

Agora você será levado para a página 'Criar trecho personalizado', onde poderá dar um título ao seu código e colá-lo na caixa 'Visualização do código'.

criar trecho de javascript personalizado

Em seguida, no menu suspenso 'Tipo de código', escolha 'Fragmento JavaScript'.

trecho de javascript

Em seguida, basta rolar para baixo até chegar à área de 'Inserção'.

Tudo o que resta é escolher um 'Local' para o código no menu suspenso. Localize 'Página, postagem, tipo de postagem personalizada' e especifique onde deseja que o código seja exibido na página ou postagem.

Se você quiser que o WPCode coloque o trecho antes ou depois de um parágrafo, você pode especificar qual parágrafo na postagem ele deve aparecer antes ou depois.

Se você digitar 1 no campo 'Inserir número', por exemplo, o trecho de código aparecerá antes ou depois do primeiro parágrafo. Para o segundo parágrafo, use 2 e assim por diante.

Depois disso, basta alternar a alternância na parte superior da tela para 'Ativo' e clicar na opção 'Salvar trecho' ao lado.

Isso é tudo o que é preciso para obter sua amostra de código online!

A principal vantagem de usar um plugin é que ele é uma opção amigável para iniciantes. Você não precisa se preocupar em editar os arquivos do seu tema. O plugin WPCode também pode ser útil se você estiver procurando por uma emendaless maneira de adicionar outros tipos de código e CSS personalizado.

No entanto, a desvantagem desse método é que ele envolve a instalação de um plug-in de terceiros, que alguns proprietários de sites tentam evitar. Se você quiser manter suas extensões no mínimo, talvez seja melhor usar um dos outros métodos.  

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 em Fiverr, que pode fazer isso para você.

logotipo da fiverr

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

 

2. 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:

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 () 


Usando este método, você não precisa instalar outro plugin se editar seu arquivo functions.php. Esse método também pode ser usado para adicionar recursos e funcionalidades ao seu tema e ao próprio WordPress. Essa abordagem, por exemplo, pode instalar JavaScript em uma única postagem ou página ou em todas as páginas.

A principal desvantagem dessa estratégia é que ela exige que você lide com o código e atualize os arquivos do seu site. Como resultado, se você não tiver experiência neste campo, pode não ser a alternativa ideal.

logotipo da fiverr

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

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

 

Usando o gancho wp_head para adicionar JavaScript personalizado


Você também pode adicionar JavaScript personalizado ao seu cabeçalho usando o wp_head gancho de ação. Novamente, essa solução não é a preferida porque gera um número excessivo de scripts. É, nuncaless, preferível a inserir manualmente os scripts em seu arquivo header.php.

Este método, que também pode ser usado para o rodapé, usa o(s) gancho(s) de ação para inserir scripts embutidos em seu site. Ao contrário da função de script wp enqueue, que enfileira scripts personalizados, o método wp head imprime os scripts em seu modelo de cabeçalho (e rodapé, se você usar o wp_footer gancho).

Para começar, navegue até o arquivo functions.php e copie e cole o seguinte código:

function Collectiver_custom_javascript() { ?>

<?php } add_action('wp_head', 'collective_custom_javascript');

 

Vale a pena notar que o gancho de cabeça wp funciona apenas no front-end do seu site. Isso implica que qualquer JavaScript personalizado adicionado por meio dessa abordagem não aparecerá nas áreas de administração ou login. No entanto, se você quiser adicionar JavaScript a esses locais, poderá fazê-lo usando os ganchos de ação admin head e login head.


Os desenvolvedores gostam da função de script wp enqueue porque evita conflitos que podem ocorrer com outras soluções, como adicionar scripts diretamente ao seu arquivo header.php. Além disso, esta solução não gera scripts dependentes.

O principal problema de adicionar JavaScript personalizado do WordPress ao cabeçalho do seu site é que ele pode interferir em outros plugins que carregam seus próprios scripts. Essa configuração também pode fazer com que vários scripts sejam carregados várias vezes, o que pode diminuir a velocidade e o desempenho gerais do seu site.

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

101 truques do WordPress

Clique aqui para baixar agora

Adicionando Javascript ao vídeo do WordPress

Quer ver como adicionar Javascript ao WordPress em um vídeo do YouTube? Este é um bom relógio:

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.

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, mas há um problema com esse 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.

(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.)

PERGUNTAS FREQUENTES

O que é Javascript?

JavaScript é uma linguagem de computador que é executada no navegador do usuário e não no seu servidor. A programação do lado do cliente permite que os desenvolvedores alcancem uma variedade de coisas interessantes sem diminuir a velocidade do seu site. Você pode ser solicitado frequentemente a copiar e colar um trecho de código JavaScript em seu site WordPress se desejar incorporar um player de vídeo, adicionar calculadoras ou algum outro serviço de terceiros.

Como adiciono um arquivo Javascript ao WordPress?

A maneira mais fácil de adicionar um arquivo Javascript ao WordPress é usando o plugin Insert WPCode. 

  • Faça login no seu site e instale o plugin WPCode.
  • 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 WPCode
  • 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 você deseja adicionar um script simples, pode usar o plug-in Insert WPCode para adicionar o script ao cabeçalho e, em seguida, chamar o script de qualquer parte do tema, postagem ou plug-in em que você 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 AttardWebsite: 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 ...