Existe uma maneira específica de adicionar Javascript ao seu tema WordPress, a fim de evitar conflitos com plug-ins ou com os Temas WordPress do pai. 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 o arquivo functions.php para que eles sejam carregados diretamente na tag de cabeçalho ou rodapé do site. Dessa forma, se você estiver desenvolvendo um tema para distribuição e seu usuário final desejar modificar os scripts por meio de um tema filho, eles podem ou, se estiverem usando minificação / armazenamento em 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 no tema filho, que nunca serão necessários (ao trabalhar com um tema bem codificado)

Maneira errada de adicionar Javascript aos temas do WordPress

Chamar o javascript no arquivo header.php ou no arquivo footer.php, como mostrado abaixo, NÃO é a maneira correta e eu recomendo isso, muitas vezes causa conflitos com outros plugins e faz as coisas manualmente quando se trabalha com um CMS. uma boa ideia.

O caminho certo para 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 livre de problemas.

Exemplo

wp_enqueue_script ('meu-script', get_template_directory_uri (). '/js/my-script.js', array (), true);

O código acima carregará o arquivo my-script.js no seu site. Como você pode ver, incluí apenas o $ handle, mas você também pode adicionar dependências para o seu script, número da versão e carregá-lo no cabeçalho ou rodapé (o padrão é cabeçalho).

A função wp_enqueue_script () pode tecnicamente ser usada em qualquer arquivo de modelo de tema ou plug-in, mas se você estiver carregando scripts globais, será necessário colocá-lo no arquivo function.php do seu tema ou em um arquivo separado especificamente destinado a carregar scripts no diretório local. Mas se você estiver procurando apenas carregar um script em um arquivo de modelo específico (por exemplo, nas postagens da galeria), poderá colocar a função diretamente no arquivo de modelo, no entanto, pessoalmente, recomendo manter todos os scripts em um único local e usar condicionais para carregar scripts conforme necessário.

Scripts hospedados no WordPress

Uma coisa interessante sobre o WordPress é que já existem vários scripts hospedados e registrados que você pode usar no desenvolvimento do seu tema. Por exemplo, o jQuery, usado em quase todos os projetos, SEMPRE deve ser carregado no WordPress e nunca hospedado em sites 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 for, você deve carregá-lo em vez de registrar o seu próprio.

Usando o gancho de enfileiramento do WordPress

Anteriormente, mencionamos a função necessária para carregar um script no seu site, no entanto, ao trabalhar com arquivos que não são de modelo, como o arquivo functions.php, você deve adicionar essa função a outra função conectada aos ganchos apropriados do WordPress, assim seus scripts são 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.

  1. wp_enqueue_scripts – ação usada para carregar scripts no front-end
  2. admin_enqueue_scripts – ação usada para carregar scripts no administrador do WP

Aqui está um exemplo (que seria adicionado ao seu arquivo functions.php) de como criar uma função e usar o gancho do WordPress para chamar seus scripts.

/ **
* Enfileirar um script
* /
função myprefix_enqueue_scripts () {
wp_enqueue_script ('meu-script', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Nota: Veja como estamos usando a função “get_template_directory_uri” ao definir a localização do seu script? Esta função cria um URL para sua pasta de temas. Se você estiver trabalhando com um tema filho, use “get_stylesheet_directory_uri” em vez de apontar para o tema filho e não o tema pai.

Adicionando código Javascript embutido

Embora você possa colar javascript embutido com facilidade em qualquer arquivo de modelo por meio da tag de script, pode ser uma boa idéia também usar ganchos do WordPress para adicionar seu código embutido, especialmente quando é um plug-in ou código de tema principal. Abaixo está um exemplo de adição de scripts embutidos ao seu site:

função myprefix_add_inline_script () {
wp_add_inline_script ('meu script', 'alerta ("olá mundo");', 'depois');
}
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ê pode adicionar apenas o código embutido antes ou depois de um script já registrado. Se você estiver tentando modificar o código de um script específico, verifique se ele foi carregado após ele ou se você precisa adicionar algum código personalizado, pode conectar no script jquery, que geralmente é carregado pela maioria dos temas do WordPress; caso contrário, você pode usar o wp_enqueue_script para carregar a versão hospedada no WordPress do jQuery.

Ao usar esse método, as pessoas podem remover facilmente seus scripts embutidos por meio de um tema filho ou complemento de plug-in, ele mantém todo o seu javascript personalizado organizado de maneira organizada e é analisado pelo WordPress, o que pode ser mais seguro. E se você estiver usando um tema filho, poderá carregar seus scripts através do arquivo functions.php em vez de copiar os arquivos header.php ou footer.php para o tema filho.

Dito isso, se você estiver trabalhando em um tema filho, não precisará fazer isso. Basta despejar seu código no cabeçalho usando os ganchos wp_head ou wp_footer, como no exemplo abaixo:

add_action ('wp_footer', function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me