Share
Questa serie è incentrata su suggerimenti e strategie che possiamo utilizzare per scrivere plugin WordPress, in particolare quelli che utilizzano i meta box, che sono organizzati logicamente e di facile manutenzione.
Nei primi due post della serie, abbiamo definito la struttura iniziale della directory, abbiamo impostato il codice per il plugin e abbiamo discusso su cosa farà il plugin. Nell'ultimo post, abbiamo iniziato a creare la meta-box e introdurre le schede che conterranno ciascuna delle funzionalità che andremo a lavorare.
Questo articolo continuerà a costruire su quello che abbiamo fatto finora. Introdurremo i contenuti in ciascuna scheda, implementando funzionalità che consentano di attivare e disattivare i contenuti e inizieremo a introdurre i campi per i contenuti nella prima scheda.
Prima di implementare le schede che selezionano tutte le opzioni disponibili, dobbiamo introdurre partial, modelli, visualizzazioni o qualsiasi altra cosa desideri chiamarli in modo da disporre di file specifici per la gestione delle nostre informazioni.
Per prima cosa, vai al admin / views / parziali directory e aggiungere i seguenti file (che possono essere tutti vuoti, per ora anche se ho fornito un codice base qui sotto):
Accentsconagua
drafts.phpresources.phppublished.phpCiascuno di questi file corrisponderà a una delle schede nell'interfaccia dei meta-box. Andiamo avanti e introdurre alcuni contenuti segnaposto per ciascuna delle schede. Prima di terminare l'articolo, implementeremo l'interfaccia utente della prima scheda, ma ciò ci fornirà qualcosa di visivo con cui lavorare prima di continuare a lavorare sulla funzionalità della scheda effettiva.
Aggiungere il seguente codice a drafts.php.
È qui che risiederà il contenuto di Draft.
Daremo un'occhiata a questo parziale più avanti nell'articolo.
Aggiungere il seguente codice a resources.php.
Questo è dove risiederà il contenuto delle risorse.
Daremo un'occhiata a questo parziale più avanti nella serie.
Aggiungere il seguente codice apublished.php.
Qui è dove risiederà il contenuto pubblicato.
Daremo un'occhiata a questo parziale più avanti nella serie.
Abbiamo ancora una cosa da fare prima di testarlo nel Dashboard di WordPress: dobbiamo effettivamente includere questi file nella vista della meta-box in modo che possiamo vedere le informazioni.
Questo è semplice da fare. Primo, aperto autori-commento-navigation.php. Aggiungi il seguente codice al file (nota che tutto il nuovo codice è una serie di include_once dichiarazioni).
Bozza di risorse pubblicate
Supponendo di aver creato tutti i tuoi file e averli inclusi correttamente, siamo pronti a dare un'occhiata al Dashboard. Se tutto è stato implementato correttamente, dovresti vedere qualcosa di simile a questo:
Ovviamente, non vogliamo che tutti i contenuti vengano visualizzati nella prima scheda, quindi è necessario apportare alcune modifiche. Quindi facciamolo.
In definitiva, il nostro obiettivo è utilizzare gli stili e le funzioni incorporati forniti da WordPress. Ogni volta che si introduce qualcosa che è al di fuori della funzionalità principale di WordPress è qualcosa che si avrà la responsabilità di mantenere nel tempo.
Inoltre, stai anche lavorando per creare un plug-in che sia il più strettamente integrato con l'interfaccia utente di WordPress possibile. A tal fine, utilizzeremo una combinazione di stili incorporati e stili personalizzati e JavaScript per ottenere esattamente ciò che stiamo sperando di ottenere.
Sappiamo che la prima cosa che vogliamo fare è nascondere tutto tranne la prima vista (cioè, tutto tranne bozze).
Per fare ciò, dobbiamo aggiungere un classe attributo di nascosto ai partial per il risorse scheda e al Pubblicato linguetta.
Ciascuno dei seguenti file dovrebbe assomigliare a questo:
drafts.php:
È qui che risiederà il contenuto di Draft.
resources.php:
Questo è dove risiederà il contenuto delle risorse.
published.php:
Qui è dove risiederà il contenuto pubblicato.
E il risultato di questo piccolo cambiamento dovrebbe essere il seguente:
Facile, giusto? Questo è esattamente il motivo per cui consiglio di attenermi il più possibile alle principali funzionalità e stili di WordPress.
Naturalmente, abbiamo ancora bisogno di introdurre il codice per attivare i dati tra le schede, giusto? Quindi facciamolo ora.
Innanzitutto, dobbiamo assicurarci che la prima scheda sia contrassegnata come attiva. Supponendo che tu abbia seguito questo tutorial e il relativo repository GitHub, il tuo codice dovrebbe assomigliare a questo:
Bozza di risorse pubblicate
Che è fantastico perché segna già la prima scheda attiva con l'uso di nav-tab-attivo attributo di classe. Abbiamo il nostro lavoro tagliato per noi:
Ora, ci sono diversi modi per completare il secondo passo. Lo faremo in un modo che è documentato e spiegato nel corso di questo articolo, ma sappiamo che lì siamo altre alternative che probabilmente vedrai e che non sono necessariamente sbagliate.
La linea di fondo è che ci sono diversi modi per gestirlo, lo stiamo gestendo in uno dei tanti modi disponibili.
Quindi, per prima cosa, aggiungiamo un file JavaScript a admin / attività / js e chiameremo è tabs.js. Lo scheletro per il file dovrebbe essere simile al seguente:
(function ($) 'use strict'; $ (function () );) (jQuery);
Quindi, assicurati di importare il codice JavaScript solo nelle pagine del post. Per fare questo, introduciamo un hook nel nostro costruttore dove abbiamo già incluso alcuni fogli di stile. Il costruttore completo è qui sotto:
nome = $ nome; $ this-> version = $ version; $ this-> meta_box = new Authors_Commentary_Meta_Box (); add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_styles')); add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_scripts')); E poi implementiamo la funzione:
id) wp_enqueue_script ($ this-> name. '-tabs', plugins_url ('authors-commentary / admin / assets / js / tabs.js'), array ('jquery'), $ this-> version); A questo punto, abbiamo tutto ciò di cui abbiamo bisogno per implementare JavaScript per controllare le schede. Di seguito, troverai il codice commentato per questo e una breve spiegazione che segue lo snippet di codice, inoltre:
(function ($) 'use strict'; $ (function () // Prendi il wrapper per le schede di navigazione var navTabs = $ ('# authors-commentary-navigation'). children ('.nav-tab-wrapper '), tabIndex = null; / * Ogni volta che si fa clic su ciascuna delle schede di navigazione, verificare se ha il nome della classe' nav-tab-active '*. In caso contrario, contrassegnarlo come attivo, altrimenti non fare qualcosa (dato che è già * contrassegnato come attivo. * * Successivamente, quando una nuova scheda è contrassegnata come attiva, la corrispondente vista figlio deve essere contrassegnata * come visibile. Lo facciamo attivando l'attributo di classe 'nascosto' della corrispondente variabili. * / navTabs.children (). each (function () $ (this) .on ('click', function (evt) evt.preventDefault (); // Se questa scheda non è attiva ... if (! $ (this) .hasClass ('nav-tab-active')) // Deselezionare la scheda corrente e contrassegnare la nuova come $ attiva ('.nav-tab-active') .removeClass ('nav-tab-active '); $ (this) .addClass (' nav-tab-active '); // Salva l'indice della scheda che è stata appena contrassegnata come attiva. essere 0 - 3. tabIndex = $ (this) .index (); // Nascondi il vecchio contenuto attivo $ ('# authors-commentary-navigation') .children ('div: not (.inside.hidden)') .addClass ('hidden'); $ ('# authors-commentary-navigation') .children ('div: nth-child (' + (tabIndex) + ')') .addClass ('hidden'); // E visualizza il nuovo contenuto $ ('# authors-commentary-navigation') .children ('div: nth-child (' + (tabIndex + 2) + ')') .removeClass ('hidden'); ); ); ); ) (jQuery);Nel caso in cui i commenti del codice non siano chiari, il codice sopra riportato imposta un gestore di eventi per tutte le schede. Quando si fa clic su una scheda, si guarda se ha il nav-tab-attivo classe. Se è così, allora non succede niente.
Altrimenti, attiviamo la scheda e nascondiamo il contenuto era attivo e visualizza il nuovo contenuto rimuovendo il nascosto nome della classe che abbiamo aggiunto in precedenza nell'articolo.
A questo punto, dovresti essere in grado di passare da una scheda all'altra e vedere ciascuna delle tre diverse implementazioni senza alcun problema. Detto questo, andiamo avanti e passiamo all'attuazione della funzionalità per la prima scheda.
Anche se non completeremo la piena funzionalità durante questo tutorial, avremo il nostro lavoro tagliato per noi nel seguente articolo. Supponiamo che per gli scopi di questo plugin, il bozze L'interfaccia utente sarà un luogo in cui l'utente lo tratta semplicemente come un blocco per appunti.
Può includere collegamenti a articoli, collegamenti a tweet, note brevi sulla struttura, alcune frasi e così via. Generalmente, funge da "catch-all" per tutti gli artefatti che l'autore può utilizzare durante il suo post.
A tal fine, useremo un semplice, singolo textarea. Inoltre, non vogliamo introdurre più elementi dell'interfaccia utente del necessario, quindi lo faremo non introdurre un pulsante di invio. Invece, salveremo i dati ogni volta che l'utente fa clic su "Aggiorna" nell'editor dei post.
In questo modo, tutto viene salvato allo stesso tempo.
Ancora una volta, non entreremo nel processo di validazione, sanificazione e serializzazione, ma inseriremo un'area di testo all'interno del bozze parziale per metterci in un bel posto per l'articolo di follow-up.
Aperto drafts.php, aggiungi il seguente codice e il tuo codice finale dovrebbe assomigliare a questo:
Successivamente, aggiorna il file admin.css file per assicurarsi che il textarea si adatta bene al resto della meta-box:
# authors-commentary-drafts width: 100%; altezza: 250 px;
Ora, quando visualizzi la meta-scatola, dovresti vedere una buona formattazione textarea con la meta-box con schede che funzionano quando si fa clic.
Nel prossimo articolo, continueremo a implementare l'interfaccia utente per ciascuna delle schede esistenti nella meta-box.
Quindi, inizieremo il processo di disinfezione, serializzazione e convalida quando iniziamo a salvare effettivamente le informazioni che l'utente inserisce nella meta-scatola. Andremo anche avanti con l'introduzione di ulteriori campi nel plugin.
.
