Comunidade WordPress-BR

Como chamar arquivos css ou js no seu tema ou plugin

quinta-feira, 19/02/2009 às 15:43

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:

function meuPlugin_addJS() {
// aqui vou carregar meu javascript
}

add_action('wp_print_scripts', 'meuPlugin_addJS');

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:

wp_enqueue_script('meu_script', 'http://meusite.com/wp-content/plugins/meuplugin/script.js', array('jquery'), '1.0');

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:

wp_enqueue_script('jquery');

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:

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');

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:

if ( !defined('WP_CONTENT_URL') )
define( 'WP_CONTENT_URL', get_option('siteurl') . '/wp-content');

Mas e nos temas?

Nos temas, você pode fazer assim:

// 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 '<link rel="stylesheet" href="' . WP_CONTENT_URL . '/themes/meuTema/meuCSS.css" type="text/css" media="screen" />';
}

add_action('wp_print_scripts', 'meuPlugin_addJS');
add_action('wp_head', 'meuTema_addCSS');

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.

Abraços,

Leo