Share
Deze serie is gericht op tips en strategieën die we kunnen gebruiken om WordPress-plug-ins te schrijven, met name die met metaboxen, die logisch zijn georganiseerd en gemakkelijk te onderhouden zijn..
In de eerste twee berichten van de serie hebben we de initiële directorystructuur uiteengezet, de code voor de plug-in ingesteld en besproken wat de plug-in zal doen. In het laatste bericht zijn we begonnen met het maken van de metabox en introduceren we de tabbladen met alle functies die we gaan gebruiken.
Dit artikel zal blijven voortbouwen op wat we tot nu toe hebben gedaan. We gaan inhoud introduceren op elk van de tabbladen, waarbij we functionaliteit implementeren waarmee we de inhoud kunnen wijzigen en we beginnen de velden voor inhoud op het eerste tabblad in te voeren.
Voordat we overgaan tot het implementeren van de tabbladen die kunnen schakelen tussen alle beschikbare opties, moeten we partials, sjablonen, views of hoe je ze ook wilt noemen invoeren, zodat we bestanden hebben die specifiek zijn bedoeld voor het verwerken van onze informatie..
Blader eerst naar de admin / views / partials map en voeg de volgende bestanden toe (die allemaal leeg kunnen zijn, voorlopig hoewel ik een aantal basiscodes heb verstrekt):
Accentsconagua
drafts.phpresources.phppublished.phpElk van deze bestanden komt overeen met een van de tabbladen in de metabox-interface. Laten we doorgaan en wat tijdelijke inhoud voor elk van de tabbladen introduceren. Voordat we klaar zijn met het artikel, implementeren we de gebruikersinterface van het eerste tabblad, maar dit geeft ons iets visueels waarmee we kunnen werken voordat we verder werken aan de feitelijke tabbladfunctionaliteit..
Voeg de volgende code toe aan drafts.php.
Dit is waar de Concept-inhoud zal verblijven.
We zullen deze gedeeltelijke later in het artikel bekijken.
Voeg de volgende code toe aan resources.php.
Dit is waar de inhoud van Resources zal verblijven.
We zullen dit deel later in de serie bekijken.
Voeg de volgende code toe aanpublished.php.
Dit is waar de gepubliceerde inhoud zal verblijven.
We zullen ook een deel van deze reeks later bekijken.
We moeten nog een ding doen voordat we dit testen in het WordPress Dashboard: we moeten deze bestanden daadwerkelijk opnemen in de metabox-weergave, zodat we de informatie kunnen zien.
Dit is eenvoudig om te doen. Open eerst auteurs-commentaar-navigation.php. Voeg de volgende code toe aan het bestand (merk op dat alle nieuwe code een reeks is van include_once statements).
Conceptbronnen gepubliceerd
Ervan uitgaande dat u al uw bestanden hebt gemaakt en ze correct hebt opgenomen, kunnen we het Dashboard bekijken. Als alles correct is geïmplementeerd, zou u zoiets als dit moeten zien:
Het is duidelijk dat we niet willen dat alle inhoud wordt weergegeven op het eerste tabblad, dus we moeten enkele wijzigingen aanbrengen. Dus laten we dat doen.
Uiteindelijk is ons doel om te gebruiken als ingebouwde stijlen en functies die WordPress biedt. Elke keer dat u iets introduceert dat buiten de kern van de WordPress-functionaliteit valt, bent u verantwoordelijk voor het naleven van de tijd.
Bovendien werk je ook aan een plug-in die zo strak mogelijk is geïntegreerd in de gebruikersinterface van WordPress. Daarom gebruiken we een combinatie van ingebouwde stijlen en aangepaste stijlen en JavaScript om precies dat te bereiken dat we hopen te bereiken.
We weten dat het eerste dat we willen doen is om alles te verbergen, behalve de eerste weergave (dat wil zeggen, alles behalve Concepten).
Om dit te doen, moeten we een toevoegen klasse kenmerk van verborgen naar de partials voor de Middelen tab en naar de Gepubliceerd tab.
Elk van de volgende bestanden zou er als volgt uit moeten zien:
drafts.php:
Dit is waar de Concept-inhoud zal verblijven.
resources.php:
Dit is waar de inhoud van Resources zal verblijven.
published.php:
Dit is waar de gepubliceerde inhoud zal verblijven.
En het resultaat van deze kleine wijziging zou de volgende moeten zijn:
Makkelijk, toch? Dit is precies de reden waarom ik aanbeveel zoveel mogelijk vast te houden aan de kernfuncties en -stijlen van WordPress.
Natuurlijk moeten we nog steeds de code invoeren om de gegevens tussen de tabbladen te schakelen, toch? Dus laten we dat nu doen.
Ten eerste moeten we ervoor zorgen dat het eerste tabblad markeert als actief. Ervan uitgaande dat u deze zelfstudie en de bijbehorende GitHub-repository gevolgd hebt, zou uw code er als volgt uit moeten zien:
Conceptbronnen gepubliceerd
Dat is geweldig omdat het je eerste tabblad al als actief markeert met het gebruik van de nav-tab-actief klasse-kenmerk. We hebben ons werk voor ons uitgesneden:
Nu zijn er een aantal manieren om stap twee te volbrengen. We doen het op een manier die in de loop van dit artikel is gedocumenteerd en uitgelegd, maar weet dat daar zijn andere alternatieven die u waarschijnlijk zult zien en die ze niet noodzakelijk verkeerd hebben.
Waar het op neer komt, is dat er een aantal manieren zijn om dit aan te pakken, we hanteren het op een van de vele manieren die beschikbaar zijn.
Dus laten we eerst een JavaScript-bestand toevoegen aan admin / assets / js en we zullen bellen is tabs.js. Het skelet voor het bestand moet er als volgt uitzien:
(functie ($) 'gebruik strict'; $ (function () );) (jQuery);
Zorg er vervolgens voor dat we het JavaScript alleen op postpagina's importeren. Om dit te doen, introduceren we een haak in onze constructor waar we al enkele stylesheets hebben opgenomen. De volledige constructor is hieronder:
naam = $ naam; $ 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')); En dan implementeren we de functie:
id) wp_enqueue_script ($ this-> name. '-tabs', plugins_url ('authors-commentary / admin / assets / js / tabs.js'), array ('jQuery'), $ this-> versie); Op dit moment hebben we alles wat we nodig hebben om het JavaScript te implementeren om de tabbladen te beheren. Hieronder vindt u de code met opmerkingen daarvoor en een korte uitleg na het codefragment, evenals:
(functie ($) 'gebruik strict'; $ (function () // Pak de omslag voor de Navigatietabs var navTabs = $ ('# authors-commentary-navigation'). children ('.nav-tab-wrapper '), tabIndex = null; / * Telkens wanneer op elk van de navigatietabbladen wordt geklikt, controleert u of het de naam' nav-tab-active '* heeft. Als dit niet het geval is, markeer het dan als actief, anders niet alles doen (aangezien het al * is gemarkeerd als actief. * * Wanneer een nieuw tabblad als actief is gemarkeerd, moet de bijbehorende onderliggende weergave als zichtbaar worden gemarkeerd *. Dit doen we door het kenmerk 'verborgen' klasse van het overeenkomstige variabelen. * / navTabs.children (). each (function () $ (this) .on ('click', function (evt) evt.preventDefault (); // Als dit tabblad niet actief is ... if (! $ (this) .hasClass ('nav-tab-active')) // Deselecteer het huidige tabblad en markeer de nieuwe als actieve $ ('.nav-tab-active') .removeClass ('nav-tab-active '); $ (this) .addClass (' nav-tab-active '); // Bewaar de index van het tabblad dat zojuist is gemarkeerd als actief. be 0 - 3. tabIndex = $ (this) .index (); // Verberg de oude actieve inhoud $ ('# authors-commentary-navigation') .children ('div: not (.inside.hidden)') .addClass ('hidden'); $ ('# authors-commentary-navigation') .children ('div: nth-child (' + (tabIndex) + ')') .addClass ('hidden'); // En toon de nieuwe inhoud $ ('# authors-commentary-navigation') .children ('div: nth-child (' + (tabIndex + 2) + ')') .removeClass ('hidden'); ); ); ); ) (jQuery);Voor het geval de opmerkingen in de code niet duidelijk zijn, stelt de bovenstaande code een gebeurtenishandler in voor alle tabbladen. Wanneer op een tabblad wordt geklikt, ziet het ernaar uit om te zien of het de nav-tab-actief klasse. Als dat zo is, gebeurt er niets.
Anders schakelen we het tabblad om en verbergen de inhoud dat was actief en toon de nieuwe inhoud door de verborgen klassenaam die we eerder in het artikel hebben toegevoegd.
Inmiddels zou je zonder problemen tussen de tabbladen moeten kunnen schakelen en elk van de drie verschillende implementaties kunnen bekijken. Met dat gezegd, laten we doorgaan en doorgaan met het implementeren van de functionaliteit voor het eerste tabblad.
Hoewel we tijdens deze tutorial niet de volledige functionaliteit zullen voltooien, zullen we ons werk in het volgende artikel voor ons laten uitsnijden. Laten we aannemen dat voor de doeleinden van deze plug-in, de Concepten UI wordt een plaats waar de gebruiker het eenvoudig als een notitieblok voor ideeën behandelt.
Het kan links naar artikelen bevatten, links naar tweets, korte notities over de omtrek, een paar zinnen, enzovoort. Over het algemeen dient het als een "catch-all" voor alle artefacten die de auteur tijdens zijn of haar post kan gebruiken.
Daartoe gaan we een eenvoudige single gebruiken textarea. Verder willen we niet meer UI-elementen introduceren dan nodig zijn, dus dat zullen we doen niet introduceer een verzendknop. In plaats daarvan bewaren we de gegevens wanneer de gebruiker op "Update" klikt in de berichteditor.
Op die manier wordt alles tegelijkertijd opgeslagen.
Nogmaals, we zullen niet ingaan op het proces van validatie, sanering en serialisatie, maar we zullen een tekstgebied binnen de Concepten gedeeltelijk om ons op een mooie plaats te krijgen voor het vervolgartikel.
Open drafts.php, voeg de volgende code toe, en uw definitieve code zou er als volgt uit moeten zien:
Werk daarna het admin.css bestand om ervoor te zorgen dat de textarea past goed bij de rest van de metabox:
# authors-commentary-drafts width: 100%; hoogte: 250 px;
Als u nu de metabox bekijkt, ziet u een goed opgemaakte indeling textarea met de metabox met tabbladen die werken wanneer erop wordt geklikt.
In het volgende artikel blijven we de gebruikersinterface implementeren voor elk van de tabbladen in de metabox.
Vervolgens beginnen we met het proces van sanering, serialisatie en validatie, terwijl we beginnen met het daadwerkelijk opslaan van informatie die de gebruiker in de metabox plaatst. We gaan ook verder met het introduceren van extra velden in de plug-in.
.
