JavaScript e CSS no WordPress

Você faz um front-end impecável, mas ao transformá-lo em um tema WordPress, o carregamento fica lento, os plugins não funcionam e ocorrem milhares de outros problemas? Saiba que você pode não estar utilizando seus scripts corretamente no WordPress. Não se prenda ao termo! Neste post vamos usar “scripts” para qualquer JavaScript ou CSS que você

Você faz um front-end impecável, mas ao transformá-lo em um tema WordPress, o carregamento fica lento, os plugins não funcionam e ocorrem milhares de outros problemas? Saiba que você pode não estar utilizando seus scripts corretamente no WordPress.

Não se prenda ao termo! Neste post vamos usar “scripts” para qualquer JavaScript ou CSS que você queira adicionar ao seu tema ou plugin.

Ao adicionar um novo script na sua aplicação, você deve fazê-lo da forma adequada para que o WordPress cuide de todo o processo, não usando código desnecessário e impedindo conflitos entre sua aplicação e de terceiros (plugins).

O problema

Imagine que você está desenvolvendo um tema usando jQuery. Mas ao mesmo tempo você vai usar alguns plugins que também usam o jQuery. Se você simplesmente adicionar diretamente o jQuery na sua página, sua aplicação vai estar carregando o jQuery que você adicionou e o dos plugins.

Nada bom, né? Sem contar que cada um pode estar usando uma versão diferente, gerar conflitos e aí o buraco fica mais fundo.

A solução

O WordPress possui uma série de funções que permitem a você controlar o enfileiramento (enqueue) de scripts da sua aplicação. Com elas você pode adicionar, remover ou até mesmo registrar um script para uso posterior.

Ao desenvolver um tema, você precisa adicionar a função wp_head() antes da tag do seu tema e a função wp_footer() antes da . Dentro dessas funções é que a mágica acontece, como veremos mais a frente.

Como de costume no WordPress, as funções são simples e bastante auto-explicativas:

Acompanhe todos os comentários do código para não ter dúvidas. 😉

Para CSS é tudo bem parecido e mudam apenas o sufixo das funções e uma opção.

Você deverá usar estas funções no hook wp_enqueue_scripts, que é responsável por todo gerenciamentos de scripts públicos do seu WordPress (os que aparecem no front-end).

Você também tem o admin_enqueue_scripts e login_enqueue_scripts caso queira adicionar scripts ao admin e a tela de login respectivamente.

O WordPress já possui também vários scripts embutidos por padrão e para usar qualquer um deles, basta usar a função adequada com o identificador do script.

Uma das recomendações é sempre dar prioridade ao uso desses scripts que já vêm embutidos (sem colocar jQuery no braço, hein galera!) pois assim garantimos que não teremos problemas com a maior parte dos plugins do repositório do WordPress.

Poderíamos, por exemplo, adicionar o jQuery como dependência de my-script.

Ou até mesmo enfileirarmos os dois (seguirá sempre a ordem de chamada das funções).

Ambos os casos farão com que o WordPress adicione uma tag para o jQuery e outra para my-script. E caso algum outro plugin já esteja usando o jQuery, o WordPress cuidará de adicioná-lo apenas uma vez.

Você também pode registrar ou desregistrar um script ou folha de estilo que ficará disponível para ser usado a qualquer momento por qualquer plugin ou tema.

Os parâmetros são os mesmos da função de enqueue:

E combinando o uso dessas funções com as tags condicionais do WordPress, você pode melhorar muito a performance das suas páginas. Você pode criar folhas de estilo específicas para cada template e carregá-las somente quando for necessário.

Bem tranquilo, né?

Apenas tome cuidado para não exagerar! Não saia criando uma folha de estilos para cada página. Lembre-se que usar o cache dos navegadores é sempre muito importante, além de ajudar a reduzir custos em alguns casos.

Também vale fazer uma análise da aplicação e pensar um pouquinho em Atomic Design para componentizar melhor seu CSS.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *