O WordPress está em nossas vidas há mais de 16 anos, mas o método de adicionar scripts a temas e plugins ainda permanece um mistério para muitos desenvolvedores. Neste artigo, finalmente acabamos com a confusão.
Como é uma das bibliotecas Javascript mais usadas, hoje vamos discutir como adicionar scripts jQuery simples aos seus temas ou plugins do WordPress.
Mas primeiro…
- Sobre o Modo de Compatibilidade do jQuery
- Etapas para adicionar scripts jQuery ao WordPress
- Adicionando scripts ao administrador do WordPress
- Como cancelar o registro do jQuery do WordPress
- Você não deveria registrar scripts antes de enfileirar?
- Usando tags condicionais
- Adicionar jQuery ao WordPress usando plugins
- Crie seu próprio script de história jQuery
Sobre o Modo de Compatibilidade do jQuery
Antes de começarmos a anexar scripts ao WordPress, é importante entender o modo de compatibilidade do jQuery.
Como você provavelmente sabe, o WordPress vem pré-carregado com jQuery , que você pode usar com seu código.
O jQuery do WordPress também tem um ” modo de compatibilidade “, que é um mecanismo para evitar conflitos com outras bibliotecas de linguagem.
Parte desse mecanismo de defesa significa que você não pode usar o $sinal diretamente como faria em outros projetos.
Em vez disso, ao escrever jQuery para WordPress, você precisa usar jQuery.
Veja o código abaixo como exemplo:
/* jQuery normal */ | |
$ ( ‘.hideable’ ) . on ( ‘clique’ , função ( ) { | |
$ ( isto ) . ocultar ( ) ; | |
} ) | |
/* Modo de compatibilidade */ | |
jQuery ( ‘.hideable’ ) . on ( ‘clique’ , função ( ) { | |
jQuery ( isto ) . ocultar ( ) ; | |
} ) |
O problema é que escrever jQuery um zilhão de vezes leva mais tempo, dificulta a leitura e pode deixar seu script inchado.
As boas notícias?
Com algumas modificações, você pode voltar a usar nosso adorável cifrão novamente.
A propósito, se você é novo no jQuery , o sinal $ é apenas um alias para jQuery() e, depois, um alias para uma função.
A estrutura básica se parece com isso: $(selector).action(). O cifrão define jQuery… o “(seletor)” consulta ou encontra elementos HTML… e finalmente o “jQuery action()” é a ação a ser executada nos elementos.
Voltando a como podemos contornar nosso problema de compatibilidade… aqui estão algumas opções viáveis:
1. Entre no modo Stealth do jQuery
A primeira maneira de contornar o modo de compatibilidade é usar seu código de forma furtiva.
Por exemplo, se você estiver carregando seu script no rodapé, você pode encapsular seu código em uma função anônima, que mapeará o jQuery para $.
Como no exemplo abaixo:
( função ( $ ) { | |
$ ( ‘.hideable’ ) . on ( ‘clique’ , função ( ) { | |
$ ( isto ) . ocultar ( ) ; | |
} ) | |
} ) ( jQuery ) ; |
Se você quiser adicionar seu script no cabeçalho (o que você deve evitar se possível, mais sobre isso abaixo), você pode encapsular tudo em uma função pronta para documento, passando $ao longo do caminho.
jQuery ( documento ) . pronto ( função ( $ ) { | |
$ ( ‘.hideable’ ) . on ( ‘clique’ , função ( ) { | |
$ ( isto ) . ocultar ( ) ; | |
} ) | |
} ) ; |
2.Entre no Modo “Sem Conflito”
Outra maneira simples de evitar soletrar jQuery é entrar no modo “sem conflito” e usar um atalho diferente.
Neste caso: $jem vez do padrão $.
Tudo o que você precisa fazer é declarar isso no topo do seu script:var $j = jQuery.noConflict();
Tudo bem, agora que você sabe mais sobre como escrever código jQuery válido para WordPress, vamos adicioná-lo ao nosso site.
Etapas para adicionar scripts jQuery ao WordPress
- Adicionar scripts jQuery ao WordPress via enfileiramento
- Adicionar scripts ao administrador do WordPress
- Cancelar registro do WordPress’jQuery
- Você não deveria registrar scripts antes de enfileirar?
- Adicionar jQuery ao WordPress usando plugins
Uma das maneiras mais simples de adicionar scripts jQuery ao WordPress é por meio de um processo chamado ” enfileiramento “.
Para um site HTML comum, usaríamos o <link> elemento para adicionar scripts. O WordPress acaba fazendo a mesma coisa, mas usaremos funções especiais do WP para conseguir isso.
Dessa forma, ele cuida de todas as nossas dependências para nós (obrigado WP!).
Se estiver trabalhando em um tema, você pode usar a wp_enqueue_script() função dentro do seu functions.php arquivo.
Veja como é:
função my_theme_scripts () { | |
wp_enqueue_script ( ‘ meu-ótimo-script ‘ , get_template_directory_uri () . ‘ /js/meu-ótimo-script.js ‘ , array ( ‘ jquery ‘ ), ‘ 1.0.0 ‘ , true ); | |
} | |
add_action ( ‘ wp_enqueue_scripts ‘ , ‘ meus_scripts_de_tema ‘ ); |
Esta função recebe 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 matriz de dependências.
- $ver – o número da versão do seu script.
- $in_footer – permite que o WordPress saiba onde colocar o script.
Algo a ser observado $in_footeré que, por padrão, os scripts serão carregados no cabeçalho.
Essa é uma prática ruim e pode deixar seu site drasticamente lento. Portanto, se você quiser colocar seu script no rodapé, certifique-se de que esse parâmetro esteja definido como true.
Adicionando scripts ao administrador do WordPress
Você também pode adicionar scripts ao admin. As funções usadas são exatamente as mesmas, você só precisa usar um hook diferente.
Por exemplo:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
função my_admin_scripts () { | |
wp_enqueue_script ( ‘ meu-ótimo-script ‘ , plugin_dir_url ( __FILE__ ) . ‘ /js/meu -ótimo-script.js ‘ , array ( ‘ jquery ‘ ), ‘ 1.0.0 ‘ , true ); | |
} | |
add_action ( ‘ scripts_de_enfileiramento_de_admin ‘ , ‘ meus_scripts_de_enfileiramento_de_admin ‘ ); |
Em vez de conectar, wp_enqueue_scriptsprecisamos usar admin_enqueue_scripts.
É isso!
Realmente.
Como cancelar o registro do jQuery do WordPress
Mas e se você quiser usar uma versão do jQuery diferente daquela que o WordPress pré-carrega?
Você poderia enfileirar… mas isso deixaria duas versões do JQ na página.
Para evitar isso, temos que cancelar o registro da versão do WP.
Veja como isso se parece:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
// incluir 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(), nulo, verdadeiro); | |
} | |
add_action(‘wp_enqueue_scripts’, ‘shapeSpace_include_custom_jquery’); |
É tão simples quanto usar o wp_deregister_script() para cancelar o registro do jQuery do WP e, em seguida, incluir o script jQuery que você deseja adicionar.
No exemplo acima, usamos a biblioteca jQuery hospedada pelo Google , mas você obviamente a substituirá pela URL do seu próprio script.
Você não deveria registrar scripts antes de enfileirar?
Se você quiser carregar seus scripts quando necessário, em vez de carregá-los diretamente em suas páginas, você pode registrar o script antecipadamente.
Por exemplo, em wp_loaded:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
add_action( ‘wp_loaded’, ‘registrar_todos_os_scripts’ ); | |
função register_all_scripts() | |
{ | |
wp_register_script(…); | |
} |
Depois de fazer isso, você pode enfileirar os scripts quando precisar deles:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
add_action(‘wp_enqueue_scripts’, ‘enqueue_front_scripts’); | |
add_action( ‘scripts_de_enfileiramento_de_admin’, ‘scripts_de_retorno_de_enfileiramento’ ); |
Lembre-se apenas de usar os mesmos nomes para evitar colisões com outros scripts.
Usando tags condicionais
Use tags condicionais para carregar seus scripts somente quando necessário.
Isso é usado com mais frequência no admin, onde você deseja usar um script em uma página específica somente (não no admin inteiro). Isso também economiza largura de banda e tempo de processamento – o que significa tempos de carregamento mais rápidos para seu site.
Dê uma olhada na documentação dos scripts de enfileiramento do administrador no Codex do WordPress para obter mais informações.
Adicionar jQuery ao WordPress usando plugins
O diretório de plugins do WP também tem muitos plugins excelentes que você pode usar para inserir scripts em suas postagens, páginas ou temas do WordPress.
Alguns exemplos de plugins JavaScript /jQuery bem conhecidos incluem: Advanced Custom Fields , Simple Custom CSS and JS , Scripts n Styles e Asset CleanUp.
Crie seu próprio script de história jQuery
Obter uma melhor compreensão do jQuery só tornará o trabalho que você faz mais impactante. Seja para seu próprio site ou projetos de clientes.
O jQuery é conhecido por sua simplicidade e, como você (espero) aprendeu neste artigo, adicionar scripts jQuery simples ao WordPress é muito fácil quando você sabe como.
Sim, há uma pequena sobrecarga em comparação ao uso do HTML puro, mas também há o benefício adicional de gerenciamento de dependências e clareza.
Além disso, ao empregar pequenos truques como ignorar a compatibilidade padrão do WP do jQuery, você economizará muito tempo, esforço e código inchado.
0 comentários