Onderhoudbare WordPress-metaboxen maken de front-end voltooien

In deze reeks artikelen bespreken we een handvol tips en strategieën die we kunnen gebruiken om meer onderhoudbare WordPress-plug-ins te bouwen, en we gaan dat allemaal door de context van een plug-in die gebruikmaakt van metaboxen met tabbladen..

In de vorige post implementeerden we de functionaliteit specifiek voor onze tabbladen en implementeerden we ook de eerste textarea die zal worden gebruikt voor het vastleggen van een deel van de gebruikersinvoer. Voor degenen die hebben meegedaan, weet je dat we alleen zover zijn gekomen als:

De tabbladen functioneel maken
Introductie van een enkel UI-element waarmee de gebruiker kan communiceren

We hebben het feitelijke proces voor het ontsmetten, valideren en opslaan van de gegevens nog niet voltooid, en we hebben evenmin de moeite genomen om de inhoud voor de rest van de tabbladen te introduceren. In de volgende twee artikelen gaan we precies dat doen.

In dit artikel gaan we in het bijzonder door met het introduceren van de rest van de gebruikersinterface, en dan gaan we verder met het daadwerkelijk schrijven van code die verantwoordelijk is voor het verifiëren van de gebruikersinvoer en het associëren met de gegeven post.

Laten we aan de slag gaan met dat wat voor ons ligt.

Tabsjablonen, Revisited

Zoals vermeld, hebben we in de vorige post een textarea in onze Droogte tab. Als je de tutorials hebt gevolgd en / of de code in de beschikbare repository hebt gebruikt, zou je zoiets als dit moeten zien:

Het idee achter de Droogte tabblad is eenvoudig: dit is een plaats waar gebruikers notities kunnen noteren, ideeën kunnen verzamelen en in principe een notitieblok kunnen gebruiken om hun ideeën te verzamelen voordat ze een bericht schrijven.

Middelen

Hoe zit het met de hulpbrons tab? Het idee achter dit tabblad is dat gebruikers verschillende URL's kunnen verzamelen naar pagina's, tweets, afbeeldingen en andere informatie met betrekking tot de inhoud die ze willen schrijven, zodat ze deze kunnen insluiten, koppelen en / of ernaar verwijzen in hun bericht.

Hier is hoe het gaat werken:

Er zal een knop zijn waarmee de gebruiker extra velden kan toevoegen
Wanneer op de knop wordt geklikt, wordt boven de knop een enkel invoerveld toegevoegd om de invoer van de gebruiker vast te leggen.
Als de gebruiker informatie levert, wordt deze opgeslagen wanneer het bericht wordt opgeslagen.
Als de gebruiker geen informatie verstrekt, wordt deze niet opgeslagen.

Wat de laatste twee items betreft, zullen we daar in het volgende artikel voor zorgen. Laten we voorlopig zorgen voor het dynamisch toevoegen van invoervelden.

bevind zich admin / views / partials / resources.php en werk de code bij om er als volgt uit te zien:

Laten we vervolgens een bestand maken in admin / assets / js en noem het resources.js. Stub het bestand uit zodat het er als volgt uitziet:

(functie ($) 'gebruik strict'; $ (function () );) (jQuery);

Vervolgens moeten we een gebeurtenishandler zo instellen dat wanneer de gebruiker op de knop klikt Voeg bron toe knop, doet het het volgende:

Creëert een nieuw invoerelement.
Biedt de juiste ID- en naamkenmerken zodat de informatie kan worden geserialiseerd.
Bevestigde het aan de bestaande lijst van invoerelementen.

Hier is de volledig becommentarieerde code voor hoe dat te bereiken met meer informatie hieronder:

/ ** * Maakt een nieuw invoerelement dat moet worden toegevoegd aan de DOM en wordt gebruikt om een enkele * resource (of het nu een adres, tweet, afbeeldings-URL, enzovoort) is waarnaar in de post wordt verwezen te verwijzen. * * @since 0.4.0 * @param-object $ Een verwijzing naar het jQuery-object * @return-object Een invoerelement dat moet worden toegevoegd aan de DOM. * / function createInputElement ($) var $ inputElement, iInputCount; / * Tel eerst het aantal invoervelden dat al bestaat. Dit is hoe we * de naam- en ID-attributen van het element gaan implementeren. * / iInputCount = $ ('# authors-commentary-resources') .children (). length; iInputCount ++; // Maak vervolgens het daadwerkelijke invoerelement en stuur het vervolgens terug naar de beller $ inputElement = $ ('') .attr (' type ',' tekst ') .attr (' naam ',' auteurs-toelichting-resource- '+ iInputCount) .attr (' id ',' authors-commentary-resource- '+ iInputCount). attr ('waarde', '); return $ inputElement; (functie ($) ' gebruik strict '; $ (function () var $ inputElement; $ (' # authors-commentary-add-resource ') .on ('klik', functie (evt) evt.preventDefault (); / * Maak een nieuw invoerelement dat zal worden gebruikt om de gebruikersinvoer * vast te leggen en toe te voegen aan de container net boven deze knop. * / $ ('# authors-commentary-resources ') .append (createInputElement ($));););) (jQuery);

In de bovenstaande code is er een functie die specifiek is ontworpen voor het maken van een invoerelement en het gebruik van het aantal reeds bestaande elementen om het een unieke naam en ID te geven.

Er is ook een DOM-ready handler die een functie instelt om te vuren wanneer de gebruiker op de knop klikt Voeg bron toe knop. Wanneer op de knop wordt geklikt, wordt de bovengenoemde functie aangeroepen en wordt het invoerelement toegevoegd aan de bovenliggende container.

Om er zeker van te zijn dat dit er op zijn best uitziet, moeten we een paar stijlen schrijven. Dus, precies zoals we deden met de JavaScript-bron, zoek admin / assets / css / admin.css en voeg vervolgens de volgende code toe aan de onderkant van het bestand:

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

Dit zorgt ervoor dat elk invoerelement een breedte van 100% heeft, zodat ze elk op hun eigen lijn staan.

Ten slotte moeten we het JavaScript dat we met WordPress hebben geschreven in de wacht slepen, zodat het op de juiste manier reageert op de elementen die we hebben weergegeven op onze gedeeltelijke manier. Hiertoe gaat u naar enqueue_admin_scripts functie in admin / class-auteurs-commentary.php, en werk de functie bij zodat deze er zo uitziet:

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

Op dit punt zou u de berichteditor in uw browser moeten kunnen laden, klik op de Middelen tab en begin dan met het dynamisch toevoegen van meerdere invoervelden aan uw pagina.

Denk eraan dat we eigenlijk nog niets aan de server doen, dus we zijn niet bezig met het opschonen, valideren of opslaan van deze informatie. We doen dit in het volgende artikel.

Gepubliceerd

Nu we een plaats hebben om verschillende notities en bronnen te verzamelen die we in onze posts kunnen gebruiken, welke elementen zouden dat dan zijn Gepubliceerd tab bevatten?

Zou het een gebied bevatten waarin we onze eigen opmerkingen en aantekeningen zouden kunnen achterlaten zoals de Concepten tab? Misschien.
Zou het een plaats bevatten om links op te slaan naar opmerkingen en andere bronnen die nuttig zijn voor het opvolgen van na het bericht?
Misschien zou het alleen een lijst van alle opmerkingen over het bericht bevatten, samen met een link naar de opmerkingen en een selectievakje voor het al dan niet ontvangen van een antwoord of niet.

Alle drie zijn perfect aanvaardbare dingen om in te voeren in de Gepubliceerd tab; Om het wiel niet opnieuw uit te vinden en nieuwe functies en andere manieren om met de WordPress API te werken te blijven introduceren, gaan we echter met de laatste optie.

We gaan in het bijzonder een lijst laden van alle opmerkingen die in het bericht voorkomen. Naast elke opmerking wordt een selectievakje weergegeven. Als de reactie een antwoord heeft ontvangen, wordt deze gecontroleerd; anders wordt het uitgeschakeld.

Wij zullen niet inclusief pingbacks hiervoor, omdat een auteur meestal niet reageert op pingbacks.

Met dat gezegd, laad admin / views / partials / published.php en voeg de volgende code toe:

  load_post_comments (); ?>      Deze reactie heeft een reactie ontvangen.   COMMENT_AUTHOR; ?>: COMMENT_CONTENT; ?>

Merk op dat we een oproep doen naar een functie genaamd load_post_comments. Omdat we het nog niet hebben gedefinieerd, laten we beginnen admin / class-auteurs-commentaar-meta-box.php en voeg de volgende code toe:

 get_the_ID (), 'status' => 'goedkeuren'); $ comments = get_comments ($ args); $ reacties retourneren;

Met deze functie wordt een verzameling van alle goedgekeurde opmerkingen voor de betreffende post opgehaald. Het gedeelte dat hierboven wordt vermeld, doorloopt vervolgens de opmerkingen en maakt vervolgens een label en een selectievakje waarmee de gebruiker kan selecteren of de reactie een antwoord heeft ontvangen of niet.

Onder het label ziet u de auteur van de opmerking en de opmerking. Dit is vooral bedoeld als een manier om gemakkelijk de opmerking te achterhalen die is achtergelaten.

Ten slotte moeten we nog een ding toevoegen aan onze stylesheet:

# auteur-commentaar-opmerkingen label font-weight: bold;

En we zijn klaar.

Uiteindelijk zou je moeten eindigen met een scherm dat lijkt op wat je hierboven ziet.

Verhuizen naar de server

In het volgende artikel gaan we terug naar de server en beginnen we met het werken aan code voor het valideren, opschonen, serialiseren en ophalen van alle code die is gekoppeld aan de gebruikersinterface die we zojuist hebben gemaakt.

Vergeet in de tussentijd niet om de code af te lezen op GitHub (beschikbaar aan de rechterkant van dit bericht) en voel je vrij om alle vragen en opmerkingen in de feed hieronder te laten staan.

Code