O WordPress faz parte de nossas vidas há mais de 16 anos, mas o método de adicionar scripts a temas e plug-ins permanece um mistério para muitos desenvolvedores. Neste artigo, finalmente acabamos com a confusão.
Como é uma das bibliotecas JavaScript mais usadas, hoje estamos discutindo como adicionar scripts jQuery aos seus temas ou WordPress plugins.
Sobre o modo de compatibilidade do jQuery
Antes de começar a adicionar scripts ao WordPress, é importante entender o modo de compatibilidade do jQuery.
Como você provavelmente sabe, o WordPress já vem com o jQuery.
A versão do jQuery no WordPress também tem um " modo de compatibilidade Que é um mecanismo para evitar conflitos com outras bibliotecas javascript.
Parte desse mecanismo de defesa significa que você não pode use o $assine diretamente como faria em outros projetos.
Em vez disso, ao escrever o código jQuery para WordPress, você deve usar jQuery.
Aqui está um exemplo desse código:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
O problema é que escrever jQuery um milhão de vezes leva mais tempo, torna mais difícil de ler e pode sobrecarregar seu script.
As boas notícias?
Com algumas modificações, você pode novamente usar nosso pequeno símbolo de dólar.
A propósito, se você estiver novo no jQuery , o sinal $ é apenas um alias para jQuery () e, em seguida, um alias para uma função.
A estrutura básica é assim: $(selector).action(). O cifrão define jQuery… o “(seletor)” consulta ou encontra elementos HTML… e finalmente “ação jQuery ()” é a ação a ser realizada nos elementos.
De volta a como podemos solucionar nosso problema de compatibilidade… aqui estão algumas opções viáveis:
1.Entre no modo furtivo jQuery
A primeira maneira de contornar o modo de compatibilidade é esgueirar-se no código.
Por exemplo, se você carregar seu script no rodapé, poderá envolver seu código em uma função anônima, que mapeará o jQuery $.
Como no exemplo abaixo:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Se você quiser adicionar seu script no cabeçalho (o que você deve evitar se possível, mais sobre isso abaixo), você pode agrupar tudo em uma função pronta para documento, passando o $ao longo do caminho.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Entre no modo "Sem Conflito"
Outra maneira fácil de evitar a ortografia jQuery é alternar para o modo "Livre de conflitos" e use um atalho diferente.
Nesse caso: $jem vez do padrão $.
Tudo o que você precisa fazer é declará-lo na parte superior do seu script:var $j = jQuery.noConflict();
Ok, agora você sabe mais sobre como escrever código jQuery válido para WordPress, vamos adicioná-lo ao nosso site da Web.
Como adicionar scripts jQuery ao WordPress
Uma das maneiras mais fáceis de adicionar scripts jQuery ao WordPress é por meio de um processo chamado 'configuração Linha de espera ".
Para site da Web HTML clássico, usaríamos o <link> item para adicionar scripts. O WordPress acaba fazendo o mesmo, mas usaremos funções WP especiais para fazer isso.
Dessa forma, ele gerencia todas as nossas dependências para nós (obrigado WP!).
Se você estiver trabalhando em um tema, poderá usar a função wp_enqueue_script() na sua functions.php arquivo.
Aqui está o que parece:
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
Esta função leva cinco argumentos:
- $ handle - um identificador exclusivo que você pode usar para se referir ao script.
- $src – a localização do arquivo de script.
- $ deps - especifica uma série de dependências.
- $ ver - o número da versão do seu script.
- $ in_footer - permite que o WordPress saiba onde colocar o script.
* Uma coisa a notar $in_footer significa que, por padrão, os scripts serão carregados no cabeçalho.
Esta é uma prática inadequada e pode tornar o seu site consideravelmente lento. Portanto, se você deseja colocar seu script no rodapé, certifique-se de que este parâmetro esteja definido como verdadeiro.
Adicionando scripts ao administrador do WordPress
Você também pode adicionar scripts ao administrador. As funções usadas são exatamente as mesmas, você só precisa usar um gancho diferente.
Por exemplo:
função my_admin_scripts () {
wp_enqueue_script ('my-great-script', plugin_dir_url (__ARQUIVO__). '/js/my-great-script.js', array ('jquery'), '1.0.0', verdadeiro);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
Em vez de fazer login, wp_enqueue_scriptsdevemos usar admin_enqueue_scripts.
Como cancelar a assinatura do jQuery do WordPress
Mas e se você quiser usar uma versão diferente do jQuery do que a pré-carregada pelo WordPress?
Você pode colocá-lo na fila ... mas isso significa que haverá duas versões do jQuery na página.
Para evitar isso, precisamos cancelar o registro da versão do WP.
Aqui está o que parece:
// inclui jQuery personalizado
função 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');É tão fácil quanto usar o wp_deregister_script () para cancelar o registro jQuery do WP, incluindo o script jQuery que você deseja adicionar.
No exemplo acima, usamos o Biblioteca jQuery hospedada pelo Google , mas você obviamente irá substituí-lo pelo URL do seu próprio script.
Você não deveria salvar scripts antes de colocá-los na fila?
Se você deseja carregar seus scripts conforme necessário, em vez de carregá-los diretamente em suas páginas - você pode salvar o script antes.
Por exemplo, em wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Depois de fazer isso, você pode enfileirar os scripts quando precisar deles:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Lembre-se de usar os mesmos nomes para evitar colisões com outros scripts.
Usando tags condicionais
Use tags condicionais para carregar seus scripts apenas quando necessário.
Isso é usado com mais frequência no administrador, onde você deseja usar um script apenas em uma página específica (e não em todo o administrador). Ele também economiza largura de banda e tempo de processamento, o que significa tempos de carregamento mais rápidos para o seu site da Web.
Dê uma olhada no documentação de scripts de enfileiramento no WordPress Codex para mais informações.
Adicionar jQuery ao WordPress usando plug-ins
O diretório de plugins do WP também contém muitos plugins interessantes que você pode usar para inserir scripts em seus posts, páginas ou Temas do WordPress.
Aqui estão alguns exemplos de plug-ins JavaScript / jQuery conhecidos: campos personalizados avançados , CSS e JS personalizados simples , estilos de script f— et limpeza de recursos.
Crie seu próprio projeto jQuery
Um melhor entendimento do jQuery apenas tornará seu trabalho mais impactante. Seja para seu próprio site ou para projetos de clientes.
jQuery é bem conhecido por sua simplicidade e, como você (espero) aprendeu neste artigo, adicionar scripts jQuery simples ao WordPress é fácil como torta, uma vez que você sabe como.
Sim, há um pouco de sobrecarga em comparação ao uso de HTML básico, mas também há o benefício adicional de gerenciamento de dependências e clareza.
Além disso, usando pequenos truques como contornar a compatibilidade padrão do jQuery WP, você economizará muito tempo, esforço e código inchado.
