Creazione di Meta box gestibili Meta Completa il front-end

In questa serie di articoli, stiamo rivedendo una manciata di suggerimenti e strategie che possiamo utilizzare per creare più plugin per WordPress mantenibili, e lo faremo tutti attraverso il contesto di un plugin che sfrutta le metabox a schede.

Nel post precedente, abbiamo implementato la funzionalità specificamente per le nostre schede e abbiamo implementato anche la prima textarea che verrà usato per catturare parte dell'input dell'utente. Per coloro che hanno seguito, sai che siamo arrivati solo a:

Rendere le schede funzionali
Presentazione di un singolo elemento dell'interfaccia utente con cui l'utente può interagire

Non abbiamo completato l'effettivo processo di sanificazione, convalida e salvataggio dei dati, né ci siamo preoccupati di introdurre il contenuto per il resto delle schede. Nei prossimi due articoli, faremo esattamente questo.

Nello specifico, in questo articolo, continueremo a introdurre il resto dell'interfaccia utente, quindi passeremo alla scrittura del codice in realtà per verificare l'input dell'utente e associarlo al post specificato.

Con quello presentato davanti a noi, iniziamo.

Modelli di tabulazione, rivisitati

Come accennato, nell'ultimo post abbiamo introdotto un textarea nel nostro Bozza scheda. Se segui le esercitazioni e / o utilizzi il codice nel repository disponibile, dovresti vedere qualcosa di simile a questo:

L'idea dietro il Bozza tab è semplice: questo è un posto in cui gli utenti saranno in grado di annotare appunti, raccogliere idee e fondamentalmente avere un blocco note in posizione per aiutarli a raccogliere le loro idee prima di scrivere un post.

risorse

Cosa ne pensi riguardo a RisorsaS scheda? L'idea alla base di questa scheda è che gli utenti saranno in grado di raccogliere vari URL per pagine, tweet, immagini e altre informazioni relative ai contenuti che desiderano scrivere in modo che possano incorporarli, collegarli e / o fare riferimento ai loro post.

Ecco come funzionerà:

Ci sarà un pulsante che permetterà all'utente di aggiungere campi aggiuntivi
Quando si fa clic sul pulsante, verrà aggiunto un singolo campo di input sopra il pulsante per acquisire l'input dell'utente.
Se l'utente fornisce informazioni, verrà salvato quando il post viene salvato.
Se l'utente non fornisce alcuna informazione, non verrà salvato.

Per quanto riguarda gli ultimi due articoli, ci occuperemo di ciò nel prossimo articolo. Per ora, prendiamoci cura di aggiungere in modo dinamico i campi di input.

Individuare admin / views / parziali / resources.php e aggiorna il codice per assomigliare a questo:

Quindi, creiamo un file in admin / attività / js e chiamalo resources.js. Stub il file in modo che assomigli al seguente:

(function ($) 'use strict'; $ (function () );) (jQuery);

Successivamente, dobbiamo impostare un gestore di eventi in modo tale che quando l'utente fa clic su Aggiungi risorsa pulsante, effettua le seguenti operazioni:

Crea un nuovo elemento di input.
Fornisce gli attributi ID e nome corretti in modo che le informazioni possano essere serializzate.
Collegato alla lista esistente di elementi di input.

Ecco il codice completamente commentato su come ottenerlo con ulteriori informazioni di seguito:

/ ** * Crea un nuovo elemento di input da aggiungere al DOM utilizzato per rappresentare una singola risorsa * (ad esempio indirizzo, tweet, URL immagine, ecc.) A cui fare riferimento nel post. * * @since 0.4.0 * @param object $ Un riferimento all'oggetto jQuery * @return object Un elemento di input da aggiungere al DOM. * / function createInputElement ($) var $ inputElement, iInputCount; / * Innanzitutto, conta il numero di campi di input già esistenti. Questo è il modo in cui * implementeremo il nome e gli attributi ID dell'elemento. * / iInputCount = $ ('# authors-commentary-resources') .children (). length; iInputCount ++; // Successivamente, crea l'elemento di input effettivo e quindi restituiscilo al chiamante $ inputElement = $ ('') .attr (' type ',' text ') .attr (' name ',' authors-commentary-resource- '+ iInputCount) .attr (' id ',' authors-commentary-resource- '+ iInputCount). attr ('value', "); return $ inputElement; (function ($) 'use strict'; $ (function () var $ inputElement; $ ('# authors-commentary-add-resource'). on ('clic', funzione (evt) evt.preventDefault (); / * Crea un nuovo elemento di input che verrà utilizzato per catturare l'input degli utenti * e aggiungerlo al contenitore appena sopra questo pulsante. * / $ ('# authors-commentary-resources ') .append (createInputElement ($));););) (jQuery);

Nel codice sopra, c'è una funzione specificamente progettata per la creazione di un elemento di input e l'utilizzo del numero di elementi preesistenti per aiutarlo a dargli un nome e un ID univoci.

C'è anche un gestore DOM-ready che imposta una funzione da attivare ogni volta che l'utente fa clic sul Aggiungi risorsa pulsante. Quando si fa clic sul pulsante, viene richiamata la funzione summenzionata e quindi l'elemento di input viene aggiunto al contenitore padre.

Per essere sicuri che questo sia il migliore, dobbiamo scrivere alcuni stili. Quindi, proprio come abbiamo fatto con l'origine JavaScript, individuare admin / beni / css / admin.css e quindi aggiungere il seguente codice alla fine del file:

# author-commentary-resources input [type = "text"] width: 100%; margin-bottom: 10px;

Ciò garantirà che ciascun elemento di input abbia una larghezza del 100% in modo che ognuno di essi risieda sulla propria linea.

Infine, dobbiamo accodare il JavaScript che abbiamo scritto con WordPress in modo che risponda correttamente agli elementi che abbiamo mostrato sul nostro parziale. Per fare ciò, individuare il enqueue_admin_scripts funzione in admin / classe-autori-commentary.php, e aggiorna la funzione in modo che assomigli a questa:

id) wp_enqueue_script ($ this-> name. '-tabs', plugin_dir_url (__FILE__). 'authors-commentary / admin / assets / js / tabs.js', array ('jquery'), $ this-> version) ; wp_enqueue_script ($ this-> name. '-resources', plugin_dir_url (__FILE__). 'authors-commentary / admin / assets / js / resources.js', array ('jquery'), $ this-> version);

A questo punto, dovresti essere in grado di caricare l'editor di post nel tuo browser, fare clic su risorse scheda, quindi iniziare ad aggiungere in modo dinamico più campi di input alla pagina.

Ricorda, in realtà non stiamo ancora facendo nulla sul lato server, quindi non stiamo disinfettando, convalidando o salvando queste informazioni. Lo faremo nel prossimo articolo.

Pubblicato

Ora che abbiamo un posto dove raccogliere varie note e risorse da utilizzare in tutti i nostri post, quali sarebbero gli elementi Pubblicato scheda contiene?

Includerebbe un'area in cui potremmo lasciare i nostri commenti e note simili a bozze scheda? Forse.
Includerebbe un posto dove salvare link a commenti e altre risorse che sono utili per il follow-up dopo il post?
Forse includerebbe solo un elenco di tutti i commenti sul post insieme a un link a detti commenti e una casella di controllo per verificare se il commento aveva ricevuto o meno una risposta o meno.

Tutti e tre sono cose perfettamente accettabili da introdurre nel Pubblicato scheda; tuttavia, al fine di non reinventare la ruota e di continuare a introdurre nuove funzionalità, nonché altri modi per lavorare con l'API di WordPress, andremo con l'opzione finale.

In particolare, stiamo andando a caricare un elenco di tutti i commenti che esistono sul post. Accanto ad ogni commento sarà una casella di controllo. Se il commento ha ricevuto una risposta, verrà controllato; in caso contrario, verrà deselezionato.

Noi non includere i pingback per questo poiché un autore in genere non risponde ai pingback.

Detto questo, carico admin / views / parziali / published.php e aggiungi il seguente codice:

  load_post_comments (); ?>      Questo commento ha ricevuto una risposta.   COMMENT_AUTHOR; ?>: COMMENT_CONTENT; ?>

Si noti che stiamo effettuando una chiamata a una funzione chiamata load_post_comments. Dal momento che non l'abbiamo ancora definito, saltiamo dentro admin / classe-autori-commento-meta-box.php e aggiungi il seguente codice:

 get_the_ID (), 'status' => 'approve'); $ commenti = get_comments ($ args); restituire $ commenti;

Questa funzione recupererà una raccolta di tutti i commenti approvati per il post specificato. Il parziale elencato sopra eseguirà quindi un'iterazione attraverso i commenti e quindi creerà un'etichetta e una casella di controllo che consentirà all'utente di selezionare se il commento ha ricevuto o meno una risposta.

Sotto l'etichetta, noterai l'autore del commento e il commento. Questo è inteso principalmente come un modo per identificare facilmente il commento che è stato lasciato.

Infine, dobbiamo aggiungere un'altra cosa al nostro foglio di stile:

# label-commentary-comments label font-weight: bold;

E abbiamo finito.

Alla fine, dovresti finire con uno schermo molto simile a quello che vedi sopra.

Spostamento verso il lato server

Nel prossimo articolo, torneremo sul lato server e inizieremo a lavorare sul codice per convalidare, disinfettare, serializzare e recuperare tutto il codice associato all'interfaccia utente che abbiamo appena creato.

Nel frattempo, ricordati di controllare il codice su GitHub (disponibile sul lato destro di questo post) e sentiti libero di lasciare tutte le domande e i commenti nel feed qui sotto.

Codice