Aggiunta di hook personalizzati in WordPress azioni personalizzate

Uno dei capisaldi della creazione di soluzioni personalizzate in WordPress è la comprensione degli hook. Di per sé, non sono terribilmente difficili da capire e in questo tutorial copriremo un breve manuale di base.

Ma se stai cercando di entrare nello sviluppo di WordPress più avanzato, vale la pena sapere come implementare i propri hook.

In questa serie in due parti, esamineremo il sistema di hook di WordPress e come è implementato, e daremo un'occhiata a come definire sia le nostre azioni che i nostri filtri.

Iniziare

Prima di iniziare, questo tutorial presume che tu abbia un ambiente di sviluppo locale che include l'ultima copia di WordPress. Al momento della stesura di questo, questo è WordPress 4.5.2. 

Se hai bisogno di indicazioni su come configurare il tuo ambiente di sviluppo, consulta questo tutorial. Ti fornirà tutto ciò che devi sapere per essere configurato con un server web, una copia di PHP, un database e WordPress.

Se stai cercando ancora di più, la serie in cui è incluso quel tutorial fornisce ancora più informazioni come come installare WordPress, procedure dettagliate di temi e plugin e altro ancora.

Ma in questo tutorial ci concentriamo su hook e azioni. Quindi, una volta che sei pronto, iniziamo.

Cosa sono i ganci?

Prima di dare uno sguardo approfondito agli hook di WordPress, vale la pena comprendere il modello di progettazione event-driven (che è anche definito architettura event-driven). 

Se hai lavorato con gli hook di WordPress esistenti o con lo sviluppo Web front-end o con JavaScript in qualsiasi capacità, probabilmente conosci questo pattern anche se non sapevi che aveva un nome ufficiale. 

Indipendentemente da ciò, questo è il modo in cui è definito in Wikipedia:

L'architettura event-driven (EDA), nota anche come architettura message-driven, è un'architettura software che promuove la produzione, l'individuazione, il consumo e la reazione agli eventi.

Se sei appena iniziato con i modelli di progettazione o lo sviluppo, questo può sembrare complicato, ma un altro modo di pensarlo è come questo:

• Il software ha alcuni punti in cui trasmette un messaggio che qualcosa è successo.
• Noi, come sviluppatori, siamo in grado di scrivere il codice che ascolta questo messaggio e poi rispondere ad esso con un codice personalizzato.

Si noti che la definizione parla anche della produzione di eventi. Quando passeremo a parlare della definizione dei nostri ganci, rivedremo questo argomento. Per ora, diamo un'occhiata a due eventi comuni nello sviluppo web.

Utilizzando JavaScript

Innanzitutto, immagina di lavorare nello sviluppo front-end. Hai un pulsante con l'attributo ID di pulsante di comando, e quando l'utente fa clic su di esso, si desidera visualizzare una finestra di avviso.

Usando jQuery, puoi implementare questa funzionalità in questo modo:

(function ($) 'use strict'; // gestore di eventi DOM-ready di jQuery $ (function () / ** * Ascolta l'evento 'click' sul pulsante identificato * con l'ID 'command-button' attributo. * * Quando l'utente fa clic su di esso, visualizza una finestra di dialogo di avviso. * / $ ('# command-button') .bind ('click', function (evt) alert ('Hai fatto clic sul pulsante.'); ););) (jQuery);

I commenti nel codice qui sopra dovrebbero spiegare esattamente cosa sta succedendo. In breve, il browser solleva un evento quando l'utente fa clic su un pulsante. Quando ciò accade, il nostro codice ascolta l'evento e quindi risponde visualizzando una finestra di dialogo.

Naturalmente, altre librerie, framework o vanilla JavaScript offrono questa stessa funzionalità. Lo scopo di mostrare questo in jQuery è perché è una delle librerie JavaScript più comuni e perché è anche ciò che è in bundle con WordPress.

Utilizzando WordPress

L'implementazione di questo modello non ha necessariamente lo stesso aspetto in tutti i linguaggi di programmazione o paradigmi. Ciò dipende spesso dalle API fornite dal framework, dalle fondamenta o dall'applicazione.

In WordPress, registrare il nostro codice con un evento che spara è un po 'diverso. Ad esempio, diciamo che stai lavorando con le pagine di amministrazione in WordPress e vuoi aggiungere un nuovo elemento di sottomenu al impostazioni menu. Lo chiameremo Tuts + Opzioni.

Per fare questo, dovremmo aggiungere il seguente codice al nostro functions.php file o il nostro plugin o qualsiasi tipo di progetto su cui siamo focalizzati:

Puoi visitare il Codice per saperne di più su admin_menu gancio così come il add_submenu_page funzione.
Questo codice non aggiunge alcuna nuova funzionalità al menu, ma ha lo scopo di dimostrare che WordPress fornisce un admin_menu evento, proprio come un browser web fornisce un evento click. Siamo quindi in grado di iniettare il nostro codice definendo una funzione e attivarla ogni volta che viene generato quell'evento.
Questi sono due esempi pratici del modello di progettazione event-driven che è sia implementato che utilizzato.
Comprendere le azioni di WordPress
Ora che abbiamo avuto un breve suggerimento sul modello di progettazione basato sugli eventi e abbiamo visto due implementazioni del modello, diamo un'occhiata in particolare alle azioni di WordPress. Esamineremo ciò che è disponibile e come possiamo implementare il nostro.
Impostazione del nostro file
Ai fini del codice in questo tutorial, useremo il tema twentysixteen predefinito fornito con WordPress.
Nella radice della directory del tema, creare un file chiamato tutsplus-actions.php. Quindi, in functions.php, aggiungi la seguente riga di codice:
Questo indica al tema di caricare il file che abbiamo definito. Il motivo per cui vogliamo farlo è che possiamo mantenere il nostro codice fuori dal nucleo del tema e in modo da poter rimuovere facilmente il codice eliminando il include_once dichiarazione di cui sopra.
Una breve definizione di azioni
In WordPress, gli hook si dividono in due categorie: azioni o filtri. Le azioni sono punti nel ciclo di vita di WordPress che consentono di aggiungere, rimuovere o modificare determinate funzionalità. I filtri, d'altra parte, sono punti nel ciclo di vita di WordPress in cui è possibile aggiungere, rimuovere o modificare i dati.
In breve, le azioni sono concepite per funzionare con funzionalità e i filtri sono pensati per funzionare con i dati. Ci concentreremo maggiormente sui filtri nella seconda parte di questa serie.
Una cosa che voglio sottolineare è che se si sceglie di ricercare azioni e filtri di più dopo aver letto questa serie di tutorial (che incoraggio), si possono trovare altri che si riferiscono ad essi più in generale come ganci.
Sebbene questo sia tecnicamente corretto, è più pragmatico ed è più chiaro discutere del tipo di hook con cui stai lavorando ogni volta che stai scrivendo, presentando o discutendo l'argomento con qualcun altro. 
Questo perché le azioni hanno lo scopo di offrire un tipo di funzionalità e i filtri sono pensati per permettersi un altro tipo di funzionalità.
Lavorare con le azioni
Anche se abbiamo già esaminato un esempio specifico di un'azione in alcuni esempi di codice sopra, diamo un'occhiata a un esempio più completo e più pratico.
WordPress offre due tipi di post: Post (per i normali post del blog) e Pages (per contenuti statici o contenuti che cambieranno raramente). Per una piattaforma di blog standard, questo tipo di contenuto è probabilmente tutto ciò di cui hai bisogno. Ma WordPress è maturato in un CMS anni fa.
E una delle funzionalità che rende estensibile WordPress è la possibilità di introdurre i nostri tipi di post. WordPress chiama questi tipi di post personalizzati, e sono grandiosi quando abbiamo bisogno di creare un tipo di contenuto che ha bisogno del proprio tipo di attributi e che deve essere nominato qualcosa di più specifico di "post" o "pagine".
Per creare il nostro tipo di post personalizzato, dovremo fare due cose:
 
definire una funzione che si aggancia al dentro gancio come previsto da WordPress
 
registra il nostro tipo di messaggio con una delle funzioni API fornite
 
Registrazione della nostra azione
Per registrare la nostra azione, faremo uso del add_action funzione fornita dall'API di WordPress. Questo dice a WordPress che stiamo introducendo un'azione e che ha bisogno di attivare la funzione identificata dal nome che abbiamo fornito nella chiamata alla funzione.
Il nostro codice dovrebbe assomigliare a questo:
Nel codice sopra, stiamo registrando una funzione con il hook init che esiste in WordPress. Questo hook si attiva all'inizio del ciclo di vita di WordPress ed è un buon momento in cui registrare un tipo di post personalizzato.
Successivamente, dobbiamo definire la funzione.
La chiave per comprendere la firma di questa funzione è semplice: l'abbiamo chiamata tutsplus_register_post_type poiché questo è il secondo argomento che abbiamo passato nel add_action chiamata.
Questo letteralmente istruisce WordPress a fare quanto segue: Durante dentro, fare una chiamata al tutsplus_register_post_type funzione.
Fin qui tutto bene. Non abbiamo davvero colpito nulla di complicato, e se aggiorni la schermata di amministrazione di WordPress, vedrai che è ancora funzionante anche se non sta facendo nulla di nuovo.
Cambiamo questo.
Creazione di un tipo di messaggio personalizzato
Ora che abbiamo il codice skeleton per aggiungere la nostra azione, facciamo in realtà che qualcosa accada. In particolare, creiamo un tipo di messaggio personalizzato chiamato viaggiatore nel tempo che include un titolo, un editor, un estratto e nient'altro.
Per fare ciò, dobbiamo rivedere il register_post_type funzione nel codice. La documentazione fornisce una spiegazione solida per tutti gli argomenti che la funzione può accettare, ma useremo solo un sottoinsieme di essi per il nostro tipo di post personalizzato.
In particolare, useremo il seguente:
 
etichetta
 
etichette
 
descrizione
 
pubblico
 
show_ui
 
supporti
 
Faremo affidamento sul resto delle funzionalità fornite dai valori predefiniti di WordPress. Gli argomenti saranno simili a questo:
 'Time Travelers', 'labels' => array ('name' => 'Time Travelers', 'singular_name' => 'Time Traveler', 'add_new_item' => 'Aggiungi nuovo viaggiatore', 'edit_item' => 'Modifica Traveler ',' new_item '=>' Nuovo viaggiatore ',' view_item '=>' Visualizza viaggiatore ',' search_items '=>' Cerca viaggiatori ',' non_propri '=>' Nessun viaggiatore ',),' descrizione '=> "Tipo di post utilizzato per fornire informazioni su Time Travelers.", "Public" => true, "show_ui" => true, "supports" => array ("title", "editor", "excerpt",),) ; 
E l'ultima versione completa del codice per la registrazione del tipo di post sarà simile a questa:
 'Time Travelers', 'labels' => array ('name' => 'Time Travelers', 'singular_name' => 'Time Traveler', 'add_new_item' => 'Aggiungi nuovo viaggiatore', 'edit_item' => 'Modifica Traveler ',' new_item '=>' Nuovo viaggiatore ',' view_item '=>' Visualizza viaggiatore ',' search_items '=>' Cerca viaggiatori ',' non_propri '=>' Nessun viaggiatore ',),' descrizione '=> "Tipo di post utilizzato per fornire informazioni su Time Travelers.", "Public" => true, "show_ui" => true, "supports" => array ("title", "editor", "excerpt",),) ; register_post_type ('time_traveler', $ args);  
Quando aggiorni l'area di amministrazione della tua installazione di WordPress, dovrebbe esserci una nuova voce di menu direttamente sotto Commenti quello legge Viaggiatori del tempo.
Quando si fa clic su Aggiungere nuova, dovresti vedere un posto per un titolo (o il nome del viaggiatore), l'editore (per le informazioni del viaggiatore) e un estratto (forse per alcune note sul viaggiatore). Dovresti anche vedere una singola meta-box per pubblicare le informazioni.
Ovviamente, il codice sopra riportato ci mostra come sfruttare le azioni esistenti per definire un tipo di messaggio personalizzato. Ma cosa succede se vogliamo creare le nostre azioni?
Definizione di azioni personalizzate
Quando si tratta di creare le nostre azioni, ci sono tre cose che dobbiamo fare. Al livello più fondamentale, dobbiamo fare quanto segue:
 
definire il gancio
 
dare funzionalità al gancio
 
consentire agli sviluppatori di chiamare il gancio
 
L'esempio più semplice che posso dare per questo è il seguente codice:
Sentiti libero di aggiungere questo codice di esempio a tutsplus-actions.php in modo da continuare a modificare ed esplorare il codice dopo questo tutorial.
Dopodiché, possiamo chiamare la nostra funzione tutsplus_action ovunque nel nostro codice. Diciamo, per esempio, che volevamo mostrarlo nella parte superiore dell'area di amministrazione. Se è quello che volevamo fare, potremmo aggiungere il seguente codice:
Se aggiorni la tua dashboard, viene visualizzato "Questo è un hook di azione personalizzato" visualizzato nella parte superiore della dashboard. 
Si noti che non è consigliabile collegarsi a admin_notices a meno che non si stia pianificando specificamente di notificare all'utente un esito positivo, un avvertimento o un messaggio di errore. Lo sto usando qui specificatamente come modo per dimostrare il nostro amo personalizzato.
Rivisitare il nostro tipo di posta
Diciamo che volevamo creare una funzione di tipo di post personalizzata che ci consenta di passare il nome singolare e plurale del tipo di post in una funzione tramite l'uso di un hook di azione.
Come potremmo fare per farlo? Usando ciò che abbiamo visto sopra, sappiamo che la prima cosa che dobbiamo fare è creare una funzione personalizzata che chiamerà un'azione. Quindi facciamolo ora:
Quindi, dobbiamo fare qualcosa che sembrerà un po 'controintuitivo. Dal momento che vogliamo attivare la nostra funzionalità personalizzata nel contesto del hook di init, dobbiamo assicurarci che il nostro hook venga attivato durante l'azione init. 
Per fare ciò, colleghiamo il nostro hook personalizzato al hook init:
Nota nel codice sopra stiamo specificando due parametri aggiuntivi per do_action. Il primo parametro è 10, che indica la priorità con cui questo hook scatterà. 
Questo può essere qualsiasi numero in cui maggiore è il numero, più in basso nell'elenco delle priorità che verrà attivato. Il secondo parametro è il numero di argomenti accettati dal gancio personalizzato. Nel nostro caso ce n'è uno per la versione singolare del tipo di post, e ce n'è uno per la versione plurale del tipo di post.
Dopodiché, dobbiamo dare funzionalità a questo hook. Qui, ci rifatteremo il codice per la registrazione di un tipo di post in modo che accetti due argomenti, e quei due argomenti verranno utilizzati nell'array passato a WordPress register_post_type funzione.
 $ plurale, 'labels' => array ('name' => $ plural, 'singular_name' => $ singular, 'add_new_item' => 'Aggiungi nuovo viaggiatore', 'edit_item' => 'Modifica viaggiatore', 'new_item' => 'Nuovo viaggiatore', 'view_item' => 'Visualizza viaggiatore', 'search_items' => 'Cerca viaggiatori', 'not_found' => 'Nessun viaggiatore',), 'descrizione' => 'Un tipo di messaggio usato per fornire informazioni su Time Travelers. ',' public '=> true,' show_ui '=> true,' supports '=> array (' title ',' editor ',' excerpt ',),); register_post_type ('time_traveler', $ args);  
Nota che abbiamo anche rimosso questa funzione dall'aggiunta ad un particolare hook. Invece, lo chiameremo all'interno della definizione di una funzione che è agganciata alla nostra azione personalizzata.
Nel codice sopra, siamo in grado di effettuare una chiamata alla funzione responsabile della registrazione del tipo di post personalizzato, passandogli tutti i nostri argomenti in modo da poter aggiungere un po 'di funzionalità personalizzata al codice.
Conclusione
La definizione di hook personalizzati non è complicata e ci offre anche molta potenza e flessibilità come sviluppatori. Probabilmente, la cosa più confusa riguardo al codice sopra è come stiamo definendo un hook nel contesto di un altro hook (cioè, stiamo definendo tutsplus_register_custom_post_type entro dentro).
Ho deciso di dare questo esempio finale perché ci sono momenti in cui potresti voler registrare un hook personalizzato e deve sparare prima che un hook preesistente sia completato.
Registrare un gancio da solo è facile: semplicemente non lo si aggancia a un gancio preesistente e si effettua una chiamata di base come abbiamo visto con il codice agganciato a admin_notices.
Nel prossimo post di questa serie, daremo un'occhiata ai filtri e cosa possono fare per noi in termini di modifica dei dati. Vedremo anche come definire i nostri filtri in modo da poter introdurre funzionalità personalizzate come abbiamo fatto in questo tutorial.
Finché non verrà pubblicato il prossimo articolo, se stai cercando altre utilità che ti aiutino a costruire il tuo set crescente di strumenti per WordPress o che il codice studi e diventi più esperto in WordPress, non dimenticare di vedere cosa abbiamo disponibile nel mercato Envato.
Ricorda, puoi prendere tutti i miei corsi e tutorial nella pagina del mio profilo, e puoi seguirmi sul mio blog e / o Twitter su @tommcfarlin dove parlo di varie pratiche di sviluppo del software e come possiamo impiegarle in WordPress.
Non esitare a lasciare qualsiasi domanda o commento nel feed qui sotto e cercherò di rispondere a ciascuno di essi.
Risorse correlate
 
Come installare WordPress: il software del server
 
Come iniziare con WordPress
 
twentysixteen
 
add_submenu_page
 
admin_menu
 
add_action
 
dentro
 
register_post_type
 
do_action
 



		
			
	   
	




Codice