Tutorial sul tema WordPress per principianti – Parte 6: Functions.php di un tema
Oggi impareremo dove e come aggiungere codice al di fuori dei modelli nel nostro tema. Lo facciamo aggiungendo il functions.phpfile del tema. Lungo la strada impareremo anche come aggiungere fogli di stile e script nel modo corretto.
Il file functions.php di un tema
Un tema ha bisogno di un posto dove posizionare il codice che non fa parte dei modelli. C’è sempre un mucchio di codice che tutti i temi devono aggiungere per gestire la funzionalità. Ad esempio, abilitando la funzione delle immagini in primo piano di WordPress (hai notato che mancava?), supporto per menu, widget, aggiunta di fogli di stile e script (nel modo corretto) e altro ancora.
Quel file è functions.php. WordPress carica automaticamente e sempre questo file se esiste nel tuo tema. È sempre caricato sia in admin che in frontend.
Aggiunta di un file functions.php al nostro tema
Creiamo un nuovo file vuoto nella nostra cartella del tema principale e chiamiamolo functions.php.
In quel file, inizia immediatamente con un tag PHP di apertura (<?php) e non includere il tag di chiusura. Il functions.phpfile è pensato per il codice PHP, non per l’HTML. Il tuo tema può interrompersi (o anche solo comportarsi in modo strano) se in questo file sono presenti caratteri o nuove righe al di fuori dei tag PHP. Ovviamente puoi rompere i tag PHP per produrre HTML, ma deve essere fatto all’interno di funzioni o hook. Lascia che lo spieghi con un esperimento.
Proviamo questo file per vedere come funziona. Dentro functions.phpscrivi un’eco di qualche testo fittizio:
<?php
echo 'This is an experiment';Aggiorna il tuo frontend. Viene visualizzato il testo fittizio. Ma se ispezioni o visualizzi il sorgente HTML, vedrai che il testo appare prima di aprire <html>. Questo rende HTML completamente non valido!
Vai al tuo pannello di amministrazione e premi Aggiorna. Fa la stessa cosa anche lì (potrebbe essere nascosto dietro la barra di amministrazione, ma è lì nell’HTML).
Come puoi vedere, qualsiasi codice nei tuoi functions.phpcarichi prima di ogni altra cosa nei nostri modelli. Pertanto, di norma, qualsiasi output (HTML esterno ai tag PHP o echo) deve essere all’interno di funzioni che verranno eseguite al momento giusto, normalmente agganciate ad azioni o filtri.
Ricordiamo da quando abbiamo appreso e aggiunto hook nella parte 3 del tutorial sul tema WordPress per principianti. Il modo in cui eseguiamo il codice su un hook consiste nell’associare una funzione all’hook con add_action(). Proviamo qualcos’altro; creiamo una funzione agganciata ad un hook che abbiamo già definito nei nostri template; wp_footer.
In functions.phprimuovi il echoabbiamo aggiunto a scopo di test e invece scrivi:
<?php
add_action('wp_footer', 'wptutorial_print_footer');
function wptutorial_print_footer() {
echo 'This sentence will appear in footer!';
}Premi Aggiorna nel frontend e osserva che la stringa appare bene nel punto esatto che hai definito wp_footer, subito prima della chiusura </body>. Inoltre, nota che questo non farà eco a nulla in admin. Questo perché wp_footerè un hook che viene eseguito solo nel frontend.
Facciamo le nostre prime operazioni corrette in functions.php!
Nota: in PHP non è possibile avere due funzioni con lo stesso identico nome. Ciò include i nomi delle funzioni in WordPress, il tuo tema e qualsiasi plug-in attivato! Segui le migliori pratiche e anteponi alle tue funzioni il tuo tema slug, come nell’esempio sopra: ” wptutorial_<function_name>“. Ciò riduce notevolmente l’arresto anomalo di WordPress a causa di nomi di funzioni identici.
Nota 2: non importa in quale ordine aggiungi funzioni e hook nel tuo file functions.php. Ricorda che gli hook vengono eseguiti comunque in determinati checkpoint, non nell’ordine in cui si trovano functions.php. L’unica eccezione è se stai includendo altri file o inizializzando le tue classi.
Il modo giusto per aggiungere stili e script rispetto al modo sbagliato
Alcuni di voi ricorderanno dalla parte 3 in cui abbiamo aggiunto l’ wp_headhook nel nostro header.php. Dopo averlo fatto, WordPress è stato in grado di caricare i suoi stili e script, inclusa la barra di amministrazione. Potresti pensare che per aggiungere i nostri fogli di stile dobbiamo creare una funzione agganciata wp_heade produrre <link>il foglio di stile … Di solito avresti ragione!
Tuttavia in WordPress c’è un modo speciale per aggiungere script e stili. Questo serve principalmente per gestire l’ordine di caricamento ed evitare di caricare librerie duplicate. Ad esempio, come autore di temi potresti voler aggiungere Javascript che dipendono dalla jQuerylibreria. Quindi devi assicurarti che jQueryvenga caricato prima dei tuoi file. Ma WordPress e qualsiasi plug-in hanno la stessa necessità, per assicurarsi che jQueryvenga caricato anche prima dei loro script. Non è possibile caricare la jQuerylibreria più volte perché ciò causa problemi. Quindi WordPress ha un modo per gestire in quale ordine vengono caricati gli script e i fogli di stile.
Aggiunta di fogli di stile (nel modo giusto)
Per aggiungere qualsiasi stile e qualsiasi javascript, utilizziamo un hook chiamato wp_enqueue_scripts. Sì, usi questo hook anche per gli stili, nonostante il suo nome. L’aggiunta di script e stili viene definita "accodamento" – come in una coda. Mettiamo in coda (aggiungiamo) il nostro foglio di stile usando la funzione wp_enqueue_style nel nostro functions.php:
<?php
add_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');
function wptutorial_enqueue_scripts() {
wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'/style.css');
}La wp_enqueue_stylefunzione accetta almeno due parametri. Il primo è un nome univoco (handle o "ID slug") e il secondo la posizione del file. L’handle deve essere univoco in quanto questo è l’identificatore utilizzato da WordPress per determinare se sono presenti duplicati.
Per quanto riguarda il ritorno del percorso al tuo tema, ci sono molte funzioni disponibili. Sopra ho usato get_stylesheet_directory_uri()che restituisce l’URL alla cartella del tema, quindi ho aggiunto il resto del percorso al nostro foglio di stile.
PS: WordPress offre una funzione separata per restituire l’URL completo al tuo tema style.css: get_stylesheet_uri(). Ho usato l’altra funzione sopra in quanto è più utile familiarizzare con. Lo userai per tutti gli altri file che devi accodare.
La funzione wp_enqueue_styleaccetta parametri più utili, come le dipendenze (che altri file CSS devono essere caricati prima) e il numero di versione (utile per scopi di memorizzazione nella cache).
Aggiorna il tuo frontend e vedi che il tuo foglio di stile è caricato in <head>tag!
Se sei uno di quelli che non vede l’ora di rendere il tuo tema più carino durante la codifica, ecco la tua occasione. Ti incoraggio a iniziare a definire il tuo HTML, le classi e i wrapper e ad aggiungere un po’ di stile nel tuo file style.css. Aggiungeremo più contenuti che richiederanno uno stile man mano che andiamo avanti in questa serie di tutorial.
Aggiunta di script (nel modo giusto)
Diamo un’occhiata a come aggiungiamo javascript al nostro tema. È fatto usando lo stesso gancio (quindi puoi metterlo tutto all’interno di una funzione). Ma per gli script utilizziamo una funzione leggermente diversa.
Per accodare uno script, utilizzare wp_enqueue_script(). I parametri sono gli stessi di wp_enqueue_style(). Il primo è l’handle univoco e il secondo è il percorso dello script. Terzo (facoltativo) è l’array di dipendenze. Come quarto parametro (opzionale) si imposta il numero di versione. E infine quinto (opzionale) definisci se lo script deve essere caricato o meno nel <head>tag o alla fine di </body>.
WordPress viene fornito con una vasta gamma di librerie già incluse. Non sono sempre tutti caricati, ma disponibili se ne hai bisogno. Se vuoi aggiungere uno script di libreria comune, controlla prima se WordPress lo ha già. Esempi sono jQuery, tutti i moduli dell’interfaccia utente di jQuery, Underscore e Backbone.
Se aggiungi uno degli script inclusi in WordPress come dipendenza, non è necessario accodare quello script! Facciamolo in pratica.
Crea una cartella assetse al suo interno una sottocartella jsnella nostra cartella del tema, quindi aggiungi un nuovo main.jsfile vuoto. Diciamo che questo script richiede la jQuerylibreria, quindi lo impostiamo come dipendenza. Sappiamo che WordPress viene fornito con jQuerybundle e l’handle è jquery. Accodaremo il nostro script in questo modo:
<?php
add_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');
function wptutorial_enqueue_scripts() {
wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'/style.css');
wp_enqueue_script('theme-main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery']);
}Se aggiorni il frontend e controlli il tuo codice sorgente, dovresti vedere che il tuo script, main.js, è stato aggiunto, ma anche quella jQuerylibreria è stata caricata. E jQueryviene caricato prima del tuo file!
Ora hai imparato come aggiungere stili e script. Per aggiungere più file, aggiungi un wp_enqueue_style()o wp_enqueue_script()per ogni nuovo file.