Aguarde...

30 de novembro de 2020

Como adicionar scripts jQuery ao WordPress?

Como adicionar scripts jQuery ao WordPress?

Os plugins e temas WordPress fazem parte do que torna o CMS tão popular, pois permitem a customização e otimização dos sites hospedados na plataforma.

No entanto, para aproveitar ao máximo esses elementos, é importante saber como adicionar e usar scripts jQuery.

Mas você sabe o que é jQuery? É uma biblioteca JavaScript criada por John Resig em 2006. Seu principal objetivo é associar elementos JavaScript em HTML para dar mais dinamismo e usabilidade às páginas da web. 

Suas linhas de código simplificam os scripts que são interpretados pelo navegador do lado do cliente e, por esse motivo, é uma das bibliotecas mais populares na comunidade de desenvolvedores. Não sabe como usar este recurso?

Não se preocupe. Neste texto, descreveremos as principais etapas para você adicionar scripts jQuery ao WordPress

Continue lendo e aprenda mais!

Verifique a compatibilidade do jQuery

Por ser o WordPress uma ferramenta de código aberto que lida com diversos tipos de plug-ins e temas, o sistema utiliza um mecanismo para garantir a compatibilidade entre os diversos aplicativos.

Portanto, é necessário certificar-se de que o jQuery seja adicionado de uma maneira que não interfira ou entre em conflito com outras bibliotecas. 

Para fazer isso, tudo que você precisa é de uma pequena mudança na maneira como você escreve suas linhas de código. Para tornar o jQuery compatível, você não deve usar o sinal $ em seu código, como provavelmente faz em outros projetos. Em vez disso, você deve usar o comando jQuery. 

Então, veja o exemplo abaixo: 

/$('.ocultar').on('click ', function() {
$ (this).hide ();
})

Como ele usa o sinal $ diretamente, esta linha de código pode encontrar problemas de compatibilidade. Para evitar isso, deve ser assim:

jQuery('.ocuktar').on ('click', function() {
jQuery(this).hide();
})

Simples, não é? Basta substituir o cifrão por jQuery para tornar o código compatível com WordPress. Há apenas um problema: essa substituição pode tornar o código muito longo e difícil de ler. No entanto, temos boas notícias.

Você pode alterar as configurações para usar o sinal $ sem problemas. Para isso, existem duas opções: usar o modo furtivo ou o modo sem conflito. Falaremos mais sobre eles nos próximos tópicos. 

Entrando no modo stealth jQuery

Se você é novo no jQuery, deve compreender como funciona a estrutura do script antes de aprender a entrar no modo furtivo. A estrutura é semelhante a:  $ (selector) .action ().

Vamos decompô-lo para você:

  • $ – o símbolo do dólar comunica que é um script jQuery;
  • (seletor) – atua como uma consulta, representando um elemento HTML que precisa ser encontrado;
  • action () – define a função que será executada no elemento.

Agora, como vimos no último tópico, o WordPress requer que você use o modo de compatibilidade, substituindo o cifrão. Para contornar isso e entrar no modo furtivo, você precisa inserir um código que mapeia o jQuery para $. Usando uma função anônima, envolva o seguinte código:

(function($) {
$('.ocultar').on ('click', function () {
$(this).hide ();
})
}) (jQuery);

Aqui, é importante observar que esse processo só funciona no rodapé. Se você está se perguntando, é possível executar algo semelhante no cabeçalho, embora isso possa tornar o seu site mais lento. Portanto, não é uma ação recomendada. 

No entanto, se necessário, você deve envolver todo o código em uma função pronta para documento, parecida com esta:

jQuery(document).ready (function($) {
$('.ocultar').on('click', function () {
$(this).hide();
})	
});

Entrando no modo sem conflito

Outra maneira de evitar a necessidade de soletrar jQuery toda vez que você aplicar o script é entrar no modo sem conflito. Isso permite substituir o cifrão pelo alias de j $, mas você pode definir um símbolo diferente posteriormente. 

Para entrar no modo de conflito, siga o exemplo abaixo:

Para entrar no modo, siga o exemplo abaixo: <script src = "prototype.js"> </script>
<script src="jquery.js"> </script>
<script>
 
var $ j = jQuery.noConflict ();

Agora que você sabe como contornar o problema da compatibilidade do jQuery com o WordPress, vamos passar para a próxima etapa. Continue lendo!

Enfileirando jQuery no WordPress

Existem diferentes maneiras de adicionar jQuery ao WordPress. Você pode fazer isso adicionando scripts embutidos, usando um editor ou até mesmo empregando um plugin especializado. O diretório CMS possui uma grande variedade de aplicativos para todos os fins. 

Para esse objetivo específico, um dos destaques são os Campos Customizados Avançados , que já estão instalados em milhões de sites ao redor do mundo.

É uma solução prática, mas se você deseja seguir o processo mais eficiente e garantir a segurança do seu site, a melhor forma é enfileirar o Jquery no WordPress

Este método é o mais simples entre as opções disponíveis. Isso ocorre porque o próprio WP fornece uma função de script de enfileiramento que garante que todo o processo seja executado corretamente e dentro dos padrões de segurança da plataforma. Estamos falando sobre a função wp_enqueue_script. 

Ele informa ao WordPress quais são as dependências de um arquivo, quando o arquivo deve ser carregado e em qual página ele deve ser carregado. Este procedimento não tem efeito na velocidade de carregamento do site, garantindo a manutenção de uma experiência positiva da página .

Para enfileirar jScript no WordPress, use o código abaixo:

function custom_scripts_method ()
{
wp_register_script ('costumescripts', get_template_directory_uri (). '/js/jquery.min.js', array ('jquery'), '1.0.0', true);
wp_enqueue_script ('customs');
}

add_action ('wp_enqueue_scripts', 'custom_scripts_method');

É importante observar que esta função inclui 5 parâmetros, que são:

  • $ handle  – o primeiro parâmetro é o nome que você usará para se referir ao seu script, que deve ser escrito em minúsculas;
  • $ src  – relativo à localização do seu arquivo de script;
  • $ deps  – especifica o número de dependências e carrega o jQuery se ainda não estiver sendo carregado – este é um campo opcional;
  • $ ver  – outro parâmetro que não é obrigatório, este se refere ao número da versão do seu script;
  • $ in_footer  – indica onde você deseja que o WP coloque o seu script – se estiver no rodapé, defina-o como verdadeiro, se você quiser colocá-lo no cabeçalho, apenas torne-o falso. 

Agora que você sabe como adicionar scripts jQuery ao WordPress, deve ter uma experiência ainda mais eficiente na plataforma.

Postado em Blog
1 Comentário
  • Jordan Humberto de Souza

    Não sei se foi o tradutor ou corretor automático do artigo… mas tem vários exemplos com acentuação, nome em português etc… exemplo:
    jQuery (documento) .ready (função ($) {
    $ (‘. hideable’). on (‘click’, function () {
    $ (este) .hide ();
    })
    });

    Onde deveria ser:
    jQuery(Document).ready(function($){
    /**/
    });

    14:48 30 de novembro de 2022 Responder
Escreva um comentário