Existe uma maneira específica de adicionar Javascript ao seu tema WordPress para evitar conflitos com plugins ou temas pais do WordPress. O problema é que muitos “desenvolvedores” chamam seus arquivos javascript diretamente no arquivo header.php ou footer.php que é a maneira incorreta de fazer isso.
Neste guia, mostrarei como chamar corretamente seus arquivos javascript usando seu arquivo functions.php para que eles sejam carregados diretamente na tag head ou footer do seu site. Dessa forma, se você estiver desenvolvendo um tema para distribuição e seu usuário final quiser modificar os scripts por meio de um tema filho, eles podem ou se estiverem usando minificação/cache ou outros plugins de otimização, eles funcionarão corretamente. E se você estiver trabalhando com um tema filho, seus scripts serão adicionados da maneira certa, sem copiar os arquivos header.php ou footer.php em seu tema filho, que não devem ser necessários (ao trabalhar com um tema bem codificado)
Maneira errada de adicionar Javascript aos temas do WordPress
Chamar o javascript em seu arquivo header.php ou arquivo footer.php, como mostrado abaixo, NÃO é a maneira correta e eu recomendo contra isso, muitas vezes causa conflitos com outros plugins e fazer as coisas manualmente ao trabalhar com um CMS nunca é uma boa ideia.
<script src=”https://site.com/wp-content/themes/mytheme/js/my-script.js”></script>
A maneira certa de adicionar Javascript aos temas do WordPress
O melhor para adicionar javascript ao seu tema WordPress é fazê-lo através do arquivo functions.php usando wp_enqueue_script . Usar a ação wp_enqueue_scripts para carregar seu javascript ajudará a manter seu tema longe de problemas.
Exemplo
wp_enqueue_script( ‘my-script’, get_template_directory_uri() . ‘/js/my-script.js’, array(), true );
O código acima carregará o arquivo my-script.js em seu site. Como você pode ver, eu incluí apenas o $handle, mas você também pode adicionar dependências para o seu script, número da versão e se deseja carregá-lo no cabeçalho ou rodapé (o padrão é cabeçalho).
A função wp_enqueue_script() tecnicamente pode ser usada em qualquer tema ou arquivo de template de plugin, mas se você estiver carregando scripts globais você vai querer colocá-la no arquivo function.php do seu tema ou em um arquivo separado especificamente destinado a carregar scripts no local. Mas se você estiver apenas procurando carregar um script em um arquivo de modelo específico (por exemplo, em postagens da galeria), poderá colocar a função diretamente no arquivo de modelo, no entanto, pessoalmente, recomendo manter todos os scripts em um só lugar e usar condicionais para carregar scripts conforme necessário.
Scripts Hospedados no WordPress
Uma coisa legal sobre o WordPress é que já existem vários scripts hospedados e registrados que você pode usar no desenvolvimento do seu tema. Por exemplo, jQuery, que é usado em quase todos os projetos, SEMPRE deve ser carregado do WordPress e nunca hospedado em um site de terceiros, como o Google. Portanto, antes de adicionar um script personalizado ao seu projeto, verifique a lista de scripts registrados para garantir que ele ainda não esteja incluído no WordPress e, se estiver, você deve carregá-lo em vez de registrar o seu.
Usando o Gancho de Enfileiramento do WordPress
Anteriormente, mencionamos a função necessária para carregar um script em seu site, no entanto, ao trabalhar com arquivos que não sejam de modelo, como seu arquivo functions.php, você deve adicionar essa função dentro de outra função conectada aos ganchos apropriados do WordPress, desta forma seus scripts obtêm registrado com todos os outros scripts registrados pelo WordPress, plugins de terceiros e seu tema pai ao usar um tema filho.
O WordPress tem dois ganchos de ação diferentes que você pode usar para chamar seus scripts.
- wp_enqueue_scripts – ação usada para carregar scripts no front-end
- admin_enqueue_scripts – ação usada para carregar scripts no WP admin
Aqui está um exemplo (que seria adicionado ao seu arquivo functions.php) de como criar uma função e então usar o gancho do WordPress para chamar seus scripts.
/**
* Enqueue a script
*/
function myprefix_enqueue_scripts() {
wp_enqueue_script( ‘my-script’, get_template_directory_uri() . ‘/js/my-script.js’, array(), true );
}
add_action( ‘wp_enqueue_scripts’, ‘myprefix_enqueue_scripts’ );
Nota : Viu como estamos usando a função “get_template_directory_uri” ao definir a localização do seu script? Esta função cria uma URL para a pasta do seu tema. Se você estiver trabalhando com um tema filho, use “get_stylesheet_directory_uri” para que ele aponte para o tema filho e não para o tema pai.
Adicionando código Javascript embutido
Embora você possa facilmente colar javascript inline em qualquer arquivo de modelo por meio da tag script, pode ser uma boa ideia também usar ganchos do WordPress para adicionar seu código inline, especialmente quando é um plugin principal ou código de tema. Abaixo está um exemplo de como adicionar scripts embutidos ao seu site:
function myprefix_add_inline_script() {
wp_add_inline_script( ‘my-script’, ‘alert(“hello world”);’, ‘after’ );
}
add_action( ‘wp_enqueue_scripts’, ‘myprefix_add_inline_script’ );
O que isso fará é adicionar seu javascript embutido após o script “my-script” registrado anteriormente. Ao usar wp_add_inline_script, você só pode adicionar código embutido antes ou depois de um script já registrado, portanto, se você estiver tentando modificar o código de um script específico, verifique se ele foi carregado depois dele, ou se você só precisa adicionar algum código personalizado, você pode ligar para o script jquery que geralmente é carregado pela maioria dos temas do WordPress e, se não, você pode usar o wp_enqueue_script para carregar a versão hospedada do WordPress do jQuery.
Ao usar esse método, as pessoas podem remover facilmente seus scripts inline por meio de um tema filho ou complemento de plug-in, ele mantém todo o seu javascript personalizado bem organizado e é analisado pelo WordPress, o que pode ser mais seguro. E se você estiver usando um tema filho, você pode carregar seus scripts através do seu arquivo functions.php em vez de copiar os arquivos header.php ou footer.php para o seu tema filho.
Dito isso, se você estiver trabalhando em um tema filho, não precisa fazer isso, basta despejar seu código em seu cabeçalho usando os ganchos wp_head ou wp_footer, como no exemplo abaixo:
add_action( ‘wp_footer’, function() { ?>
<script>
( function( $ ) {
‘use strict’;
$( document ).on( ‘ready’, function() {
// Your custom code here
} );
} ( jQuery ) );
</script>
<?php } );