La guida completa all'utilizzo corretto di JavaScript con WordPress

Ricordo di aver pensato: "A cosa diamine serve JavaScript, quando abbiamo Flash?" quando avevo quattordici anni. Anche se ricordo ancora quanto mi piacesse scrivere codice con ActionScript 2.0, ho visto quanto si può raggiungere con JavaScript e se ne sono innamorati. Non sono ancora un esperto di JavaScript (ancora), ma posso dire che ho finito con Flash per molto tempo.

Quando si tratta di WordPress, la più grande piattaforma di blogging e sistema di gestione dei contenuti in tutto il mondo, JavaScript lo è - ovviamente - molto utile per molte cose: cursori di contenuti, gallerie di lightbox, carrelli della spesa chiari, elementi dell'interfaccia utente come schede o fisarmoniche ... tu lo chiami. Ma esattamente come dovremmo usare JavaScript con WordPress?

Ritornare o echeggiare un mucchio di HTML copione gli elementi sono un modo per farlo - ed è così sbagliato. In questo tutorial, vedremo come enqueue File JavaScript all'interno delle nostre pagine e come trasferire dati traducibili nel codice JavaScript.

I due problemi durante l'utilizzo di JavaScript nei progetti WordPress

Ci sono fondamentalmente due problemi importanti che potresti incontrare se si iniettano i file JavaScript direttamente in WordPress con il codice HTML:

Codice duplicato sulla stessa pagina: Supponiamo tu abbia creato un plugin per WordPress e devi includere jQuery. tu eco il proprio copione tag nella e funziona! Ma cosa succede se un altro plugin vuole usare anche jQuery - come farebbe a sapere che jQuery è già caricato nel ? Non lo sarebbe, e anche se l'altro plugin include jQuery il modo giusto, la pagina sarebbe ancora hai due istanze di jQuery, perché non lo sei.
Problemi con la traduzione: Supponiamo che tu stia creando un plug-in per galleria lightbox e devi passare stringhe come "Avanti", "Precedente" e "Immagine X di Y". Come si fa senza echoing inline JavaScript in ?

Il modo giusto per usare JavaScript con WordPress

La soluzione al primo problema è semplicemente "registrare" e "accodare" i file JS con le due funzioni principali di WordPress: wp_register_script () e wp_enqueue_script (). La soluzione del secondo problema è ancora più semplice: il nucleo wp_localize_script () la funzione ti consente di trasferire dati traducibili nel tuo codice JS.

Registrazione di file JavaScript

Prima di poter "accodare" i file JavaScript, devi prima "registrarli". E questo è fatto semplicemente usando una funzione chiamata wp_register_script ():

Alcune note sui parametri:

Nome (obbligatorio, stringa): Il nome dello script. Puoi scegliere qualsiasi nome tu voglia, a condizione che non sia usato da un altro script.
URL (obbligatorio, stringa): L'URL dello script. Non c'è bisogno di spiegarlo, vero? :)
Dipendenze (opzionale, array): Il nome (i) di altri script da cui dipende il nostro script. Ad esempio, se lo script dipende da jQuery, sarà necessario caricarlo dopo jQuery. In questo caso, dovresti usare array ('jquery') per questo parametro.
Versione (facoltativa, stringa): Il numero di versione per il tuo script. Puoi scegliere tra fornire una stringa, impostando il parametro su nullo o lasciandolo vuoto. Se lo si imposta su string, verrà aggiunto al codice di output my-script.js? ver = 1.2. Se lasci il parametro vuoto, la versione della tua installazione di WordPress verrà aggiunta come numero di versione. Se lo si imposta nullo, nulla verrà aggiunto.
Carica nel piè di pagina (facoltativo, booleano): Quando accodate questo script registrato, questo verrà caricato nel sezione. Ma se si imposta questo parametro su vero, verrà caricato prima della chiusura etichetta.

Puoi anche "annullare la registrazione" degli script che sono già registrati dal core o da altri plugin con il wp_deregister_script () funzione. Accetta solo a 'nome' parametro, che fornisci il nome dello script da "annullare la registrazione". Ovviamente.

Ci sono un sacco di script sul codice WordPress che sono già registrati nel nucleo. Sebbene, dovresti ricontrollare l'elenco per la versione corrente di WordPress, poiché si riferisce a WordPress versione 3.3 e potrebbe non essere aggiornato.

Accodamento di file JavaScript

È possibile registrare uno script ma ciò non significa che verrà caricato automaticamente. Dopo aver registrato i tuoi script, dovresti "accodarli" con il wp_enqueue_script () funzione:

Alcune note sui parametri:

Nome (obbligatorio, stringa): Il nome dello script.
URL (facoltativo, stringa): L'URL dello script. Come puoi vedere, questa volta il parametro URL è opzionale perché se hai già registrato la sceneggiatura, puoi solo fornire il nome e sei a posto. Ma se non hai registrato il tuo script, devi fornire un URL per questo parametro.
Dipendenze (opzionale, array): Il nome (i) di altri script da cui dipende il nostro script.
Versione (facoltativa, stringa): Il numero di versione per il tuo script.
Caricare nel piè di pagina (facoltativo, booleano): Se impostato su vero, lo script verrà caricato poco prima chiude.

Puoi anche "dequeue" gli script con il wp_dequeue_script () funzione. Simile al wp_deregister_script () funzione, accetta solo a 'nome' parametro.

Puoi controllare lo "stato" di uno script con il wp_script_is () funzione. Ad esempio, se vuoi controllare semia-script'è accodato, basta usare wp_script_is ('my-script', 'coda') in un Se dichiarazione.

Hook per accodare i tuoi script

Il modo giusto per accodare i tuoi script (e anche gli stili) sta usando i seguenti hook:

wp_enqueue_scripts - Questo acclude script nella parte anteriore del tuo sito web.
admin_enqueue_scripts - Questo acclude script nel back-end del tuo sito web.
login_enqueue_scripts - Questo accoda gli script nella schermata di accesso.

A causa di problemi di compatibilità, tu non deve usa gli ami chiamati admin_print_scripts o admin_print_styles.

Per ulteriori informazioni sull'inclusione di JavaScript (e CSS!) Nei tuoi temi e plug-in, puoi fare riferimento a Come includere JavaScript e CSS nei temi e plug-in di WordPress di Japh Thomson su Wptuts+.

Passaggio di dati traducibili all'interno di JavaScript

Quando si parla di localizzazione, JavaScript è sempre un problema con WordPress ... perché così tante persone non conoscono la bella funzione chiamata wp_localize_script ():

  __ ('Successivo', 'mio-script'), 'prevItem' => __ ('Precedente', 'mio-script'), 'imageTitle' => __ ('Immagine% d di% d', 'mio- script ')); wp_localize_script ('name-of-the-script', // (richiesto) il nome dello script, 'my-script' per esempio 'nameOfTheObject', // (richiesto) il nome dello script, 'my-script' per esempio $ l10n_data // (richiesto) i dati da passare, che possono essere tradotti con la funzione __ ()); ?>

Dopo aver registrato, accodato e localizzato lo script, puoi passare la variabile localizzata nello script usando il nome dell'oggetto e i nomi dei dati, come alert (nameOfTheObject.prevItem);!

Puoi fare riferimento all'articolo di Pipping Williamson per un'analisi più approfondita.

Avvolgendo

C'è un motivo per cui WordPress è il più grande sistema di gestione dei contenuti del mondo: il suo potere deriva dalla sua flessibilità. E credo che questo tutorial provi (ancora una volta) quanto sia flessibile.

Questo tutorial copre praticamente ciò che WordPress offre sull'utilizzo di JavaScript per i nostri progetti. Hai altri suggerimenti o tecniche su JavaScript e WordPress? Parlaci di questo!

Codice