Blog do MX Cursos

Inserindo CSS e Javascript corretamente no WordPress

Inserindo CSS e Javascript corretamente no WordPress

Olá 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">

WordPressMas 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:

  1. Nome do arquivo (deve ser um nome único) – obrigatório;
  2. Caminho para o arquivo – opcional;
  3. Dependências (nome dos arquivos nos quais este arquivo depende para funcionar corretamente) – opcional;
  4. Versão – opcional;
  5. 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:

  1. Nome do arquivo (deve ser um nome único) – obrigatório;
  2. Caminho para o arquivo – opcional;
  3. Dependências (nome dos arquivos nos quais este arquivo depende para funcionar corretamente) – opcional;
  4. Versão – opcional;
  5. 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.

Leia também  5 plugins que seu site WordPress precisa ter

Nossos cursos indicados

Bons estudos!