Aanmaakbare WordPress-metaboxen maken

Op dit moment, een van de meest voorkomende ontwerppatronen - zo niet de meest voorkomende ontwerppatroon - gebruikt in webontwikkeling is dat van MVC (of Model / View / Controller), maar zo populair als het is, is het niet de enige manier waarop frameworks, stichtingen en andere bibliotheken worden gebouwd.

Voorbeeld: WordPress gebruikt het gebeurtenisgestuurde ontwerppatroon om het haaksysteem van stroom te voorzien. En hoewel ontwerppatronen elkaar niet uitsluiten, is de kans groter dat u ze herkent dat bepaald patroon omdat het WordPress zo flexibel maakt als het is.

Voor alle duidelijkheid, dit betekent niet dat andere patronen niet in gebruik zijn in de codebase (of de codebase van een andere applicatie), ze zijn misschien niet zo gemakkelijk herkenbaar.

Een van de dingen waar professionele ontwikkelaars naar streven, is het schrijven van onderhoudbare code. Maar naarmate een codebasis ouder wordt en steeds meer mensen hun werk in de codebasis krijgen, wordt het steeds moeilijker om hetzelfde niveau van organisatie, duidelijkheid en onderhoudbaarheid consistent te houden naarmate een project ouder wordt.

Alle bovenstaande ideeën zijn van toepassing op WordPress, of u nu werkt aan thema's, plug-ins, extensies of een ander type project. Het punt is dat het belangrijk is om ervoor te zorgen dat je de coderingsstandaarden en -conventies volgt die zijn uiteengezet voor het maken van deze projecten.

Laten we zeggen dat u aan een plug-in werkt die een aangepaste metabox introduceert; het is echter niet genoeg om een ​​metabox te introduceren. In plaats daarvan zullen er groepen verwante opties worden gemaakt.

Dit is waar het een beetje uitdagender begint te worden. In deze hele reeks gaan we op één manier door dat we in WordPress onderhoudbare code kunnen schrijven via een voorbeeldplug-in die metaboxs, verschillende opties en navigatie met tabbladen introduceert in het WordPress-dashboard.

Meta-dozen organiseren

Wanneer u bezig bent met plannen voor het plannen van de opties voor uw metaboxen, heeft u een aantal opties die beschikbaar zijn:

1. Introduceer een enkele metabox per optie
2. Introduceer een enkele metabox met tabbladen die elke optie logisch groeperen

Voor degenen die WordPress voor een lange tijd hebben gebruikt, bent u waarschijnlijk bekend met het zien van navigatie met tabbladen in het dashboard, althans in een bepaalde hoedanigheid. Voor degenen die nieuwsgierig zijn hoe dit niet alleen op programmatische wijze te implementeren, maar ook in een houdbaar manier, we gaan kijken hoe dit door deze serie heen gaat.

We gaan in het bijzonder een kleine WordPress-plug-in schrijven die een paar velden introduceert, gerelateerde opties die zijn gegroepeerd op tabbladen, en dan gaan we nog enkele elementen introduceren om te laten zien hoe je veilig en veilig kunt opslaan en verwijderen. en haal de gegevens op.

Waar we naar toe gaan

Net als bij het merendeel van de berichten in serie die ik schrijf, probeer ik op een hoog niveau te schetsen wat we gaan doen voordat we echt in code springen. Dit helpt om een ​​conceptueel fundament te leggen van waar we naar toe gaan en helpt om de aankomende reeks artikelen te schetsen en ook wat we op codeniveau gaan doen.

Als er niets anders is, biedt het een plaats om naar te verwijzen terwijl we doorgaan met de voortgang van de reeks.

Voordat ik naar de contouren kijk, wil ik vermelden dat de belangrijkste afhaalmaaltijd van dit specifieke artikel de scheiding van zorgen en ook de waarom we hebben ervoor gekozen om de dingen te doen zoals we gedaan hebben, zodat we begrijpen hoe het helpt met de onderhoudbaarheid.

Daarom gaan we hier in de volgende artikelen op in:

1. De basis leggen voor de plug-in
2. Alle opties definiëren en ordenen in tabbladen
3. Eenvoudig alle opties en tabbladen implementeren, samen met beveiligingsmaatregelen
4. Alles in actie zien

Zoals met alles wat in ontwikkeling is, is het breken van dingen in meer kleinere componenten absoluut essentieel, dus voor de rest van dit bericht gaan we kijken naar de stappen die nodig zijn om te kunnen werken aan een plug-in die een metabox introduceert in het standaard 'Post'-berichttype.

Het plugin's skelet

Voordat we verder gaan, kunnen we de directory van onze plug-in instellen. Dit zou het volgende moeten omvatten:

• Een bestand om de plug-in op te starten
  
• De belangrijkste plugin-klasse
• Inzicht in hoe de initiële bestanden zijn georganiseerd
• Een blanco Leesmij

En natuurlijk moeten we ervoor zorgen dat de directory's goed zijn georganiseerd en dat de code duidelijk is.

Om dit op zijn minst enigszins praktisch te maken, zullen we deze plug-in "Commentaren van de auteur" noemen, die ons toestaat om een ​​paar openhartige opmerkingen te delen over wat we dachten, gebruikten en noteerden tijdens het schrijven van de post. 

We kunnen ervoor kiezen om het openbaar te maken in een volgende post op basis van uw feedback, maar voor nu zullen we van plan zijn om het achter te laten in de backend.

Met dat gezegd, laten we aan de slag gaan.

Beginnen met Commentaren van de auteur

Bereid de map voor

Het enige dat we moeten doen is de mapstructuur wegstrepen die we voor het project zullen gebruiken. Je ziet hieronder een schermafbeelding, waarna ik het doel van elke map zal beschrijven.

De hoofdmap van de map bevat twee bestanden:

1. README.md wat de standaard is Leesmij dat komt met een WordPress plug-in.
2. auteurs-commentary.php die verantwoordelijk is voor het daadwerkelijk starten van de plug-in. Dit is het bootstrap-bestand.

Vervolgens hebben we de beheerdersdirectory. Deze map bevat:

1. middelen die subdirectories bevat voor zowel onze JavaScript- als CSS-bestanden (we gebruiken vanilla CSS in deze serie.
2. class-auteurs-commentary.php wat de primaire klasse gaat zijn, dan een groot deel van onze functionaliteit inkapselt.
3. keer bekeken welke een submap bevat met de naam partials. De keer bekeken directory is verantwoordelijk voor het weergeven van de tabbladen en het opnemen van alle inhoud voor elk tabblad op basis van het gedeeltelijke. Dat is de partials map bevat de inhoud voor elk tabblad.

Houd er rekening mee dat we mogelijk extra mappen toevoegen voor de plug-in naarmate de reeks vordert. Dat wil zeggen dat deze structuur kan veranderen, omdat we waarschijnlijk een beetje inhoud toevoegen of zelfs verplaatsen op basis van hoe de plug-in verder gaat, maar dit is de basisstructuur die we nodig hebben om aan de slag te gaan. 

Maak de bestanden

Omdat we de basisdirectorystructuur hebben ingedeeld en de benodigde bestanden hebben geïnstalleerd, zijn we klaar om een ​​deel van de code te gaan verwijderen. Merk op dat, hoewel de plug-in functioneel is vanuit een activeringsstandpunt, hij in feite niets zal doen totdat we beginnen met het toevoegen van code in de volgende reeks artikelen.

Met dat gezegd, zullen we doorgaan en de bestanden invullen die nodig zijn om de plug-in actief te maken in het WordPress-dashboard.

Het eerste dat we moeten doen, is de header van de plug-in vullen zodat deze het benodigde documentatieblok voor WordPress bevat om de plug-in in het dashboard weer te geven:

De laatste voorwaarde zorgt ervoor dat als iemand het bestand rechtstreeks probeert te openen, het script de uitvoering afbreekt.
Vervolgens moeten we ervoor zorgen dat het bestand met de kerninvoegtoepassing dat we hierboven hebben gestart, zich bewust is van de primaire klasse die we in de vorige stap hebben gemaakt. Om dit te doen, hebben we alleen een simpele nodig eenmalig benodigd uitspraak.
Maar voordat we bellen eenmalig benodigd, we hebben een bestand nodig om op te nemen, toch? Laten we daarvoor in de beheerder submap en in de class-auteur-commentary.php klasse, we zullen de volgende code toevoegen.
De opmerkingen spreken voor zich, maar ik zal ervoor zorgen dat ik alles opschrijf wat er aan de hand is nadat het codeblok is voltooid:
 * / class Author_Commentary_Admin / ** * De ID van deze plug-in. * * @since 0.1.0 * @access private * @var string $ name De ID van deze plug-in. * / private $ naam; / ** * De versie van deze plug-in. * * @since 0.1.0 * @access private * @var string $ version De huidige versie van deze plug-in. * / private $ -versie; / ** * 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; 
Merk op dat in de bovenstaande code alles wat we echt hebben gedaan - afgezien van het verstrekken van documentatie voor onze klasse, eigenschappen en constructor - een constructor is die een name $ en een $ versie parameter.
Deze zullen later nuttig zijn wanneer we JavaScript-afhankelijkheden en stylesheets importeren. Voor nu is dit echter alles wat we nodig hebben om te beginnen.
Met dat gedaan, kunnen we terugkeren naar auteurs-commentary.php en schrijf de code voor het opstarten van de plug-in.
Eerst zullen we gebruiken eenmalig benodigd om de klasse te importeren die we zojuist hebben gemaakt:
Daarna stellen we een eenvoudige functie en een functieoproep in om het proces te starten:
Merk op dat we geen haken in dit bestand definiëren. Alles zal uiteindelijk in het subpakket gaan zitten - dit helpt ons onze zorgen effectiever te scheiden waardoor de code beter onderhouden kan worden, en het stelt ons in staat onze code zo objectief mogelijk te houden.
Merk op dat dit een eenvoudige functie definieert die, zodra deze wordt aangeroepen zodra de plug-in is geactiveerd, een instantie van de Author_Commentary_Admin klas na het passeren van de nodige name $ en $ versie parameters.
De basis te leggen
Op dit punt is al het grondwerk gelegd dat ons zal helpen verder te gaan met het werken aan onze plug-in. Je zou in staat moeten zijn om het bestand te downloaden van GitHub, het te installeren in WordPress en het te activeren.
Nogmaals, dit zal eigenlijk niets weergeven, maar het bereidt de codebasis voor op het werk dat we in het volgende artikel zullen beginnen.
Als je vragen hebt over bovenstaande code of waar de serie naartoe gaat, aarzel dan niet om een ​​reactie achter te laten; anders kijk ik ernaar uit je te zien in de volgende aflevering.



		
			
	   
	




Code