Você deseja saber como adicionar corretamente JavaScripts e folhas de estilo CSS no WordPress? Muitos usuários de DIY muitas vezes cometem o erro de chamar diretamente seus scripts e folhas de estilo em plugins e temas. Neste artigo, mostraremos como adicionar corretamente JavaScripts e stylesheet no WordPress. Isso será particularmente útil para aqueles que estão apenas começando a aprender o tema e o desenvolvimento de plugins do WordPress.
Erro comum ao adicionar scripts e folhas de estilos no WordPress
Muitos novos plugins do WordPress e desenvolvedores de temas fazem o erro de adicionar diretamente seus scripts ou CSS inline em seus plugins e temas.
Alguns erroneamente usam o wp_head função para carregar seus scripts e folhas de estilo.
Enquanto o código acima pode parecer mais fácil, é a maneira errada de adicionar scripts no WordPress, e isso leva a mais conflitos no futuro.
Por exemplo, se você carregar jQuery manualmente e outro plugin carrega jQuery através do método apropriado, então você terá jQuery sendo carregado duas vezes. Se for carregado em cada página, isso afetará negativamente a velocidade e o desempenho do WordPress.
Também é possível que as duas sejam versões diferentes que também possam causar conflitos.
Dito isto, vamos dar uma olhada no caminho certo para adicionar scripts e folhas de estilo.
Por que Enqueue Scripts and Styles no WordPress?
O WordPress possui uma forte comunidade de desenvolvedores. Milhares de pessoas de todo o mundo desenvolvem temas e plugins para o WordPress.
Para garantir que tudo funcione corretamente, e ninguém está pisando nos dedos de outra pessoa, o WordPress possui um sistema de seleção. Este sistema fornece uma maneira programável de carregar folhas de estilo JavaScripts e CSS.
Ao usar as funções wp_enqueue_script e wp_enqueue_style, você diz ao WordPress quando carregar um arquivo, onde carregá-lo e quais são suas dependências.
Este sistema também permite que os desenvolvedores utilizem as bibliotecas de JavaScript incorporadas que são fornecidas 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 inserir scripts corretamente no WordPress?
Carregando scripts corretamente no WordPress é muito fácil. Abaixo está um código de exemplo que você colar no arquivo de plugins ou no arquivo functions.php do seu tema para carregar corretamente os scripts no WordPress.
? php
função 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 através do wp_register_script () função. Esta função aceita 5 parâmetros:
- $ lidar – Handle é o nome exclusivo do seu script. A nossa é chamada “my_amazing_script”
- $ src – src é a localização do seu script. Estamos usando a função plugins_url para obter o URL correto da nossa pasta de plugins. Uma vez que o WordPress descobre isso, então procurará o 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 jQuery se não estiver sendo carregado já no site.
- $ ver – Este é o número da versão do nosso script. Este parâmetro não é necessário.
- $ in_footer – Queremos carregar nosso script no rodapé, então nós estabelecemos o valor para ser verdade. Se você deseja carregar o script no cabeçalho, então você faria isso falso.
Depois de fornecer todos os parâmetros em wp_register_script , podemos chamar o script em wp_enqueue_script () o que faz com que tudo aconteça.
O último passo é usar wp_enqueue_scripts action hook para realmente carregar o script. Como este é um exemplo de código, adicionamos isso logo abaixo de tudo.
Se você estivesse adicionando isso ao seu tema ou plugin, então você pode colocar esse gancho de ação onde o script é realmente necessário. Isso permite que você reduza a pegada de memória do seu plugin.
Agora, alguns podem se perguntar por que estamos indo o passo extra para registrar primeiro o script e, em seguida, criá-lo? Bem, isso permite que outros proprietários do site cancelem o registro do seu script sem modificar o código principal do seu plugin.
Properly Enqueue Styles no WordPress
Assim como scripts, você também pode enqueue suas folhas de estilo. Veja o exemplo abaixo:
Ao invés de usar wp_enqueue_script , agora estamos usando wp_enqueue_style para adicionar nossa folha de estilo.
Observe que usamos wp_enqueue_scripts gancho de ação para estilos e scripts. Apesar do nome, esta função funciona para ambos.
Nos exemplos acima, usamos plugins_url função para apontar para a localização do script ou estilo que queríamos enqueue.
No entanto, se você estiver usando a função scripts enqueue em seu tema, use simplesmente get_template_directory_uri () em vez de. Se você estiver trabalhando com um tema infantil, use get_stylesheet_directory_uri () .
Abaixo está um exemplo de código: