Share
Questa è la parte 2 di una serie che esamina in che modo il tuo plugin e il tuo tema possono fornire la migliore esperienza utente inserendo l'interfaccia utente nativa di WordPress. Questo significa più che giusto analizzare, cercare, guardare una parte di WordPress (che abbiamo trattato nella prima parte), ma dove appropriato, imitando lo stesso flusso di lavoro che sarebbe (si spera) familiare agli utenti di WordPress. Una parte di questo è come strutturare le pagine e presentare le informazioni all'utente finale. Uno strumento incredibilmente utile da tutti e due una prospettiva utente e sviluppatore è la meta-scatola. In questo tutorial vediamo come è possibile aggiungere meta box alla propria pagina di amministrazione personalizzata.
L'uso di meta-box è comune in WordPress. Viene utilizzato nelle pagine Widget, Menu e Dashboard e, naturalmente, nella schermata di modifica dei post. Possono essere uno strumento fantastico per migliorare l'esperienza dell'utente:
Un ultimo punto che non dovrebbe passare inosservato: se implementato correttamente, i meta box consentono anche alle terze parti di aggiungere o rimuovere contenuti dalla tua pagina di amministrazione, rendendo il tuo plugin o tema facilmente estendibile.
Si prega di notare, non sto sostenendo l'uso di meta box per tutto, solo dove ha senso farlo. Come discusso nella prima parte, ci sono dei casi in cui l'interfaccia utente esistente di WordPress non è sufficiente o appropriata per ciò che il plugin sta tentando di fare. In questi casi, tu non dovrebbe vincolati all'interfaccia utente dell'amministratore, ma non dovresti ignorarlo.
WordPress è molto bravo a essere esteso e le meta box non fanno eccezione. Sono a nostra disposizione anche gli script e gli stili che WordPress utilizza per posizionare, creare stili e animare i meta box. Usarli significa che i meta-box (insieme a tutte le loro 'caratteristiche') possono essere aggiunti con un codice relativamente piccolo.
Tuttavia, per trarne vantaggio, dobbiamo imitare il layout di una pagina di amministrazione di WordPress in modo che i selettori utilizzati negli script e negli stili si applichino alla nostra pagina. Ora, ovviamente, diverse pagine implementano meta box in modo diverso. Ad esempio, la Dashboard ha fino a 4 colonne di meta box di dimensioni pari, mentre la pagina di modifica post consente solo 1 o 2, con una che funge da barra laterale. A seconda di come vuoi che appaia la tua pagina, dovrai strutturare la tua pagina di conseguenza. In questo tutorial visualizzerò il layout della casella 1/2 / 2-meta della schermata di modifica del post. Quindi diamo un'occhiata al wireframe di base di una pagina di amministrazione.
Accentsconagua
.avvolgereQuesto elemento racchiude l'intera pagina di amministrazione. Aggiunge un margine ai lati superiore e destro per mantenere la pagina di amministrazione lontana dai lati dello schermo. Questo dovrebbe essere usato su tutte le tue pagine di amministrazione.
Successivo è l'icona dello schermo. Questo dovrebbe apparire di nuovo su tutte le tue pagine di amministrazione. Il mark-up per l'icona dello schermo può essere generato utilizzando la funzione screen_icon (). Abbiamo coperto il suo uso nella prima parte di questa serie. screen_icon ( 'my-id') produce l'HTML:
Il prossimo è il titolo della pagina. Il titolo dovrebbe essere racchiuso all'interno tag. Se appropriato, è possibile aggiungere un link "aggiungi nuovo" all'interno di questi tag:
% s% s ', esc_html __ (' Titolo pagina ',' plugin_domain '), esc_url (admin_url (admin.php? page = my-link-to-add-new)), esc_html __ (' Aggiungi nuovo ',' plugin_domain ')); ?> Di solito, con i meta-box, stai accettando qualche forma di input da parte dell'utente. Per fare questo è necessario avvolgere l'intera pagina all'interno di un modulo. In ogni caso è necessario memorizzare le preferenze del meta-box (quali meta-box sono chiuse e la posizione delle meta-box).
#poststuffQuesto elemento avvolge il titolare del meta box. È un elemento importante in quanto WordPress lo utilizza per il targeting di stili e script.
# Post-corpoQuesto elemento funge da contenitore meta-box. Ha due classi importanti:
METABOX titolare e Colonne-*. Il secondo di questi specifica il layout della pagina (se ha 1 o 2 colonne). L'opzione di layout specificata dall'utente può essere ottenuta con get_current_screen () -> get_columns (). Di seguito lo usiamo per aggiungere la classe colonne-1 o colonne-2 appropriatamente (con quest'ultimo come predefinito).
# Post-corpo Ci sono due contenitori di meta box, che fungono da "colonne" di meta-box. Il primo, .postbox-contenitore 1, funge da barra laterale nel layout a 2 colonne e nel layout a 1 colonna si trova appena sopra il secondo contenitore di meta box. Poi c'è # Post-corpo-content. Questo elemento (facoltativo) non contiene alcun meta box, ma contiene qualsiasi contenuto che si desidera posizionare nella parte superiore della pagina e non può essere spostato. Nella schermata di modifica post, ad esempio, contiene il titolo del post e l'editor TinyMCE.
Per stampare i meta-box all'interno del contenitore pertinente utilizziamo il do_meta_boxes funzione che accetta tre argomenti:
$ schermo - L'ID della schermata (o possiamo usare una stringa vuota per usare l'ID della schermata corrente).$ contesto - Questo è un identificatore di stringa usato quando si registra la meta-scatola. Questo può essere qualsiasi cosa, ma dovrebbe essere descrittivo (ad esempio "lato" e "normale"). Questo ti permette di definire la posizione e l'ordine di default delle meta-box.$ oggetto - Questo è passato al callback della meta box come primo argomento, e di solito è l'oggetto che viene modificato (ad esempio un oggetto post, nella schermata di modifica del post). Se questo non è rilevante per la tua pagina di amministrazione, puoi passare nullo.Ora abbiamo la struttura della pagina che ora vogliamo noi (o qualsiasi terza parte) per poter aggiungere meta box alla pagina. Vorremmo anche caricare il codice JavaScript necessario che consente di minimizzare, nascondere o spostare questi metadati.
Per consentire l'aggiunta di meta box, è necessario attivare due hook. Il primo:
add_meta_box_ screen_id
Passa l'oggetto in corso di modifica (o null). Il secondo:
add_meta_box
Passa due variabili: l'ID della schermata e l'oggetto che si sta modificando. Gli utenti possono quindi agganciare queste azioni e aggiungere le loro meta-box alla pagina.
Quindi vogliamo caricare lo script di WordPress postbox.js. Questo script consente all'utente di spostare, minimizzare o chiudere i meta box (e salva le loro preferenze). Lo script deve essere inizializzato, quindi dovremo stampare una riga di javascript nel footer per farlo.
Infine, aggiungiamo un'opzione per lo schermo che consente all'utente di passare dal layout a una a due colonne. Le opzioni dello schermo che consentono all'utente di nascondere i meta-box vengono automaticamente aggiunte. Useremo il carico - $ pagenow agganciare per attivare la nostra richiamata solo sulla pagina appropriata. Per pagine di amministrazione personalizzate, $ pagenow è l'ID dello schermo.
2, 'default' => 2)); / * Stampa lo script nel piè di pagina. Questo 'inizializza' le metabox * / function wptuts_print_script_in_footer () ?>
Non resta che aggiungere le meta-box.
Normalmente le caselle meta possono essere aggiunte usando il add_meta_boxes o, meglio ancora, il add_meta_boxes_ post_type ganci. Più generalmente il tipo di post può essere pensato come l'ID dello schermo. Abbiamo attivato questi hook all'interno di wptuts_add_screen_meta_boxes () funzione sopra. Tutto ciò che rimane è aggrapparsi a queste azioni e usare il add_meta_box () funzione.
/ * Si presuppone che in tutto $ screen_id contenga l'ID dello schermo * / add_action ('add_meta_boxes _'. $ Screen_id, 'wptuts_add_my_meta_box'); function wptuts_add_my_meta_box () add_meta_box ('my_meta_box_id', // Meta ID casella __ ('My Meta Box', 'plugin_domain'), // Meta box Titolo 'wptuts_my_meta_box_callback', // Callback che definisce il contenuto del plugin $ screen_id, // Schermata a cui aggiungere la meta box 'normale' // Contesto); Puoi scaricare una semplice classe di pagine di amministrazione basata su questo tutorial di GitHub.
