Questo è il quarto appuntamento della serie dedicata alla creazione di un tema WordPress. In questo articolo scopriremo cosa sono gli “action hooks” e perchè sono fondamentali per lavorare in modo professionale con WordPress.
Come al solito vi ricordo che per seguire questa guida è necessario:
- una installazione di WordPress funzionante;
- una conoscenza almeno di base di html, css, jQuery e php.
Hooks, actions & filters.
Premetto che quello che sto per affrontare è considerato a volte un argomento “avanzato”, di quelli da approfondire dopo aver acquisito una certa dimestichezza con i temi ed i plugin di WordPress. Io credo che per capire davvero come funzioni un tema sia fondamentale avere ben chiaro il concetto di hooks, actions & filters. In caso contrario si rischia di andare avanti con lo sviluppo dei temi copiando “sulla fiducia” alcune righe di codice di cui non si capisce bene il significato.
Per spiegare questo argomento anche a chi ha appena iniziato a cimentarsi con lo studio dei temi WordPress, ricorrerò ad un’esempio. Facciamo finta che io abbia un negozio e che abbia acquistato un assistente robot che mi aiuta nelle gestione del punto vendita. L’azienda produttrice lo ha programmato per effettuare in autonomia una serie di operazioni:
- aprire la porta del negozio;
- disattivare l’allarme;
- accendere il quadro elettrico;
- accendere il registratore di cassa;
- spolverare e riporre i prodotti sugli scaffali.
Queste operazioni vengono ripetute in questo ordine tutte le mattine. L’azienda mi ha anche garantito che il robot è in grado di compiere tante altre operazioni oltre a quelle programmate in fabbrica, basta fornirgli delle istruzioni su dei biglietti davanti alla porta del negozio. Siccome ci avviciniamo al periodo natalizio, scrivo un biglietto per il mio assistente nel quale gli raccomando di accendere le luci dell’albero di Natale, seguendo le istruzioni del manuale d’uso . Il biglietto è riportato sotto:
La mattina dopo arrivo in negozio e trovo l’assistente intento come al solito a sistemare i prodotti negli scaffali, eppure l’albero di Natale è ancora spento. Guardo davanti la porta ed il biglietto che ho lasciato la sera prima è ancora lì, anche se è aperto e fuori dalla busta. Evidentemente il mio robot lo ha letto ma ha fatto finta di niente! Contatto subito il servizio clienti e mi spiegano che affinchè le istruzioni dei biglietti vengano eseguite, è necessario indicare anche in quale momento della giornata eseguire le nuove istruzioni, associando le nuove istruzioni ad una delle azioni programmate in fabbrica, chiamate “hooks”.
Riscrivo il nuovo biglietto così:
In altre parole gli ho detto: “Caro assistente, devi compiere una nuova azione per me: appena accendi il quadro elettrico, accendi anche le luci dell’albero di Natale”. Per questo il giorno prima le cose non avevano funzionato, l’assistente aveva letto il biglietto e sapeva che c’erano le luci natalizie da accendere, ma non sapeva quando eseguire questa nuova azione!
Il giorno dopo il mio negozio ha un’aspetto tipicamente natalizio! L’assistente è arrivato di buon ora, ha raccolto il biglietto e letto le istruzioni che gli avevo raccomandato, dopodichè ha aperto la porta, disinserito l’allarme, ha acceso il quadro elettrico e le luci dell’albero di Natale, e poi ha continuato a fare le sue solite faccende.
WordPress funziona in modo simile, non basta scrivere nuove funzioni nel file functions.php che gli diano nuovi compiti da eseguire, è anche necessario specificare esattamente in quale momento della “giornata” eseguire tali funzioni! Questo è il motivo per cui all’interno di WordPress esistono gli hooks.
WordPress Hooks
Potremmo definire gli hooks come dei punti d’appoggio da utilizzare per :
- inserire all’interno del ciclo di vita della pagina web una nuova porzione di codice;
- modificare ciò che WordPress sta elaborando per default;
- modificare l’output restituito da una funzione interna di WordPress.
Esistono due tipi di hooks: actions e filters. Un action hook è un hook che viene attivato in un preciso momento nell’esecuzione di una pagina di WordPress e ci consente di eseguire un’azione in quel momento; un filter hook è un hook che ci consente di manipolare i dati gestiti da WordPress prima che siano inviati al browser o al database.
Affronteremo più avanti nella guida il concetto di filter hook, in questo momento occorre focalizzare l’attenzione sugli action hooks, dando un’occhiata alla relativa pagina del codex di WordPress. Il codex ci mostra l’esempio di una lista di hooks che si susseguono durante l’apertura di una pagina di WordPress. Non preoccupatevi se in questo momento non afferrate il significato di questo elenco, ho inserito il link soltanto per darvi un’idea di quanti hooks si susseguano durante l’esecuzione di una pagina, e per afferrare il concetto che per essere dei bravi sviluppatori di temi WordPress è necessario, col tempo, sapere riconoscere in quale momento, cioè a quale hook, è opportuno inserire il codice che avete scritto.
Tornando al nostro file functions.php, lo avevamo lasciato così:
function mymagazine_theme_styles() {
wp_enqueue_style( 'mymagazine_google_fonts', '//fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,300italic' );
wp_enqueue_style( 'mymagazine_foundation', get_template_directory_uri() . '/css/foundation.min.css' );
wp_enqueue_style( 'mymagazine_main_css', get_stylesheet_directory_uri() . '/style.css' );
}
Ricapitolando avevamo scritto una funzione che chiedeva a WordPress di inserire i link ai nostri file css. A questo punto dobbiamo specificare in quale momento della “giornata”, cioè a quale action hook associare questa funzione. Subito dopo la funzione mymagazine_theme_styles() scriviamo questo codice:
add_action( 'wp_enqueue_scripts', 'mymagazine_theme_styles' );
E finalmente vediamo in azione il nostro hook: add_action() è una funzione di WordPress che associa una funzione ad un hook specifico, che in questo caso è ‘wp_enqueue_scripts’, in altre parole stiamo dicendo a WordPress di associare (add_action) al hook (wp_enqueue_scripts) una determinata funzione (mymagazine_theme_styles).
A questo punto, sperando che il concetto di action hook sia chiaro, il contenuto del file functions.php dovrebbe essere il seguente:
function mymagazine_theme_styles() {
wp_enqueue_style( 'mymagazine_google_fonts', '//fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,300italic' );
wp_enqueue_style( 'mymagazine_foundation', get_template_directory_uri() . '/css/foundation.min.css' );
wp_enqueue_style( 'mymagazine_main_css', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'mymagazine_theme_styles' );
Nel prossimo articolo completeremo il file header.php, che avevamo iniziato ad esaminare nella seconda parte, nel frattempo se avete dubbi o suggerimenti scrivete un commento qui sotto (e non dimenticate di condividere l’articolo sui vostri profili social)!