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. Independentemente do motivo pelo qual você deseja fazer isso, você quer ter certeza de que não fará 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 está confiante em ajustar o código sozinho, você pode querer saiba como recrutar o melhor desenvolvedor WordPress para o seu negócio ou confira 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
Clique aqui para encontrar especialistas baratos em correções de WordPress
O que é JavaScript?
Se você está lendo este post, provavelmente já está familiarizado com o que é JavaScript.
No entanto, para mantê-lo acessível a todos, descreveremos rapidamente o que é JavaScript e o que ele faz. Sinta-se livre para pular esta parte se você já sabe.
JavaScript é uma linguagem de programação que roda em um navegador. Ele pode ser chamado do servidor da Web, mas é executado no navegador do visitante.
Isso fornece bastante espaço para fazer coisas legais, como incorporar vídeo e adicionar funções.
Por exemplo, você pode usar JavaScript para incorporar um reprodutor de vídeo para que seu servidor da Web não precise fazer isso.
Isso melhora a experiência do usuário ao incluir vídeo, sem sobrecarregar o servidor da Web para reproduzir o vídeo.
O JavaScript também é usado em aplicativos móveis, jogos, aplicativos de servidor, desenvolvimento front-end e, mais recentemente, desenvolvimento relacionado à IA.
Você pode usar JavaScript no WordPress?
Sim, você pode usar JavaScript no WordPress. Dada a flexibilidade inerente do CMS, você pode usar JavaScript para adicionar elementos interativos ou colocar APIs de terceiros em uma página.
Os usos são muitos e variados, mas como o JavaScript é executado pelo navegador do usuário, ele pode fazer muito sem deixar seu servidor web lento.
Você pode adicionar script de várias maneiras, conforme discutiremos daqui a pouco.
Antes de fazer qualquer alteração nos arquivos, recomendamos criar um tema filho e/ou fazer backup do seu site primeiro.
Você não pode ser muito cuidadoso!
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:
- Adicione um script em páginas selecionadas usando um plug-in como o WPCode
- Adicione o script a uma página específica ou única de sua escolha, ou a várias páginas usando functions.php
- Adicionar JavaScript a todas as páginas
- Adicione um arquivo Javascript ao cabeçalho do seu tema
- Usando o gancho wp_head para adicionar JavaScript personalizado
- Adicione JavaScript ao seu rodapé do WordPress
- Adicionando JavaScript ao Vídeo WordPress
- Adicionar JavaScript a um widget do WordPress
Vamos passar por cada um desses métodos em detalhes.
Em seguida, compartilharemos rapidamente como depurar o JavaScript depois de adicioná-lo a uma página.
Note: algumas dessas técnicas envolvem fazer alterações nos arquivos principais. Embora geralmente não seja uma boa ideia alterar o functions.php e outros arquivos principais do WordPress, queremos mostrar a você todas as maneiras de adicionar código.
Não recomendamos necessariamente fazer alterações dessa maneira, mas acreditamos em fornecer a você todas as informações e, em seguida, tomar sua própria decisão.
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.
Recomendamos o uso de um plug-in para todas as alterações de código, pois ele mantém tudo limpo e pode evitar problemas no futuro.
Em vez de modificar os arquivos do tema diretamente com o código Javascript personalizado, um plug-in permite que você insira 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.
- Acesse Plugins > Adicionar nova
- Procure o plug-in "WPCode" e clique em Agora instale.
- Depois de instalado, clique em Ativação
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:
Clique Salvar alterações terminar.
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.
Basta navegar para trechos de código > Adicionar trecho e depois selecione Crie seu próprio.
Agora você será levado a um Criar snippet personalizado página onde você pode dar um título ao seu código e colá-lo no Visualização de código caixa.
Então, do Tipo de código menu suspenso, escolha Fragmento de JavaScript.
Em seguida, basta rolar para baixo até chegar ao Inclusão área.
Tudo o que resta é escolher um local para o código no menu suspenso. Localizar 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 o botão próximo ao topo da tela para Ativo, e depois clique no Salvar trecho opção ao lado.
Isso é tudo o que você precisa para adicionar JavaScript ao WordPress!
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 uma maneira perfeita de adicionar outros tipos de código e CSS personalizado.
No entanto, a desvantagem desse método é que envolve a instalação de um plug-in de terceiros, que alguns proprietários de sites tentam evitar.
Se você deseja 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ê.
Clique aqui para encontrar especialistas baratos em correções de WordPress
2. Adicione JavaScript a uma página ou postagem específica do WordPress
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.
Isso usa o IS_PAGE função que você pode encontrar aqui:
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_adminetc.
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.
- Você faz isso indo para a página, você deseja adicionar o arquivo, 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.
- 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');
3. 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.
Neste caso, ao invés 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.
Clique aqui para encontrar especialistas baratos em correções de WordPress
4. 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 a todas as suas páginas (por exemplo, o script instantpage.js para tornar seu site mais rápido), pode inserir o script ou adicionar o próprio arquivo de script referenciado no head de sua header.php arquivo de modelo.
ISSO NÃO É IDEAL. Se você atualizar seu tema, poderá perder essas alterações. Se você 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
4. Usando o gancho wp_head para adicionar JavaScript personalizado
Você também pode adicionar JavaScript personalizado ao seu cabeçalho usando o wp_head action hook. Novamente, essa solução não é a preferida porque gera um número excessivo de scripts. É, no entanto, preferível a inserir manualmente os scripts no 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.
5. Adicione JavaScript ao seu rodapé do WordPress
Adicionar JavaScript ao rodapé do WordPress é relativamente simples. Você pode adicionar código ao arquivo de cabeçalho ou rodapé, usar um elemento de código personalizado em seu construtor de página ou tema ou usar um plug-in de cabeçalho e rodapé específico.
Como você deve evitar adicionar JavaScript aos seus arquivos header.php ou footer.php, usaremos um plug-in.
Eu recomendo o WPCode – Inserir cabeçalhos e rodapés + trechos de código personalizados plugin.
Selecionar Configurações e os votos de Cabeçalhos e rodapés Inserir menu.
Em seguida, cole seu código JavaScript na seção de rodapé da página.
Salve suas alterações quando terminar.
IMH
Você quer um site rápido?
Quem eu estou enganando? Não todos nós?
Então, por que tantos de nós lutamos?
O maior desafio geralmente é encontrar uma empresa de hospedagem rápida e confiável.
Todos nós já passamos por pesadelos - suporte demora uma eternidade ou não resolve nosso problema sempre culpando algo do seu lado...
Mas a maior chatice é que o site sempre parece lento.
At CollectiveRay nós hospedamos com hospedagem InMotion e nosso site é estúpido rápido. Executamos em uma pilha personalizada de configuração de servidor LightSpeed em MariaDB com um mecanismo PHP7.4 e gerenciado por Cloudflare.
Combinado com nossas otimizações de front-end, atendemos de forma confiável 6000 usuários todos os dias, com picos de mais de 50 usuários simultâneos.
Quer obter uma configuração rápida como a nossa? Transfira seu site gratuitamente para a hospedagem InMotion e ganhe nosso desconto de 50% sobre os preços atuais.
6. Adicionando JavaScript ao Vídeo WordPress
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.)
7. Adicione JavaScript a um widget do WordPress
Se você deseja adicionar algum JavaScript a um widget do WordPress, não poderia ser mais fácil.
Adicione um widget, selecione o menu e selecione Edite como HTML.
Adicione seu JavaScript dentro tags and select Atualizar.
O código que você adicionou deve ficar imediatamente visível quando você visualizar o widget no front-end do seu site.
Como depurar um erro de JavaScript em uma página do WordPress
A depuração do JavaScript é um processo demorado, mas inevitável para iniciantes.
Felizmente, você tem as ferramentas disponíveis para verificar se há erros.
Abra uma página em seu navegador e pressione F12 ou selecione Ferramentas do desenvolvedor no menu (Chrome). Você também pode usar Ctrl + Shift + J (Windows/Linux) ou Cmd + Option + J (Mac).
Selecione os cônsul guia da nova parte da tela que se abre e você verá todos os erros de JavaScript destacados em vermelho.
Identifique a origem do erro e corrija a parte relevante do JavaScript que você adicionou.
Trabalhe seu caminho até que todos os erros tenham sido resolvidos.
O WordPress tem seu próprio modo de depuração, mas pode ser um pouco complicado de usar. Eu recomendaria verificar o página oficial de depuração para mais informações.
Perguntas frequentes sobre adicionar Javascript ao WordPress
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
Clique aqui para encontrar especialistas baratos em correções de WordPress
. 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.
e muitos mais ...