Aanmaakbare WordPress-metaboxen maken de lay-out

In deze serie lopen we door hoe je onderhoudbare WordPress-metaboxen kunt maken. Dat wil zeggen dat we een aantal best practices bekijken die we in onze WordPress-ontwikkeling kunnen gebruiken om ervoor te zorgen dat we code schrijven die door onszelf of door ons team kan worden onderhouden, aangezien deze blijft evolueren in de loop van de tijd.

In het eerste bericht hebben we gekeken naar de initiële directorystructuur en de basiscode ingesteld die nodig is om een plug-in in WordPress te laten werken. In dit bericht gaan we door met het plannen en bouwen van onze plug-in.

We zullen het ook hebben over de beslissingen die we nemen als het gaat om het scheiden van delen van onze code en hoe dit de onderhoudbaarheid beïnvloedt.

Planning Commentaren van de auteur

In het vorige bericht zijn we begonnen met het werken aan een plugin genaamd Commentaren van de auteur. Het idee achter de plug-in is dat het post-auteurs de mogelijkheid biedt om verschillende opmerkingen en items achter te laten die zijn gebruikt als inspiratie, als gedachten nadat het bericht is geschreven en ontvangen en andere soortgelijke informatie.

Laten we bij het schrijven van een post zeggen dat we drie specifieke stukjes informatie willen vastleggen:

Aantekeningen gebruikt bij het voorbereiden van het bericht
Activa en middelen die in de hele post zijn gebruikt
Tweets en links naar opmerkingen en feedback na de publicatie

Voor alle duidelijkheid: we willen een manier hebben om de aantekeningen bij te houden die zijn gebruikt bij het maken van de post voordat deze is geschreven, koppelingen naar verschillende items - of het nu externe artikelen, afbeeldingen, video's, codevoorbeelden enzovoort zijn - en onderhouden dan een lijst met tweets, links naar opmerkingen en verschillende fragmenten van e-mails die we hebben ontvangen.

Op dit moment hebben we genoeg om door te gaan om de metabox en de lay-out met tabbladen voor te bereiden.

De metabox-tabbladen

Voordat we daadwerkelijk beginnen met het schrijven van een code, laten we de tabbladen een naam geven die aan elk van de hierboven vermelde staten van onze post zullen worden gekoppeld. Door dit te doen, kunnen we onze invoerelementen conceptueel ordenen, zodat ze logisch worden gegroepeerd.

Toegegeven, je kunt deze dingen noemen die je leuk vindt, maar als je deze tutorial en de meegeleverde broncode volgt, dan is dit wat je kunt verwachten te zien.

Het eerste tabblad wordt gebeld Droogte want het bevat alle opsommingstekens, zinnen en andere opmerkingen die zijn gebruikt bij het voorbereiden van de post.
Het tweede tabblad wordt gebeld Middelen omdat het informatie over andere berichten, links, video's, enzovoort bevat waarnaar we in onze post kunnen verwijzen of die we kunnen opnemen in ons bericht.
Het laatste tabblad wordt gebeld Gepubliceerd omdat het links naar opmerkingen, velden voor e-mail en andere informatie bevat die allemaal relevant zijn voor de post nadat deze is gepubliceerd.

Eenvoudig genoeg, toch? We zullen meer praten over de invoerelementen voor elk tabblad zodra we zover zijn gekomen in de code, maar voor nu moeten we ons concentreren op het maken van de metabox en het implementeren van de tabbladen.

De metabox maken

Om de metabox te maken, profiteren we van de add_meta_box functie zoals gedocumenteerd in de WordPress Codex. Hiertoe introduceren we een nieuwe klasse, updaten we het opstartbestand van de plug-in en introduceren we enkele weergaven die worden gebruikt om markeringen in de browser weer te geven..

De Meta Box-klasse

Om ervoor te zorgen dat onze code goed is ingekapseld en dat elke klas één enkel idee vertegenwoordigt, gaan we een maken Authors_Commentary_Meta_Box klasse. Deze klasse is verantwoordelijk voor het registreren van een haak met de add_meta_box actie, het instellen van de metabox en het weergeven van de inhoud.

Voor degenen die niet gebruik maken van het objectgericht schrijven van plug-ins met WordPress, stelt deze benadering ons in staat om onze verantwoordelijkheidsdomeinen te segmenteren - zoals een metabox - en een enkele klasse te hebben die alles vertegenwoordigt wat nodig is om er een te creëren.

Om dit te doen, maakt u eerst class-auteurs-commentaar-meta-box.php in de beheerdersdirectory. Voeg vervolgens de volgende code toe:

 * / class Authors_Commentary_Meta_Box / ** * Registreer deze class bij de WordPress API * * @since 0.2.0 * / public function __construct () add_action ('add_meta_boxes', array ($ this, 'add_meta_box'));  / ** * De functie die verantwoordelijk is voor het maken van de eigenlijke metabox. * * @since 0.2.0 * / public function add_meta_box () add_meta_box ('authors-commentary', "Author's Commentary", array ($ this, 'display_meta_box'), 'post', 'normal', 'default') ;  / ** * Berekent de inhoud van de metabox. * * @sinds 0.2.0 * / openbare functie display_meta_box ()

De opmerkingen en de inhoud van de klas zouden het relatief gemakkelijk te begrijpen moeten maken. Het doet drie dingen, maar om duidelijk te zijn:

De constructor registreert de add_meta_box functie met de bijbehorende WordPress-actie.
De add_meta_box functie definieert de eigenschappen van de metabox.
De display_meta_box de functie doet nog niets - we zullen hier even aan werken.

Voordat we verdergaan, zijn er enkele wijzigingen die we moeten aanbrengen in de rest van de plug-in.

Eerst moeten we dit nieuwe bestand opnemen in het opstartbestand van de plug-in. In auteurs-commentary.php, voeg de volgende regel code toe boven de huidige eenmalig benodigd uitspraak:

/ ** * De klasse die de metabox vertegenwoordigt die de navigatietabs en elk van de * velden voor de metabox zal weergeven. * / require_once plugin_dir_path (__FILE__). 'Admin / klasse-auteurs-commentaar-meta-box.php';

We voegen deze regel toe boven de initiële code omdat de initiële code afhankelijk is van dit specifieke bestand dat moet worden uitgevoerd; daarom moet het eerst worden geladen.

Vervolgens moeten we een nieuwe eigenschap introduceren in kant van admin / class-auteurs-commentary.php dat verwijst naar een exemplaar van de metabox:

/ ** * Een verwijzing naar de metabox. * * @since 0.2.0 * @access private * @var Authors_Commentary_Meta_Box $ meta_box Een verwijzing naar de metabox voor de plug-in. * / private $ meta_box;

Ten slotte moeten we de code in de constructor van de klasse instantiëren:

/ ** * Initialiseer de klasse en stel de eigenschappen in. * * @since 0.1.0 * @var string $ name De naam van deze plugin. * @var string $ version De versie van deze plug-in. * / public function __construct ($ name, $ version) $ this-> name = $ name; $ this-> version = $ version; $ this-> meta_box = new Authors_Commentary_Meta_Box ();

Op dit punt zou je in staat moeten zijn de plug-in te activeren, naar een berichtpagina te gaan en een lege metabox te zien:

Niets is te spannend, maar we hebben wat we nodig hebben om te beginnen met het introduceren van onze navigatie met tabbladen.

Tabbladen toevoegen

Op dit moment zijn we klaar om het navigatie-gedeelte met tabbladen van de metabox te introduceren. Uiteindelijk is ons doel om de markeringen en stijlen voor het tabblad in dit bericht te introduceren en vervolgens het gedrag en de elementen in het volgende bericht in de serie te implementeren.

Met dat gezegd, laten we eerst een maken keer bekeken submap binnen de beheerder directory. Technisch gezien deden we dit in het vorige artikel; we hadden echter geen inhoud in de directory zodat deze niet werd gecontroleerd op bronbesturing (dus de map is niet toegevoegd - dus als je samen met de repository volgt, is dit het moment om de directory aan te maken).

Maak vervolgens een bestand aan binnen de opgeroepen views-map auteurs-commentaar-navigation.php. Dit bestand zal voornamelijk als markup dienen; het zal echter een beetje PHP bevatten tegen de tijd dat we met deze plug-in bezig zijn.

Voeg de volgende code toe aan het bestand. We zullen het nader bespreken na het codeblok:

  Conceptbronnen gepubliceerd

Als u klaar bent, voert u de volgende code in bij Authors_Commentary_Meta_Box, voegt u de volgende code toe om dit specifieke stukje markup te importeren:

Afgezien van de div container die we hebben, let op het volgende:
 We hebben drie ankers ingepakt in een h2 element. De h2 element bevat klassekenmerken van nav-tab-wrapper en stroom. Dit stelt ons in staat stijlen rechtstreeks van WordPress te erven zonder iets van onze kant te doen.
 Elk anker heeft een nav-tab klasse waarvan de eerste het nav-tab-actief klasse. Dit geeft ons opnieuw een beetje styling waarvan we erven van WordPress.
 Elk anker heeft ook de href kenmerk van javascript :; omdat de ankers ons eigenlijk nergens heen brengen. In plaats daarvan zullen we in een toekomstige zelfstudie JavaScript gebruiken om de tabbladen en de inhoud te beheren die in elke handleiding wordt weergegeven.
 
Op dit punt zou u het volgende moeten zien:
Merk op dat alle stijlen die op de tabbladen zijn toegepast door WordPress zijn geleverd. Het enige dat u wellicht wilt aanpassen, is de marge die bestaat tussen de tabbladen en de horizontale lijn eronder. 
Laten we dat nu doen.
Inclusief een stylesheet
In de beheerder map, voeg een andere submap toe genaamd middelen en daarin een map genaamd css. Maak vervolgens een leeg bestand met de naam admin.css.
Neem daarna de volgende regels op in het CSS-bestand:
a.nav-tab margin-bottom: -4px; 
Zorg er dan voor dat u de volgende aanroep opneemt in de constructor van class-auteurs-commentary.php:
add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_styles'));
Voeg ten slotte de volgende functie toe: deze is verantwoordelijk voor het in de wachtrij plaatsen van het eigenlijke stylesheet:
/ ** * Hiermee worden alle bestanden speciaal voor het dashboard geplaatst. * * @since 0.2.0 * / public function enqueue_admin_styles () wp_enqueue_style ($ this-> name. '-admin', plugins_url ('authors-commentary / admin / assets / css / admin.css'), false, $ deze-> versie); 
Op dit punt zou het er veel schoner uit moeten zien:
Als dat klaar is, hebben we alles voltooid wat we moeten doen voor de basisbasis van de navigatietabbladen voor onze metabox.
Voorbereiding om vooruit te gaan
In het volgende artikel gaan we de inhoud voor elk tabblad introduceren en gaan we via JavaScript werken die nodig is om de tabbladen en elk van hun inhoud te wisselen.
Voor diegenen die meer ervaring hebben met WordPress, kan deze serie artikelen het gevoel hebben dat het in een langzamer tempo beweegt, maar dat is het punt - we willen zo volledig mogelijk zijn als het niet alleen gaat om het bouwen van onze gebruikersinterface, maar ook ook bij het uitleggen van de reden achter elk van onze beslissingen.
Vergeet in de tussentijd niet om de broncode op GitHub te bekijken, meegaand te zijn en eventuele vragen of opmerkingen achter te laten in de feed hieronder.



		
			
	   
	




Code