Plug-ins ontwikkelen met WordPress Boilerplates Waarom Boilerplates Matter

In de afgelopen vijf tot tien jaar zijn bouwlocaties en applicaties voor internet veel complexer geworden dan veel van de dingen die mensen in de jaren 90 bouwden. Lang geleden zijn handmatig sites gemaakt met HTML in hoofdletters, op tabellen gebaseerde lay-outs en lelijke JavaScript om een ​​soort schattige animatie op een pagina te laten gebeuren.

Nu hebben we een verscheidenheid aan technologieën, frameworks en talen die allemaal samenwerken om ons te helpen volledig te bouwen op softwaretoepassingen die in een browser worden uitgevoerd.

Het is een geweldige tijd om een ​​ontwikkelaar te zijn.

Omdat er zoveel verschillende technologieën zijn waarmee we kunnen werken, worden boilerplates steeds populairder. Voor degenen die niet vertrouwd zijn, zijn boilerplates in principe basiscodes die ontwikkelaars helpen startprojecten te starten zonder code te hoeven schrijven of bepaalde componenten die alle sites en / of toepassingen gemeenschappelijk hebben.

Natuurlijk kunnen ze overdreven worden tot het punt dat ze omvangrijker en ingewikkelder zijn dan nodig, maar alle goede zijn bedoeld om een ​​fundament te leggen - dat wil zeggen om een ​​soort steiger te leveren - om je te helpen focussen op het schrijven van je kernalgoritmen , code en functies die uniek zijn voor uw projecten en behoeften.

Meer dan een jaar geleden begon ik met werken aan twee projecten - de WordPress Plugin Boilerplate en de WordPress Widget Boilerplate - die allemaal een basis willen bieden waarop ontwikkelaars plug-ins kunnen bouwen met behulp van de best practices van WordPress. Gelukkig hebben de projecten een aantal andere bijdragen ontvangen van de open source community om ze zo sterk mogelijk te maken.

Een van de aspecten van het onderhoud van deze projecten is dat ik vaak vragen krijg over waarom ik de dingen zo heb uitgelegd als ik. Dus in deze tweedelige serie gaan we de ketelplaten bekijken, de redenen (en voordelen) om ze te organiseren zoals ik die heb, en dan zullen we een eenvoudige plug-in bouwen met een van deze boilers om een ​​voorbeeld te geven van hoe ze te gebruiken in uw toekomstige projecten.


Bestandsorganisatie

Een van de belangrijkste componenten van het bouwen van een softwaretoepassing - ongeacht hoe groot of hoe klein - is hoe het programma is georganiseerd. Dit is niet alleen beperkt tot hoe de klassen en / of functies gerelateerd zijn (dat is een onderwerp van een heel ander artikel), maar ook hoe de bestanden georganiseerd zijn.

In het ideale geval moeten bestanden niet zomaar in een directory worden gedumpt en vervolgens worden ze achtergelaten door andere ontwikkelaars om door te filteren om het project te onderhouden. In plaats daarvan zouden ze logisch georganiseerd moeten zijn in coherente mappen, duidelijk - niet slim - genoemd, en het zou elke ontwikkelaar die aan het project bijdraagt ​​zeer weinig moeite moeten doen om te begrijpen waar bepaalde bestanden zich bevinden en waar ze hun eigen toevoegingen kunnen plaatsen..

Het is net als het oude gezegde:

Een plek voor alles en alles op zijn plaats.

Bij het maken van beide ketelplaten heb ik niet alleen geprobeerd dit specifieke principe te volgen, maar ook probeerde ik de inspiratie te volgen van hoe Ruby on Rails zijn lay-out modelleert. In het bijzonder geven ze de voorkeur aan "conventie boven configuratie."

Het is duidelijk dat WordPress geen Rails is, noch een MVC-framework, en ik probeer het ook niet te maken. Ik probeer eenvoudig goede ideeën van andere ontwikkelaars te lenen om onze levens een beetje gemakkelijker te maken binnen de context van onze omgeving.

Core Plugin-bestand

Ongeacht hoe eenvoudig of hoe ingewikkeld uw plug-in is, deze moet omvatten tenminste een enkel PHP-bestand. Dit bestand fungeert als het kern-plugin-bestand waarin alle code, logica en functionaliteit zitten die uw plug-in het leven geeft.

Als je kijkt naar het hele spectrum van plug-ins, zul je merken dat ontwikkelaars verschillende methoden hebben:

  • Sommige bevatten alles in een enkel bestand
  • Sommige breken gerelateerde functionaliteit uit in afzonderlijke bestanden en gebruiken het kern-plugin-bestand om eenvoudig elk van hen op te nemen
  • Sommige scheiden een deel van de frontendcode van de code aan de serverzijde

Ik ben hier niet om argumenten aan te voeren waarom een ​​van deze methoden (zelfs de genoemde) beter zijn dan de andere; gewoon waarom de ketelplaten zijn ingedeeld zoals ze zijn en hoe deze voor u kunnen werken.


De startpagina van de plug-in op basis van het README-bestand.

Naast een kerninvoegbestand hebben WordPress-plug-ins een README nodig om de eindgebruiker wat instructie te geven over het gebruik van de plug-in en om de pagina in de WordPress-pluginrepository te vullen.

Op het allereenvoudigste niveau is dit alles wat vereist is voor een WordPress-plug-in: een kern-plugin-bestand en een README. U kunt wegkomen met het bouwen van een aantal aanzienlijk complexe plug-ins met alleen deze twee bestanden; het kan echter ongelooflijk moeilijk worden om te onderhouden, vooral als andere ontwikkelaars beginnen bij te dragen, wat uiteindelijk kan resulteren in onbedoelde bugs.

Als zodanig ben ik een grote voorstander van het logisch scheiden van de componenten van de code.

Keer bekeken

Keer bekeken is een woord dat ik heb geleend van het MVC-patroon (en ook geïnspireerd ben door Rails).

Weergaven kunnen worden gedefinieerd als de frontendopmaak die elementen op het scherm weergeeft voor zowel beheerders als bezoekers van de site.

Dat is alles. Makkelijk, toch?

Natuurlijk, omdat we in PHP werken, zijn er ongetwijfeld kleine PHP-tags in de hele code, maar het grootste deel van een weergavebestand moet HTML zijn met klasse- en ID-kenmerken..

Binnen de ketelplaten zijn er twee opvattingen:

  1. admin.php is de weergave die wordt gebruikt om de elementen voor gebruikers weer te geven in het beheerdersdashboard
  2. widget.php of plugin.php is de weergave die wordt gebruikt om de elementen weer te geven voor bezoekers van de site

Uiteraard hebben plug-ins geen zicht op het dashboard of de bezoekers van de site. In dat geval, de keer bekeken directory zou worden verwijderd en de code die verantwoordelijk is voor het opnemen ervan in het kerninvoegbestand zou worden verwijderd.

stylesheets

Dit is een triviaal onderdeel van de Boilerplates, aangezien iedereen die elke vorm van frontendontwikkeling doet, weet hoe stylesheets moeten worden beheerd en waarschijnlijk een eigen aanpak heeft om deze te organiseren.

Maar om consistent te zijn, is het de moeite waard te vermelden dat de css directory is waar alle stylesheets worden bewaard. De bestanden volgen ook dezelfde naamconventie als hun bijbehorende weergaven.

Concreet:

  1. admin.css is de weergave die wordt gebruikt om de elementen voor gebruikers in het beheerdersdashboard te stijlen
  2. widget.css of plugin.css is de weergave die wordt gebruikt om de elementen voor bezoekers van de site vorm te geven

Ik heb gespeeld met het idee om een ​​directorystructuur voor MINDER of SASS te introduceren, maar ik denk dat dat te geliefd wordt voor ontwikkeling en het is niet de richting waarin ik de Boilerplates wil gebruiken. Ik wil liever dat ontwikkelaars hun eigen smaak kiezen en het opnemen.

Daartoe is de manier waarop ik mijn stylesheets normaal in mijn eigen projecten organiseer, het introduceren van een dev map in de css map en introduceer een admin.less en plugin.less bestand dat vervolgens wordt gecompileerd en verkleind naar de root css directory.

Dit blijft het voorbeeld volgen van het organiseren van de Boilerplates, terwijl ik ook de mogelijkheid krijg om mijn MINDER-bestanden op te nemen.

JavaScript

Net als stylesheets zijn de JavaScript-bestanden een triviaal onderdeel van de Boilerplates omdat de meeste mensen die met WordPress hebben gewerkt en een thema of plug-ins hebben ontwikkeld JavaScript hebben gebruikt.

Helaas is een van de meest frustrerende aspecten van het gebruik van JavaScript in WordPress - als gebruiker en als ontwikkelaar - dat ontwikkelaars niet vaak de beste werkwijzen volgen.

Over het algemeen zouden ontwikkelaars altijd het volgende moeten doen:

  1. Gebruik de versie van jQuery die is gebundeld met WordPress
  2. Voorkom conflicten met de functie '$' van jQuery door er toegang toe te krijgen met een anonieme functie
  3. Afmelden voor jQuery niet als andere plug-ins en het thema kan het gebruiken

Met dat gezegd, zijn de Boilerplates - zoals stylesheets en views - op de volgende manier georganiseerd:

  1. admin.js is het JavaScript dat wordt gebruikt om het gedrag van de elementen voor gebruikers in het beheerdersdashboard te beheren
  2. widget.js of plugin.js is het JavaScript dat wordt gebruikt om het gedrag van de elementen voor bezoekers te beheren

Net als bij stylesheets kunnen ontwikkelaars ook kiezen voor lint en / of hun JavaScript verkleinen voordat ze hun plug-in vrijgeven. Om te voorkomen dat je te eigenzinnig bent over hoe JavaScript-bestanden worden beheerd, zijn er geen submappen in de Boilerplate, maar ik maak vaak een dev map in de js directory om mijn pre-pluis, vooraf verkleinde JavaScript te beheren.

talen

Een aspect van het bouwen van plug-ins is ervoor zorgen dat ze toegankelijk zijn en worden vertaald door mensen die andere talen spreken. Om dat zo eenvoudig mogelijk te maken, bevatten de Boilerplates ook een LANG map en een skelet plugin.po het dossier.

Dit bestand is bedoeld om te worden gebruikt in combinatie met POEdit, zodat zodra u de ontwikkeling hebt voltooid, u alle gelokaliseerde reeksen gemakkelijk kunt verwerken.

Hoe zit het met afbeeldingen en andere activa?

Behalve stylesheets en JavaScript-bestanden bieden de Boilerplates geen mappen of conventies voor het beheren van andere items, zoals afbeeldingen.

Nogmaals, het is een balans tussen proberen te vermijden dat je te eigenwijs bent en tegelijkertijd net voldoende ondersteuning bieden om ontwikkelaars te laten beginnen met focussen op hun kernfunctionaliteit. Hoewel niet elke plug-in administratieve CSS, JavaScript of weergaven zal bevatten, komen ze veel vaker voor dan afbeeldingen en andere items.

Toch zou de conventie die is geleverd moeten dicteren dat je een kunt maken middelen map, een afbeeldingen map, een pictogrammen map, of welk ander type bestand waarmee je gaat werken.


Waarom zou je je drukmaken?


De WordPress Widget Boilerplate

Dus wat is het punt van dit alles? Zou het niet zo eenvoudig zijn om een ​​enkel bestand te openen en alle code te schrijven? Definitief. Maar onthoud, het grootste deel van de ontwikkeling komt na een product wordt uitgebracht en als u de ontwikkeling van plug-ins serieus neemt, bent u bezig met het bouwen van producten.

Als zodanig moet je beginnen met het einde in gedachten. Een consistent schema gebruiken voor het ordenen van uw bestanden, het benoemen van uw bestanden, enzovoort:

  • Vergemakkelijkt de ontwikkeling op de lange termijn, zodat u en bijdragende ontwikkelaars weten hoe de bestanden moeten worden beheerd, waar nieuwe bestanden moeten worden geplaatst en waar afhankelijkheden moeten worden gezocht als ze deze nodig hebben
  • Maakt het onderhoud eenvoudiger door een gemeenschappelijke organisatie en patroon aan te bieden waarvan de plug-in kan worden verbeterd
  • Verbetert de mogelijkheid om het project te schalen na de eerste versie zonder een aanzienlijke hoeveelheid refactoring te hoeven doen als de codebase eenmaal onhandig wordt

Bovenal zou de steiger ontwikkelaars de mogelijkheid moeten bieden om gemakkelijk aan de kernbusinesslogica van hun product te beginnen zonder hen in de weg te lopen.


Conclusie

In dit artikel hebben we het "Waarom" van de organisatie van de Boilerplates besproken, maar we hebben niet echt het "Hoe" van de Boilerplates bekeken, dus in het volgende artikel zullen we alleen dat bekijken.

Specifiek zullen we stap voor stap werken aan het bouwen van een plug-in met behulp van een van de boilerplaten, zodat we de typische stappen kunnen identificeren die nodig zijn om een ​​kopie van de boilerplaat te bemachtigen en te beginnen met de ontwikkeling.