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

[php]
function add_custom_scripts(){

}
[/php]

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

[php]
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’);
}
[/php]

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

[php]
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);

}
[/php]

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

[php]
add_action(‘wp_enqueue_scripts’, ‘add_custom_scripts’);
[/php]

Ficando assim no final:

[php]
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’);
[/php]

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