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