Creazione di Meta box gestibili Meta il layout

In questa serie, stiamo camminando su come creare meta box di WordPress mantenibili. Cioè, stiamo osservando alcune best practice che possiamo utilizzare nello sviluppo di WordPress per assicurarci che stiamo scrivendo codice che sia gestibile da noi stessi o dal nostro team, mentre continua a evolversi nel tempo.

Nel primo post, abbiamo esaminato la struttura della directory iniziale e configurato il codice di base richiesto per ottenere un plug-in in esecuzione in WordPress. In questo post, continueremo a pianificare e sviluppare il nostro plug-in. 

Parliamo anche delle decisioni che prendiamo quando si tratta di separare parti del nostro codice e di come esso influenzi la manutenibilità.

Pianificazione Commento dell'autore

Nel post precedente, abbiamo iniziato a lavorare su un plugin chiamato Commento dell'autore. L'idea alla base del plugin è che permetterà agli autori dei post di lasciare varie note e risorse associate al post che sono state utilizzate sia come ispirazione, sia come pensieri dopo che il post è stato scritto e ricevuto, e altre informazioni simili.

Quando scrivi un post, diciamo che vogliamo catturare tre informazioni specifiche:

  1. Note utilizzate durante la preparazione del post
  2. Risorse e risorse utilizzate in tutto il post
  3. Tweet e collegamenti a commenti e feedback dopo la pubblicazione

Per essere chiari, vogliamo avere un modo per mantenere le note che sono andate a creare il post prima che fosse scritto, i collegamenti a varie risorse - che si tratti di articoli esterni, immagini, video, esempi di codice e così via - e quindi mantenere un elenco di tweet, link a commenti e vari frammenti di e-mail che abbiamo ricevuto.

A questo punto, abbiamo abbastanza cose da fare per iniziare a preparare la meta-box e il layout a schede per esso.

Le schede di Meta Box

Prima di iniziare effettivamente a scrivere qualsiasi codice, denominiamo le schede che verranno associate a ciascuno degli stati del nostro post come elencato sopra. Questo ci aiuterà a organizzare concettualmente i nostri elementi di input in modo che siano raggruppati logicamente.

Certo, puoi dare un nome a ciò che desideri, ma se segui questo tutorial e il codice sorgente fornito, allora questo è quello che puoi aspettarti di vedere.

  1. La prima scheda verrà chiamata Bozza poiché conterrà tutti i punti elenco, le frasi e le altre note che sono state preparate per il post.
  2. La seconda scheda verrà chiamata risorse poiché includerà informazioni su altri post, link, video e così via a cui potremmo fare riferimento nel nostro post o che potremmo incorporare nel nostro post.
  3. La scheda finale verrà chiamata Pubblicato poiché conterrà collegamenti a commenti, campi per e-mail e altre informazioni che sono pertinenti al post dopo la sua pubblicazione.

Semplice abbastanza, non è vero? Parleremo di più sugli elementi di input per ogni scheda una volta arrivati ​​a quel punto nel codice, ma per ora dobbiamo concentrarci sulla creazione della meta-box e sull'implementazione delle schede.

Creare la Meta Box

Per creare la meta-scatola, ne approfitteremo add_meta_box funzione come documentato nel codice WordPress. Per fare questo, introdurremo una nuova classe, aggiorneremo il file di bootstrap del plugin e introdurremo alcune viste che verranno utilizzate per il rendering del markup nel browser.

La Meta Box Class

Per assicurarci che il nostro codice sia ben incapsulato e che ogni classe rappresenti una singola idea, creeremo un Authors_Commentary_Meta_Box classe. Questa classe sarà responsabile della registrazione di un gancio con il add_meta_box azione, impostando la meta-box e visualizzando il suo contenuto.

Per coloro che non sono abituati a scrivere plugin in modo orientato agli oggetti con WordPress, questo approccio ci permette di segmentare le nostre aree di responsabilità - come una meta-box - e avere una singola classe che rappresenta tutto ciò che serve per crearne una.

Per fare questo, prima crea CLASS-autori-commento-meta-box.php nella directory di amministrazione. Successivamente, aggiungi il seguente codice:

 * / class Authors_Commentary_Meta_Box / ** * Registra questa classe con l'API di WordPress * * @since 0.2.0 * / public function __construct () add_action ('add_meta_boxes', array ($ this, 'add_meta_box'));  / ** * La funzione responsabile della creazione della meta-box effettiva. * * @since 0.2.0 * / public function add_meta_box () add_meta_box ('authors-commentary', "Author's Commentary", array ($ this, 'display_meta_box'), 'post', 'normal', 'default') ;  / ** * Esegue il rendering del contenuto della meta-box. * * @since 0.2.0 * / public function display_meta_box ()  

I commenti e il contenuto della classe dovrebbero renderlo relativamente facile da capire. Fa tre cose, ma per essere chiari:

  1. Il costruttore registra il add_meta_box funziona con la corrispondente azione WordPress.
  2. Il add_meta_box la funzione definisce le proprietà della meta-box.
  3. Il display_meta_box la funzione non fa ancora nulla - ci lavoreremo su questo momentaneamente.

Prima di andare avanti, ci sono alcune modifiche che dobbiamo introdurre al resto del plugin.

Per prima cosa, dobbiamo includere questo nuovo file nel file bootstrap del plugin. Nel autori-commentary.php, aggiungi la seguente riga di codice sopra la corrente require_once dichiarazione:

/ ** * La classe che rappresenta la meta box che visualizzerà le schede di navigazione e ciascuno dei campi * per la meta-box. * / require_once plugin_dir_path (__FILE__). 'Admin / classe-autori-commento-meta-box.php';

Aggiungiamo questa riga sopra il codice iniziale perché il codice iniziale dipende da questo particolare file da eseguire; quindi, deve essere caricato prima.

Successivamente, abbiamo bisogno di introdurre una nuova proprietà nel lato di admin / classe-autori-commentary.php che farà riferimento a un'istanza della meta-box:

/ ** * Un riferimento alla meta-scatola. * * @since 0.2.0 * @accesso privato * @var Authors_Commentary_Meta_Box $ meta_box Un riferimento alla meta-box per il plugin. * / private $ meta_box;

Infine, abbiamo bisogno di istanziare il codice nel costruttore della classe:

/ ** * Inizializza la classe e imposta le sue proprietà. * * @since 0.1.0 * @var stringa $ nome Il nome di questo plugin. * @var string $ version La versione di questo plugin. * / funzione pubblica __construct ($ nome, $ versione) $ this-> nome = $ nome; $ this-> version = $ version; $ this-> meta_box = new Authors_Commentary_Meta_Box (); 

A questo punto, dovresti essere in grado di attivare il plug-in, accedere a una pagina di post e visualizzare una meta-box vuota:

Niente di troppo eccitante, ma abbiamo ciò di cui abbiamo bisogno per iniziare a introdurre la nostra navigazione a schede.

Aggiunta di schede

A questo punto, siamo pronti per introdurre la parte di navigazione a schede della meta-box. In definitiva, il nostro obiettivo è introdurre il markup e gli stili per la scheda in questo post, quindi implementare il comportamento e gli elementi nel prossimo post della serie.

Detto questo, creiamo prima un visualizzazioni sottodirectory all'interno del Admin directory. Tecnicamente, lo abbiamo fatto nel precedente articolo; tuttavia, non avevamo il contenuto nella directory, quindi non è stato controllato nel controllo del codice sorgente (quindi, la directory non è stata aggiunta, quindi se stai seguendo il repository, ora è il momento di creare la directory).

Quindi, creare un file all'interno della directory views chiamato autori-commento-navigation.php. Questo file servirà principalmente come markup; tuttavia, includerà un po 'di PHP per il momento in cui stiamo usando questo plugin.

Aggiungi il seguente codice al file. Ne discuteremo più approfonditamente dopo il blocco di codice:

Bozza di risorse pubblicate

Una volta fatto, inserisci il seguente codice in Authors_Commentary_Meta_Box, aggiungi il codice seguente per importare questo particolare pezzo di markup:

A parte il div contenitore che abbiamo, notare quanto segue:

  • Abbiamo avvolto tre ancore in un h2 elemento. Il h2 elemento contiene attributi di classe di nav-tab-wrapper e attuale. Questo ci consente di ereditare gli stili direttamente da WordPress senza fare nulla da parte nostra.
  • Ogni ancora ha un nav-scheda classe la prima delle quali ha il nav-tab-attivo classe. Questo ci offre ancora un po 'di stile da cui ereditiamo da WordPress.
  • Ogni ancora ha anche il href attributo di javascript :; perché le ancore in realtà non ci porteranno da nessuna parte. Invece, in un futuro tutorial, utilizzeremo JavaScript per controllare le schede e il contenuto visualizzato all'interno di ciascuna di esse.

A questo punto, dovresti vedere quanto segue:

Si noti che tutti gli stili applicati alle schede sono stati forniti da WordPress. L'unica cosa che potresti voler modificare è il margine che esiste tra le schede e la linea orizzontale sotto di loro. 

Facciamolo ora.

Incluso un foglio di stile

Nel Admin directory, aggiungi un'altra sottodirectory chiamata risorse e al suo interno una directory chiamata css. Quindi, creare un file vuoto chiamato admin.css.

Successivamente, includi le seguenti righe nel file CSS:

a.nav-tab margin-bottom: -4px; 

Quindi assicurati di includere la seguente chiamata nel costruttore di class-autori-commentary.php:

add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_styles'));

Infine, aggiungi la seguente funzione: è responsabile dell'inserimento del foglio di stile attuale:

/ ** * Accoda tutti i file in modo specifico per la dashboard. * * @since 0.2.0 * / public function enqueue_admin_styles () wp_enqueue_style ($ this-> name. '-admin', plugins_url ('authors-commentary / admin / assets / css / admin.css'), false, $ questa-> versione); 

A questo punto, dovrebbe sembrare molto più pulito:

Fatto ciò, abbiamo completato tutto ciò che dobbiamo fare per le basi di base delle schede di navigazione per la nostra meta-box.

Prepararsi ad andare avanti

Nel prossimo articolo, introdurremo il contenuto di ogni scheda e lavoreremo attraverso il codice JavaScript necessario per attivare le schede e ciascun contenuto.

Per coloro che hanno più esperienza con WordPress, questa serie di articoli potrebbe sembrare che si stia muovendo a un ritmo più lento, ma questo è il punto: stiamo cercando di essere il più esauriente possibile quando si tratta non solo di costruire la nostra interfaccia utente, ma anche nello spiegare la logica dietro ciascuna delle nostre decisioni.

Nel frattempo, non dimenticare di eseguire il checkout del codice sorgente su GitHub, segui e lascia qualsiasi domanda o commento nel feed sottostante.