Recentemente, um usuário nos pediu dicas para otimizar o desempenho do site WordPress. Uma de nossas sugestões foi substituir o script jQuery padrão do WordPress pelo jQuery das Bibliotecas Hospedadas do Google.
O WordPress inclui o jQuery com o software principal por padrão. No entanto, descobrimos que substituí-lo pela versão mais recente do jQuery da biblioteca do Google pode melhorar o desempenho.
Neste artigo, mostraremos como substituir facilmente o script jQuery padrão do WordPress pela biblioteca do Google para melhorar o desempenho e a velocidade.
Por que e quando você deve substituir o jQuery padrão do WordPress
jQuery é uma biblioteca JavaScript popular usada por desenvolvedores para criar belas aplicações web. É usada com bastante frequência no WordPress para adicionar recursos como sliders, popups e muito mais.
O WordPress inclui uma biblioteca jQuery empacotada com o software principal do WordPress. Muitos dos principais plugins do WordPress e a maioria dos temas populares do WordPress dependem dessa biblioteca para funcionalidades e recursos essenciais.
No entanto, carregar o jQuery em um servidor de hospedagem compartilhada pode consumir muitos recursos e deixar seu site lento, especialmente se você estiver usando temas ou plugins mal codificados que não seguem as melhores práticas do WordPress.
Outro problema com o uso da versão do jQuery incluída no WordPress é que ela não será atualizada a menos que o WordPress a atualize. Podem existir versões mais recentes do jQuery com correções de desempenho ou segurança, mas você não terá acesso a elas até que sejam incluídas em uma atualização do WordPress.
Existem algumas soluções alternativas para corrigir isso. Por exemplo, você pode carregar o jQuery através dos servidores do Google ou da CDN oficial do jQuery.
O Google Hosted Libraries é uma boa opção porque seus servidores são estáveis, atualizados e altamente otimizados para velocidade, o que permite que o jQuery carregue muito mais rápido em seu site WordPress.
Dito isso, vamos ver como substituir facilmente o jQuery padrão do WordPress pela biblioteca do Google.
Substituir o jQuery Padrão do WordPress pela Biblioteca do Google
O WordPress vem com um método integrado para adicionar scripts e folhas de estilo facilmente. Isso também permite que você remova com segurança quaisquer scripts ou folhas de estilo que estejam sendo carregados usando o método integrado.
Usaremos este método para primeiro desativar o jQuery padrão do WordPress. Depois disso, instruiremos o WordPress a carregar o jQuery através da biblioteca do Google.
Você precisará adicionar o seguinte código ao arquivo functions.php do seu tema, a um plugin específico do site ou a um plugin de snippets de código.
function wpb_modify_jquery() {
//check if front-end is being viewed
if (!is_admin()) {
// Remove default WordPress jQuery
wp_deregister_script('jquery');
// Register new jQuery script via Google Library
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0');
// Enqueue the script
wp_enqueue_script('jquery');
}
}
// Execute the action when WordPress is initialized
add_action('init', 'wpb_modify_jquery');
Recomendamos o uso do plugin de snippets de código WPCode para adicionar este código no WordPress. É gratuito, fácil de usar e não quebrará seu site se algo der errado.
Observação: Existe também uma versão premium do WPCode que oferece recursos avançados como revisões de código, pixels de conversão automáticos, snippets agendados, uma biblioteca de nuvem privada e muito mais.
Para começar, você precisará instalar e ativar o WPCode. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.
Após ativar o plugin, navegue até Code Snippets » Add Snippet no painel do seu WordPress.
A partir daí, encontre a opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clique no botão ‘+ Adicionar Snippet Personalizado’ abaixo dela.
Em seguida, você precisa selecionar um tipo de código na lista de opções que aparecem na tela.
Para este tutorial, escolha ‘PHP Snippet’.
Em seguida, você pode adicionar um título para o seu trecho de código. Pode ser qualquer coisa para ajudar você a lembrar para que serve o código.
Depois disso, simplesmente cole o código acima na caixa ‘Prévia do Código’.
Por último, alterne o interruptor de ‘Inativo’ para ‘Ativo’ e clique no botão ‘Salvar Snippet’.
É isso! O WordPress agora substituirá o jQuery padrão e o carregará através da biblioteca do Google em vez disso.
Observação: Este método continuará carregando a versão do jQuery mencionada no URL. No futuro, você pode precisar alterar o URL da biblioteca do Google para usar uma versão mais recente do jQuery.
O Google não atualizará automaticamente o número da versão para você, pois isso pode causar problemas de compatibilidade se o seu tema ou plugins dependerem de uma versão diferente.
Você pode encontrar o URL mais recente visitando o site Bibliotecas hospedadas pelo Google.
A partir daí, você também pode encontrar os URLs de versões mais antigas do jQuery que pode usar para solução de problemas, se necessário.
Substituindo Outras Bibliotecas jQuery Padrão
Além da biblioteca principal do jQuery, o WordPress também inclui um monte de outros scripts jQuery. Alguns desses scripts, como jQuery Mobile e jQuery UI, são hospedados na biblioteca do Google.
Para outras bibliotecas, você pode usar os próprios servidores CDN do jQuery para carregá-las muito mais rapidamente. No exemplo a seguir, substituímos o script jquery-ui-core do WordPress pela versão oficial do jquery-ui.
function wpb_modify_jquery_ui() {
if (!is_admin()) {
wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', false, '1.12.1');
wp_enqueue_script('jquery-ui-core');
}
}
add_action('init', 'wpb_modify_jquery_ui');
Assim como as bibliotecas do Google, você precisará substituir o URL após um tempo para usar a versão mais recente do script.
Desativar Completamente o jQuery no WordPress
Devido ao seu amplo uso, não recomendamos desativar completamente o jQuery em seu site WordPress. Mesmo que seu tema WordPress não use jQuery, muitos plugins populares do WordPress ainda precisam dele.
No entanto, se você tem certeza de que seu site não precisa de jQuery, então você pode desativá-lo com segurança.
Simplesmente adicione o seguinte código ao arquivo functions do seu tema, a um plugin específico do site ou a um plugin de snippets de código como o WPCode.
if ( !is_admin() ) wp_deregister_script('jquery');
É só isso. Este código simplesmente desativa o carregamento do script jQuery no front-end do seu site WordPress.
Solução de problemas de questões relacionadas ao jQuery no WordPress
Novas versões do jQuery podem, às vezes, depreciar ou remover métodos e funções antigas. Se um plugin do WordPress em seu site estiver usando um método mais antigo, isso poderá causar problemas.
Você pode notar avisos na área do Console da ferramenta Inspect, ou pode notar que alguns recursos simplesmente pararam de funcionar.
O WordPress costumava usar um script chamado jQuery-migrate para fornecer compatibilidade de backup com versões mais antigas do jQuery. No entanto, desde o WordPress 5.5, este script foi aposentado do WordPress.
Se você quiser adicionar de volta o script jQuery-migrate ou solucionar problemas entre diferentes versões do jQuery, você pode tentar o seguinte método.
Basta instalar e ativar o plugin Version Control for jQuery. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você precisa visitar a página Configurações » Controle de Versão do jQuery. A partir daqui, você pode escolher a versão do jQuery que deseja usar.
O plugin carregará automaticamente essa versão da CDN oficial do jQuery.
O plugin também carregará o script de migração do jQuery. Se desejar, você pode desativá-lo durante a solução de problemas.
Não se esqueça de clicar no botão 'Salvar Alterações' para salvar suas alterações.
Esperamos que este artigo tenha ajudado você a aprender como substituir o jQuery padrão do WordPress pela biblioteca do Google. Você também pode querer ver estes úteis tutoriais jQuery para usuários do WordPress, ou ver nosso guia completo de otimização de desempenho do WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Mrteesurez
Ao substituí-lo manualmente quando o WordPress puder lançar novas atualizações de versão do WordPress e acho que todas as atualizações necessárias deveriam ter sido feitas antes de lançá-lo, ou algum fato sobre isso?
Além disso, preciso desativar totalmente o jQuery como você instruiu neste artigo antes de usar o da biblioteca do Google, como você disse que o integrado pode deixar o site lento, especialmente em hospedagem compartilhada?
WPBeginner Support
O WordPress também pode lançar uma atualização, mas isso depende das necessidades individuais, caso queiram ter uma versão mais recente do jQuery.
Se você estiver seguindo os passos deste artigo, recomendamos desativar a versão antiga para evitar que várias versões do jQuery sejam executadas ao mesmo tempo e causem um conflito.
Admin
Mrteesurez
Obrigado. Agradeço sua resposta e orientação. Eu nem pensei em conflito, estava pensando se os dois ao mesmo tempo não deixariam um site totalmente lento. Seguirei suas instruções ao executar. Obrigado por dedicar seu tempo para responder.
ALEX
Olá,
Temos um servidor na China e todos os recursos do Google são bloqueados pelo firewall do governo chinês.
Mas, os recursos Jquery e Fonts são carregados do Google no WordPress por padrão agora, e o site está causando atrasos sérios.
Então, há alguma maneira de forçar os recursos Js ou CSS a serem carregados do servidor local, por favor?
Obrigado
WPBeginner Support
Se você tiver um endereço web para os arquivos do jquery em um servidor local, você alteraria a url no trecho para apontar para onde o jquery está localizado.
Admin
Wilbur
Hey, sorry for haling this post out of the grave…
How relevant is this still? In Terms of the latest P Core versions?
Obrigado
Jorge
Olá,
Aqui está uma implementação mais avançada:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Onde “cdn.yourdomain.com” deve ser substituído pelo caminho do arquivo, usando um CDN para um melhor resultado.
Atenciosamente,
Jorge Ortiz
Simon
Tanto a solução do post quanto esta quebram meu site
Plato39
O código do Jorge funcionou para mim – mas as aspas devem ser substituídas. Tente isto:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Plato39
OK – é esta página da web que está adicionando as aspas estilizadas. Basta fazer um 'localizar e substituir' no seu editor de texto (ou substituir manualmente as aspas por outras normais) e o código funcionará no arquivo functions.php do seu tema.
Shaurya
o que eu coloco na url se eu não tenho um cdn?
will
oi
muito obrigado pela sua postagem, tentei mudar e não sei se fiz bem porque meu site agora está 2 segundos mais lento
Como faço para verificar se fiz bem e estou usando as bibliotecas do Google?
Ihsan
Testei o código acima e substituí a última linha por esta para fazê-lo funcionar e melhorar
add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );
Alejandro
Olá, obrigado pelas suas dicas. Não sei por que ao usar esta função, o jquery do Google está carregando duas vezes, quero dizer, tenho duas requisições HTTP em vez de uma. Aqui está o teste: http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com.
Com jquery.easing acontece o mesmo, mas desta vez com 3 requisições HTTP para o mesmo arquivo.
Alguma ideia? Eu estive olhando o código mas não encontrei duplicação de wp_enqueue_script(”);
Obrigado antecipadamente
Alejandro
Acabei de notar que quando estou logado, o jquery do google é carregado apenas uma vez.
Mathieu
Obrigado! O jQuery costumava quebrar a funcionalidade do meu admin, agora isso está resolvido.
Mitch
Muito obrigado, agradeço.
Joseph Chambers
E se eu quiser carregar HTTP ou HTTPS com base no que o visitante está visitando em nossa página.
para a maioria das coisas podemos mudar: http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js -> //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js e funciona. No entanto; algo em wp_register_script() está lançando um erro (página em branco com a palavra: Erro) quando eu mudo isso. Pensamentos, soluções?
Sajid Iqbal
Obrigado Syed por esta ótima postagem. Economizou muito tempo.
Matt Ogborne
Muito útil, obrigado!
Matt
Riversatile
Olá,
Aqui está a versão mais recente do arquivo jquery do googleapi.
Ao copiar/colar o código acima, não se esqueça de substituir a URL do jquery por esta:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Em seguida, substitua “1.4.4” por “1.6.2”
Assim:
//Fazendo o jQuery da API do Googlefunction modify_jquery() { if (!is_admin()) { // comentar as duas linhas a seguir para carregar a cópia local do jQuery wp_deregister_script(‘jquery’); wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js’, false, ‘1.6.2’); wp_enqueue_script(‘jquery’); }}add_action(‘init’, ‘modify_jquery’);
vnu
Alguém poderia me dizer se preciso modificar (!is_admin) para uma capacidade "mínima" se eu usar um plugin como o de abas e acordeões do thethefly? Assim as abas criadas nas páginas são visíveis por todos?
Obrigado!
Melissa Cleaver
Muito obrigado pelo código, mas quando tentei usá-lo no meu arquivo functions.php, obtive um erro fatal, não importa onde no código eu o colocasse. Estou fazendo algo errado aqui?
Equipe Editorial
Tente o novo código que acabamos de lançar.
Admin
swanie
Pergunta: A Biblioteca do Google faz um bom trabalho ao extrair as informações da tag alt da biblioteca de mídia? … Tenho vários temas profissionais que usam um slider jQuery na página principal, mas eles não extraem a tag alt … portanto, o código fonte fica assim: alt=”” … o que, é claro, é um erro de SEO. Nunca usei o script da Biblioteca do Google … ficaria curioso para saber como isso funciona. Qual sua experiência?
Equipe Editorial
Tag alt para quê? Isso está apenas substituindo o javascript….
Admin
swanie
OK … acho que estou falando especificamente sobre sliders jQuery … Comprei vários temas profissionais com um slider jQuery na página principal … aqui está um deles: http://coloradospringsautomechanics.com … se você visualizar o código fonte, ele extrai as imagens, mas não as tags alt … a tag alt está vazia.
Acho que lendo este post, essa abordagem da Biblioteca do Google poderia possivelmente resolver isso.
Outra solução seria abrir os arquivos do plugin e adicionar ao tag alt, então eu deveria ter:
img src=”file.jpg” alt=”” title=””
Só queria saber por que esses sliders jQuery não puxam as tags alt. Faz sentido? Estou fora do assunto?
Vocês são demais, aliás.
Aamir Rizwan
Seu site está marcado como "malware" pelo Google.
Geraldo
//Offtopic
@Swanie
Vai e olha aqui: http://sitecheck.sucuri.net/results/coloradospringsautomechanics.com/
Relatório de segurança (Avisos encontrados):
error Blacklisted: Yes
error Likely compromised: Yes
//Ontopic
Não podemos: "empacotar" todos os nossos scripts JQuery? Temos que fazer uma chamada para cada script separadamente?
WPBeginner Support
@Geraldo: você pode resolver dependências. Por exemplo, se você estiver carregando um script jQuery, ele obviamente precisará do jQuery, então você o adiciona como dependência e o WordPress o enfileirará para você.