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.
Boa tarde.
Como faço para utilizar o java script nativo do WordPress ?
Quero utilizar esse script em uma página do WordPress: https://www.davidchc.com.br/video-aula/php/criando-combo-dinamico-com-jquery-e-php/
Obrigado.
Muito obrigado! ajudou demais.