Javascript di WordPress: una guida per principianti

Se chiedi a un milione di sviluppatori web cos'è JavaScript, riceverai un milione di risposte diverse. Praticamente tutto ciò che è interattivo sul web viene fatto utilizzando JavaScript.

Essendo un moderno sistema di gestione dei contenuti (CMS), WordPress e molti dei suoi plugin si affidano in parte a JavaScript per portare a termine il lavoro. Contrariamente a quanto potrebbe sembrare, JavaScript non ha alcuna relazione con il linguaggio di programmazione Java. Si chiama così solo per scopi di marketing.

Immergiamoci in tutto ciò che devi sapere per sfruttare la potenza combinata di JavaScript e WordPress.

Che cos'è JavaScript?

Molto tempo fa, Internet si basava esclusivamente su HTML e CSS. Questa combinazione consente uno stile molto semplice dei contenuti. Tuttavia, si poteva fare ben poco per rendere i contenuti dinamici e la creazione di applicazioni web era fuori discussione.

Poiché i server erano molto più costosi da mantenere, gli sviluppatori hanno deciso di scrivere JavaScript per operare sulla macchina client. Scritto in modo simile ad altri linguaggi di programmazione funzionale, JavaScript può acquisire dati in funzioni, elaborarli e generare dati.

I browser Web hanno un motore JavaScript che sa come eseguire il codice JavaScript. Ad esempio, il motore JavaScript in Chrome è v8, mentre il motore JavaScript FireFox è SpiderMonkey. Per questo motivo Javascript si affida ai browser per “capire” come interpretare, gestire e manipolare la visualizzazione dei dati.

Gli aspetti tecnici di JavaScript

Interessato a saperne di più sulla tecnologia alla base di JavaScript? Ci sono alcuni importanti fattori di differenziazione da conoscere per coloro che hanno esperienza in altri tipi di sviluppo. Innanzitutto, JavaScript è indipendente dal tipo come PHP. Ciò significa che le sue variabili non hanno un tipo definito e qualsiasi variabile può essere assegnata a quasi tutti i tipi di valore.

La maggior parte dei linguaggi moderni sono "orientati agli oggetti", nel senso che si basano su "classi" riutilizzabili che rappresentano un oggetto letterale. Il più vicino che JavaScript arriva a questo è attraverso i "prototipi". Queste strutture di dati possono essere riutilizzate e possono contenere determinati valori, ma la loro funzionalità e usabilità sono molto più limitate rispetto ai linguaggi costruiti attorno al concetto orientato agli oggetti, come Java.

Cosa fa JavaScript?

A causa dell'enorme supporto della comunità e degli investimenti di grandi aziende come Facebook e persino Netflix, JavaScript può fare molto di più che funzionare all'interno dei browser web. JavaScript può fare qualcosa di semplice come catturare l'anno in corso da visualizzare accanto al simbolo del copyright su un sito Web e lavori più complessi come eseguire la maggior parte dell'elaborazione per un editor di immagini online.

In poche parole, JavaScript fa quasi tutto ciò che lo sviluppatore vuole che faccia sulla macchina del cliente. JavaScript viene memorizzato nella cache locale sul computer client quando il client visita un sito che lo utilizza.

Sebbene i dati sensibili debbano essere gestiti sul server, molte applicazioni basate sul Web utilizzano pesantemente JavaScript per sfruttare la potenza di elaborazione della macchina client. Ora che siamo nell'era degli infiniti "framework" che rendono molto più veloce lo sviluppo di vari tipi di contenuti, le possibilità sono infinite.

JavaScript è sicuro?

Come la maggior parte dei protocolli e dei linguaggi precedenti, JavaScript non è stato inizialmente creato pensando alla sicurezza. Questa è una cosa perfettamente ragionevole da chiedersi, data la diffusione degli attacchi informatici.

Esistono estensioni del browser come "NoScript" che bloccano semplicemente l'esecuzione di tutto il codice JavaScript. Se segui la regola generale del Web e non visiti siti non attendibili, va bene consentire l'esecuzione di JavaScript.

Poiché è un linguaggio di programmazione, ovviamente gli utenti malintenzionati possono abusarne per attaccare il tuo computer. I browser moderni rileveranno automaticamente la maggior parte di questi attacchi. Se sei preoccupato per la sicurezza con JavaScript di WordPress, puoi stare tranquillo con un plug-in di sicurezza di WordPress che mette la maggior parte degli aspetti della sicurezza del sito web sul pilota automatico.

Due principali tipi di attacco JavaScript

L'adagio "tieni i tuoi amici vicini e i tuoi nemici più vicini" è pertinente quando si tratta di sviluppo e sicurezza. È molto importante capire come i cattivi sfruttano JavaScript in modo da poter contrastare i loro sforzi!

Scripting tra siti (XSS)

Lo scripting cross-site (XSS) è un tipo di attacco malware che viene eseguito sfruttando le vulnerabilità cross-site su qualsiasi sito WordPress. In effetti, è il modo più comune per hackerare i siti WordPress perché ci sono così tanti plugin WordPress che hanno vulnerabilità XSS.

Un attacco di scripting cross-site viene utilizzato se una pagina consente l'invio di dati su di essa. In questo attacco, l'utente malintenzionato inserisce codice JavaScript nei dati da inviare su una pagina accessibile al pubblico.

Se non sono in atto misure di mitigazione, questo codice dannoso esegue effettivamente il codice JavaScript sul computer di chiunque visiti quella pagina. Ecco perché è importante “sanificare” l'input. Ciò significa che, prima che venga pubblicato, rimuovi elementi come parentesi e virgolette che renderebbero il codice inutile.

Falsificazione di richieste tra siti (CSRF)

Questo tipo di attacco sfrutta le pagine web a cui potresti aver già effettuato l'accesso. Lo scenario più comune prevede l'accesso alla tua banca.

Supponiamo che tu abbia effettuato l'accesso al tuo conto bancario ma poi decidi di andare su un sito Web torrent che ha CSRF pronto per l'uso. CSRF, in assenza di mitigazioni del browser, adotta lo schema di collegamento per eseguire operazioni come i bonifici bancari per tutte le principali banche, quindi li esegue sul tuo computer in background.

Uno scenario realmente accaduto con un importante sito e una grande banca era che il link della banca per trasferire denaro fosse simile a: www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 per trasferire $1.000 su un conto numerato 12345 .

Alla banca, sembra che tu l'abbia richiesto e poiché la richiesta proviene dal tuo indirizzo IP, è difficile dimostrare che non l'hai avviata. Fortunatamente, la maggior parte dei browser moderni lo rileverà automaticamente e lo preverrà.

Posso usare JavaScript all'interno di WordPress?

Sì, puoi usare JavaScript quando sviluppi per WordPress. Tieni presente che WordPress è un sistema di gestione dei contenuti flessibile che ha due modalità di modifica. Uno di questi ti consente di modificare direttamente il codice e l'altro ti consente di utilizzare un editor simile a quello che potresti vedere su un elaboratore di testi, noto anche come editor "WYSIWYG". Nella versione più recente di WordPress, l'editor WYSIWYG si chiama Gutenberg.

Tieni presente che puoi anche utilizzare JavaScript quando sviluppi estensioni per WordPress. Mentre il lato server di WordPress è PHP, il lato client è quasi il 100% delle volte JavaScript.

Dovrei imparare JavaScript per WordPress?

La risposta a queste domande dipende da cosa intendi fare con WordPress. Se desideri solo alcune pagine statiche che generi utilizzando la piattaforma, probabilmente starai bene senza imparare JavaScript.

Il lato positivo è che è abbastanza facile iniziare con JavaScript e imparerai anche molto su come funzionano HTML e CSS. Tuttavia, oltre alla formazione su WordPress, ti consigliamo di lavorare sull'apprendimento di JavaScript se vuoi creare un sito dinamico e memorabile.

Un rapido avvertimento: se sei uno sviluppatore web alle prime armi, non aspettarti di padroneggiare JavaScript in pochi giorni. JavaScript è noto per avere messaggi di errore molto vaghi ed è spesso criticato per essere "codice spaghetti". Ciò significa che nel corso degli anni gli sviluppatori hanno accumulato molto codice senza organizzarlo correttamente. Inoltre, la maggior parte degli sviluppatori impara a programmare in framework che utilizzano JavaScript ma sono sintatticamente leggermente diversi.

Dovresti soprattutto investire tempo nell'apprendimento di JavaScript se sei un libero professionista o un'agenzia che gestisce i siti dei clienti. Sebbene ci siano strumenti di prim'ordine che ti consentono di gestire più siti WordPress, nessun plug-in può creare i siti per te!

Inoltre, se aspiri a diventare uno sviluppatore web, l'apprendimento di JavaScript è utile per queste carriere:

• Sviluppatore Front End
• Sviluppatore back-end
• Sviluppatore full-stack

Inoltre, l'apprendimento di JavaScript, insieme a HTML, CSS e PHP più avanzati, funge da solida base WP che probabilmente ridurrà i costi generali per te. Non dovrai più pagare appaltatori esterni, tagliando i tuoi profitti, per eseguire attività che in realtà potrebbero richiedere minuti per essere completate. Una volta padroneggiato JavaScript, puoi passare a framework popolari, come React e Angular, per creare applicazioni davvero uniche e reattive all'interno di WordPress.

Come scrivo JavaScript durante la codifica in WordPress?

Anche se aggiungere JavaScript a un sito WordPress non è così semplice come aggiungere CSS e HTML, non ci vorrà molto per iniziare. Ci sono due modi diversi per affrontarlo e ognuno ha uno scopo diverso.

Metodo 1: su ogni pagina

Se stai cercando di eseguire lo stesso script su ogni pagina del tuo sito WordPress, aggiungere manualmente il codice a ciascuna pagina sarebbe piuttosto noioso, per non dire altro. Il posto giusto per inserire JavaScript all'interno dell'HTML è all'interno dell'intestazione e del piè di pagina della pagina.

Ci sono alcuni plugin gratuiti che prenderanno il tuo JavaScript personalizzato e lo rilasceranno nell'intestazione e/o nel piè di pagina di ogni pagina del tuo sito WordPress. Gli amministratori di WordPress adorano questi plugin perché funzionano perfettamente con Google Analytics, assicurando che ogni pagina visitata venga conteggiata, contribuendo a migliorare il posizionamento SEO più velocemente.

Metodo 2: JavaScript diverso su ogni pagina

Supponiamo che tu stia eseguendo un sito WordPress che ha uno strumento diverso su ogni pagina che si basa su almeno una "libreria" per funzionare. Forzare il caricamento di tutto il tuo JavaScript su ogni singola pagina, specialmente quando non è necessario, rallenterà semplicemente l'accesso al tuo sito. Il buon senso ci dice che rallentare l'esperienza dei tuoi visitatori non è il modo migliore per conquistare il business!

Ci sono molti tutorial sul web che hanno metodi follemente complicati per eseguire questo processo. Anche se è vero che ciò può essere fatto apportando modifiche complesse all'interno del file functions.php, non è necessario adottare questo approccio a meno che non ti piacciano i mal di testa.

Invece, installa il plug-in Code Embed sul tuo sito. Ciò ti consentirà di aggiungere JavaScript e incorporarlo ovunque desideri all'interno della pagina.

Utilizzo del plug-in CodeEmbed

Dopo aver installato il plug-in Code Embed, vai su Opzioni schermo e seleziona la casella di controllo "Campi personalizzati". Questo ti permetterà di aggiungere il tuo JavaScript alla pagina.

Nella pagina di modifica, vedrai una casella che dice "Campi personalizzati", con un'opzione per "Inserisci nuovi" campi personalizzati. Fai clic su di esso e avrai caselle di testo vuote per inserire il nome del tuo codice JavaScript, nonché per il codice stesso.

Per evitare conflitti con i codici WordPress esistenti, devi iniziare il nome del tuo codice JavaScript con le lettere maiuscole "CODE". Qualcosa come "CODEtimer" andrebbe bene. Quindi aggiungerai il JavaScript effettivo nell'altra casella. Assicurati di includere i tag di apertura e chiusura dello script !

Al termine, fai clic sul pulsante che dice "Aggiungi campo personalizzato". Infine, identifica il punto della pagina in cui desideri che venga eseguito il codice JavaScript. Ad esempio, se il codice carica un timer, trova il punto della pagina in cui desideri inserire quel timer. Utilizzerai quindi la sintassi esatta [[CODEtimer]] per fare in modo che WordPress inserisca il tuo JavaScript lì, e il gioco è fatto!

Come faccio a includere i miei file JavaScript e CSS in WordPress?

Sebbene WordPress abbia temi incorporati, molti sviluppatori web preferiscono avere un design più unico e utilizzeranno il proprio CSS. Avrai anche bisogno di un modo per archiviare quei file JavaScript.

In questa parte, dovrai andare al tuo File Manager e individuare il file chiamato "functions.php". Nota che questo sarà nella cartella in cui si trova il tema di base per il tuo sito.

Aggiunta di CSS a functions.php

Una volta che sei nel file functions.php , segui questi passaggi:

1. Su una nuova riga, crea una funzione vuota aggiungendo la funzione codice
   addMyCSS() { #Compila in seguito }
2. "Registra" il tuo file CSS con WordPress utilizzando la funzione integrata chiamata wp_register_style nel passaggio successivo
3. Rimuovi il filler che abbiamo inserito nel codice e inserisci invece wp_register_style('name_of_css_style',plugins_url('file-location.css',__FILE__));
4. Ora abbiamo detto a WordPress come chiamare il nostro stile CSS e dove si trova. Ora è il momento di "accodare" lo stile, o dire a WordPress che siamo pronti per usarlo.
5. Rimanendo all'interno del blocco funzione addMyCSS , aggiungi il codice wp_enqueue_style('name_of_css_style'); proprio sotto il codice che abbiamo inserito nell'ultimo passaggio.
6. C'è un ultimo passaggio, ma prima assicurati di essere FUORI dall'intera funzione che abbiamo creato e nella parte generale del file PHP.
7. Al di fuori di addMyCSS , aggiungi semplicemente la seguente riga: add_action('wp_enqueue_scripts','name_of_css_style'); . Questo dice a WordPress di attivare il caricamento di questo file al caricamento della pagina.

Potresti chiederti perché abbiamo wp_enqueue_scripts nella funzione add_action per un foglio di stile. Questo è semplicemente il modo in cui WordPress ha sempre implementato la funzione.

Aggiungere file JavaScript a WordPress

Ora che abbiamo esaminato il processo di generazione di una funzione, registrazione di un file e aggiunta di un'azione, questa parte dovrebbe essere un gioco da ragazzi!

1. Crea una funzione in functions.php chiamata addMyJS proprio come abbiamo fatto con addMyCSS .
2. Utilizzeremo la funzione wp_register_script , ma è un po' più complessa. Ha cinque “parametri” (gli elementi messi tra parentesi). Guarda sotto per vedere qual è ogni parametro.
3. wp_register_script (1. Nome dello script, 2. plugins_url (location_of_script.js, __FILE__), 3. array di dipendenze JS, solitamente array (jquery), 4. Versione (opzionale) del file JS tra virgolette singole, 5. dovrebbe essere true se vuoi il JS nel piè di pagina, false se lo vuoi nell'intestazione);
4. Ecco un esempio pratico di alcuni JavaScript da eseguire nel piè di pagina di un tema: wp_register_script('timer_js', plugins_url('timer_file.js', __FILE__), array('jquery'),'1.0', true);
5. Di nuovo, FUORI dalla nostra funzione addMyJS , "accoda" il tuo script inserendo questo nella tua area generale del PHP: add_action( 'wp_enqueue_scripts', 'addMyJS' );

Potrebbe sembrare complesso, ma una volta che ci hai preso la mano, ci vorrà meno di un minuto, quindi non aver paura!

Quali plugin posso usare per aggiungere JavaScript a WordPress?

Ci sono molti plugin completamente gratuiti solo per questo scopo. Ognuno funziona in modo leggermente diverso, quindi sperimentane alcuni prima di impegnarti. Ecco cinque principali da provare.

• ASync: in modo univoco, questo plug-in carica i file JS e CSS separatamente dal resto della pagina. Questo può essere particolarmente utile se si verifica un errore di codifica che altrimenti interromperebbe indefinitamente il caricamento della pagina.

• JS in Widgets – Hai solo bisogno di aggiungere alcune righe di codici per qualcosa come Google Analytics? Questo plugin elimina il fastidio e consentirà di aggiungere piccoli frammenti ai tuoi siti WordPress.

• Zia CSS/JS Helper – Questo è di gran lunga il migliore per chi ha esperienza con lo sviluppo web classico HTML/CSS/JS. Rende la tua funzionalità di modifica di WordPress proprio come la modifica di un sito tramite il file manager di cPanel. Puoi utilizzare CSS e JavaScript in linea per aggiungere rapidamente frammenti di codice, creare e gestire file esterni e altro ancora.

Fai sempre il backup del tuo sito per primo!

Anche se la stragrande maggioranza dei plugin di WordPress non danneggerà il tuo sito, c'è sempre la possibilità che tu abbia dei problemi. Prima di installare eventuali plug-in aggiuntivi o modificare il tuo sito, esegui un backup del tuo sito utilizzando un plug-in di backup di WordPress in grado di gestire backup completi della tua installazione di WordPress, come BackupBuddy. Risparmia ore di possibili rilavorazioni e assicurati che tutto il tuo duro lavoro non vada sprecato.

Posso utilizzare le API di WordPress usando JavaScript?

Come forse saprai, WordPress ha una vasta serie di API o interfacce di programmazione delle applicazioni. Le API sono essenzialmente funzioni lato server che puoi utilizzare in linguaggi come JavaScript. Il metodo più nuovo e moderno per gli sviluppatori per apprendere la funzionalità dell'API di WordPress è attraverso la pagina di riferimento del codice delle API di WordPress.

Qui è dove abbiamo ottenuto quelle "funzioni integrate" che abbiamo usato in precedenza. Potremmo andare avanti per giorni su ciascuna funzione nelle API e su come funzionano in tandem con JavaScript. Tuttavia, questo è un argomento avanzato che richiede semplicemente tempo individuale e dedizione per imparare.

Esistono librerie JavaScript su misura per WordPress?

Sì! Riconoscendo che molti sviluppatori non hanno padroneggiato l'intero contenuto dell'API di WordPress, molti programmatori hanno creato librerie JavaScript che possono essere facilmente incorporate, utilizzando uno dei plug-in di cui abbiamo discusso in precedenza.

La maggior parte delle librerie JavaScript si trova su GitHub e sono completamente gratuite. Esistono centinaia di migliaia di librerie JavaScript compatibili con WordPress, che vanno da una che aggiunge effetti divertenti a WordPress a una che ti consente di creare un sito con un layout molto simile a Pinterest!

La libreria più conosciuta utilizzata con WordPress (e la maggior parte dei siti) si chiama jQuery. jQuery elimina la complessità di JavaScript e, una volta che ci avrai preso la mano, scriverai funzioni in modo rapido e semplice.

Aiuto! Il mio JavaScript di WordPress non funziona!

Una delle parti meno fortunate di JavaScript è che gli errori non sono evidenti. E l'aggiunta di WordPress in più può creare confusione.

Alcuni errori possono essere causati facilmente come virgolette dimenticate. Altri possono essere causati da gravi errori di codifica non facilmente identificabili. Quindi, come fanno gli sviluppatori professionisti a capire la differenza?

Ci sono due chiavi principali per la risoluzione dei problemi: la funzione JavaScript console.log e la console di debug del browser. La console di Chrome in particolare è ottima per questo.

console.log

Questo può essere usato per vedere qual è il valore di una variabile in un dato punto in una funzione e assicurarsi che parti di funzioni vengano effettivamente raggiunte. All'interno di un file JavaScript, inseriresti semplicemente qualcosa come console.log("test"); .

La console di debug

A seconda del browser utilizzato, la configurazione della console sarà diversa. In genere, devi solo premere F12 per aprirlo, quindi fare clic sulla scheda "Console".

La console mostrerà quale riga, di quale file JavaScript, si è verificato un errore. Di solito mostra lo "stacktrace" completo o la serie di file da esaminare fino a quando non si colpisce il colpevole. Qui è anche dove vengono stampati i messaggi console.log .

Conclusione: JavaScript + WordPress

Esistono strumenti professionali che ti daranno molte più informazioni, ma di solito costano un bel centesimo. La buona notizia è che man mano che diventi il ​​prossimo più grande sviluppatore JavaScript di WordPress al mondo, gli strumenti cresceranno con te!

Kristen Wright

Kristen scrive tutorial per aiutare gli utenti di WordPress dal 2011. Di solito puoi trovarla mentre lavora su nuovi articoli per il blog iThemes o sviluppa risorse per #WPprosper. Al di fuori del lavoro, a Kristen piace scrivere nel diario (ha scritto due libri!), fare escursioni e campeggiare, cucinare e avventure quotidiane con la sua famiglia, sperando di vivere una vita più presente.