Recent, un utilizator ne-a cerut sfaturi pentru optimizarea performanței site-ului său WordPress. Una dintre sugestiile noastre a fost înlocuirea scriptului jQuery implicit WordPress cu jQuery de la Google Hosted Libraries.
WordPress include jQuery în software-ul de bază în mod implicit. Cu toate acestea, am constatat că înlocuirea acestuia cu cea mai recentă versiune jQuery din biblioteca Google poate îmbunătăți performanța.
În acest articol, vă vom arăta cum să înlocuiți cu ușurință scriptul jQuery implicit al WordPress cu biblioteca Google pentru a îmbunătăți performanța și viteza.
De ce & Când ar trebui să înlocuiți jQuery-ul implicit WordPress
jQuery este o bibliotecă JavaScript populară folosită de dezvoltatori pentru a crea aplicații web frumoase. Este folosit destul de des în WordPress pentru a adăuga funcționalități precum slidere, pop-up-uri și multe altele.
WordPress include o bibliotecă jQuery împachetată cu software-ul de bază WordPress. Multe dintre cele mai bune pluginuri WordPress și cele mai populare teme WordPress se bazează pe această bibliotecă pentru funcționalități și caracteristici esențiale.
Totuși, încărcarea jQuery pe un server de hosting partajat poate fi intensivă din punct de vedere al resurselor și poate încetini site-ul dvs., mai ales dacă utilizați teme sau pluginuri WordPress prost codificate care nu respectă cele mai bune practici WordPress.
O altă problemă cu utilizarea versiunii jQuery incluse cu WordPress este că nu va fi actualizată decât dacă WordPress o actualizează. Pot exista versiuni mai noi de jQuery cu remedieri de performanță sau securitate, dar nu veți avea acces la ele până când nu vor fi incluse într-o actualizare WordPress.
Există câteva soluții pentru a remedia acest lucru. De exemplu, puteți încărca jQuery prin serverele Google sau CDN-ul oficial al jQuery.
Bibliotecile găzduite de Google sunt o alegere bună, deoarece serverele lor sunt stabile, actualizate și optimizate la maximum pentru viteză, ceea ce permite încărcarea mult mai rapidă a jQuery pe site-ul tău WordPress.
Acestea fiind spuse, să aruncăm o privire asupra modului de a înlocui cu ușurință jQuery-ul implicit al WordPress cu biblioteca Google.
Înlocuiți jQuery implicit al WordPress cu biblioteca Google
WordPress vine cu o metodă încorporată pentru a adăuga cu ușurință scripturi și foi de stil. Acest lucru vă permite, de asemenea, să eliminați în siguranță orice scripturi sau foi de stil care sunt încărcate folosind metoda încorporată.
Vom folosi această metodă pentru a dezactiva mai întâi jQuery-ul implicit al WordPress. După aceea, vom spune WordPress să încarce jQuery prin biblioteca Google.
Va trebui să adăugați următorul cod în fișierul functions.php al temei dvs., un plugin specific site-ului sau un plugin de fragmente de cod.
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');
Recomandăm utilizarea pluginului de fragmente de cod WPCode pentru a adăuga acest cod în WordPress. Este gratuit, ușor de utilizat și nu va afecta site-ul dvs. dacă ceva nu merge bine.
Notă: Există și o versiune premium a WPCode care oferă funcționalități avansate, cum ar fi revizuiri de cod, pixeli de conversie automată, fragmente programate, o bibliotecă cloud privată și multe altele.
Pentru a începe, va trebui să instalați și să activați WPCode. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.
După activarea pluginului, navigați la Code Snippets » Add Snippet din tabloul de bord WordPress.
De acolo, găsiți opțiunea „Adăugați codul dvs. personalizat (Snippet nou)” și faceți clic pe butonul „+ Adăugați snippet personalizat” de sub acesta.
Apoi, trebuie să selectați un tip de cod din lista de opțiuni care apar pe ecran.
Pentru acest tutorial, alegeți „Fragment PHP”.
Apoi, poți adăuga un titlu pentru fragmentul tău de cod. Acesta poate fi orice pentru a te ajuta să-ți amintești la ce folosește codul.
După aceea, pur și simplu lipiți codul de mai sus în caseta „Previzualizare cod”.
În cele din urmă, comutați comutatorul de la „Inactiv” la „Activ” și faceți clic pe butonul „Save Snippet”.
Atât! WordPress va înlocui acum jQuery-ul implicit și îl va încărca prin biblioteca Google în schimb.
Notă: Această metodă va continua să încarce versiunea jQuery menționată în URL. În viitor, este posibil să fie necesar să schimbați URL-ul bibliotecii Google pentru a utiliza o versiune mai nouă de jQuery.
Google nu va actualiza automat numărul versiunii pentru dvs., deoarece ar putea cauza probleme de compatibilitate dacă tema sau pluginurile dvs. se bazează pe o versiune diferită.
Puteți găsi cel mai recent URL vizitând site-ul Google hosted libraries.
De acolo, puteți găsi și URL-urile pentru versiunile mai vechi de jQuery pe care le puteți utiliza pentru depanare, dacă este necesar.
Înlocuirea altor biblioteci jQuery implicite
Pe lângă biblioteca jQuery de bază, WordPress include și o serie de alte scripturi jQuery. Unele dintre aceste scripturi, cum ar fi jQuery Mobile și jQuery UI, sunt găzduite pe biblioteca Google.
Pentru alte biblioteci, puteți utiliza propriile servere CDN ale jQuery pentru a le încărca mult mai rapid. În exemplul următor, am înlocuit scriptul WordPress jquery-ui-core cu versiunea oficială 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');
La fel ca bibliotecile Google, va trebui să înlocuiți URL-ul după un timp pentru a utiliza cea mai recentă versiune a scriptului.
Dezactivare completă jQuery în WordPress
Datorită utilizării sale extinse, nu recomandăm dezactivarea completă a jQuery pe site-ul dvs. WordPress. Chiar dacă tema dvs. WordPress nu utilizează jQuery, multe plugin-uri populare WordPress îl necesită.
Cu toate acestea, dacă sunteți sigur că site-ul dvs. nu are nevoie de jQuery, atunci îl puteți dezactiva în siguranță.
Pur și simplu adăugați următorul cod în fișierul functions al temei dvs., un plugin specific site-ului sau un plugin de fragmente de cod precum WPCode.
if ( !is_admin() ) wp_deregister_script('jquery');
Atât. Acest cod dezactivează pur și simplu încărcarea scriptului jQuery pe partea frontală a site-ului dvs. WordPress.
Depanarea problemelor legate de jQuery în WordPress
Noile versiuni de jQuery pot uneori deprecia sau elimina metode și funcții vechi. Dacă un plugin WordPress de pe site-ul dvs. utilizează o metodă mai veche, acest lucru ar putea cauza probleme.
Este posibil să observați avertismente în zona Console a instrumentului Inspect, sau este posibil să observați că unele funcționalități au încetat pur și simplu să funcționeze.
WordPress folosea anterior un script numit jQuery-migrate pentru a oferi compatibilitate de rezervă cu versiunile mai vechi de jQuery. Cu toate acestea, începând cu WordPress 5.5, acest script a fost retras din WordPress.
Dacă doriți să adăugați scriptul jQuery-migrate înapoi sau să depanați între diferite versiuni jQuery, atunci puteți încerca următoarea metodă.
Pur și simplu instalați și activați pluginul Version Control for jQuery. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
După activare, trebuie să vizitați pagina Setări » Controlul versiunii jQuery. De aici, puteți alege versiunea jQuery pe care doriți să o utilizați.
Pluginul va încărca automat acea versiune de pe CDN-ul oficial jQuery.
Pluginul va încărca și scriptul jQuery migrate. Dacă doriți, îl puteți dezactiva în timpul depanării.
Nu uitați să faceți clic pe butonul „Salvare modificări” pentru a vă salva modificările.
Sperăm că acest articol v-a ajutat să învățați cum să înlocuiți jQuery-ul implicit WordPress cu biblioteca Google. De asemenea, ați putea dori să vedeți aceste tutoriale utile despre jQuery pentru utilizatorii WordPress, sau să consultați ghidul nostru complet de optimizare a performanței WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Mrteesurez
Când îl înlocuiți manual, când WordPress ar putea lansa noi versiuni de actualizare ale WordPress și cred că toate actualizările necesare ar trebui făcute înainte de lansarea sa, sau orice fapt despre asta?
De asemenea, trebuie să dezactivez complet jQuery, așa cum ați indicat în acest articol, înainte de a folosi cel din biblioteca Google, așa cum ați spus că cel încorporat ar putea încetini site-ul, mai ales pe un hosting partajat?
Suport WPBeginner
WordPress ar putea lansa o actualizare, dar depinde de nevoile individuale dacă doresc să aibă o versiune mai nouă de jQuery.
Dacă folosiți pașii din acest articol, recomandăm dezactivarea versiunii vechi pentru a preveni rularea mai multor versiuni de jQuery în același timp și cauzarea unui conflict.
Admin
Mrteesurez
Mulțumesc. Apreciez răspunsul și îndrumarea dvs. Nici măcar nu m-am gândit la conflict, mă gândeam dacă cele două în același timp nu ar încetini complet un site. Voi urma instrucțiunile dvs. la executare. Mulțumesc că v-ați acordat timp să răspundeți.
ALEX
Salut,
Avem un server în China, iar toate resursele de la Google sunt blocate de firewall-ul guvernului chinez.
Dar, resursele Jquery și Fonturi sunt încărcate de pe Google pe WordPress implicit acum, iar site-ul este cauzat de o întârziere serioasă.
Deci, există vreo modalitate de a forța resursele Js sau CSS să fie încărcate de pe serverul local, vă rog?
Mulțumesc
Suport WPBeginner
Dacă aveți o adresă web pentru fișierele jquery pe un server local, atunci veți schimba URL-ul din fragment pentru a indica unde se află jquery.
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?
Mulțumesc
Jorge
Salut,
Iată o implementare mai avansată:
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’); } }
Unde „cdn.yourdomain.com” ar trebui înlocuit cu calea fișierului, folosind un CDN pentru un rezultat mai bun.
Cu stimă,
Jorge Ortiz
Simon
Atât soluția postării, cât și aceasta îmi strică site-ul
Plato39
Codul lui Jorge a funcționat pentru mine – dar ghilimelele trebuie înlocuite. Încercați acest lucru:
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 – este această pagină web care adaugă ghilimelele fancy. Pur și simplu faceți o operațiune de „căutare și înlocuire” în editorul dvs. de text (sau înlocuiți manual ghilimelele cu unele simple) și codul va funcționa în fișierul functions.php al temei dvs.
Shaurya
ce pun în URL dacă nu am un cdn?
va
salut
îți mulțumesc foarte mult pentru postarea ta, am încercat să o modific și nu știu dacă am făcut bine pentru că acum web-ul meu este cu 2 secunde mai lent
Cum verific dacă am făcut bine și folosesc bibliotecile google?
Ihsan
Am testat codul de mai sus și am înlocuit ultima linie cu aceasta pentru a funcționa și a fi mai bună
add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );
Alejandro
Salut, Mulțumesc pentru sfaturile tale. Nu știu de ce, atunci când folosesc această funcție, jQuery de la Google se încarcă de două ori, adică am două cereri HTTP în loc de una. Iată testul: http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com.
Cu jquery.easing se întâmplă același lucru, dar de data aceasta cu 3 cereri HTTP pentru același fișier.
Aveți idei? Am analizat codul, dar nu am găsit duplicarea wp_enqueue_script(”);
Mulțumesc anticipat
Alejandro
Observ doar că atunci când sunt conectat, jquery de la Google este încărcat o singură dată.
Mathieu
Mulțumesc! jQuery-ul care îmi strica funcționalitatea de administrare este acum rezolvat.
Mitch
Mulțumesc, apreciez mult.
Joseph Chambers
Ce se întâmplă dacă vreau să încarc fie HTTP, fie HTTPS, în funcție de cum vizitează vizitatorul pagina noastră.
pentru majoritatea lucrurilor pe care le putem schimba: 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 și funcționează. Cu toate acestea; ceva în wp_register_script() aruncă o eroare (Pagină albă cu cuvântul: Eroare) când schimb asta. Păreri, soluții?
Sajid Iqbal
Mulțumesc Syed pentru această postare grozavă. Mi-a economisit mult timp.
Matt Ogborne
Foarte util, Mulțumesc!
Matt
Riversatile
Salut,
Iată cea mai recentă versiune a fișierului googleapi jquery.
Când copiați/lipiți codul de mai sus, nu uitați să înlocuiți URL-ul jquery cu acesta:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Apoi înlocuiți „1.4.4” cu „1.6.2”
Așa:
//Încărcarea funcției Google API jQuery modify_jquery() { if (!is_admin()) { // comentează următoarele două linii pentru a încărca copia locală a 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
Ar putea cineva să-mi spună dacă trebuie să modific (!is_admin) la capacitatea „minimă” dacă folosesc un plugin precum tabs and accordions de la thethefly. Astfel, taburile create pe pagini sunt vizibile pentru toată lumea?
Mulțumesc!
Melissa Cleaver
Mulțumesc mult pentru cod, dar când am încercat să-l folosesc în fișierul meu functions.php, am primit o eroare fatală, indiferent unde în cod l-am pus. Fac ceva greșit aici?
Personal editorial
Încearcă noul cod pe care tocmai l-am lansat.
Admin
swanie
Întrebare: Biblioteca Google face o treabă bună la extragerea informațiilor din tag-ul alt din biblioteca media? … Am mai multe teme profesionale care folosesc un slider jQuery pe pagina principală, dar nu extrag tag-ul alt … prin urmare, codul sursă arată așa: alt=”” … ceea ce, desigur, este un lucru rău pentru SEO. Nu am folosit niciodată scriptul Google Library … aș fi curios cum funcționează. Care este experiența ta?
Personal editorial
Tag Alt pentru ce? Asta doar înlocuiește javascript-ul....
Admin
swanie
OK… cred că mă refer în mod specific la sliderele jQuery… am achiziționat mai multe teme profesionale cu un slider jQuery pe pagina principală… iată una dintre ele: http://coloradospringsautomechanics.com … dacă vizualizați sursa, extrage imaginile, dar nu tag-urile alt… tag-ul alt este gol.
Cred că, citind acest post, această abordare a bibliotecii Google ar putea rezolva asta.
O altă soluție ar putea fi deschiderea fișierelor plugin-ului și adăugarea la tag-ul alt, deci ar trebui să am:
img src="file.jpg" alt="" title=""
Mă întrebam doar de ce aceste slidere jQuery nu preiau tag-urile alt. Are sens? Sunt pe dinafară?
Sunteți tari, apropo.
Aamir Rizwan
Site-ul dvs. este marcat ca „malware” de către Google.
Geraldo
//Offtopic
@Swanie
Mergi și uită-te aici: http://sitecheck.sucuri.net/results/coloradospringsautomechanics.com/
Raport de securitate (Avertismente găsite):
eroare Listat pe lista neagră: Da
eroare Probabil compromis: Da
//Pe subiect
Nu putem: „împacheta” toate scripturile noastre JQuery? Trebuie să facem o cerere pentru fiecare script separat?
Suport WPBeginner
@Geraldo: poți rezolva dependențele. De exemplu, dacă încarci un script jQuery, acesta va avea în mod evident nevoie de jQuery, așa că îl adaugi ca dependență și WordPress îl va înscrie pentru tine.