Você quer aprender como adicionar JavaScripts e CSS no WordPress corretamente? Muitos usuários frequentemente cometem o erro de chamar diretamente seus scripts e folhas de estilo CSS em plugins e temas. Neste artigo, mostraremos como adicionar JavaScripts e folha de estilo corretamente no WordPress. Isso será particularmente útil para aqueles que estão apenas começando a aprender o tema WordPress e o desenvolvimento de plugins.
Erro comum ao adicionar scripts e folhas de estilo no WordPress
Muitos novos plugins do WordPress e desenvolvedores de temas cometem o erro de adicionar diretamente seus JavaScripts ou CSS embutido em seus plugins e temas.
Alguns usam a função wp_head por engano para carregar seus scripts e folhas de estilo.
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Embora o código acima possa parecer mais fácil, é a maneira errada de adicionar scripts no WordPress e leva a mais conflitos no futuro.
Por exemplo, se você carregar o jQuery manualmente e outro plugin carregar o jQuery por meio do método apropriado, então o jQuery está sendo carregado duas vezes. Se for carregado em todas as páginas, isso afetará negativamente a velocidade e o desempenho do WordPress .
Também é possível que os dois sejam versões diferentes, o que também pode causar conflitos.
Dito isso, vamos dar uma olhada na maneira correta de adicionar JavaScripts e folhas de estilo CSS.
Por que enfileirar JavaScripts e folha de estilos CSS no WordPress?
WordPress tem uma forte comunidade de desenvolvedores. Milhares de pessoas de todo o mundo desenvolvem temas e plugins para WordPress.
Para ter certeza de que tudo funciona corretamente e que ninguém está pisando no pé do outro, o WordPress tem um sistema de enfileiramento. Este sistema fornece uma maneira programável de carregar JavaScripts e folhas de estilo CSS.
Usando as funções wp_enqueue_script e wp_enqueue_style, você informa ao WordPress quando carregar um arquivo, onde carregá-lo e quais são suas dependências.
Esse sistema também permite que os desenvolvedores utilizem as bibliotecas JavaScript integradas que vêm junto com o WordPress, em vez de carregar o mesmo script de terceiros várias vezes. Isso reduz o tempo de carregamento da página e ajuda a evitar conflitos com outros temas e plugins.
Como enfileirar corretamente os scripts no WordPress?
Carregar scripts corretamente no WordPress é muito fácil. Abaixo está um exemplo de código que você colaria em seu arquivo de plugins ou no arquivo functions.php de seu tema para carregar scripts corretamente no WordPress.
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Explicação:
Começamos registrando nosso script por meio da função wp_register_script(). Esta função aceita 5 parâmetros:
- $handle – Handle é o nome exclusivo do seu script. O nosso é chamado de “my_amazing_script”
- $src – src é a localização do seu script. Estamos usando a função
plugins_urlpara obter a URL adequada de nossa pasta de plugins. Assim que o WordPress encontrar isso, ele procurará nosso nome de arquivo amazing_script.js nessa pasta. - $deps – deps é para dependência. Como nosso script usa jQuery, adicionamos jQuery na área de dependência. O WordPress carregará automaticamente o jQuery se ele ainda não estiver sendo carregado no site.
- $ver – Este é o número da versão do nosso script. Este parâmetro não é obrigatório.
- $in_footer – Queremos carregar nosso script no rodapé, então definimos o valor como true. Se você quiser carregar o script no cabeçalho, deverá torná-lo falso.
Depois de fornecer todos os parâmetros em wp_register_script, podemos apenas chamar o script no wp_enqueue_script() qual faz tudo acontecer.
A última etapa é usar o gancho de ação wp_enqueue_scripts para realmente carregar o script. Como este é um código de exemplo, nós o adicionamos logo abaixo de todo o resto.
Se você estava adicionando isso ao seu tema ou plugin, então você pode colocar este gancho de ação onde o script é realmente necessário. Isso permite que você reduza o consumo de memória de seu plugin.
Agora, alguns podem se perguntar por que estamos dando um passo extra para registrar o script primeiro e, em seguida, enfileirá-lo? Bem, isso permite que outros proprietários de site cancelem o registro de seu script sem modificar o código principal de seu plugin.
Enfileirar estilos adequadamente no WordPress
Assim como os scripts, você também pode enfileirar suas folhas de estilo. Veja o exemplo abaixo:
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
Em vez de usar wp_enqueue_script, agora estamos usando wp_enqueue_style para adicionar nossa folha de estilo.
Observe que usamos wp_enqueue_scripts como gancho de ação para estilos e scripts. Apesar do nome, essa função funciona para ambos.
Nos exemplos acima, usamos a plugins_url função para apontar para a localização do script ou estilo que queríamos enfileirar.
No entanto, se você estiver usando a função de enfileiramento de scripts em seu tema, basta usar get_template_directory_uri(). Se você estiver trabalhando com um tema filho, use get_stylesheet_directory_uri().
Abaixo está um exemplo de código:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . 'https://imperiowp.com.br/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Esperamos que este artigo o tenha ajudado a aprender como adicionar adequadamente jacvascript e estilos CSS no WordPress. Você também pode querer estudar o código-fonte dos principais plugins para WordPress para obter alguns exemplos de código da vida real.
Bom dia, o arquivo de extensão .js eu coloco dentro de qual pasta do wordpress? dentro de plugins mesmo?
Olá prezado fercarvalho2015, tudo bem?
Para você incluir um arquivo js personalizado em um tema wordpress você pode criar uma pasta “/js/” na raiz do seu WordPress e para apontar para a localização do script ou estilo que queríamos enfileirar usar a função de enfileiramento de scripts em seu tema: “get_template_directory_uri()” (Se você estiver trabalhando com um tema filho, use “get_stylesheet_directory_uri()”).
OBS: Para plugins utilize a função plugins_url.