Comprendiamo i WordPress Hook e la loro utilità

Hai mai avuto il desiderio di modificare qualcosa in WordPress? Probabilmente hai anche fatto complesse ricerche all’interno del codice sorgente per trovare il file responsabile che non ti permetteva di lavorare come desideravi. Se questo è il tuo approccio mi dispiace dirti che stai facendo le cose nel modo sbagliato, WordPress ci propone un metodo diverso…

Ebbene sì perché modificare direttamente il codice sorgente di questa piattaforma non è l’approccio corretto, anzi è quello più lontano dall’esserlo. A ogni aggiornamento vedrai scomparire le tue modifiche e tutto quello che ti resterà da fare è odiare WordPress perché non rispetta il tuo lavoro.

O forse sei tu che non rispetti il suo?

Come scoprirai infatti da questo articolo, esistono approcci migliori per poter modificare i comportamenti di questo CMS e prendono il nome di Hook. Le potenzialità che offrono i WordPress Hook risultano veramente potenti, infatti sia sviluppatori di temi che di plugin utilizzano queste strutture quotidianamente.

Il concetto che sta alla base dei WordPress Hook può essere inizialmente complicato, ma una volta che ci prendiamo la mano non potremmo farne a meno della sua utilità! Infatti, il sistema di Hook funziona in maniera veramente molto semplice e ci permette di identificare, nel dettaglio, quando succede qualcosa all’interno del nostro CMS e ci permetterà di creare delle azioni in risposta a questi eventi.

Prima ancora di andare nel dettaglio e scoprire i tipi di WordPress Hook, sarà meglio guardarci una introduzione più dettagliata.

Come scoprirai dalla lettura di questo articolo, i WordPress Hook sono delle funzionalità molto interessanti che ti permetteranno di modificare il comportamento di questo CMS senza modificare i file originali.

Questo ci protegge dalla possibilità di veder scomparire le nostre modifiche ai vari aggiornamenti della piattaforma e soprattutto ci permette di rispettare la WordPress Way, ovvero le buone pratiche di sviluppo che questo CMS ci mette a disposizione.

Allo stesso tempo, il concetto di Hook è dedicato allo sviluppatore che conosce il linguaggio PHP (dato che l’intero WordPress è costruito con questo). Se hai qualche problema nella comprensione di questo linguaggio abbiamo creato un apposito corso che ti introdurrà ai concetti base con esempi pratici presi direttamente da WordPress.

Introduzione ai WordPress Hook

Entriamo quindi nel vivo di questo articolo cercando di capire quale sia la logica che ha spinto gli sviluppatori WordPress a scrivere in questo modo il proprio codice. Per fare questo dobbiamo rispondere alla seguente domanda.

In dei conti, cosa sono questi Hook?!?

Come suggerisce il nome, gli Hook non sono altro che ganci che definiscono alcune parti rilevanti dell’esecuzione del nostro codice. Noi possiamo “aggrapparci” per modificare il comportamento di WordPress senza la necessità di andare a modificare i core file che compongono la piattaforma.

In quest’ottica WordPress ci fornisce un layout astratto dove poter costruire le nostre modifiche senza che quest’ultime vengano perse ad ogni aggiornamento della nostra piattaforma.

Infatti quando sviluppiamo un tema o un plugin questi Hook ci saranno molto utili per dire a WordPress qualcosa del tipo “quando hai caricato tutto il contenuto aggiungi alla fine di esso questi pulsanti per la condivisione sui social network”, “quando stai caricando la homepage assicurati di aver aggiunto il menu realizzato tramite il pannello di amministrazione” o ancora “attiva il supporto ai Post Format”.

Come possiamo immaginare esistono moltissimi tipi di Hook e se quelli presenti non ci soddisfano, saremo sempre in grado di crearne di nostri. Se sei curioso di vedere una lista completa dei WordPress Hook puoi dare un’occhiata al Codex, ma prima ancora di farti sconvolgere dalla pagina collegata lasciami dire che gli Hook si dividono in due grandi famiglie, ovvero gli Action Hook ed i Filter Hook.

Andiamo adesso a capire perché gli sviluppatori WordPress hanno deciso di suddividerli in queste due famiglie e quali sono le loro caratteristiche.

Come si usano gli Action Hook

Gli Action Hook sono quel tipo di gancio che permette di eseguire una condizione del tipo “quando raggiungi questo punto, esegui questo codice“; ovvero ci permettono di sfruttare dei punti ai quali possiamo aggiungere del codice realizzato da noi e che potrebbe essere di vitale importanza per il corretto funzionamento del nostro plugin o tema.

Un esempio molto pratico è quello dell’inserimento delle metainformazioni che risultano essere molto utili alla lettura della pagina.

Facciamo un esempio pratico, stiamo sviluppando un tema WordPress per un cliente e vogliamo fare in modo che il tema porti la nostra firma. A parte inserire il proprio nome all’interno della testata CSS del nostro tema potremmo desiderare di aggiungere un elemento meta name="author" impostando il valore dell’attributo content al proprio nome e cognome.

Potresti pensare di inserire manualmente queste informazioni aprendo il file header.php, ma WordPress ha creato una variante molto più elegante per realizzare tutto questo, ovvero gli Action Hook!

Grazie a questi siamo in grado di dire a WordPress qualcosa come “quando stai caricando il contenuto all’interno dell’elemento <head> aggiungi anche l’elemento <meta> contenente il mio nome“. Ecco il codice che dovremmo utilizzare all’interno del nostro file functions.php:

function sam_inserisci_autore() {

    echo '<meta name="author" content="Andrea Barghigiani">\n';

} //fine sam_inserisci_autore()    

/* Action Hook */
add_action( 'wp_head', 'sam_inserisci_autore' );

Quello che abbiamo fatto è semplicemente collegare la funzione am_inserisci_autore() al Action Hook wp_head che viene lanciato ogni volta il nostro template carica la funzione wp_head(); ecco perché è così importante inserire questa funzione all’interno del nostro elemento head.

Ovviamente gli Action Hook hanno molti altri punti al quale agganciare il nostro codice, se vuoi soddisfare la tua sete di curiosità puoi dirigerti immediatamente sulle pagine del WordPress Codex e consultare l’intera lista degli Action Hook, ma per questo articolo miriamo soltanto a comprendere il loro funzionamento.

Se sei curioso di scoprire altri usi degli Action Hook non ti resta che iniziare a seguirci e aspettare qualche altro articolo 🙂

Passiamo adesso ai Filter Hook!

L’utilità dei Filter Hook e le loro applicazioni

I Filter Hook sono leggermente diversi rispetto agli Action perché se quest’ultimi permettono di inserire nuovo codice all’interno di determinati punti del nostro tema o plugin, mentre i primi permettono di modificare l’output in un determinato punto nell’esecuzione del codice WordPress.

So che a questo punto la spiegazione può sembrare superficiale, ma è effettivamente quello che fanno!

Andiamo intanto a vedere come sia possibile sfruttare i Filter Hook per andare ad aggiungere una nostra firma alla fine dell’articolo, come fatto precedentemente apriamo il nostro file functions.php e alla fine del file aggiungiamo:

function sam_inserisci_firma( $content ) {

    if ( is_single() ) {

        $content .= '<div class="firma">Questa puntata è stata scritta da Andrea Barghigiani</div>';

    } //fine if ( is_single() )

    return $content;

} //fine sam_inserisci_firma()

/* Filter Hook*/
add_filter( 'the_content', 'sam_inserisci_firma' );

Grazie all’operatore .= siamo in grado di aggiungere la nostra personale firma alla fine di ogni articolo. Nel nostro caso specifico abbiamo usato il Conditional Tag is_single() per assicurarci che la firma venga aggiunta soltanto quando il nostro utente sta visualizzando la pagina per il singolo articolo di WordPress, se non avessimo inserito questo controllo il filtro avrebbe aggiunto la nostra firma anche in homepage!

I Filter Hook sono anch’essi molto utili e ci permettono di aggiungere del contenuto in maniera molto semplice alle pagine del nostro WordPress, potrete consultare l lista completa a questa pagina del Codex, ma per conoscere ancora meglio gli Hook ti ho preparato qualche altro esempio 😉

Alcuni esempi pratici per sporcarsi le mani

In questa parte dell’articolo ho deciso di inserire alcuni esempi realizzabili con gli Hook che ti permetteranno di vedere da vicino quali sono le vere potenzialità di questo sistema.

Conosciamo il Browser del Visitatore

Dovresti essere ormai a conoscenza del fatto che fin troppo spesso i browser seguono soltanto alcune regole CSS. Se all’interno del tuo tema utilizzi la funzione body_class() (consigliata dalla stessa WordPress e veramente molto, molto utile), potrebbe essere di aiuto la creazione di una classe specifica per il tipo di browser da agganciare all’elemento <body>.

Questo effetto è raggiungibile grazie ad alcune variabili globali che WordPress crea già in automatico, l’unica cosa è quella di andare a scoprire quale sia il suo valore con qualche elseif.

function sam_browser_detection( $classes ) {

  global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
  
  if($is_lynx) $classes[] = 'lynx';
  elseif($is_gecko) $classes[] = 'gecko';
  elseif($is_opera) $classes[] = 'opera';
  elseif($is_NS4) $classes[] = 'ns4';
  elseif($is_safari) $classes[] = 'safari';
  elseif($is_chrome) $classes[] = 'chrome';
  elseif($is_IE) $classes[] = 'ie';
  else $classes[] = 'unknown';
  
  if($is_iphone) $classes[] = 'iphone';
    return $classes;
}

/* Filter Hook per aggiungere la classe in base al browser */
add_filter('body_class','sam_browser_detection');

Modifichiamo il Tempo in Stile Twitter

Come molto probabilmente sei già a conoscenza, Twitter e Facebook hanno una caratteristica molto interessante, ovvero permettono di conoscere quanto tempo fa un articolo, o qualsiasi altro elemento, è stato pubblicato all’interno del loro network aggiungendo qualcosa del tipo “pubblicato un ora fa“, “5 minuti fa” ecc…

WordPress ci permette di fare la stessa cosa utilizzando la funzione human_time_diff() che traduce la differenza di tempo tra il momento in cui il visitatore visualizza il nostro articolo e la pubblicazione dello stesso.

Ecco cosa dovremmo aggiungere al nostro functions.php:

function sam_tempo_umano( $content ) {

    $content .= "\n" . __( 'Pubblicato ', 'am_theme' ) . human_time_diff( get_the_time('U'), current_time('timestamp') ) . __( ' fa', 'am_theme' ); 

    return $content; 
} //fine sam_tempo_umano()

/* Filter Hook per trasformare il tempo di pubblicazione */
add_filter( 'the_content', 'sam_tempo_umano' );

Conclusioni

Siamo giunti al termine di questo articolo ma sono sicuro che hai imparato qualcosa di veramente molto importante, soprattutto se desideri continuare la tua carriera di sviluppatore WordPress.

Essere in grado di aggiungere o modificare il contenuto mostrato all’interno delle nostre pagine in maniera semplice e pulita ci aiuta a rispettare la WordPress Way e ci garantisce che tutto il codice che svilupperemo sarà compatibile con la piattaforma senza dover temere i suoi aggiornamenti.

Ora voglio farti una domanda, ma devi essere sincero. Avevi mai sentito parlare dei WordPress Hook? Se la risposta è sì, quali sono stati gli usi più particolari che ne hai fatto?

Se invece la risposta è no, come consideri questo articolo? Utile o sei più confuso di prima?

Sono veramente curioso di conoscere la tua impressione, potrai inserirla tranquillamente all’interno degli articoli. Oltre a questo ho un favore da chiederti: perché non condividi questo articolo? Sono sicuro che i tuoi amici e colleghi potranno beneficiare molto dalla sua lettura e non mancheranno di ringraziarti 😉

In fin dei conti che web sarebbe senza la condivisione?!?