Publicado em 22/06/2024
JavaScriptWordpressjQueryProgramaçãoFala Dev, tranquilo ?
Em algum momento do desenvolvimento do seu site em WordPress, você deve ter se deparado com o desafio de chamar um script em jQuery no rodapé do seu site, seja porque o jQuery oferece uma série de facilidades na hora de desenvolver (fazendo juz ao seu slogan: write less, do more), ou pela necessidade de trabalhar com alguma bibliotéca que utilize o jQuery como dependência.
Então hoje você irá aprender como utilizar um script jQuery no rodapé do seu site. Bora lá!
Por que jQuery no Rodapé?
Já falamos aqui sobre como adicionar scripts no rodapé do seu site WordPress, e no caso do jQuery, não é apenas uma questão de preferência, mas de perfornace e boas práticas, visto que muitas bibliotécas em JS modernas utilizam o jQuery como dependência para funcionarem corretamente.
Como um script jQuery no rodapé do WordPress
Vamos direto ao ponto: você pode fazer isto de duas formas, primeiro vamos adicionar script jQuery diretamente no rodapé do seu site através do functions.php do seu tema WordPress, mas também podemos chamar um arquivo meu-script.js caso prefira.
1. Adicionar o script jQuery diretamente no rodapé
Na grande maioria das vezes, os scripts em jQuery são utilizados para ações específicas como invocar uma bibliotéca ou alterar comportamentos pontuais no site, então podemos fazer isso de forma simples e direta adicionando o código diretamente no rodapé do site.
Para isso, acesse o functions.php do seu tema WordPress e adicione o código:
function my_custom_jquery_script() {
?>
<script>
jQuery(document).ready(function($) {
// Seu script customizado aqui.
$('body').on('click', () => console.log('Script carregado no rodapé!'));
});
</script>
<?php
}
add_action('wp_footer', my_custom_jquery_script);
Observe que dentro dessa estrutura, você pode utilizar $ sem gerar erros. É válido também testar seu script isoladamente, para saber se ele está funcionando corretamente.
2. Utilizando o wp_enqueue_script para adicionar chamadas jQuery no rodapé
Para alguns casos onde você irá trabalhar com uma base de código maior, podemos organizar o código em arquivos separados e chamá-los no rodapé do site.
Crie o arquivo com o seu código jQuery e adicione na pasta do seu tema (geralmente os arquivos js ficam localizados em pasta_do_tema/assets/js).
Em seguida, adicione a chamada do seu script no functions.php do seu tema, como neste exeplo:
function my_custom_enqueue_scripts() {
wp_enqueue_script('custom-script', get_template_directory_uri() . '/assets/js/seu_script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_custom_enqueue_scripts');
O que está acontecendo aqui?
Para entendermos melhor o que está rolando por baixo dos panos, vamos aos detalhes:
wp_enqueue_script: Função usada para registrar e enfileirar os scripts no WP.'custom-script': É o nome dado para registro do seu script.get_template_directory_uri() . '/js/custom-script.js': Caminho para o seu script.array('jquery'): Indica a dependência do jQuery para o funcionamento do seu script.null: Versão do script (null para ignorar).true: Indica o carregamento do script no rodapé.
Para saber mais sobre essa função, confira na documentação do WordPress.
Alternativas para adicionar seu script jQuery no WordPress
Usar Plugins: Existem plugins como Insert Headers and Footers que facilitam a inserção de scripts, mas eles adicionam mais uma camada de complexidade e dependência na base de código do seu site.
Recapitulando
Colocar scripts no rodapé do seu site WordPress é simples e rapido, além de melhorar o desempenho do seu site. E como pode ver, você pode fazer isso no functions.php adicionando o código diretamente pelo wp_footer, ou chamando um arquivo através do wp_enqueue_script, caso queira uma maneira mais eficiente de organizar o código.
E ai, curtiu? Então compartilha nos comentários como foi a sua experiência 😉
