Vrei să stăpânești cum să adaugi cod jQuery pe WordPress? Deci, continuați să citiți pentru a afla mai multe.

În ciuda faptului că WordPress a fost disponibil de ceva vreme și adăugarea de scripturi și plugin-uri tematice a fost de asemenea o perioadă, există încă o confuzie cu privire la metoda de utilizat. utilizați pentru a adăuga scripturi pe WordPress.

Deci vom încerca să clarificăm lucrurile.

Deoarece jQuery este cel mai utilizat cadru JavaScript, vă vom arăta cum să îl adăugați la o temă sau WordPress plug-in.

Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează a WordPress blog în 7 pași et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs. 

Apoi înapoi la motivul pentru care suntem aici.

Mod de compatibilitate JQuery

Înainte de a începe să adăugăm scripturi pe WordPress, să explorăm modul de compatibilitate al jQuery. WordPress vine cu o copie de jQuery, pe care o puteți folosi cu codul dvs. Atunci când WordPress jQuery este încărcat, acesta utilizează modul de compatibilitate, care este un mecanism pentru a evita conflictele cu alte biblioteci. cum să adăugați cod jQuery pe WordPress

Află dacă el Ar trebui eliminat jQuery din temele și pluginurile dvs. WordPress ?

Aceasta înseamnă că nu puteți utiliza semnul dolarului direct așa cum s-ar face în alte proiecte. Când scrieți jQuery pe WordPress, trebuie să utilizați în schimb jQuery.

Aruncați o privire la codul de mai jos pentru a vedea ce vreau să spun:

/ * Mod normal * / $ ('. Hideable'). Activat ('click', funcție () {$ (aceasta) .hide ();}) / * Mod de compatibilitate * / jQuery ('. Hideable'). Activat („faceți clic”, funcție () {jQuery (this) .hide ();})

Ceea ce trebuie să știți este că, cu câteva modificări, puteți utiliza din nou semnul dolarului. Utilizarea de fiecare dată „jQuery” pe tot codul dvs. va complica mult scrierea.

Check out 10 editori de cod pentru dezvoltatori WordPress

Doar pentru a recaperi, dacă știți jQuery, semnul $ este doar un alias pentru jQuery (), apoi un alias pentru o funcție. Sintaxa de bază este: $ (Selector) .action () :

  • Un semn dolar pentru a defini jQuery
  • Un (selector) pentru a „găsi” elemente HTML
  • O acțiune jQuery () pentru a efectua aceste elemente

Dacă încărcați scriptul în subsol, veți putea înfășura codul într-o funcție anonimă. Iată cum se face:

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

Dacă doriți să adăugați scriptul în antet (ceea ce ar trebui să evitați dacă este posibilÎl puteți înfășura într-o funcție care se execută când documentul este gata.

Descoperiți de asemenea Cum se adaugă cu ușurință cod pe WordPress fără a vă rupe site-ul

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

Cum să vă legați scripturile la jQuery

Acum că puteți scrie cod jQuery valid pe WordPress, vom conecta lucrările noastre la site-ul nostru web. În WordPress, procesul se numește „ enqueueing '(sistem de coada). Pentru un site HTML normal, ar trebui să folosim etichetascenariu> pentru a adăuga scripturi.

WordPress poate face același lucru, dar vom folosi caracteristicile speciale ale WordPress pentru a realiza acest lucru. În acest fel, WordPress gestionează toate dependențele noastre pentru noi.

Dacă lucrați la o temă, puteți utiliza funcția wp_enqueue_script () în fișierul dvs. functions.php fişier. Iată cum o puteți face:

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

Funcția ia cinci argumente. Primul pe care îl puteți folosi pentru a face referire la script, al doilea este locația fișierului script, al treilea parametru este o matrice de dependențe.

Am adăugat jQuery ca dependență, deoarece scriptul îl folosește. Dacă creați un script care depinde de „mi-stră-script Trebuie să-l adăugați la lista de dependențe, astfel încât WordPress să știe ce fișiere trebuie să se încarce mai întâi.

Descoperă și tu Cum de a încărca JavaScript pe WordPress

Al patrulea parametru este un număr de versiune, iar al cincilea permite WordPress să știe unde să pună scriptul. În mod implicit, scripturile vor fi încărcate în antet, ceea ce este o practică proastă, deoarece încetinește încărcarea paginii site-ului dvs. web (browserele opresc încărcarea tuturor paginilor, ori de câte ori este blocat est rencontré). Trebuie să încărcați toate scripturile în subsol, dacă este posibil, făcând al cincilea parametru " adevărat ".

Cum se adaugă un script pe tabloul de bord

adăugați corect cod jQuery pe WordPressPuteți adăuga, de asemenea, scripturi pe tablou de bord. Funcțiile utilizate sunt exact aceleași, trebuie doar să utilizați un „ cârlig „diferit. Aruncați o privire la exemplul de mai jos:

function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

În loc să folosești wp_enqueue_scripts trebuie să folosim admin_enqueue_scripts, Și asta e tot !

Utilizarea etichetelor condiționale

Utilizați etichete condiționale, astfel încât să vă încărcați scripturile numai atunci când este necesar. Acesta este cel mai adesea folosit pe tabloul de bord, unde doriți să utilizați un script numai pe o anumită pagină. Acest lucru economisește lățimea de bandă și timpul de procesare, ceea ce înseamnă timpi de încărcare mai rapide pentru site-ul dvs. web.

Descoperiți și noi 10 plugin-uri WordPress pentru a îmbunătăți viteza de încărcare a blogului dvs.

Uită-te la documentația admin_enqueue_scripts în codul WordPress pentru mai multe informații.

Descoperiți și câteva plugin-uri premium WordPress  

Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.

Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.

1. Harta interactivă a lumii

Hărți interactive ale lumii este o WordPress plug-in care vă ajută să creați câte hărți doriți, cu marcatoare interactive și colorate, continente, țări sau regiuni.

Hărți interactive ale lumii

Este complet compatibil cu noua versiune de WordPress și Compozitor Visual. Datorită acestui plugin, puteți afișa mai multe tipuri de regiuni, cum ar fi: o hartă a întregii lumi, un continent sau un subcontinent (Africa, Europa, Americi, Asia, Oceania și toate subcontinentele lor), o țară, o țară împărțită după regiunile sale, un stat al Statelor Unite, Statele Unite divizate pe zone metropolitane, un stat al Statelor Unite divizat pe zone metropolitane.

Descarca | Demo | web hosting

2. Formular de contact AJAX cu Urmărire

Ce WordPress plug-in vă permite să adăugați cu ușurință formulare de contact sau de comentarii la dvs WordPress blog. Vine cu un manager de setări care poate fi accesat direct prin tabloul de bord WordPress.wp-ajax-contact-form-tracking-plugin-WordPress-to-siguranță

Principalele sale caracteristici sunt printre altele: a fpentru e-mail, sprijinul CAPTCHA matematica pentru formulare, personalizare și configurare prin tabloul de bord WordPress, posibilitatea ddefiniți un autoresponder personalizat, suport pentru CSS personalizat și multe altele

DescarcaDemoweb hosting 

3. PayPal Gateway de plată standard pentru formularele ninja

PayPal Standard Gateway pentru Ninja Forms vă permite să creați formulare care se integrează perfect cu gateway-ul de plăți PayPal. 

Gateway de plată standard Paypal pentru formularele ninja

Veți putea crea formulare de comandă personalizate și puteți primi plăți utilizând conturi Paypal standard. Principalele sale caracteristici sunt: ​​integrare ușoară și rapidă, integrare IPN, capacitatea de a activa / dezactiva gateway-ul PayPal pe formulare individuale, suport pentru plăți regulate etc.

Descarca | Demo |  web hosting

Alte resurse recomandate

De asemenea, vă invităm să consultați resursele de mai jos pentru a merge mai departe în controlul și controlul site-ului și blogului dvs.

Concluzie

Aici ! Gata pentru acest tutorial. Sper că acum știi cum să adaugi script la WordPress. simte-te liber sa împărtășiți sfatul prietenilor dvs. de pe rețelele de socializare.

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress.

Dar, între timp, spuneți-ne despre dvs. comentarii și sugestii în secțiunea dedicată.

...