Wordpress

WP: Como acrescentar scripts e estilos de forma correta

Ocrescentar scripts e folhas de estilos no wordpress diretamente pelos arquivos do tema não é uma boa prática para se seguir. O próprio WP oferece uma ação que é perfeita para você organizar todos os arquivos de .css e .js extras de seu tema de forma muito mais organizada. Você não precisa abrir os arquivos header.php e footer.php para adicionar os seus scripts e estilos. A ação wp_enqueue_scripts permite que você determine como e onde inserir estes scripts organizando tudo em um único lugar em seu tema: no famoso functions.php. Veja só que legal:

function mluv_add_estilos_scripts() {
   wp_enqueue_style( 'nomedocss', get_template_directory_uri() . '/css/nomedocss.css');
   wp_enqueue_script( 'nomedoscript', get_template_directory_uri() . '/js/nomedoscript.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mluv_add_estilos_scripts' );

O que aconteceu ai em cima, Ana? O que eu fiz foi simplesmente criar uma função, chamada mLuv_add_estilos_scripts(), onde dentro dela acrescentei um arquivo de CSS e um arquivo JavaScripts dentro dela. Para estes arquivos da função mLuv_add_estilos_scripts() sejam adicionados devidamente no tema, se utiliza o gancho add_action com o nome da ação wp_enqueue_scripts. Esta ação que irá determinar o local exato que apareça estes arquivos no tema de forma automática. ;D Legal né? Agora veja só as especificações de cada item.

Folha de estilo

O wp_enqueue_style é um gancho do wordpress que acrescenta as folhas de estilo em seu wordpress, basta especificar o nome de sua folha de estilo e o caminho da url. Veja abaixo um exemplo:

wp_enqueue_style( 'nomedocss', get_template_directory_uri() . '/css/nomedocss.css');

Seu resultado no tema será:

<link rel='stylesheet' id='nomedocss-css'  href='http://seublog.com/wp-content/themes/nomedotema/css/layout.css' type='text/css' media='all' />

Através do get_template_directory_uri() há como pegar automaticamente o caminho da pasta do seu tema ativado, seguido pelo restante do caminho das pastas internas para levar até onde está o seu .css. Caso você utilize apenas o style.css do tema, basta utilizar o wp_enqueue_style desta forma:

wp_enqueue_style( 'nomedocss', get_stylesheet_uri() );

O item get_stylesheet_uri() sempre pega obrigatoriamente a url direta do arquivo style.css, que fica presente sempre na pasta raiz do tema.

Javascript

O wp_enqueue_script é o gancho que especifica um arquivo de javascript e praticamente funciona da mesma forma que o wp_enqueue_style, mas tem algumas pequenas diferenças. Além de especficiar o nome e a url do arquivo, é necessário dizer se ele precisa estar correlacionado a algum outro script, sua versão e se irá definir se o script irá no rodapé ou no topo do site. Veja o exemplo:

wp_enqueue_script( 'nomedoscript', get_template_directory_uri() . '/js/nomedoscript.js', array( 'jquery' ), '1.0', true );

A parte em que consta o array( 'jquery' ) significa que o meu script de nome nomedoscript virá sempre depois do meu arquivo de nome jquery no meu tema. O wordpress por padrão trás vários scripts prontos para serem usados à vontade e o jQuery é um deles. Onde está escrito 1.0 significa o número da versão do script; se você não saber ou não quiser especificar, é só deixar o lugar vazio (mas sempre mantenha as aspas, ok?). Já onde está escrito true significa que irá aparecer no rodapé, antes do fechamento da tag </body>. Caso você troque pela condição false, o seu script ficará dentro da tag <head>. Eu sempre coloco os meus scripts no final do tema, pois isso ajuda a página carregar mais rápido. Portanto, a condição true pra mim nos scripts é lei. ;D

Quando scripts dependem de outros scripts

Vamos supor que você irá acrescentar um slider em seu tema e há dois arquivos de scripts que precisam ser inseridos, um que é o script do slider e o outro é o script em que você faz as aplicações do slider com as configurações desejadas. Neste caso, a sua função toda (com estilos e scripts) ficaria desta forma:

function mluv_add_estilos_scripts() {
   wp_enqueue_style( 'style', get_stylesheet_uri() );
   wp_enqueue_style( 'meucssextra', get_template_directory_uri() . '/css/meucssextra.css');
   wp_enqueue_script( 'slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '', true );
   wp_enqueue_script( 'configuraslider', get_template_directory_uri() . '/js/configuraslider.js', array( 'slider' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'mluv_add_estilos_scripts' );

Perceba que acrescentei o arquivo de nome slider como dependente do jquery, enquanto o arquivo de nome configuraslider só aparecerá se o arquivo slider existir, aparecendo logo abaixo dele. Legal né?

Especificando scripts em páginas específicas

É muito comum utilizarmos algumas funcionalidades em apenas algumas páginas do tema, como um slider por exemplo. Em vez do javascript dele sempre aparecer em todas as páginas e ajudando o seu blog a carregar mais devagar sem necessidade, que tal fazer com que este script apareça apenas na página inicial? Neste caso, veja como ficaria o seu código:

function mluv_add_estilos_scripts() {
   wp_enqueue_style( 'style', get_stylesheet_uri() );
   wp_enqueue_style( 'meucssextra', get_template_directory_uri() . '/css/meucssextra.css');
   if ( is_front_page() ) { 
      wp_enqueue_script( 'slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '', true );
      wp_enqueue_script( 'configuraslider', get_template_directory_uri() . '/js/configuraslider.js', array( 'slider' ), '', true );
   }
}
add_action( 'wp_enqueue_scripts', 'mluv_add_estilos_scripts' );

No código acima foi utilizada uma condição para que caso o usuário está na página inicial, os scripts irão aparecer. O que vai definir a página inicial desta condição será o is_front_page(). Mas caso queira que os scripts apareçam numa página interna qualquer, é só trocar o is_front_page() por is_page('slugdapagina'), onde o slugdapagina é o nome que aparecerá no link da mesma. Por exemplo, minha página de contato é de link https://madlyluv.com/contato, então, o slug de minha página é apenas contato. :)

Para se aprofundar mais, veja as páginas Action Reference: wp enqueue scripts e Conditional Tags.


Comentários

Atenção: Não é possível realizar novos comentários nesta página pois ela será descontinuada em breve, assim como todos os outros tutoriais da sessão Extras.
  • Vanessa

    Você é a melhor pessoa desse mundo!!!!!!!!

ir ao topo