Felipe PinheiroOlá amigos! Normalmente, quando adicionamos um arquivo CSS ou Javascript ao nosso site WordPress, nosso primeiro pensamento é fazer isto dentro de nossa tag <head>:
<link rel="stylesheet" href="caminhoparaoarquivo/arquivo.css" type="text/css"> <script src="caminhoparaoarquivo/arquivo.js" type="text/javascript">
Mas você sabia que o WordPress possui funções próprias para adicionar estes arquivos?
O principal benefício de incluir estes arquivos da forma correta é a tranquilidade de saber que você poderá atualizar o seu tema sem se preocupar com os scripts que estavam inseridos nele.
Além disso, fica mais fácil para adicionar, remover e até mesmo decidir em quais páginas determinados estilos e scripts serão utilizados.
Adicionar estilos no WordPress usando a função wp_enqueue_style();
function add_estilos_e_scripts() {
wp_enqueue_style( 'nomedocss', get_template_directory_uri() . '/css/arquivo.css')}
add_action( 'wp_enqueue_scripts', 'add_estilos_e_scripts' );
A função wp_enqueue_style(possui cinco parâmetros:
- Nome do arquivo (deve ser um nome único) – obrigatório;
- Caminho para o arquivo – opcional;
- Dependências (nome dos arquivos nos quais este arquivo depende para funcionar corretamente) – opcional;
- Versão – opcional;
- Media (O tipo de media atribuída ao arquivo. Ex.: screen, print ou media queries como ‘(max-width: 440px)’) – opcional;
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Adicionando scripts usando a função wp_enqueue_script();
function add_estilos_e_scripts() {
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
}
add_action( 'wp_enqueue_scripts', 'add_estilos_e_scripts' );
A função wp_enqueue_script() possui cinco parâmetros:
- Nome do arquivo (deve ser um nome único) – obrigatório;
- Caminho para o arquivo – opcional;
- Dependências (nome dos arquivos nos quais este arquivo depende para funcionar corretamente) – opcional;
- Versão – opcional;
- in_footer(booleano)(Definir como true faz com que o script seja inserido antes de </body> ao invés de </head>.Por padrão vem definido como false) – opcional;
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
Condicionando a utilização dos arquivos
Você pode inserir todos os arquivos em uma mesma função no seu arquivo functions.php e dentro dela fazer as devidas verificações. No exemplo a seguir, vamos inserir dois arquivos, sendo que o segundo só será inserido na página inicial do seu blog.
function add_estilos_e_scripts() {
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
if ( is_front_page() ) {
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
}
}
add_action( 'wp_enqueue_scripts', 'add_estilos_e_scripts' );
Gostaram do artigo? Deixem seus comentários e compartilhe.
Caso você queira se aperfeiçoar em WordPress, aprender a criar temas, plugins ou potencializar seu site neste poderoso CMS, conheça nossos Cursos Online de WordPress. E também, se precisar aumentar seus conhecimentos em desenvolvimento, veja nossos cursos de Desenvolvimento Front-End.
Bons estudos!
