Tableless

Busca Menu

JavaScript e CSS no WordPress

Seja o primeiro a comentar por

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 </head> do seu tema e a função wp_footer() antes da </body>. 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. 😉

// Identificador para o script
$handle = 'my-script';

// Caminho para o arquivo
$src = get_template_directory_uri() . '/js/my-script.js';

// Array com os identificadores das dependências deste arquivo
$deps = array();

// Versão do arquivo
$ver = '1.0.0';

// Imprimir no footer? Caso seja false, imprime no head.
$in_footer = true;


// Enfileira um script
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

// Desenfileira um script
wp_dequeue_script( $handle );

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

// Identificador para o script
$handle = 'my-style';

// Caminho para o arquivo
$src = get_template_directory_uri() . '/css/my-style.css';

// Array de identificadores das dependências deste arquivo
$deps = array();

// Versão do arquivo
$ver = '1.0.0';

// Atributo media da folha de estilos. Ex.: screen, print, all
$media = 'screen';


// Enfileira um style
wp_enqueue_style( $handle, $src, $deps, $ver, $media );

// Desenfileira um style
wp_dequeue_style( $handle );

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).

<?php

/*
 * Insira no functions.php ou em um arquivo separado.
 *
 * Não existe uma action específica para styles (wp_enqueue_styles).
 * Você deverá adicionar todas as funções aqui mesmo.
 */
function theme_scripts() {
	// Suas funções de enqueue vão aqui.
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

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.

<?php

// Identificador
$handle = 'my-script';

// Caminho para o arquivo
$src = get_template_directory_uri() . '/js/my-script.js';

// Array com o identificador do jQuery embutido por padrão
$deps = array( 'jquery' );

// Versão
$ver = '1.0.0';

// Imprime no footer (boa prática)
$in_footer = true;


// Enfileira o script
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

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

<?php

// Um plugin já registrado pode ser enfileirado, usando apenas o seu identificador
wp_enqueue_script( 'jquery' );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Ambos os casos farão com que o WordPress adicione uma tag <script> 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:

<?php

/*
 * Ao registrar um script, você poderá
 * enfileirá-lo usando apenas o seu identificador.
 */
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
wp_enqueue_script( 'my-script' );

// Desregistra o script
wp_deregister_script( 'my-script' );

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.

<?php

if ( is_page() ) {
	// Essa folha de estilos será carregada apenas nos templates de páginas
	wp_enqueue_style( 'my-page-style' );
}

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.

Publicado no dia