Sfrutta la potenza degli hook di WordPress: Spiegazione di azioni e filtri

Come qualsiasi CMS, WordPress non soddisferà sempre ogni tua esigenza immediatamente. Poiché è open source, puoi hackerarlo per renderlo conforme alle tue esigenze aziendali, ma invece puoi utilizzare gli hook di WordPress per raggiungere i tuoi obiettivi. Costruire con gli hook è una strategia vincente che consente agli sviluppatori di WordPress di creare praticamente qualsiasi funzionalità del sito Web immaginabile.

Hook di WordPress: azioni e filtri

Gli hook di WordPress non sono solo potenti strumenti di personalizzazione, sono il modo in cui i componenti di WordPress interagiscono tra loro. Le funzioni agganciate gestiscono molte delle attività di routine che consideriamo parte integrante di WordPress, come l'aggiunta di stili o script a una pagina o il testo del piè di pagina circostante con elementi HTML. Una ricerca nella base di codice di WordPress Core rivela migliaia di hook in più di 700 posizioni. I temi e i plugin di WordPress contengono ancora più hook.

Prima di saltare agli hook ed esplorare la differenza tra action hook e filter hook, capiamo dove si adattano all'architettura di WordPress.

Infrastruttura WordPress

Gli elementi modulari di WordPress si integrano facilmente l'uno con l'altro, così possiamo facilmente mescolare, abbinare e combinare:

1. WordPress Core: questi sono i file necessari per il funzionamento di WordPress. WordPress Core fornisce un'architettura generalizzata, la dashboard di amministrazione di WP, query di database, sicurezza e altro ancora. WordPress Core è scritto in PHP e utilizza un database MySQL.
2. Tema (o tema principale): un tema definisce il layout e il design di base di un sito Web. Basato su file PHP, HTML, JavaScript e CSS, un tema funziona leggendo il database MySQL di WordPress per generare il codice HTML che viene visualizzato in un browser. Gli hook in un tema possono aggiungere fogli di stile, script, caratteri o tipi di post personalizzati, ad esempio.
3. Tema figlio: creiamo noi stessi temi figlio per mettere a punto il layout e il design di base forniti dai temi genitore. I temi figlio possono definire fogli di stile e script per modificare le caratteristiche ereditate o aggiungere o rimuovere tipi di post. Le istruzioni del tema figlio sostituiscono sempre quelle del tema principale.
4. Plugin: per estendere la funzionalità di back-end di WordPress, possiamo scegliere tra migliaia di plugin di terze parti. Gli hook in un plug-in potrebbero, ad esempio, avvisarci via e-mail quando viene pubblicato un post o nascondere i commenti inviati dagli utenti che contengono un linguaggio vietato.
5. Plugin personalizzati: quando un plug-in di terze parti non soddisfa pienamente le esigenze aziendali, possiamo potenziarlo scrivendo un plug-in personalizzato in PHP. Oppure possiamo scrivere un nuovo plugin da zero. In entrambi i casi, aggiungeremo hook per estendere le funzionalità esistenti.

Dato che abbiamo accesso alla fonte di tutti e cinque i livelli, perché sono necessari gli hook in WordPress?

Codice di sicurezza

Per stare al passo con le tecnologie in evoluzione, i contributori di WordPress Core, i temi principali e i plug-in rilasciano frequentemente aggiornamenti per mitigare le vulnerabilità della sicurezza, correggere bug, risolvere incompatibilità o offrire nuove funzionalità. Come ogni consulente con esperienza di emergenza sa in prima persona, il mancato aggiornamento dei componenti di WordPress può compromettere o addirittura disabilitare un sito.

Se modifichiamo direttamente le copie locali dei componenti di WordPress a monte, riscontriamo un problema: gli aggiornamenti sovrascrivono le nostre personalizzazioni. Come possiamo aggirare questo durante la personalizzazione di WordPress? Tramite hook, nel tema figlio e plug-in personalizzati.

Codifica nel tema del nostro bambino

Un tema figlio è uno spazio sicuro in cui possiamo personalizzare l'aspetto grafico del nostro tema installato. Qualsiasi codice aggiunto qui sovrascriverà il codice comparabile nel genitore senza il rischio di essere sovrascritto da un aggiornamento.

Quando un tema figlio viene attivato, si collega a un genitore disattivato, ereditando ed esibendo le caratteristiche del genitore senza essere influenzato dagli aggiornamenti del genitore. Per non cadere preda della tentazione di modificare un tema, le migliori pratiche suggeriscono di attivare un tema figlio come parte della nostra configurazione.

Scrittura di plug-in personalizzati

Quando un plugin è attivato, il suo file functions.php viene eseguito ad ogni chiamata sul server. WordPress, a sua volta, carica e ordina gli hook da tutti i plugin attivi in ​​base alla loro priorità e li esegue in sequenza. Per estendere la funzionalità di un plug-in di terze parti, possiamo scrivere il nostro plug-in personalizzato per WordPress.

Dove posizionare i nostri hook in WordPress

Preparazione pre-immersione: Definizioni

Per evitare di confondere i termini, ci atterremo a questa terminologia:

• Un hook è un punto debole in WordPress in cui le funzioni sono registrate per essere eseguite. Possiamo collegare le nostre funzioni a uno dei tanti hook in WordPress e ai suoi componenti o crearne uno nostro.
  • Un hook di azione esegue le azioni.
  • Un gancio del filtro gestisce i filtri.
• Una funzione agganciata è una funzione di callback PHP personalizzata che abbiamo "agganciato" in una posizione di hook di WordPress. Il tipo da utilizzare dipende dal fatto che l'hook sia pensato per consentire modifiche al di fuori della funzione, ad esempio aggiungendo direttamente all'output della pagina Web, modificando un database o inviando un'e-mail. Questi sono conosciuti come effetti collaterali .
  • Un filtro (o funzione di filtro ) dovrebbe evitare effetti collaterali solo lavorando, quindi restituendo una copia modificata dei dati passati.
  • Un'azione (o funzione di azione ), al contrario, ha lo scopo di causare effetti collaterali. Non ha valore di ritorno.

Con queste distinzioni in mente, possiamo iniziare la nostra esplorazione degli hook.

Astrazione e codice pulito

Quando un'azione o un filtro vengono incorporati in un hook, secondo necessità, raggiungiamo l'obiettivo di scrivere una sola funzione per attività ed evitare la duplicazione del codice all'interno di un progetto. Ad esempio, supponiamo di voler aggiungere lo stesso foglio di stile a tre modelli di pagina (archivio, pagina singola e post personalizzato) nel nostro tema. Invece di sovrascrivere ogni modello nel genitore, quindi ricreare ciascuno nel nostro tema figlio, quindi aggiungere fogli di stile a singole sezioni di testa, possiamo scrivere codice in una singola funzione e allegarlo con l'hook wp_head .

Nomenclatura premurosa

Evita in modo proattivo i conflitti nominando un tema figlio o hook di plug-in personalizzati in modo univoco. Avere hook con lo stesso nome in un singolo sito è una ricetta per il comportamento del codice non intenzionale. Le migliori pratiche prescrivono di iniziare il nome del nostro hook con un prefisso breve e univoco (ad esempio, le iniziali dell'autore, del progetto o dell'azienda), seguito da un nome di hook descrittivo. Ad esempio, usando il modello "iniziali del progetto più nome dell'hook", per il progetto Tahir's Fabulous Plugin, potremmo nominare i nostri hook tfp-upload-document o tfp-create-post-news .

Sviluppo simultaneo e debug

Un singolo hook può attivare più di una sola azione o filtro. Ad esempio, potremmo scrivere una pagina web che contenga più script, che usano tutti l'action hook wp_head per stampare HTML (ad esempio una sezione <style> o <script> ) all'interno della sezione <head> sul front-end della pagina.

Pertanto, diversi sviluppatori di plug-in possono avanzare più obiettivi in ​​parallelo su un singolo plug-in o dividere il plug-in in più plug-in singoli più semplici. Se una funzionalità non funziona correttamente, possiamo investigare direttamente ed eseguire il debug della sua funzione agganciata senza dover cercare nell'intero progetto.

Azioni

Un'azione esegue il codice quando si verifica un evento in WordPress. Le azioni possono eseguire operazioni come:

• Creazione di dati.
• Lettura dei dati.
• Modifica dei dati.
• Eliminazione dei dati.
• Registrazione delle autorizzazioni degli utenti che hanno effettuato l'accesso.
• Tracciare le posizioni e memorizzarle nel database.

Esempi di eventi in cui è possibile attivare azioni includono:

• init , dopo il caricamento di WordPress ma prima dell'invio delle intestazioni al flusso di output.
• save_post , quando un post è stato salvato.
• wp_create_nav_menu , subito dopo che un menu di navigazione è stato creato con successo.

Un'azione può interagire con un'API per trasmettere dati (ad esempio, un collegamento a un post sui social media), ma non restituirà dati all'hook chiamante.

Diciamo che vorremmo automatizzare la condivisione di tutti i nuovi post sul nostro sito tramite i social media. Inizia cercando nella documentazione di WordPress un hook che può essere attivato ogni volta che viene pubblicato un post.

Non ci sono scorciatoie per trovare il nostro gancio: impareremmo attraverso l'esperienza o approfondiamo le azioni elencate per trovare potenziali candidati. Potremmo considerare save_post un candidato, ma escluderlo rapidamente poiché si attiverebbe più volte durante una singola sessione di modifica. Una scelta migliore è transition_post_status , che si attiva solo quando lo stato di un post viene modificato (ad es. da draft a publish , da publish a trash ).

Andremo con transition_post_status ma perfezioneremo anche la nostra azione in modo che venga eseguita solo quando lo stato del nostro post passa alla publish . Inoltre, seguendo la documentazione ufficiale e le API delle varie piattaforme di social media, possiamo integrare e pubblicare il contenuto del nostro post, insieme a un'immagine in evidenza:

 <?php function publish_post_on_social_media ( $new_status = NULL, $old_status = NULL, $post_ID = NULL ) { if ( 'publish' == $new_status && 'publish' != $old_status ) { // build the logic to share on social media } } add_action( 'transition_post_status', 'publish_post_on_social_media', 10, 3 ); ?>

Ora che sappiamo come usare gli action hook, ce n'è uno particolarmente utile, specialmente quando si tratta di CSS.

Designare le priorità con wp_enqueue_scripts

Supponiamo di voler aggiungere il foglio di stile del nostro tema figlio per ultimo, dopo che tutti gli altri sono stati caricati, per garantire che tutte le classi con lo stesso nome originate altrove siano sovrascritte dalle classi del nostro tema figlio.

WordPress carica i fogli di stile in un ordine predefinito:

1. I temi dei genitori
2. Temi per bambini
3. Qualsiasi plugin

In questo costrutto:

 add_action( string $hook_name, callable $callback, int $priority = 10, int $accepted_args = 1)

…il valore di priority dell'azione aggiunta ne determina l'ordine di esecuzione:

• Il valore di priority predefinito per wp_enqueue_scripts (o qualsiasi azione) è "10".
• Una funzione viene eseguita prima se reimpostiamo la sua priority a un numero inferiore.
• Una funzione viene eseguita più tardi se reimpostiamo la sua priority a un numero più alto.

Per caricare per ultimo il foglio di stile del nostro tema figlio, usa wp_enqueue_scripts , un'azione comunemente usata dai temi e dai plugin di WordPress. Abbiamo solo bisogno di cambiare la priorità dell'azione del nostro tema figlio wp_enqueue_scripts su un numero superiore al valore predefinito di "10", diciamo "99":

 add_action( 'wp_enqueue_scripts', 'child_theme_styles', 99 );

In generale, utilizziamo le azioni quando non cerchiamo valori di ritorno. Per restituire i dati all'hook chiamante, dobbiamo esaminare i filtri.

Filtri

Un filtro ci consente di modificare i dati prima che vengano elaborati per la visualizzazione in un browser. A tal fine, un filtro accetta le variabili, modifica i valori passati e restituisce i dati per un'ulteriore elaborazione.

WordPress verifica ed esegue tutti i filtri registrati prima di preparare il contenuto per i browser. In questo modo, possiamo manipolare i dati prima di inviarli al browser o al database, a seconda dei casi.

Uno dei miei clienti personalizza i prodotti che vende imprimendoli con le immagini fornite dai clienti. Questo client utilizza il plug-in WooCommerce per gestire l'e-commerce. WooCommerce non supporta questa funzionalità pronta all'uso. Pertanto, ho aggiunto due bit di codice al functions.php del mio cliente:

1. woocommerce_checkout_cart_item_quantity , elencato nella documentazione di WooCommerce, è un hook di filtro che consente ai clienti di aggiungere elementi esterni ai loro carrelli, prima del checkout.
2. my_customer_image_data_in_cart è un filtro che scriveremo noi stessi e utilizzeremo per attivare woocommerce_checkout_cart_item_quantity ogni volta che WooCommerce prepara un carrello per la visualizzazione.

Utilizzando il seguente modello, possiamo aggiungere il nostro filtro e modificare il comportamento predefinito del carrello:

 add_filter( 'woocommerce_checkout_cart_item_quantity', 'my_customer_image_data_in_cart', 1, 3 ); function my_customer_image_data_in_cart( $html, $cart_item, $cart_item_key ) { if ( !empty( $cart_item['images_data'] ) ) { // Store image // Get image URL // Modify $html } return $html; }

Aggiungiamo filtri allo stesso modo in cui aggiungiamo azioni. I filtri funzionano in modo simile alle azioni, incluso il modo in cui vengono elaborate le priorità. La principale differenza tra filtri e azioni è che un'azione non restituirà dati all'hook chiamante, ma un filtro lo farà.

Ganci di azione e ganci per filtri personalizzati

La scrittura di hook di azioni personalizzate non estende Wordpress Core ma crea semplicemente nuovi punti di attivazione all'interno del nostro codice.

Creazione di hook di azioni personalizzate

L'aggiunta di un hook personalizzato nel nostro tema o plug-in consente ad altri sviluppatori di estendere le funzionalità senza modificare la nostra base di codice. Per aggiungere un hook personalizzato, usa la stessa tecnica utilizzata dalla stessa base di codice di WordPress Core: al punto di trigger desiderato, chiamiamo semplicemente do_action con il nome del nostro nuovo hook, aggiungendo opzionalmente tutti gli argomenti che i nostri callback potrebbero trovare utili:

 do_action( 'myorg_hello_action', $arg1, $arg2 );

Questo codice esegue semplicemente tutte le funzioni di callback che sono state agganciate al nostro hook personalizzato. Nota che lo spazio dei nomi è globale, quindi, come suggerito in precedenza, sarebbe una buona idea anteporre ai nostri nomi di hook personalizzati una forma abbreviata del nome della nostra organizzazione (e forse anche del nostro progetto), da cui myorg_ qui.

Ora che abbiamo definito myorg_hello_action , è disponibile per gli sviluppatori l'aggancio esattamente nello stesso modo in cui abbiamo trattato in precedenza per gli hook integrati: definisci una funzione, quindi chiama add_action() .

A meno che non desideriamo utilizzare un nuovo hook puramente internamente, dopotutto è un modo utile per strutturare il nostro codice, dovremo comunicarne la disponibilità a valle, ad altri membri del nostro team o agli utenti esterni del nostro plugin, tramite una documentazione chiara .

Creazione di ganci filtro personalizzati

Il modello di WordPress per gli hook dei filtri personalizzati è lo stesso di quello degli action hook, tranne per il fatto che chiamiamo apply_filters() invece di do_action() .

Facciamo un esempio più concreto questa volta. Supponiamo che il nostro plugin crei un menu della barra laterale, che normalmente consiste di quattro elementi. Aggiungeremo un hook di filtro personalizzato in modo che noi (e gli sviluppatori a valle) possiamo modificare quell'elenco di elementi altrove:

 // Text labels of sidebar menu $sidebar_menu = array( "Page One", "Page Two", "Page Three", "Page Four" ); $sidebar_menu = apply_filters( 'myorg_sidebar_menu', $sidebar_menu );

Questo è tutto: il nostro hook del filtro personalizzato myorg_sidebar_menu è ora pronto per l'uso in un plug-in che può essere caricato in un secondo momento o altrove in questo. Ciò consente a chiunque scriva codice a valle di personalizzare la nostra barra laterale.

Noi o altri sviluppatori seguiremo lo stesso schema quando utilizziamo un hook integrato di WordPress. In altre parole, inizieremo definendo alcune funzioni di callback che restituiscono una versione modificata dei dati che vengono passati:

 function lowercase_sidebar_menu( $menu ) { $menu = array_map( 'strtolower', $menu ); return $menu; } function add_donate_item( $menu ) { $menu = array_push( $menu, 'Donate' ); return $menu; }

Come con i nostri esempi precedenti, ora siamo pronti per agganciare le nostre funzioni di callback del filtro al nostro hook personalizzato:

 add_filter( 'myorg_sidebar_menu', 'add_donate_item', 100 ); add_filter( 'myorg_sidebar_menu', 'lowercase_sidebar_menu' );

Con ciò, abbiamo agganciato le nostre due funzioni di callback di esempio al nostro hook di filtro personalizzato. Entrambi ora modificano il contenuto originale di $the_sidebar_menu . Poiché abbiamo assegnato un valore di priority più alto a add_donate_item , viene eseguito in un secondo momento, dopo l'esecuzione di lowercase_sidebar_menu .

Gli sviluppatori a valle sono sempre liberi di agganciare più funzioni di callback a myorg_sidebar_menu . Mentre lo fanno, possono usare il parametro priority per far funzionare i loro hook prima, dopo o tra le nostre due funzioni di callback di esempio.

Il cielo è il limite con azioni e filtri

Con azioni, filtri e hook, le funzionalità di WordPress possono crescere a passi da gigante. Possiamo sviluppare funzionalità personalizzate per il nostro sito, lasciando i nostri contributi estensibili come WordPress. Gli hook ci consentono di aderire alla sicurezza e alle migliori pratiche mentre portiamo il nostro sito WordPress al livello successivo.

Il blog di Toptal Engineering estende la sua gratitudine a Fahad Murtaza per la sua esperienza, i beta test e la revisione tecnica di questo articolo.