Cum să adăugați și să utilizați scripturi jQuery în WordPress

Elementele interactive ale paginii, cum ar fi barele de căutare dinamice, filtrele avansate de produse și glisoarele, vă pot face site-ul mai ușor de utilizat și mai captivant. Dar este imposibil să creezi oricare dintre aceste caracteristici fără a utiliza JavaScript sau a instala plugin-uri WordPress.

Din fericire, puteți crea cu ușurință elemente de design JavaScript utilizând jQuery în WordPress. Puteți face acest lucru manual sau puteți utiliza un plugin pentru a accelera procesul.

În această postare, vă vom prezenta jQuery și vom discuta de ce ați dori să-l utilizați. Apoi, vă vom arăta două moduri de a adăuga scripturi jQuery personalizate pe site-ul dvs. WordPress și de a revizui câteva întrebări frecvente.

Ce este jQuery? (și de ce poate doriți să-l folosiți)

Înainte de a învăța cum să adăugați scripturi jQuery în WordPress, veți avea nevoie de o înțelegere de bază a jQuery în sine.

Pe scurt, jQuery este o bibliotecă JavaScript ușoară, open-source, care simplifică modul în care puteți scrie și utiliza acest limbaj de codare.

Vă permite să modificați și să îmbunătățiți cu ușurință temele și pluginurile WordPress folosind JavaScript. Această caracteristică poate fi extrem de utilă, deoarece JavaScript este esențial pentru multe funcții.

De exemplu, aveți nevoie de JavaScript pentru Ajax, gestionarea evenimentelor și transversală/manipulare DOM. Funcționalitatea Ajax, în special, este practică și populară. Dezvoltatorii web îl folosesc pentru a crea încărcare instantanee de căutare și filtrare avansată a produselor de comerț electronic.

O acțiune a utilizatorului, cum ar fi un clic sau o căutare, declanșează adesea aceste funcții JavaScript. De asemenea, aveți nevoie de jQuery pentru a crea funcții suplimentare la nivelul clientului, cum ar fi glisoare, ferestre pop-up lightbox și multe altele.

Este jQuery inclus în WordPress în mod implicit?

jQuery este o resursă atât de utilă și populară care este inclusă implicit în instalarea dvs. WordPress. Trebuie doar să știi cum să-l folosești! În secțiunile următoare, vă vom învăța cum să faceți acest lucru.

Ce trebuie să faceți înainte de a adăuga scripturi jQuery la WordPress

Vom explica în curând cum puteți adăuga scripturi jQuery în WordPress. Dar mai întâi, ar trebui să faceți câteva lucruri pentru a vă proteja site-ul înainte de a încerca să modificați fișierele de bază.

Cel mai important, este întotdeauna recomandat să creați o copie de rezervă a site-ului dvs. Acest lucru se datorează faptului că chiar și cea mai mică eroare de codare a fișierelor critice ale site-ului web poate face un rău grav. Când faceți copii de rezervă, vă puteți restabili cu ușurință site-ul la starea anterioară în caz de urgență.

Dacă nu sunteți sigur cum să faceți copii de rezervă pentru site-ul dvs. WordPress sau sunteți doar în căutarea unui instrument pentru a simplifica procesul, Jetpack VaultPress Backup este o opțiune excelentă.

Jetpack VaultPress Backup salvează automat fiecare modificare de pe site-ul dvs. Apoi puteți utiliza restaurări cu un singur clic pentru a vă recupera rapid conținutul. Jetpack vă permite chiar să vă restaurați site-ul din aplicația mobilă Jetpack. În plus, dacă întâmpinați probleme, puteți obține asistență de la cea mai bună asistență pentru clienți – Happiness Engineers!

Pentru a vă proteja și mai mult site-ul, merită să creați un site de organizare WordPress. Apoi, puteți testa modificările înainte de a le transmite live.

Cum să adăugați scripturi jQuery personalizate la WordPress

Acum că știți mai multe despre jQuery și vă pregătiți site-ul pentru schimbări majore, să discutăm două moduri de a adăuga scripturi jQuery personalizate la WordPress!

Metoda 1: Adăugați manual jQuery

În primul rând, vă vom arăta cum să adăugați manual jQuery la WordPress. Această metodă ar putea fi pentru dvs. dacă aveți ceva experiență de dezvoltare și doriți control deplin asupra procesului.

Merită să folosiți o temă copil, astfel încât orice modificări pe care le faceți să nu fie anulate atunci când actualizați tema.

Pasul 1: intrați în modul de compatibilitate

Unul dintre lucrurile grozave despre jQuery este că vă permite să utilizați câteva comenzi rapide familiare atunci când codați. Cel mai important, puteți folosi simbolul $ pentru a reprezenta jQuery. Acest lucru vă poate economisi mult timp, dar unele alte biblioteci folosesc această comandă rapidă pentru a reprezenta ceva diferit.

Prin urmare, veți dori să intrați în Modul de compatibilitate și să creați un alias unic pentru jQuery. În acest fel, veți evita conflictele cu alte biblioteci.

Puteți face acest lucru folosind următorul cod:

 <!-- Putting jQuery into no-conflict mode. --> http://prototype.js http://jquery.js <script> var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. $j(document).ready(function() {    $j( "div" ).hide(); }); // The $ variable now has the prototype meaning, which is a shortcut for // document.getElementById(). mainDiv below is a DOM element, not a jQuery object. window.onload = function() {    var mainDiv = $( "main" ); } </script>

Când acționați scriptul de mai sus, veți putea folosi $j ca scurtătură în loc de $. Alternativ, puteți utiliza următoarele:

 <!-- Loading jQuery before other libraries. --> http://jquery.js http://prototype.js <script> // Use full jQuery function name to reference jQuery. jQuery( document ).ready(function() {    jQuery( "div" ).hide(); }); // Use the $ variable as defined in prototype.js window.onload = function() {    var mainDiv = $( "main" ); }; </script>

Acest fragment de cod va preveni pur și simplu orice conflicte. Totuși, va trebui să utilizați numele complet, jQuery, în loc de o comandă rapidă.

Pasul 2: Creați un fișier script

Acum că aveți codul de care aveți nevoie, sunteți gata să creați un fișier script. Creați un fișier și dați-i un nume descriptiv, cum ar fi „my_new_script_file.js”. Asigurați-vă că utilizați extensia .js și adăugați fragmentul de cod de compatibilitate preferat în partea de sus.

În acest moment, va trebui să accesați și să editați fișierele tematice, care au dosarele lor unice în fișierele site-ului dvs.

Începeți prin a vă conecta la site-ul dvs. folosind managerul de fișiere sau un client FTP (File Transfer Protocol) gratuit, cum ar fi FileZilla.

Apoi, deschideți directorul rădăcină. Acesta ar trebui să fie numit ceva de genul public_html sau pur și simplu public . Alternativ, ar putea fi doar numele site-ului dvs. web.

Apoi, localizați folderul temei active și creați un nou subdosar. Numiți-o /js/ .  

În cele din urmă, adăugați noul fișier script în acest subdosar. Conținutul acestuia va diferi în funcție de caracteristica pe care încercați să o implementați.

Pasul 3: Adăugați un script jQuery în fișierul functions.php

Apoi, va trebui să localizați fișierul functions.php al temei. Atât temele părintelui, cât și cele ale copilului ar trebui să aibă una. Aici au loc toate personalizările manuale.

Deoarece JavaScript necesită punerea în coadă, va trebui să utilizați funcția wp_enqueue_script(). Codul tău ar putea arăta cam așa:

 function my_theme_scripts() {    wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Asigurați-vă că înlocuiți numele fișierului script unic și adăugați-l la functions.php . Acest lucru va spune fișierului dvs. temă să folosească fișierul script pe care l-ați creat la pasul anterior.

Metoda 2: Adăugați jQuery cu un plugin WordPress

După cum tocmai am văzut, adăugarea manuală a jQuery poate fi consumatoare de timp și poate fi puțin riscantă, mai ales dacă nu sunteți familiarizat cu editarea codului în WordPress. Deci, acum vă vom arăta cum să adăugați jQuery cu un plugin WordPress.

Pasul 1: Instalați un plugin jQuery

În primul rând, va trebui să alegeți un plugin jQuery. Două dintre cele mai populare opțiuni sunt CSS personalizat simplu și JS și Câmpuri personalizate avansate.

Pentru acest tutorial, vom folosi câmpuri personalizate avansate. Acest instrument vă ajută să creați caracteristici captivante, interactive, cu tipuri de blocuri personalizate.

Versiunea gratuită are o mulțime de tipuri de blocuri utile pentru adăugarea de elemente precum grupuri de butoane, Hărți Google, selectatori de culori, oEmbed și multe altele. Totuși, dacă doriți toate cele 30 de blocuri personalizate, va trebui să faceți upgrade la versiunea plătită a Câmpurilor personalizate avansate.

După ce ați selectat planul preferat, pur și simplu instalați și activați pluginul așa cum ați face de obicei. Adăugați orice cheie de licență în setările pluginului.

Pasul 2: creați un nou câmp personalizat

După ce ați instalat și activat pluginul, accesați Câmpuri personalizate → Adăugați nou .

Aici, va trebui să creați primul grup de câmpuri. Dați-i un titlu lângă Adăugați un grup de câmpuri nou . Apoi, faceți clic pe Salvare modificări .

Acum, puteți începe editarea noului câmp. Puteți extinde opțiunile făcând clic pe Editați sub etichetă.

Mai întâi, deschideți meniul drop-down pentru Field Type și selectați unul.

Apoi, completați Eticheta câmpului , Numele câmpului etc. Dacă continuați să derulați în jos, puteți modifica setări suplimentare, cum ar fi Reguli de locație și Prezentare .

În funcție de locația pe care o selectați, veți putea vedea acolo noul bloc personalizat. În Editorul de blocuri, puteți identifica blocul după eticheta pe care ați desemnat-o sub Eticheta câmpului .

Când ați terminat, faceți clic pe Salvare modificări . Puteți selecta butonul + Adaugă câmp și repeta acest proces. După aceea, pur și simplu mergeți la una dintre locațiile pe care le-ați ales pentru domeniul dvs. și începeți să o personalizați!

Cum să amâni jQuery în WordPress

După cum am discutat, există o mulțime de motive pentru a utiliza JavaScript și jQuery în WordPress. De fapt, ele sunt cruciale pentru anumite funcții interactive pe care mulți utilizatori le consideră de la sine înțelese.

Dar dezavantajul este că aceste elemente sofisticate din partea clientului ar putea încetini site-ul dvs. Deci, poate doriți să amânați automat JavaScript (și, prin extensie, jQuery) atunci când site-ul dvs. WordPress se încarcă.

Prin amânarea JavaScript, toate elementele principale de pe site-ul dvs. se vor încărca înaintea funcțiilor JavaScript mai puțin critice. Desigur, vizitatorii site-ului dvs. probabil nu vor observa acest lucru, dar probabil că le va îmbunătăți experiența utilizatorului (UX), deoarece pagina va părea să se încarce mai repede.

Dacă doriți să amânați automat jQuery pe site-ul dvs., puteți utiliza Jetpack Boost pentru a face acest lucru.

Acest plugin poate îmbunătăți drastic performanța generală a site-ului dvs. Ca rezultat, veți putea menține toate funcțiile JavaScript preferate fără a compromite viteza paginii.

Pe lângă amânarea JavaScript neesențial, Jetpack Boost poate optimiza încărcarea CSS și poate aplica încărcare leneșă a imaginilor (printre alte optimizări ale performanței). Folosind acest instrument, vă puteți îmbunătăți scorurile Core Web Vitals și puteți spori vizibilitatea site-ului dvs. în rezultatele căutării.

Întrebări frecvente despre jQuery în WordPress

Sperăm că v-am clarificat majoritatea îndoielilor despre jQuery în WordPress. Totuși, dacă am omis ceva, iată câteva întrebări frecvente!

Puteți schimba versiunea jQuery folosită în WordPress?

Uneori, temele și pluginurile pot înlocui sau adăuga versiuni jQuery pe site-ul dvs. Prin urmare, este important să vă asigurați că versiunea dvs. este întotdeauna actualizată. Puteți face acest lucru cu ușurință folosind un plugin precum jQuery Updater sau Version Control for jQuery.

Unde pot verifica versiunea jQuery pe site-ul meu WordPress?

De obicei, puteți verifica versiunea jQuery într-un browser. În Google Chrome, pur și simplu navigați la site-ul dvs. de pe front-end. Apoi, accesați Vizualizare → Dezvoltator → Consola JavaScript.

Introduceți jQuery.fn.jquery, iar consola ar trebui să returneze versiunea actuală a site-ului dvs.

Puteți elimina complet jQuery din WordPress?

Răspunsul scurt este: da. Dacă descoperiți că utilizarea JavaScript pe site-ul dvs. are un impact negativ asupra performanței acestuia, vă recomandăm să eliminați sau să „renunțați” jQuery.

Pentru a face acest lucru, pur și simplu adăugați următorul cod în fișierul functions.php :

 // Remove jQuery function vpsb_remove_jquery() {    if (!is_admin()) {        wp_deregister_script('jquery');        wp_register_script('jquery', false);    } } add_action('init', 'vpsb_remove_jquery');

Rețineți că ar trebui să eliminați complet jQuery de pe site-ul dvs. numai dacă vă încetinește drastic paginile. Totuși, probabil că acest lucru nu se va întâmpla, deoarece jQuery optimizează deja codul JavaScript mai greu.

Dacă viteza site-ului dvs. s-a deteriorat după adăugarea jQuery, o alternativă mai bună ar fi să utilizați o soluție precum Jetpack Boost. Poate amâna JavaScript neesențial.

Puteți înlocui jQuery cu JavaScript vanilla?

Este posibil să înlocuiți jQuery cu JavaScript vanilla. Dar, s-ar putea dovedi o provocare dacă nu aveți prea multă experiență în dezvoltare. Deci, ar trebui să luați în considerare angajarea unui dezvoltator dacă trebuie să faceți acest lucru.

Încă o dată, merită remarcat faptul că înlocuirea jQuery cu JavaScript vanilla este probabil inutilă, deoarece jQuery oferă deja cod JavaScript optim. De cele mai multe ori, efectele minore de performanță ale jQuery merită de obicei problemele, iar amânarea este de obicei o opțiune mai bună.

Dacă decideți să mergeți pe această cale, merită să consultați acest ghid pentru adăugarea JavaScript la WordPress. Vă poate ajuta cu procesul.

Utilizarea jQuery în WordPress

Folosirea JavaScript complex pentru funcțiile atractive de pe site-ul dvs. poate îmbunătăți drastic UX-ul și vă poate avansa obiectivele. Din păcate, este posibil să nu aveți timpul sau abilitățile de dezvoltare pentru a crea aceste elemente interactive de la zero. Vestea bună este că puteți utiliza scripturi jQuery pentru a ușura acest proces.

Pentru a recapitula, există două moduri în care puteți adăuga jQuery la WordPress. În primul rând, puteți face acest lucru manual, intrând în Modul de compatibilitate și creând un fișier script. Apoi, adăugați noul script în fișierul functions.php . Alternativ, puteți utiliza un plugin precum Advanced Custom Fields pentru a accelera procesul și a elimina necesitatea codării manuale.

Când utilizați jQuery pentru a adăuga elemente de design sofisticate site-ului dvs., puteți îmbunătăți UX-ul și vă puteți impresiona vizitatorii. Dar mai multe funcții interactive ar putea dăuna performanței paginilor dvs. web. Din fericire, Jetpack Boost poate ajuta la optimizarea vitezei site-ului dvs.