Esse artigo venho em minha cabeça devido a maioria dos temas que tenho pego para olhar o código acabo descobrindo que o desenvolvedor foi descuidado para colocar os arquivos estáticos ( CSS e JavaScript ) no tema.

Por exemplo colocar uma tag estática no cabeçalho ( header.php ) é bem ruim porque não existe nenhuma forma do WordPress fazer qualquer trabalho para fazer cache da maneira correta, ou fazer um trabalho de compressão no arquivo.

No WordPress existem duas funções, uma para registrar os arquivos que podem ser chamados na hora que a página está sendo montada e uma que diz ao sistema que este arquivo deve ser colocado como um JavaScript ou um CSS nesta página, usando as informações passadas na função anterior.

Essas funções estão organizadas em dois grupos, duas para registrar e carregar CSS e duas para JavaScript, neste artigo vou falar das duas para registar e carregar JavaScript.

wp_register_script

Esta função é usada para fazer o registro dos arquivos de JavaScript no sistema, possuindo 5 parâmetros. Ela deve ser usada sempre em conjunto com uma função que só será executada no momento “init“, usando as ações ganchos que foram comentadas em outro artigo.

<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>

• $handle – É o nome que este script deve ter para poder ser carregado na página.
• $src – Pode ser tanto um caminho relativo, caminho absoluto ou uma url, sendo o caminho relativo a pasta raíz do seu WordPress.
• $deps – Se este código depende de algum outro JavaScript ser carregado antes, você deve passar os seus idenficiadores em formato de array, não importando se tiver apenas 1.
• $ver – Esta variável é usada basicamente para que seja possível fazer algum tipo de cache do arquivo, de forma eficiente
• $in_footer – Por uma questão de velocidade é mais recomendado que os seus arquivos JavaScript sejam colocados no final de seu código, passando esta variável como verdadeira, o script só será chamado no final da página.

Por exemplo, caso seja necessário registar um script que faz uso de um plugin nativo do WordPress e do jQuery para funcionar, temos o seguinte código;

<?php wp_register_script( "webord_dev_slider", get_stylesheet_directory_uri . "/js/slider.js", array( 'jquery', 'jquery-ui-core' ), '0.2.1', true ) ); ?>

Já no código abaixo temos um exemplo de um script que não requer nenhum outro para ser carregado e deve não deve ser executado no footer.

<?php wp_register_script( "webord_modernizr", get_stylesheet_directory_uri . "/js/modernizr.js", array(), '2.0.0', false ) ); ?>

wp_enqueue_script

Para que os scripts sejam colocados na sua página é necessário que após eles estarem registrados em seu sistema, é necessário que essa função seja chamada passando como parâmetro o nome do script desejado. Porém com esta função também é possível registrar novos scripts, pois ela possui assim como a “wp_register_script” 5 parâmetros, e se todos eles forem passados e nenhum script com o nome chamado for encontrado ela registar e carregar o script.

Diferente da função de registro esta tem um momento específico para ser chamada, o “wp_enqueue_scripts” que corresponde ao momento em que todos os scripts devem ser carregados.

Por exemplo, para chamar o exemplo registrado acima seria usado o seguinte código;

<?php wp_enqueue_script( 'webord_dev_slider' ); ?>

O WordPress já possui vários scripts registrados por padrão, por exemplo o jQuery, jCrop, Scriptaculous, entre outros e as vezes é necessário chamar alguns deles em algumas páginas. Por exemplo, muitas vezes os temas acabam com dois arquivos do jQuery sendo carregados na mesma página, porque muitos plugins já fazem uso do jQuery e usando essa função evita-se que o mesmo arquivo seja carregado duas vezes. Todos os scripts que já existem no Core do WordPress estão listados na página da documentação da função.

Qualquer tipo de dúvida e problemas com a inserção de scripts no seu WordPress, deixem um comentário, que eu tento ajudar.