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.