| Login

Comunidade WordPress-BR

Mapa do Site | RSS

Dicas e Tutoriais

Como chamar arquivos css ou js no seu tema ou plugin

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

Ilustração por Cátia Kitahara

Ilustração por Cátia Kitahara

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

Publicado por em Dicas e TutoriaisTutoriais


Tags:

Avalie esse post:

1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (2 votos, média: 4,00 de 5)
Loading ... Loading ...
8 comentários | Comente »
  • por Luis Ramos | |
    26 de maio de 2009 às 10:07

    Ola Leo,
    Desenvolvi um tema (usando o Dreamweaver), onde o sidebar funciona usando o SpryAccordion que faz uso de um arquivo Java Script e de um arquivo CSS dentro de uma pasta chamada SpryAssets
    SpryAssets/SpryAccordion.css
    SpryAssets/SpryAccordion.js
    No seu tutorial nao consegui entender em qual pagina e em que lugar colocar o script acima. Coloquei no . do header.php . E nao deu certo. Estaria certo isso?

    • por Luis Ramos | |
      26 de maio de 2009 às 10:29

      Leo,
      Deppois de mais algumas tentativas, informo que obtive exito na implantacao do codigo acima. Muito obrigado pelo tutorial.
      abracos

  • por Iure Guimarães | |
    9 de junho de 2009 às 22:43

    Leo,
    Estou começando com wordpress faz pouco tempo.
    Gostei pra caramba de seu tutorial. Estou desenvolvendo um tema que tem o menu e a capa do site em flash, porém não consigo colocar para carregar o js. Creio que com esta função descrita no tutorial vou conseguir; mas me tira uma dúvida: Onde coloco esta função? Como chamá-la no tema?

  • por José Carlos | |
    11 de junho de 2009 às 14:14

    @Iure Guimarães
    Você adiciona o código ao functions.php do seu tema.

  • por Leo Germani | |
    14 de junho de 2009 às 22:39

    Olás,

    A função wp_enqueue_script() só funciona ser for chamada ANTES do header. functions.php, como indicou o Iure, é o melhor lugar pra colocar no caso dos temas. Essa função não vai funcionar se você colocar ela depois de o header já ter sido impresso na tela.

    Queria dizer que comi bola numa coisa. Assim como a função wp_enqueue_script, existe também a função wp_enqueue_style(), que funciona exatamente da mesma maneira, mas serve para criar uma fila de carregamento para folhas de estilo css. Ela deve ser vinculada ao hook wp_print_styles

    abs

    Leo,,

  • por rmaia | |
    20 de junho de 2009 às 16:57

    Excelente explicação, parabéns!

  • por wagner | |
    13 de outubro de 2009 às 11:39

    ola, achei bem interessante, porem sou novato no wordpress e gostaria de saber como eu faco para criar meu proprio tema? tipo eu quero fazer meu blog bem personalizado.

    valew

«

»

WordPress-BR é orgulhosamente produzido com WordPress | Reportar erro | Créditos e Condições de Uso

Código é poesia