Share
In de vorige tutorial begonnen we te praten over namespaces en autoloading met PHP in de context van WordPress-ontwikkeling. En hoewel we nooit een van deze twee onderwerpen hebben geïntroduceerd, hebben we ze wel gedefinieerd en beginnen we met het leggen van de basis voor hoe we ze in een komende zelfstudie introduceren..
Voordat we dat doen, is er echter een aantal functies die we moeten voltooien om onze plug-in te voltooien. Het doel is om de plug-in en de functionaliteit ervan af te maken, zodat we een eenvoudige, objectgerichte plug-in hebben die gedocumenteerd is en goed werkt met één waarschuwing; het gebruikt geen namespaces of autoloading.
Dit geeft ons op zijn beurt de kans om te zien hoe een plug-in er uit ziet vóór en na de introductie van deze onderwerpen.
Alvorens verder te gaan, raad ik aan de vorige tutorial te lezen. Op deze manier heb je inzicht in wat namespaces en autoloading zijn, je hebt de werkende versie van de plug-in tot nu toe (omdat we erop zullen bouwen), en dan ben je klaar om ga vanaf dat punt verder.
Als je het eenmaal gelezen hebt, kom dan terug naar deze tutorial en hervat je werk.
Zoals bij al mijn tutorials, neem ik aan dat je een werkende ontwikkelomgeving op je machine hebt. Dit omvat het volgende:
Als je ver in de serie zit (of een van mijn vorige werk hebt gelezen), neem ik aan dat je dat al hebt gedaan iets zoals het bovenstaande al op zijn plaats.
En wanneer u dat doet, zijn we klaar om te beginnen.
Terugroepen van de vorige tutorial:
We zullen een plug-in bouwen die het gemakkelijk maakt om stijlbladen en JavaScript-stijlen in onze plug-in te laden, en die een metabox toont die de gebruiker een vraag stelt om hem te helpen brainstormen over wat hij moet bloggen.
Ja, het is eenvoudig en het is niet waarschijnlijk dat iemand iets zal gebruiken buiten het bestuderen van de concepten die we in dit blog behandelen. Maar de middelen waarmee we de concepten onderwijzen die we gebruiken, is wat belangrijk is.
Deze plug-in geeft ons de mogelijkheid om precies dat te doen.
Aan het einde van de laatste zelfstudie zijn we vertrokken met een plug-in die een willekeurige vraag weergeeft aan de schrijver boven aan de zijbalk in het WordPress-venster voor het maken van berichten.
Telkens wanneer u de pagina vernieuwt, wordt een nieuwe vraag geladen. In zijn huidige vorm is het niet slecht, maar er zijn enkele verbeteringen die we kunnen aanbrengen in termen van de stijl van de inhoud in de metabox.
Dat wil zeggen dat we stylesheets kunnen introduceren waarmee we een iets visuelere presentatie kunnen maken. Bovendien geeft het ons de mogelijkheid om een paar meer object-georiënteerde technieken te verkennen die we kunnen gebruiken bij het werken met assets zoals stylesheets.
Laten we beginnen.
Voor deze tutorial gebruik ik geen enkel type preprocessor. Ik ga gewoon vanilla CSS gebruiken. Maar de manier waarop we activa in bewaring geven, zal wat objectgerichter zijn dan wat veel WordPress-ontwikkelaars gewend zijn te zien.
Dit zal allemaal bijdragen aan het doel om namespaces en autoloading in deze serie te gebruiken. Maar laten we eerst beginnen met het introduceren van deze stylesheets, het creëren van de nodige klasse-interfaces, klassen en communicatie met de WordPress API.
In de beheerder map, maak een submap aan genaamd middelen. Binnen de middelen map, maak een submap aan genaamd css en voeg vervolgens het bestand toe admin.css.
De uiteindelijke directorystructuur zou er ongeveer zo uit moeten zien:
We zijn nog niet klaar om welk type stijl dan ook te bieden. In plaats daarvan moeten we onze aandacht richten op de server-side code die verantwoordelijk is voor het in de wacht slepen van dit stylesheet.
Als het gaat om het registreren en in de wacht zetten van beide stylesheets en JavaScript, zijn de meeste ontwikkelaars van WordPress plug-ins bekend met de haken die nodig zijn om dat te doen. Specifiek, ik doel op admin_enqueue_scripts en wp_enqueue_style.
En hoewel we deze haken gaan gebruiken, gaan we het op een eenvoudige, objectgerichte manier installeren. Nee, deze serie is niet bedoeld om een duik te nemen in objectgerichte principes, maar, indien van toepassing, ben ik blij om te proberen ze aan u te laten zien.
Bij objectgeoriënteerd programmeren is een interface als zodanig gedefinieerd:
Een interface is een programmeerstructuur / syntaxis waarmee de computer bepaalde eigenschappen in een klasse kan afdwingen.
Een andere manier om erover na te denken is dit:
Als je een klasse hebt die een interface implementeert, de klasse moet definieer functionaliteit die de interface dicteert.
Dus als de interface twee methodeshandtekeningen heeft met een specifieke zichtbaarheid en naam, dan moet de klasse die de interface implementeert twee methoden hebben met dezelfde zichtbaarheid en naam, evenals een daadwerkelijke methode-implementatie..
En dat is wat we gaan doen. Eerst moeten we onze interface definiëren. Dus in de util map, maken -interface-assets.php en voeg dan de volgende code toe:
Merk op, de interface definieert de functionaliteit niet echt. In plaats daarvan specificeert het wat de klassen die deze interface implementeren zouden moeten definiëren.
Zoals je misschien al vermoeden, zullen de klassen die deze interface zullen implementeren twee bovenstaande methoden hebben, samen met een daadwerkelijke implementatie voor elke functie. En we zullen zien hoe dit tijdelijk werkt.
Zorg er vervolgens voor dat u dit bestand opneemt in het hoofdinvoegbestand:
Vervolgens moeten we een bestand maken dat deze interface implementeert. Omdat we met CSS-bestanden werken, maken we een CSS-lader.
De CSS-lader
Dit is de klasse die verantwoordelijk is voor het implementeren van de interface en het daadwerkelijke werk doet om de functie te registreren met de benodigde WordPress-hook (en de implementatie daadwerkelijk aan die functie te geven).
Als je de onderstaande code bekijkt, zou deze er ongeveer hetzelfde uit moeten zien als iets dat je in een vorig project hebt gezien of waaraan je misschien hebt gewerkt:
De code hierboven moeten zijn relatief eenvoudig te volgen gezien de opmerkingen in de code, maar ik zal beschrijven wat er gebeurt:
Accentsconagua
in het en enqueue zijn beide functies vereist als de klasse de. implementeert Assets_Interface.in het wordt genoemd, het registreert de enqueue functie met de haak die verantwoordelijk is voor het registreren van een stylesheet.enqueue methode registreert de admin.css bestand en gebruikt filemtime als een manier om te weten of het bestand is gewijzigd of niet (waardoor we bij het serveren elke gecachede versie van het bestand kunnen vernietigen).In deze implementatie, de werkelijke admin.css bestand wordt op elke pagina toegevoegd. Het toevoegen van een voorwaarde om te controleren welke pagina momenteel actief is en vervolgens te bepalen of het stijlblad moet worden toegevoegd of niet, kan worden toegevoegd als een oefening na de zelfstudie. Voor een hint, check out get_current_screen ().
Vervolgens moeten we dit bestand opnemen in het hoofdinvoegbestand:
Vervolgens moeten we de CSS-lader instantiëren en de CSS-lader bellen
in hetmethode in de maintutsplus_namespace_demofunctie:in het();Ervan uitgaande dat je alles goed hebt gedaan, zou je in staat moeten zijn om de Voeg nieuwe bericht toe pagina, bekijk de bron en zie
admin.cssvermeld als een beschikbaar stijlblad.We hebben nog een ding te doen voordat we klaar zijn om dit deel van de zelfstudie af te ronden. We moeten eigenlijk wat CSS schrijven.
Style de Meta Box
Aangezien het merendeel van de tutorial zich heeft gericht op sommige object-georiënteerde technieken en we nog steeds een aantal nieuwe onderwerpen hebben om te verkennen in deze serie, maken we dit deel relatief eenvoudig.
In plaats van alleen een aantal standaardstijlen te gebruiken zoals geleverd door WordPress, laten we de metabox een klein beetje verbeteren.
Zoek eerst de
gevenfunctie in deMeta_Box_Displayklasse. Laten we het zo aanpassen dat het de inhoud van het bestand in een alineaniveau uitvoert met het ID attribuut van "tutsplus-author-prompt".Om dit te doen, gaan we een nieuwe methode introduceren die een WordPress API-methode zal gebruiken voor het opschonen van HTML.
array ('id' => array (),),); return wp_kses ($ html, $ allowed_html);We zullen deze functie dan vanuit het
gevenmethode om de inhoud in de metabox weer te geven.question_reader-> get_question_from_file ($ bestand); $ html = "$ vraag
"; echo $ this-> sanitized_html ($ html);Nu kunnen we admin.css openen en een paar kleine wijzigingen aanbrengen om het uiterlijk van de metabox in de Voeg nieuwe bericht toe scherm. Laten we de volgende CSS toevoegen:
# tutsplus-auteur-prompt font-style: italic; text-align: center; kleur: # 333;En nu zou je metabox er ongeveer zo uit moeten zien te zien:
Zoals eerder vermeld, is het niets belangrijks, maar het is iets dat de look en feel van de vraag slechts een klein beetje verbetert.
Wat is het volgende?
Op dit punt hebben we een aantal verschillende klassen, interfaces en andere objectgeoriënteerde functies geïntroduceerd. We hebben een plug-in die gegevens uit een tekstbestand gebruikt, die communiceert met de WordPress API en die informatie zuivert voordat deze wordt weergegeven op de startpagina.
We hebben een goede basis om over namespaces te beginnen. Dus in de volgende tutorial gaan we precies dat doen. Als je de rest van de serie nog moet inhalen, dan raad ik het aan omdat we alleen verder gaan bouwen op wat we hebben geleerd.
Als je in de tussentijd ander WordPress-materiaal zoekt, kun je al mijn vorige tutorials op mijn profielpagina vinden en kun je me volgen op mijn blog of op Twitter.
Vergeet tot die tijd niet de werkende versie van de plug-in (versie 0.2.0) die aan dit bericht is toegevoegd te downloaden. De link is beschikbaar in de zijbalk onder een knop getiteld Bijlage downloaden. En, zoals gebruikelijk, aarzel niet om vragen te stellen in de comments!
Middelen
