Como adicionar JavaScript a uma página do WordPress (+ dicas de depuração)

Deseja adicionar JavaScript a uma página do WordPress, mas acha que está fazendo errado ou nem sabe por onde começar? Ou você já fez isso e está vendo mensagens de erro e/ou problemas de desempenho que você não sabe como solucionar?

De qualquer maneira, você está no lugar certo.

Este post será uma educação em primeira fila e tudo sobre todas as coisas JavaScript e WordPress. No final, você saberá tudo o que precisa sobre por que usar o JavaScript no WordPress é uma boa idéia, como adicioná -lo às suas páginas e o que fazer quando não estiver funcionando corretamente ou diminui o site.

Por que adicionar JavaScript às suas páginas do WordPress?

O JavaScript, geralmente abreviado para JS, é uma linguagem de programação popular. É uma das três principais tecnologias usadas para criar páginas da web. Os outros dois são HTML, que define a estrutura e o conteúdo da página, bem como o CSS, responsável pelo estilo.

O JavaScript é um idioma do lado do cliente, o que significa que é executado no navegador, não no servidor. Por esse motivo, você pode usá -lo para modificar e atualizar o CSS e o HTML existentes, mesmo depois que uma página terminar de carregar.

É por isso que um de seus principais usos é tornar as páginas da web mais interativas. Por exemplo, o JavaScript geralmente alimenta elementos da página como:

• Menus deslizantes

• Pop -ups

• Animações

O editor de blocos do WordPress também é escrito principalmente em JavaScript.

Além da interatividade, o JavaScript também é uma maneira comum de integrar serviços de terceiros ao seu site, como rastrear scripts para análises da Web. Outros exemplos incluem:

• Bate -papo ao vivo

• Formulários de entrada e contato por e-mail

• Vídeos incorporados

• Mapas interativos

• Feeds de mídia social

Considerações importantes

Se feito incorretamente, adicionar JavaScript às suas páginas do WordPress pode levar a erros e problemas. Tomar precauções desde o início pode economizar tempo e frustração mais tarde:

• Use apenas JavaScript de fontes confiáveis ​​para manter seu site seguro e estável.

• Faça um backup completo dos arquivos e bancos de dados do seu site antes de fazer alterações, caso algo dê errado.

• Quando você adiciona JavaScript diretamente aos arquivos de temas, sempre use um tema filho. Se você modificar o tema principal, perderá suas alterações quando o atualizar.

• Alterações no teste em um ambiente de preparação ou desenvolvimento antes de aplicá -las ao seu site ao vivo.

• O JavaScript adiciona código extra às suas páginas do WordPress, que podem diminuir a velocidade. Acompanhe o desempenho ao introduzir novos recursos no seu site.

6 maneiras de adicionar JavaScript a uma página no WordPress

Chega com a teoria. Abaixo, estamos mostrando seis maneiras de adicionar JavaScript ao WordPress, da maioria à menos técnica.

1. Use ganchos e funções do WordPress

Os ganchos são pedaços de código colocados dentro do processo de carregamento do WordPress, onde você pode anexar o código personalizado (as chamadas "funções") para que ele seja executado em um determinado horário ou local.

Por exemplo, WP_HEAD () é executado na seção <ad Head> na parte superior do seu site. Se você deseja usá -lo para adicionar JavaScript a uma página do WordPress, você deve fazer isso em seu arquivo Functions.php do tema (filho), por exemplo, como assim:

 function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Insira seu código JavaScript, onde diz: "Coloque seu código JavaScript aqui". Você também pode alterar o nome da função de "add_custom_script" para algo mais descritivo.

Este método é ótimo para scripts menores com fins muito claramente definidos, como código de rastreamento de análise simples ou elementos interativos básicos. Ele também funciona para carregar o JavaScript no rodapé, que é uma solução popular para melhorar o desempenho da página. Basta usar wp_footer () em vez de wp_head ().

A cabeça da página e o rodapé são locais populares para carregar scripts porque geralmente aparecem em toda parte em um site. Isso os torna uma ótima maneira de adicionar JavaScript a todas as páginas de um site WordPress.

Se você deseja carregar apenas JavaScript em páginas específicas, poderá combinar este método com uma instrução condicional:

 function add_custom_script() { if (is_page(123)) { ?> <script> // Place your JavaScript code here </script> <?php } } add_action('wp_head', 'add_custom_script');

A parte que limita isso a uma única página é IS_Page (123). O "123" é o ID da página, que você precisa atualizar para o ID da sua página, se deseja usar este código. Aparece na barra do navegador quando você abre sua página no editor do WordPress. Você também pode usar o is_page () para segmentar páginas por nome ou URL Slug.

2. Carregue JavaScript em um arquivo separado

Outra opção é colocar seu JavaScript em seu próprio arquivo. Essa é uma boa idéia, especialmente para scripts grandes, mas também faz sentido em geral, porque permite carregar seus arquivos com as funções WP_REGISTER_SCRIPT () e WP_ENQUEUE_SCRIPT ().

Esse é o método preferido, pois ajuda a evitar conflitos, carregar scripts na ordem correta e gerenciar dependências. Aqui está o que parece:

 function enqueue_custom_script() { wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true ); wp_enqueue_script('my-custom-script'); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');

Neste exemplo, o script é colocado no diretório de temas, que direcionamos com get_template_directory_uri () (para temas infantis, use get_stylesheet_directory_uri () em vez disso). A matriz ('jQuery') indica que esse script depende do jQuery e deve ser carregado após ele. O '1.0.0' é o número da versão e 'true' significa que o WordPress deve carregar o script no rodapé.

Isso também funciona e é a maneira correta de carregar JavaScript de terceiros, como os códigos de rastreamento. Certifique -se de atualizar o código para o seu caso de uso antes de colocá -lo em seu site.

3. Inclua código em arquivos de tema

Os ganchos são uma ótima maneira de envolver todos os seus scripts JS de um único local, mas não são a única maneira de carregá -los em seu tema.

Em vez de usar wp_head () para carregar algo na seção da cabeça, você pode obter o mesmo postando seu script ou um link diretamente para o arquivo de tema no seu arquivo de tema do cabeçalho.

Em temas clássicos, isso geralmente é cabeçalho.php . Encontre -o no seu tema, faça uma cópia e coloque -o no tema do seu filho e inclua o script diretamente em algum lugar da seção <head>.

Se você deseja carregá -lo apenas em uma determinada página, poderá usar uma instrução condicional como antes. Como alternativa, graças à hierarquia de modelos, também é possível criar um arquivo personalizado apenas para essa página, por exemplo , página-contact.php .

4. Crie um plugin personalizado

O problema de adicionar JavaScript às páginas do WordPress usando arquivos de temas é que ele torna o código dependente do tema. Quando você muda de temas, seu JavaScript também desaparece.

Você pode evitar isso usando um plug -in personalizado. Isso torna o código independente do tema e também permite ativar e desativá-lo no menu Plugins WordPress.

Aqui está a marcação para um plug -in simples para adicionar JavaScript às suas páginas do WordPress:

 <?php /* Plugin Name: Custom JavaScript Loader Plugin URI: https://yourwebsite.com Description: A simple plugin to add custom JavaScript to WordPress pages. Author: Your Name Author URI: https://yourwebsite.com Version: 1.0 */ function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Coloque esse código em um arquivo php e certifique -se de ajustar o nome do plug -in , URI do plug -in , descrição , autor e URI do autor para suas próprias informações, pois ele aparece no menu Plugins do WordPress.

Nomeie o arquivo algo significativo, por exemplo, o código de rastreamento personalizado-plugin.php e envie-o em um diretório com o mesmo nome dentro do conteúdo WP/plugins na sua instalação do WordPress. Depois disso, deve aparecer no menu Plugins .

5. Adicione JavaScript no editor do WordPress

Embora esse não seja o método mais recomendado, também é possível adicionar JavaScript diretamente a uma página usando o editor do WordPress. Para fazer isso, adicione um novo bloco (clique no botão Plus ou use uma barra para a frente) e escolha o bloco HTML personalizado .

Basta inserir o código JavaScript para que ele carregue direto na página.

Apenas certifique -se de usar as tags de abertura <Script> e de fechamento </script> e salve suas alterações no editor para que elas entrem em vigor.

Você também pode adicionar JavaScript ao editor clássico usando a guia Código .

6. Use um plug -in de snippet de código

Não seria o WordPress se também não houvesse uma solução de plug -in adicionar JavaScript ao seu site. De fato, existem vários, incluindo:

• WPCode

• Gerenciador de código de rodapé do cabeçalho

• CSS e JS personalizados simples

• Caixa de ferramentas CSS e JavaScript

Os plugins permitem que você gerencie melhor seu JavaScript. Você pode nomear seus trechos, organizá -los em categorias, ligá -los seletivamente e desligar e configurar regras condicionais. Além disso, como a solução de plug -in personalizada, torna seu JavaScript independente do tema.

O uso desses plugins também é simples. Eles geralmente adicionam um novo menu ao seu site, onde você pode gerenciar seus trechos JavaScript.

Basta criar um novo snippet, inserir seu código e configurar onde você deseja que ele apareça.

É isso.

Solução de problemas de Javascript Questões no WordPress

Agora você sabe como adicionar JavaScript ao seu site e páginas do WordPress. Mas e se algo não estiver funcionando como deveria? Passaremos a parte final deste artigo falando sobre como identificar e resolver problemas de JavaScript que você pode encontrar.

1. Verifique as ferramentas do desenvolvedor do navegador

Uma maneira de verificar os erros de JavaScript é usar as ferramentas do desenvolvedor do seu navegador. Eles permitem que você inspecione o código do site subjacente, incluindo quaisquer scripts.

Você pode abri-los clicando com o botão direito do mouse em qualquer página da web e escolhendo inspecionar .

Como alternativa, acessá -los através do menu do navegador, por exemplo, no Chrome, eles estão localizados em mais ferramentas> Ferramentas de desenvolvedor .

Também existem atalhos de teclado para abri -los, em Chrome, Edge e Firefox, é Ctrl/CMD+Shift+I , no Safari CMD+Opt+C.

Abra as ferramentas de dev em seu site e depois vá para a guia Console . Você deve ver algum erro, incluindo os causados ​​por JavaScript aqui.

Observe que você pode precisar recarregar a página para que eles apareçam. Os erros de JavaScript mais comuns são:

• ReferenceError: indica uma variável ou função ausente ou indefinida.

• TypeError: sugere que há um problema com uma operação, por exemplo, tentando usar um valor de um tipo inadequado.

• SyntaxError: geralmente ocorre devido a um erro de digitação ou formatação incorreta no código, como suportes ausentes, semicolons ou citações.

Você deseja descobrir qual script, arquivo ou função está causando o erro para que você possa corrigi -lo. Ajuda a usar pontos de interrupção na guia Fontes , o que permite pausar a execução de JavaScript e inspecionar o que está acontecendo.

Use seu mecanismo de pesquisa favorito ou IA para descobrir mais sobre qualquer mensagem de erro que você encontrar. Além disso, você também pode verificar a guia de rede para ver se seus scripts estão carregando corretamente.

2. Resolva os conflitos de tema e plug -in

Os erros de JavaScript também podem acontecer devido a conflitos de tema e plug -in, por exemplo, ao usar bibliotecas incompatíveis ou funções duplicadas.

Veja como solucionar problemas desses problemas de JavaScript:

• Atualize temas e plugins: seu tema ou desenvolvedor de plug -in já pode saber sobre o problema e os corrigiu na versão mais recente.

• Alterne temporariamente para um tema padrão: Ative um tema padrão do WordPress como vinte e cinco. Se o problema desaparecer, é provável que seu tema esteja em falta.

• Desative seus plugins: desligue todos os plug -ins no seu site e gire -os em um por um para ver quando o problema reaparece. Atualize ou substitua o plug -in que o causa.

O plugin de seleção de saúde permite simular tudo o que mencionou acima no painel do WordPress (vá para a guia Solução de problemas ) e reverta com um único clique.

Ele também possui muito mais informações adicionais sobre o estado do seu site. É recomendável que você faça esses testes em um site de desenvolvimento ou estadiamento, não no seu site ao vivo.

3. Use o modo de depuração

O WordPress possui um modo de depuração interno para ajudá-lo a identificar e resolver problemas no site. Embora não mostre diretamente problemas com JavaScript, facilita a localização de erros de PHP, plug -in e tema que possam interferir nos scripts do seu site.

Para ativar o modo de depuração, abra seu arquivo wp-config.php (via FTP ou seu gerenciador de arquivos de hospedagem) e adicione as seguintes linhas:

 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('SCRIPT_DEBUG', true);

Você já deve encontrar definir ('script_debug', false); no arquivo. Nesse caso, basta alterá -lo para "verdadeiro". Salve e reinicie o arquivo.

As configurações acima ativam o modo de depuração, o log de erros (os erros aparecerão no WP-Content/Debug.log ) e carregam versões não atribuídas dos principais arquivos CSS e JavaScript para rastrear problemas com mais facilidade.

Novamente, faça isso em um local de desenvolvimento, longe dos olhos de seus visitantes. Além disso, não se esqueça de remover este código para voltar ao normal depois.

4. Abordar os problemas de desempenho

Como qualquer outro código, adicionar JavaScript às suas páginas do WordPress pode tornar seu site mais lento. Muitas vezes, você notará que, quando acelerar seu site e receber um aviso que diz "reduza o javascript não utilizado".

Para evitar problemas de desempenho causados ​​pelo JavaScript, siga estas melhores práticas:

• Remova os scripts que você não precisa: audite regularmente o carregamento JavaScript no seu site para ver se você realmente precisa de tudo, especialmente serviços de terceiros.

• Carregue scripts no rodapé: coloque apenas os arquivos JavaScript na seção da cabeça quando for necessário que eles carreguem cedo.

• Combine scripts: combine vários scripts em um único arquivo (isso é chamado de "concatenação"). Um único arquivo grande geralmente carrega mais rápido que vários menores.

• Minify JavaScript Arquivos : Isso remove formatação desnecessária e espaço em branco que é ótimo para a legibilidade desnecessária para executar o código.

• Carregue o JavaScript de maneira assíncrona: o que significa que o navegador não para de processar o site enquanto carrega arquivos JavaScript, mas os carrega em segundo plano e os executa uma vez baixado.

• Deste scripts grandes: aqui, seus arquivos também são baixados em segundo plano, mas apenas executados após o término do processo de carregamento, para que não seja interrompido.

• Atraso na execução do JavaScript : isso adia o carregamento de todos os arquivos JavaScript e scripts embutidos até que haja uma interação do usuário. É como um carregamento preguiçoso para imagens, mas para arquivos JavaScript.

Simplifique a otimização de desempenho do JavaScript com foguete WP

Em vez de fazer isso manualmente, você também tem a opção de implementá -lo com muito mais facilidade usando o foguete WP. Quando ativo no seu site, o plug -in minifica o JavaScript por padrão e você pode combinar, atrasar, adiar e carregar assíncrono qualquer script no seu site WordPress, simplesmente verificando algumas caixas no menu de otimização de arquivos .

Se necessário, você tem a opção de excluir scripts, plugins e arquivos individuais de serem otimizados, caso interfira na capacidade de resposta dos elementos da sua página.

Além disso, o WP Rocket implementa automaticamente várias melhorias de desempenho em segundo plano, como:

• Armazenamento em cache, incluindo um cache móvel separado

• Compressão GZIP

• Cache de pré -carregamento e links

• Otimização crítica de imagem (para excluir imagens acima da dobra do carregamento preguiçoso) para melhorar a maior tinta conteúdo

• Renderização preguiçosa automática para carregar elementos no alto da página mais rápido

De fato, simplesmente instalar e ativar o plug -in implementa 80% das melhores práticas de desempenho em seu site e o torna mais rápido imediatamente. E se isso não for suficiente, existem muitos outros recursos que você pode ativar para aumentar a velocidade do seu site, como:

• Carregamento preguiçoso para imagens, incluindo fundos, vídeos e iframes CSS

• Pré -carregando arquivos e fontes externas

• Auto-hospedar fontes do Google

• Otimização do banco de dados

• Opções para conectar -se facilmente a um CDN, incluindo Rocketcdn

Pronto para adicionar JavaScript às suas páginas do WordPress?

O JavaScript oferece muitas possibilidades emocionantes para sites do WordPress, seja para adicionar interatividade ou integração ao software de terceiros. Existem muitas maneiras de adicioná -lo às suas páginas, dependendo do seu nível de habilidade e preferências.

Ao mesmo tempo, o JavaScript pode introduzir erros e ser um grande fator no desempenho da página. Por esse motivo, é imperativo que você adicione JavaScript às suas páginas do WordPress com cuidado.

Se você está lutando com problemas de desempenho relacionados ao JavaScript, o WP Rocket ajuda a resolvê -los de maneira fácil e eficaz. Além disso, oferece muitas outras funcionalidades para acelerar seu site. Pegue o WP Rocket hoje e tente sem risco por 14 dias!