Como adicionar scripts jQuery ao WordPress facilmente

O WordPress está ao nosso redor há mais de uma década. Embora a plataforma seja amplamente famosa por sua facilidade de acesso, adicionar jQuery em temas e plugins do WordPress é uma preocupação para muitos desenvolvedores.

Já escrevemos guias sobre como corrigir problemas como a tela branca da morte do WordPress e colocar seu site WordPress no modo de manutenção. E neste artigo, vamos explicar como adicionar jQuery ao WordPress, mas antes de nos aprofundarmos nisso, aqui está uma breve visão geral do modo de compatibilidade do jQuery.

Modo de compatibilidade do jQuery

É igualmente importante entender qual é o modo de compatibilidade do jQuery antes de começar a usar o jQuery no WordPress.

jQuery no WordPress vem pré-carregado e você pode usá-lo em seu código. Porém, o ponto aqui é que ele também vem com o modo de compatibilidade do jQuery, que evita conflitos com outras bibliotecas de linguagens de programação diferentes.

Mesmo que isso possa parecer normal, mas há um pequeno problema com esse mecanismo de defesa. Ao usar jQuery no WordPress, você terá que usar o termo “ jQuery ” em vez do nosso bom e velho sinal $ .

Dê uma olhada neste exemplo.

/* jQuery normal */

$('.hideable').on('click', function() {

$(this).hide();

})

/* Modo de compatibilidade */

jQuery('.hideable').on('click', function() {

jQuery(this).hide();

})

Agora o problema aqui não é tão grande, mas não é muito agradável. Primeiro, você precisa escrever o “ jQuery ” todas as vezes, o que leva muito tempo e, em segundo lugar, isso faz com que seu script pareça confuso e mais difícil de ler.

Mas não se preocupe, com algumas modificações, você pode contornar o problema de compatibilidade e poder usar o bom e velho sinal $.

Para referência, $ é um alias para jQuery() e um handle para uma função.

Veja como uma estrutura básica se parece.

$(seletor).ação()

Aqui, o sinal $ refere-se ao jQuery, $(selector) encontra elementos HTML e action() define a ação a ser executada nesses elementos.

Aqui estão algumas técnicas que você pode aproveitar para contornar o problema de compatibilidade do jQuery.

Como superar o problema de compatibilidade do jQuery?

1. Entre no modo “jQuery Stealth”
2. Entre no modo “Sem conflito”

Entre no modo furtivo do jQuery

Fonte da imagem: Podfeet

A primeira e mais comum maneira de contornar o problema de compatibilidade é entrar no modo furtivo (ficando furtivo com seu código).

Digamos que você esteja tentando carregar o script no rodapé. Envolva o código em uma função anônima, que irá mapear jQuery para $.

Consulte este exemplo

(função($){

$('.hideable').on('click', function() {

$(this).hide();

})

})(jQuery);

Agora, se você quiser adicionar o script no cabeçalho, envolva tudo em uma função pronta para documento e passe $ ao longo do caminho.

Aqui está um exemplo.

jQuery(document).ready(function($) {

$('.hideable').on('click', function() {

$(this).hide();

})

});

Entre no Modo Sem Conflito

Agora, esta é uma maneira bastante simples de contornar problemas de compatibilidade. Tudo o que você precisa fazer é declarar essa linha de código em cima do seu script e usar $j em vez do sinal $ padrão.

var $j = jQuery.noConflict();

Agora que você sabe como usar jQuery no WordPress, vamos ao nosso assunto principal – como adicionar scripts jQuery ao seu site WordPress.

Como adicionar jQuery a sites WordPress

Fonte da imagem: fl1digital.com

Adicionar jQuery ao WordPress pode ser feito facilmente por um processo chamado Enqueueing .

Usamos o elemento <link> para adicionar scripts em sites HTML comuns. Também podemos fazer a mesma coisa no WordPress. No entanto, precisamos jogar algumas das funções especiais do WordPress para entrar nisso. Observe que fazer isso lidaria com todas as dependências para você.

Digamos que você esteja trabalhando em um tema WordPress. Use esta função em seu arquivo functions.php .

wp_enqueue_script()

Aqui está como parece.

function my_theme_scripts() {

wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Aqui estão cinco argumentos que essa função levaria.

1. $handle: um identificador exclusivo que pode ser usado para se referir a um script
2. $src: localização do seu arquivo de script
3. $deps: usado para especificar uma matriz de dependências
4. $ver: o número da versão do script
5. $in_footer: para instruir o WordPress sobre onde colocar o script

Por padrão, o script seria carregado no cabeçalho do seu site, o que não é recomendado porque afeta significativamente a velocidade do seu site.

Relacionado: Seu guia definitivo sobre como editar o WordPress – HTML, CSS, PHP, JavaScript

Como adicionar scripts jQuery ao administrador do WordPress

Você pode adicionar jQuery ao administrador do WordPress usando as mesmas funções. Tudo o que você precisa fazer aqui é usar um gancho diferente.

Aqui está um exemplo

function my_admin_scripts() {

wp_enqueue_script( 'my-great-script', plugin_dir_url( __FILE__ ) . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

Agora basta trocar wp_enqueue_scripts por admin_enqueue_scripts e pronto.

Como cancelar o registro do jQuery no WordPress

Você precisaria cancelar o registro do jQuery do WordPress se estiver disposto a usar uma versão diferente do jQuery dos pré-carregamentos.

Aqui está um exemplo de como você pode cancelar o registro do jQuery no WordPress.

// inclui jQuery personalizado

function shapeSpace_include_custom_jquery() {

wp_deregister_script('jquery');

wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), null, true);

}

add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

É simples. Tudo o que você precisa fazer é cancelar o registro do jQuery do WordPress usando wp_deregister_script() e incluir o script desejado.

Uma coisa a lembrar aqui é que adicionamos a biblioteca jQuery hospedada pelo Google neste exemplo. Você precisa alterná-lo com o URL do seu próprio script.

Você deve registrar scripts antes de enfileirar?

Você pode registrar o script mais cedo no processo se quiser que ele seja carregado apenas quando necessário em suas páginas.

Aqui está um exemplo

add_action( 'wp_loaded', 'register_all_scripts' );

função register_all_scripts()

{

wp_register_script(…);

}

Quando terminar, coloque os scripts na fila quando precisar deles. Aqui está como.

add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts' );

add_action( 'admin_enqueue_scripts', 'enqueue_back_scripts' );

Usando tags condicionais

Você também pode usar tags condicionais para carregar seu jQuery no WordPress apenas quando necessário.

Mesmo que esse método seja normalmente usado no Admin, onde você o deseja apenas em páginas específicas, ele economiza muita largura de banda e tempo de processamento, aumentando a velocidade de carregamento do seu site.

Consulte a documentação de scripts de enfileiramento de administrador do WordPress para obter mais informações sobre como usar tags adicionais.

Como adicionar jQuery ao WordPress usando plugins

O WordPress se orgulha de seu diretório de plugins com mais de 45.000 plugins. Você pode encontrar um plugin para qualquer funcionalidade que desejar em seu site WordPress.

O mesmo é para adicionar jQuery em páginas, temas e postagens do site WordPress, etc.

Aqui estão alguns dos plugins mais populares para adicionar jQuery ao WordPress.

• Campos personalizados avançados
• CSS e JS personalizados simples
• Scripts N estilos
• Limpeza de ativos

Conclusão

Então lá vai. Agora você sabe como adicionar e usar WordPress jQuery.

Aplicar esse conhecimento aos seus projetos o ajudaria a criar grandes projetos. Você também pode ler nossos guias definitivos sobre assuntos como JPG vs. JPEG e WordPress White Label para aumentar seu conhecimento.