adicionar JavaScripts e CSS no WordPress

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.

adicionar JavaScripts e CSS no WordPress

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_url para obter a URL adequada de nossa pasta de plug-ins. 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() . '/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.

Receba dicas de WordPress grátis!
Receba dicas semanais sobre como otimizar o SEO, a usabilidade e a conversão do seu site WordPress.

DEIXE UMA RESPOSTA

Por favor digite seu comentário!
Por favor, digite seu nome aqui

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.