In questa lezione del tutorial sul tema WordPress per principianti impareremo gli hook in WordPress e aggiungeremo alcuni hook nel nostro tema necessari affinché un tema funzioni correttamente con WordPress e plugin. Inizieremo anche ad accedere ai contenuti dinamici da WordPress nella nostra intestazione, come ottenere automaticamente il titolo della pagina corrente.
Per prima cosa dobbiamo imparare qualcosa sugli hook in WordPress. Gli hook sono una funzionalità fondamentale con cui devi familiarizzare. Non sono un fan della semplice visualizzazione di un intero gruppo di codice in cui è necessario copiare e incollare senza sapere cosa fa veramente. Se stai seguendo questo tutorial, vuoi impararlo correttamente, giusto?
Non preoccuparti, per ora lo terrò breve. Impareremo di più su questi più avanti in questo tutorial.
Hook in WordPress
In breve; poiché WordPress esegue tutto il codice per il caricamento e il rendering di una pagina, ci sono alcuni "punti di controllo" – che chiamiamo hook. Questi punti è dove WordPress consente agli sviluppatori di modificare o aggiungere il proprio codice. WordPress ha definito un intero gruppo di "punti di controllo" in cui, ognuno con un nome univoco. Se ne conosci il nome, puoi aggiungere il tuo codice a questi checkpoint. E così puoi facilmente dire a WordPress di eseguire il tuo codice quando raggiunge quel checkpoint come parte del suo processo.
Esistono due tipi di ganci; azioni e filtri. Le azioni sono punti nel codice in cui puoi aggiungere codice personalizzato, ad esempio emettere qualcosa o fare qualcosa per i tuoi scopi. I filtri sono punti nel codice in cui è possibile modificare una determinata variabile prima che venga utilizzata o generata. Sono molto simili, ma i filtri sono associati a una variabile specifica e le azioni no.
Plugin, temi e WordPress stesso possono "agganciare" il loro codice usando add_action()per le azioni e add_filter()per i filtri. Queste due funzioni dicono a WordPress di eseguire il codice agganciato ogni volta che l’esecuzione raggiunge questi hook.
Per definire gli hook che usi do_action()per le azioni e apply_filters()per i filtri.
Per chiunque sia interessato a saperne di più, ho un altro post che approfondisce gli hook in WordPress.
Un tema WordPress deve includere alcuni hook (azioni) importanti e specifici. Questi hook consentono a WordPress, ai plug-in e al nostro tema stesso di collegarsi e fare cose critiche. Diamo un’occhiata a quegli hook critici che dobbiamo aggiungere.
Hook dell’intestazione e del piè di pagina del tema
Tutti i temi WordPress devono avere due hook nei modelli. Un’azione deve essere inserita nell’intestazione (all’interno del <head>tag) e un’altra nel piè di pagina (subito prima della chiusura del </body>tag). Questi due hook sono assolutamente necessari affinché WordPress, il tuo tema e qualsiasi plug-in siano in grado di aggiungere i loro script e stili di codice al tuo tema.
I ganci di cui abbiamo bisogno sono wp_heade wp_footerrispettivamente per l’intestazione e il piè di pagina.
Normalmente quando vogliamo eseguire un hook, chiamiamo do_action(<hook name>). Ma poiché questi due hook sono così critici, WordPress li ha semplificati per noi inserendoli in una semplice chiamata di funzione. Quindi per questi due ganci puoi semplicemente usare wp_head()e wp_footer(). In background questi due eseguono il file do_action().
Aggiungiamo questi due hook (chiamate di funzione) ai nostri modelli di intestazione e piè di pagina e vediamo cosa succede.
Premi Aggiorna sul tuo frontend. Se hai effettuato l’accesso, ora dovresti vedere apparire la barra di amministrazione di WordPress! Ciò significa che WordPress è ora in grado di aggiungere con successo i suoi script e stili al tuo tema.
Puoi controllare il tuo codice HTML e vedere che la tua intestazione ora contiene un bel po’ di codice. Questo è il codice che non hai aggiunto al tuo tema. Come puoi vedere, lo stesso WordPress utilizza gli hook che abbiamo aggiunto per fare le sue cose.
Passiamo dagli hook e iniziamo a esaminare come possiamo recuperare dinamicamente i contenuti da WordPress e visualizzarli nella nostra intestazione.
Contenuto dinamico nell’intestazione
Diciamo a WordPress di impostare dinamicamente il titolo del documento (per il <title>tag). Per questo useremo una funzione, (che ha un filtro tra l’altro), chiamata wp_title(). Come abbiamo appreso sopra, poiché wp_title()è un filtro, tu, WordPress o plugin puoi modificare l’output. Aggiungeremo un filtro a questo più avanti in questo tutorial.
La funzione wp_title()accetta diversi argomenti che puoi regolare a tuo piacimento, ma per ora aggiungerò una stringa vuota in modo che visualizzi solo il titolo di qualunque pagina ci troviamo.
Cambia il tuo <title>tag header.phpin questo:
Gli appassionati di voi potrebbero aver notato che la prima pagina non genererà un titolo. Questo è il comportamento standard di WordPress che correggeremo più avanti in questo tutorial (lo faremo con l’aiuto del filtro). Se visiti un singolo post o pagina, dovresti ottenere il titolo del post.
WordPress ha una funzione ingegnosa che genera dinamicamente un mucchio di classi per il <body>tag a seconda della pagina in cui ci troviamo; chiamato body_class. Aggiorna il <body>tag header.phpin questo:
Aggiorna e dai un’occhiata a tutte le classi aggiunte al <body>tag. Dai un’occhiata a diverse pagine (prima pagina, singolo, categoria). Tutte queste classi sono molto utili per lo styling e per differenziare diverse parti simili. Molto probabilmente ne utilizzerai alcuni nel tuo CSS.
Per seguire le buone pratiche HTML, dovremmo anche informare sulla lingua del sito nell’HTML. Per questo utilizziamo una funzione di WordPress per ottenere la lingua dalle Impostazioni; attributi_lingua.
E infine vorrei aggiungere alcuni meta tag e simili che non sono specifici di WordPress, ma seguono pratiche di web design comuni. Ecco header.phpcome appare il file completo:
Per il passaggio successivo di questo tutorial lasceremo header.phpe ci addentreremo index.phpper imparare come recuperare contenuti più dinamici, come i post.