WordPress hook (add_action) – cosa sono e come funzionano [FACILE]

WordPress hook (add_action) – cosa sono e come funzionano [FACILE]

Hook di WordPress, quello che non tutti sanno (soprattutto chi è alle prime armi) e molti faticano a comprendere, consiste nell’innestare codice HTML/PHP/Shortcode in determinate posizioni di WordPress.

Iniziamo subito, prepariamo l’ambiente di lavoro installando WordPress e creando il tema child.

In questo articolo ho deciso di chiamarli INNESTI per rendere l’argomento comprensibile a quelli che hanno appena scoperto WordPress o che hanno voglia di cimentarsi, in realtà l’argomento è in gran modo spiegato sulla documentazione ufficiale inerente le ACTIONS di WordPress.

Cosa sono gli hook di WordPress

Potrei stare ore e ore a spiegare con termini tecnici definendo nel miglior modo in cosa consistono gli hook di WordPress (actions). Ho invece deciso di fare un esempio di facile comprensione soprattutto a quelli che stanno iniziando a scoprire il CMS e non ne conoscono le capacità.

Immaginate WordPress come un semplicissimo circuito elettrico. Composto da 1 cavo che ha un’inizio e una fine con delle lampadine in mezzo. Viene facile comprendere che collegando la fonte di energia, questa inizia a percorre il cavo accendendo le lampadine collegate seguendo l’ordine in cui si trovano partendo dall’inizio del circuito verso la fine.

Sequenza hook WordPress

Perché utilizzare gli hook WordPress

Considerando l’esempio fatto sopra, quindi l’idea è di un cavo con collegate delle lampade che vengono accese in ordine di posizione man mano che l’energia attraversa il cavo.

Il CMS WordPress è il cavo, gli hook sono le lampadine e la fonte di energia è il processo eseguito per produrre la schermata (output).

Dovresti comprendere ora l’importanza degli hook di WordPress, immaginando di poter inserire qualsiasi cosa in un determinato action che verrà mostrato in quel determinato posto man mano che il processo prosegue.

In questa immagine dovresti comprende meglio, il processo seguirà quest’ordine:

  • Lampada 1 + varie funzioni
  • Lampada 2 + varie funzioni
  • Lampada 3 + varie funzioni + hook INNESTO 1
  • Lampada 4 + varie funzioni

INNESTO 1 potrà contenere codice HTML, contenuto testuale, codice PHP oppure qualsiasi Shortcode.

L’importanza degli hook di WordPress sta nel fatto che è possibile effettuare questi innesti senza modificare i file (di WP o di temi o di plugin) ma semplicemente andandoli a dichiarare nel file functions.php del vostro tema (consiglio sempre di creare un tema child).

Come usare gli hook di WordPress

Se è la prima volta che fai questa procedura ti consiglio di fare un backup del sito.

Compreso quello sopra spiegato (sembra complesso ma non lo è credimi), adesso non resta che metterci alla prova.

Abbiamo compreso il processo in cui WordPress esegue determinate azioni man mano che produce la schermata. Abbiamo compreso che per inserire un innesto non dobbiamo modificare i file di tema (header.php, footer.php, ecc…) e plugin ma basta dichiararli nel file functions.php del tema child.

Passiamo quindi al nostro primo innesto! Incolliamo questo codice nel file functions.php del vostro tema (Aspetto -> Editor del tema -> functions.php):

// Innesto creato seguendo la guida https://www.andreadegiovine.it/1614/innesti-wordpres…e-personalizzato.html
function innesto_test_analytics(){ ?>

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X">
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXXX-X');
</script>
<?php }
add_action('wp_head','innesto_test_analytics', 1);

In questo primo innesto stiamo inserendo il codice di tracciamento di Google Analytics (contenuto in <script>). Stiamo innestando questo codice nell’ancora “wp_head” (ovvero dentro <head> del nostro sito).

Ricapitolando quindi per qualsiasi hook (azione) utilizzeremo ” add_action(‘ANCORA‘,’FUNZIONE INNESTO‘, 1) “, ovvero la funzione contenuto nel core di WordPress che consente di innestare azioni durante il processo.

  • ANCORA va sostituito al nome della posizione dove vogliamo inserire qualcosa. Qui troverai le ancore disponibili nel core di WordPress, per i temi e plugin fai riferimento al sito del produttore.
  • FUNZIONE INNESTO va sostituito con la funzione PHP che indicherà cosa mostrare in quell’ancora (potete usare quella sopra editandola se non capite nulla di PHP).
  • 1 è la priorità che vogliamo assegnare al nostro innesto, minore è il numero prima verrà mostrato (eseguito).

Fai molta attenzione quando utilizzi i codici PHP non testati o trovati in rete, potresti riscontrare errori e schermate di avviso o addirittura schermata bianca. In questo caso ripristina il backup che ti avevo consigliato di fare prima.

Condividi contenuto:

Commenti e Opinioni: