Share
In deze reeks artikelen gaan we het stapsgewijze proces van de ontwikkeling van WordPress-plug-ins bestuderen.
Als je een beginner bent die op zoek is naar je eerste plug-in (die zowel shortcodes als widgets bevat), dan is deze serie vooral voor jou.
Om dit proces in de praktijk te laten zien, zullen we een plug-in ontwikkelen voor de integratie van de Owl Carousel in WordPress.
Owl Carousel is een responsieve carrousel die goed werkt op desktops, tablets en mobiele apparaten. Het is ontwikkeld door Bartosz Wojciechowski en wordt gedistribueerd onder de MIT-licentie.
Laten we eens kijken naar het plugin-concept om een duidelijk beeld te krijgen van wat we precies gaan maken.
Hier is het idee:
Simpel gezegd, we zijn op zoek naar een diepe integratie van Owl Carousel in WordPress met een gebruikersvriendelijke interface.
Natuurlijk is de eerste vraag, waar beginnen we?
Aangezien we werken aan de integratie van één bibliotheek (dat wil zeggen, Owl Carousel) in een bestaande applicatie (dat wil zeggen WordPress), moeten we in staat zijn om de stappen te beschrijven die we zullen volgen om onze inpluggen.
Om te beginnen zullen we precies beschrijven wat Owl Carousel doet:
Hier ziet u onze twee sleutelwoorden:
Laten we eerst eens kijken naar "Instellingen". Instellingen kunnen worden gedefinieerd als de parameters van de uilcarrousel die we zullen uiteenzetten in het WordPress-dashboard.
Om dit te doen, moeten we de instellingenpagina in ons Dashboard ontwikkelen. Als zodanig is dit de eerste stap van de ontwikkeling van plug-ins. Daartoe voegen we het toe aan ons diagram.
Laten we nu onze aandacht richten op aanbevolen afbeeldingen.
Zoals ik in het begin van het artikel al zei, willen we aanbevolen afbeeldingen tonen van berichten die we selecteren. Om dit te doen, moeten we berichten kunnen markeren die in de carrousel moeten verschijnen.
Er zijn verschillende manieren om dit te doen:
Zowel de Category- als Tag-implementaties zijn slechte ideeën vanuit een SEO-perspectief omdat ze extra pagina's op de website creëren die uiteindelijk bestaande inhoud dupliceren. Hoewel dit feitelijk op een aantal verschillende manieren kan worden beheerd, vallen deze strategieën buiten het bestek van deze zelfstudie.
Om dit te voorkomen, raad ik aan aangepaste velden te gebruiken. In dit geval markeert u een bericht en verschijnen er geen extra pagina's. De tweede stap is om te definiëren welke afbeeldingen moeten worden toegevoegd aan de carrousel.
Laten we deze stap toevoegen aan ons diagram:
Wanneer we parameters en afbeeldingen hebben, kunnen we eindelijk de eigenlijke carrouselfunctionaliteit implementeren. En dat zal onze derde stap zijn, dus laten we het aan ons diagram toevoegen:
Op dit punt hebben we voldoende functionaliteit om Owl Carousel als een sjabloontag aan het thema toe te voegen; het zou echter veel beter zijn om de carrousel aan berichten en pagina's toe te kunnen voegen.
Om dit te doen, moeten we shortcode-functionaliteit implementeren. Net als bij de rest van onze stappen, laten we het aan het diagram toevoegen:
Om de plug-in nog nuttiger te maken, zouden we een widget voor de uil-carrousel moeten toevoegen. Met widgets kunnen we de carrousel op meerdere pagina's weergeven als alternatief voor shortcodes.
Laten we tot slot ook de ontwikkeling van een widget aan het diagram van onze ontwikkeling toevoegen.
Hierboven ziet u het diagram van ons hele proces. Voordat de plugin-functionaliteit zelf wordt ontwikkeld, moeten we onze ontwikkelingswerkruimte voorbereiden. In het volgende artikel zullen we precies dat behandelen.
In dit artikel hebben we de functies van onze plug-in gedefinieerd en de stappen van ontwikkeling gepland.
Het doel van het planningsproces is alles over verdeel en heers. Met andere woorden, we werken eraan het idee van wat we willen doen op te splitsen in beheersbare stappen die kunnen worden bereikt door verschillende iteraties van ontwikkeling.
Van daaruit zou u in staat moeten zijn om de noodzakelijke afhankelijkheden, stappen, API's en gegevens te definiëren die nodig zijn om de plug-in daadwerkelijk te implementeren. Vanaf het volgende artikel beginnen we met het opzetten van onze ontwikkelingswerkruimte en gaan we verder met de ontwikkeling van de plug-in.
Accentsconagua