Como chamar arquivos css ou js no seu tema ou plugin

Muitas vezes, quando fazemos um tema ou um plugin, precisamos carregar folhas de estilo ou arquivos javascript adicionais. Neste post, vou mostrar a maneira mais legal, charmosa e elegante de se fazer isso.

Estrutura básica

Antes de mais nada, vamos criar a função que vai carregar nosso javascript e adicioná-la ao hook correto do WordPress:
[sourcecode language=”js”]function meuPlugin_addJS() {
// aqui vou carregar meu javascript
}

add_action(‘wp_print_scripts’, ‘meuPlugin_addJS’);
[/sourcecode]

Agora, sempre que o WordPress imprimir as chamadas a arquivos javascript, vai rodar a sua função. Vamos ver como isso vai funcionar.

Usando a função wp_enqueue_script

A função “wp_enqueue_script()” serve para colocar o script em uma fila de carregamento. Ela é extremamente útil para evitar que um script seja carregado mais de uma vez e também para carregar todas as dependências na ordem certa. Vamos ver um exemplo que usa todos os parâmetros desta função:
[sourcecode language=”js”]wp_enqueue_script(‘meu_script’, ‘http://meusite.com/wp-content/plugins/meuplugin/script.js’, array(‘jquery’), ‘1.0’);
[/sourcecode]

Esta função está colocando o seu script na fila para ser carregado, dizendo o seguinte

• ele se chama ‘meu_script’
• ele está em http://meusite.com/wp-content/plugins/meuplugin/script.js
• ele depende do jquery
• esta é a versão 1.0 do ‘meu_script’

Você só precisa passar tantos parâmetros quando se trata de um script que o WordPress não conhece. Para carregar o jQuery, por exemplo, você pode simplesmente especificar:
[sourcecode language=”js”]wp_enqueue_script(‘jquery’);[/sourcecode]
Note que ‘jquery’ é apenas um “nome fantasia” para o script. Para saber quais são todos os scripts disponíveis por padrão no WordPress, dê uma olhada na documentação completa da função wp_enqueue_script().
Deixando seu caminho flexível

Para encerrar este post, só falta esclarecer um ponto: não é bonito colocar o caminho para seu arquivo assim na mão, como fizemos no exemplo acima. Isso pode trazer vários problemas, porque, a partir do WordPress 2.6, é possível trocar o diretório ‘wp-content’ de lugar. Seu plugin ou tema não vai funcionar corretamente em uma instalação em que alguém tenha movido este diretório. Além disso, não é raro as pessoas trocarem o nome da pasta do plugin, o que também quebraria o seu esquema.

Para contornar esse problema e deixar o seu código universal, vamos usar a constante WP_CONTENT_URL, que guarda o caminho da pasta wp-content, onde quer que ela esteja.

Vamos ver como ficaria nosso script completo:
[sourcecode language=”js”]function meuPlugin_addJS() {
$meuPluginURL = WP_CONTENT_URL.’/plugins/’.plugin_basename( dirname(__FILE__)).’/’;
wp_enqueue_script(‘meuJs’, $meuPluginURL . ‘meuJS.js’);
}

add_action(‘wp_print_scripts’, ‘meuPlugin_addJS’);
[/sourcecode]
Note que, se meu plugin não depende de ninguém, não preciso passar os dois últimos parâmetros.

Importante: A constante WP_CONTENT_URL só foi introduzida no WordPress 2.6, portanto, se você quiser que seu plugin ou tema funcione em versões anteriores a esta, adicione uma linha para criar a constante, caso ainda não exista:
[sourcecode language=”js”]if ( !defined(‘WP_CONTENT_URL’) )
define( ‘WP_CONTENT_URL’, get_option(‘siteurl’) . ‘/wp-content’);
[/sourcecode]

Mas e nos temas?

Nos temas, você pode fazer assim:
[sourcecode language=”php”]// para garantir compatibilidade com versões anteriores ao WordPress 2.6
if ( !defined(‘WP_CONTENT_URL’) )
define( ‘WP_CONTENT_URL’, get_option(‘siteurl’) . ‘/wp-content’);

function meuTema_addJS() {
wp_enqueue_script(‘meuJs’, WP_CONTENT_URL.’/themes/meuTema/’ . ‘meuJS.js’);
}

function meuTema_addCSS() {
echo ‘
‘;
}

add_action(‘wp_print_scripts’, ‘meuPlugin_addJS’);
add_action(‘wp_head’, ‘meuTema_addCSS’);
[/sourcecode]

Próximos passos

Seu próximo passo é garantir que esses arquivos externos sejam carregados apenas quando realmente forem usados, para não sobrecarregar o site à toa. Existem várias maneiras de fazer isso, usando hooks específicos ou condições, mas é tema para outro post.

via wordpress-br.com