Ghidul complet pentru utilizarea corectă a JavaScript cu WordPress

Îmi amintesc că m-am gândit: "Pentru ce naiba avem nevoie de JavaScript, când avem Flash?" când aveam paisprezece ani. Deși încă îmi amintesc cum mi-a plăcut chestiile de codare cu ActionScript 2.0 în acel moment, am văzut cât de mult se poate realiza cu JavaScript și că sa îndrăgit de el. Eu nu sunt un expert pe JavaScript (încă), dar pot spune că am terminat și terminat cu Flash pentru o lungă perioadă de timp.

Când vine vorba de WordPress, cea mai mare platformă de blogging și sistemul de management al conținutului la nivel mondial, JavaScript este - desigur - foarte utile pentru multe lucruri: glisante de conținut, galerii cu casete luminoase, cărucioare de cumpărături, elemente de interfață UI, cum ar fi file sau acordeoane ... îl numiți. Dar cum ar trebui să folosim JavaScript cu WordPress?

Revenind sau repetând o grămadă de cod HTML scenariu elemente este o modalitate de a face acest lucru - și este gresit. În acest tutorial, vom vedea cum să Puneți în coadă Fișierele JavaScript din paginile noastre și modul de transmitere a datelor translatabile codului JavaScript.

Cele două probleme în timp ce utilizați JavaScript în proiectele WordPress

Există în esență două probleme importante pe care le puteți întâlni dacă introduceți fișiere JavaScript direct în WordPress cu cod HTML:

Cod duplicat pe aceeași pagină: Să presupunem că ați creat un plugin WordPress și trebuie să includeți jQuery. Tu ecou buna scenariu etichetă în și funcționează! Dar dacă un alt plugin dorește să utilizeze și jQuery - cum ar ști că jQuery este deja încărcat în ? Nu ar fi, și chiar dacă celălalt plugin include jQuery calea cea buna, pagina ar fi încă aveți două instanțe de jQuery, pentru că nu sunteți.
Probleme cu traducerea: Să presupunem că creați un plugin pentru galerie cu lightbox și trebuie să treci șiruri precum "Next", "Previous" și "Image X of Y". Cum o faci fără a relua JavaScript inline în ?

Calea cea bună de a folosi JavaScript cu WordPress

Soluția la prima problemă este pur și simplu "înregistrarea" și "enqueueing" fișierele JS cu cele două funcții de bază ale WordPress: wp_register_script () și wp_enqueue_script (). Soluția celei de-a doua probleme este chiar mai ușoară: nucleul wp_localize_script () vă permite să transmiteți date translatabile în codul dvs. JS.

Înregistrarea fișierelor JavaScript

Înainte de a putea "încorpora" fișierele JavaScript, trebuie să le "înregistrați" mai întâi. Și asta se face simplu folosind o funcție numită wp_register_script ():

Unele note despre parametrii:

Nume (obligatoriu, șir): Numele scenariului. Puteți alege orice nume doriți, cu condiția să nu fie folosit de alt script.
URL (obligatoriu, șir): Adresa URL a scriptului. Nu e nevoie să explici asta, nu? :)
Dependențe (opțional, matrice): Numele sau numele altor script-uri de care depinde scriptul nostru. De exemplu, dacă scriptul depinde de jQuery, va trebui încărcat după jQuery. În acest caz, ar trebui să utilizați array ("jquery") pentru acest parametru.
Versiune (opțional, șir): Numărul versiunii pentru scriptul dvs. Puteți alege între furnizarea unui șir, setarea parametrului la nul sau lăsându-l gol. Dacă îl setați la șir, acesta va fi adăugat la codul de ieșire cum ar fi mi-script.js? ver = 1.2. Dacă lăsați parametrul gol, versiunea instalării dvs. WordPress va fi adăugată ca număr de versiune. Dacă l-ați setat nul, nimic nu va fi adăugat.
Încărcați în subsol (opțional, boolean): Când introduceți scriptul înregistrat, acesta va fi încărcat în secțiune. Dar dacă ați setat acest parametru Adevărat, acesta va fi încărcat chiar înainte de închidere etichetă.

De asemenea, puteți să "deregistreze" scenariile care sunt deja înregistrate de core sau de alte pluginuri cu wp_deregister_script () funcţie. Acceptă doar a 'Nume' parametru, pe care le furnizați numele scriptului pentru a fi "deregistrat". Evident.

Există o grămadă de scripturi pe Codex-ul WordPress care sunt deja înregistrate în miez. Deși trebuie să verificați lista pentru versiunea curentă a WordPress, deoarece se referă la WordPress versiunea 3.3 și ar putea să fie depășită.

Introducerea fișierelor JavaScript

Puteți înregistra un script, dar asta nu înseamnă că va fi încărcat automat. După înregistrarea scenariilor, ar trebui să le "enqueue" cu wp_enqueue_script () funcţie:

Unele note despre parametrii:

Nume (obligatoriu, șir): Numele scenariului.
URL (opțional, șir): Adresa URL a scriptului. După cum puteți vedea, de data aceasta parametrul URL este facultativ pentru că dacă ați înregistrat deja scriptul, puteți să-i furnizați numele și sunteți bine să mergeți. Dar dacă nu v-ați înregistrat scriptul, trebuie să furnizați o adresă URL pentru acest parametru.
Dependențe (opțional, matrice): Numele sau numele altor script-uri de care depinde scriptul nostru.
Versiune (opțional, șir): Numărul versiunii pentru scriptul dvs..
Încărcați în subsol (opțional, boolean): Dacă este setat la Adevărat, scriptul va fi încărcat chiar înainte închide.

Puteți, de asemenea, să "dequeuezi" scripturile cu wp_dequeue_script () funcţie. Similar cu wp_deregister_script () funcția, acceptă numai a 'Nume' parametru.

Puteți verifica "starea" unui script cu wp_script_is () funcţie. De exemplu, dacă doriți să verificați dacă "mi-script"este enqueued, pur și simplu utilizați wp_script_is ('my-script', 'queue') într-un dacă afirmație.

Cârlige pentru a încorpora scripturile tale

Calea potrivita pentru a incripta scripturile (si stilurile, de asemenea) foloseste cârligele de mai jos:

wp_enqueue_scripts - Acesta încadrează scripturi în partea din față a site-ului dvs. web.
admin_enqueue_scripts - Acesta încalcă scripturile din spatele paginii dvs. web.
login_enqueue_scripts - Acesta încadrează scripturile în ecranul de conectare.

Din cauza problemelor de compatibilitate, voi nu trebuie utilizați cârligele numite admin_print_scripts sau admin_print_styles.

Pentru mai multe informații despre includerea JavaScript (și CSS!) În temele și pluginurile dvs., vă puteți referi la Cum să includem JavaScript și CSS în WordPress Teme și pluginuri de Japh Thomson pe Wptuts+.

Transmiterea datelor trasabile în interiorul JavaScript

Când vine vorba de localizare, JavaScript este întotdeauna o problemă cu WordPress ... pentru că atât de mulți oameni nu cunosc funcția puțin îngrijită numită wp_localize_script ():

  __ ('Următorul', 'meu-script'), 'prevItem' => __ (' script)); wp_localize_script ('name-of-the-script', // (este necesar) numele scriptului, 'my-script', de exemplu 'nameOfTheObject', // scriptul 'my- script' de exemplu, $ l10n_data // (este necesar) datele care trebuie transmise, care pot fi translatabile cu funcția __ ()); ?>

După înregistrare, încorporarea și localizarea scriptului, puteți trece variabila localizată în script folosind numele obiectului și numele datelor, cum ar fi alertă (numeOfTheObject.prevItem);!

Puteți consulta articolul lui Pipping Williamson pentru o analiză mai amănunțită.

Înfășurarea în sus

Există un motiv pentru care WordPress este cel mai mare sistem de management al conținutului din lume: puterea sa provine din flexibilitatea sa. Și cred că acest tutorial dovedește (încă o dată) cât de flexibil este.

Acest tutorial acoperă destul de mult ceea ce WordPress oferă despre utilizarea JavaScript pentru proiectele noastre. Aveți mai multe sfaturi sau tehnici despre JavaScript și WordPress? Spune-ne despre asta!

Cod