Maneira padrão de incluir JavaScript e CSS no WordPress

Se você é um desenvolvedor WordPress, já ouviu falar de palavras como wp_enqueue_script, wp_enqueue_style e wp_enqueue_scripts. Esses são os métodos que devemos usar para incluir JavaScript e CSS no WordPress.

Quando se trata de WordPress, não se deve usar script e tags de link para adicionar arquivos JavaScript e CSS.

Benefícios do uso de métodos padrão

Para um site, é comum usar diferentes tipos de efeitos, animações para melhorar a experiência do usuário. Existem muitos plug-ins prontos disponíveis na internet que nos permitem adicionar controles deslizantes, formulários de contato, carrossel etc. Quando usamos esses recursos externos, precisamos usar os arquivos JS e CSS fornecidos por eles. Ao usar os métodos fornecidos pelo WordPress, podemos controlar as páginas nas quais esses plug-ins podem ser usados ​​apenas. Por exemplo, se estivermos exibindo o controle deslizante na página inicial, não há necessidade de incluir os arquivos JS e CSS do controle deslizante em outra página. É sempre uma boa prática incluir JS e CSS apenas quando necessário. Essa é uma boa prática usada para melhorar o desempenho do site e fazer com que ele carregue mais rápido.

Código real para incluir JavaScript e CSS

Vamos supor que temos os arquivos custom.js e custom.css que precisam ser adicionados ao nosso site. Para isso, precisamos colocar o código abaixo.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    wp_enqueue_script('my-custom-script');
 
    wp_register_style( "my-custom-style", get_stylesheet_directory_uri(). "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "my-custom-style" );
}

Nota: O terceiro parâmetro na função wp_register_script. Passamos array (‘jquery’), o que significa que nosso custom.js depende do arquivo jquery.js. Você pode criar um array emapy aqui se o seu script não tiver dependências.

O último parâmetro é definido como verdadeiro, o que significa incluir o arquivo custom.js em um rodapé (antes do final da tag body).

Explicação dos parâmetros para a função wp_register_script ()

$ handle (obrigatório): nome do script. Deve ser único.
$ src (obrigatório): URL completo do script ou caminho do script relativo ao diretório raiz do WordPress.
$ deps (Opcional): Uma matriz de script registrado que manipula este script depende.
Valor padrão: array ()
$ ver (Opcional): String que especifica o número da versão do script, se houver, que é adicionado ao URL como uma string de consulta para fins de impedimento de cache. Se a versão for definida como falsa, um número de versão é adicionado automaticamente igual à versão atual instalada do WordPress. Se definido como nulo, nenhuma versão será adicionada. O valor padrão é false
$ in_footer (Opcional): Se o script deve ser enfileirado antes do fechamento da tag do corpo em vez de no cabeçalho. Padrão ‘falso’.

Explicação dos parâmetros para a função wp_register_style ()

$ handle (obrigatório): nome da folha de estilo. Deve ser único.
$ src (obrigatório): URL completo da folha de estilo ou caminho da folha de estilo relativo ao diretório raiz do WordPress.
$ deps (Opcional): Uma matriz de manipuladores de folha de estilo registrados depende desta folha de estilo.
Valor padrão: array ()
$ ver (Opcional): String que especifica o número da versão da folha de estilo, se houver, que é adicionado ao URL como uma string de consulta para fins de impedimento de cache. Se a versão for definida como falsa, um número de versão será adicionado automaticamente igual à versão atual instalada do WordPress. Se definido como nulo, nenhuma versão será adicionada. Valor padrão: false
$ media(Opcional): A mídia para a qual esta folha de estilo foi definida. Aceita tipos de mídia como ‘todos’, ‘imprimir’ e ‘tela’, ou consultas de mídia como ‘(orientação: retrato)’ e ‘(largura máxima: 640px)’. Valor padrão: ‘all’.

É tudo sobre como incluir JavaScript e CSS no WordPress. Se você tiver alguma dúvida ou sugestão, deixe comentários abaixo.