Adicionando arquivo Javascript e CSS no WordPress

Muitas pessoas estão construindo seus temas, adicionando seus arquivos javascript e css, diretamente no arquivo header.php. Mas o WordPress existe uma forma indicada, para adicionar esse arquivos. Nesse tutorial, vamos ver como realizar esse procedimento.

Vamos ao arquivo functions.php

Criaremos uma função, para adicionar os arquivos, daremos o nome de add_custom_scripts

function add_custom_scripts(){

}

Primeiro, vamos adicionar o arquivo CSS. Para isso, podemos utilizar wp_enqueue_style, agora dentro da função que criamos, vamos configurar o wp_enqueue_style

function add_custom_scripts(){
 /**
         * wp_enqueue_style( $nome_unico, $arquivo, $dependencia, $versao, $media_usada); 
         * $nome_unico => recebe um nome unico
         * $arquivo => caminho completo até o arquivo css
         * $dependencia => Informa se para funcionar, ele depende de outro arquivo (opcional)
         * $versao => versão do estilo (opcional)
         * $media_usada => A media que será usado, pode ser screen, print. Por padrão é usado all (opcional)
         */
        
        /**
         * Nesse caso, vamos só informa nome único, e o caminho do arquivo
         */
        wp_enqueue_style('main-css', get_template_directory() . '/css/main.css');
}

Agora vamos adicionar um arquivo javascript, para isso vamos utilizar wp_enqueue_script

function add_custom_scripts(){
 /**
         * wp_enqueue_style( $nome_unico, $arquivo, $dependencia, $versao, $media_usada); 
         * $nome_unico => recebe um nome único
         * $arquivo => caminho completo até o arquivo css
         * $dependencia => Informa se para funcionar, ele depende de outro arquivo (opcional)
         * $versao => versão do estilo (opcional)
         * $media_usada => A media que será usado, pode ser screen, print. Por padrão é usado all (opcional)
         */
        
        /**
         * Nesse caso, vamos só informa nome único, e o caminho do arquivo
         */
        wp_enqueue_style('main-css', get_template_directory() . '/css/main.css');
        
         /**
         * wp_enqueue_script($nome_script, $arquivo_script, $dependencia, $versao, $adicionar_no_rodape);
         * $nome_script => nome único atributo ao script
         * $arquivo_script => caminho completo até o script
         * $dependencia => Informa se para funcionar, ele depende de outro arquivo (Opcional)
         * $versao => Versão do script (opcional)
         * $adicionar_no_rodape => se deseja adicionar no footer , por padrão é falso (opcional)
         * 
         */
        
        wp_enqueue_script('main-js', get_template_directory() . '/js/main.js', array('jquery'), '1.0', true);

}

Agora vamos criamos a nossa função, informamos quais arquivos que queremos adicionar, vamos agora adicionar a nossa função ao WordPress

 add_action('wp_enqueue_scripts', 'add_custom_scripts');

Ficando assim no final:

function add_custom_scripts(){
 /**
         * wp_enqueue_style( $nome_unico, $arquivo, $dependencia, $versao, $media_usada); 
         * $nome_unico => recebe um nome único
         * $arquivo => caminho completo até o arquivo css
         * $dependencia => Informa se para funcionar, ele depende de outro arquivo (opcional)
         * $versao => versão do estilo (opcional)
         * $media_usada => A media que será usado, pode ser screen, print. Por padrão é usado all (opcional)
         */
        
        /**
         * Nesse caso, vamos só informa nome único, e o caminho do arquivo
         */
        wp_enqueue_style('main-css', get_template_directory() . '/css/main.css');
        
         /**
         * wp_enqueue_script($nome_script, $arquivo_script, $dependencia, $versao, $adicionar_no_rodape);
         * $nome_script => nome único atributo ao script
         * $arquivo_script => caminho completo até o script
         * $dependencia => Informa se para funcionar, ele depende de outro arquivo (Opcional)
         * $versao => Versão do script (opcional)
         * $adicionar_no_rodape => se deseja adicionar no footer , por padrão é falso (opcional)
         * 
         */
        
        wp_enqueue_script('main-js', get_template_directory() . '/js/main.js', array('jquery'), '1.0', true);

}

 add_action('wp_enqueue_scripts', 'add_custom_scripts');

Espero que tenha ajudado, e até a próxima.