Hoe maak je een WordPress-plug-in (beginnershandleiding)

Belangrijkste hoogtepunten

• Het ontwikkelen van een WordPress-plug-in zorgt voor gepersonaliseerde functies, betere prestaties en verbeterde compatibiliteit met de behoeften van uw website.
• Het proces omvat het maken van een PHP-bestand, het toevoegen van een header, het schrijven van aangepaste code en het testen van de plug-in binnen WordPress.
• Om je plugin in te dienen bij de WordPress-repository, moet je een leesmij-bestand maken, specifieke richtlijnen volgen en SVN gebruiken voor updates.
• Beveilig uw plug-in door invoer op te schonen, nonces te gebruiken en uitvoer te valideren om u te beschermen tegen kwetsbaarheden.
• Het maken van plug-ins bouwt vaardigheden op op het gebied van webontwikkeling en biedt mogelijkheden voor het genereren van inkomsten door middel van de verkoop van plug-ins of premiumfuncties.

Introductie

Of u nu een aspirant-ontwikkelaar bent of een website-eigenaar die graag de mogelijkheden van uw site wil uitbreiden, leren hoe u een WordPress-plug-in maakt, opent een wereld van maatwerk. Door een aangepaste WordPress-plug-in te maken, kunt u uw website precies afstemmen op uw behoeften, en een niveau van flexibiliteit bieden dat kant-en-klare plug-ins niet altijd kunnen bieden. Door een nieuwe plug-in voor de website te bouwen, krijgt u niet alleen controle over toegevoegde functionaliteit, maar vermijdt u ook onnodige functies die uw site kunnen opblazen en de prestaties kunnen vertragen.

Het maken van een WordPress-plug-in lijkt misschien ingewikkeld, maar met de juiste begeleiding is het een beheersbaar en lonend proces. In deze beginnershandleiding leiden we u door de essentiële stappen om een functionele nieuwe plug-in te bouwen, hoe u deze effectief in uw site kunt integreren en tips om deze aan te passen aan uw specifieke doelen. Of u nu een unieke functie wilt toevoegen of gewoon de kneepjes van het vak wilt leren van plug-infuncties en ontwikkeling, deze gids heeft alles wat u nodig hebt om aan de slag te gaan en de mogelijkheden van uw website te verbeteren.

Waarom een WordPress plugin ontwikkelen

Door een WordPress-plug-in te maken, kunt u uw website aanpassen aan uw unieke behoeften en tegelijkertijd de functionaliteit en het aanpassingsvermogen verbeteren. Bekijk deze belangrijkste rechtvaardigingen waarom het ontwikkelen van een unieke WordPress-plug-in goed voor je is:

Aanpassing

Met behulp van WordPress-plug-ins kunt u uw website voorzien van speciale functies en mogelijkheden die niet beschikbaar zijn in vooraf gemaakte thema’s of veel WordPress-plug-ins. Met deze aanpassing kunt u een aangepaste gebruikerservaring voor uw bezoekers creëren.

Optimalisatie van prestaties

U kunt eventuele schadelijke effecten op de prestaties van uw website minimaliseren door een aangepaste plug-in te maken die licht en effectief is. Het zorgt voor betere gebruikerservaringen en snellere laadtijden. Omdat de gebruikers gemakkelijk toegang hebben tot de website, neemt de ROI geleidelijk toe en zet uw merk op de kaart.

Compatibiliteit

Terwijl u plug-ins helemaal opnieuw ontwikkelt, kunt u ervoor zorgen dat uw plug-in compatibel is met WordPress-kernupdates, andere plug-ins en het thema van uw website. Door dit te doen, kunt u uw website soepel laten draaien en toekomstige problemen vermijden.

Veiligheid

Door volledige controle over de code te hebben, kunt u sterke beveiligingsmaatregelen nemen. Dit verkleint de kans op kwetsbaarheden die de beveiliging van uw website in gevaar kunnen brengen en een soepele werking voor zowel de eigenaar als de gebruikers mogelijk maken.

Monetization

Door uw waardevolle bestaande plug-ins op verschillende markten te koop aan te bieden, kunt u er misschien wat geld mee verdienen. Het aanbieden van premiumfuncties of ondersteuningsdiensten kan uw inkomsten verhogen, omdat het een verscheidenheid aan gebruikers kan aanspreken die meer geavanceerde functionaliteit of toegewijde hulp nodig hebben.

Bovendien, als u de functies voortdurend bijwerkt en verfijnt op basis van feedback, zullen uw premium plug-ins hun relevantie en wenselijkheid op de markt behouden. Dit kan de productkwaliteit verbeteren en tegelijkertijd het vertrouwen en de loyaliteit van de gebruiker bevorderen.

Ontwikkeling van vaardigheden

Door de kneepjes van het maken van een WordPress-plug-in te leren, kunt u kennis opdoen over het WordPress-platform en uw vaardigheden op het gebied van webontwikkeling verbeteren. Naarmate je je verdiept in de ontwikkeling van plugins, word je bedreven in PHP, JavaScript en mogelijk SQL. De toevoegingen aan aangepaste functies zijn essentieel voor het maken van een effectieve WordPress-plug-in. Deze ervaring verbetert ook uw probleemoplossend vermogen terwijl u door de plug-incode-uitdagingen en integratieproblemen navigeert. Na verloop van tijd kunt u uw vaardigheden uitbreiden met nieuwe thema’s en de WordPress-functionaliteit wijzigen, samen met aangepaste website-oplossingen. Dit verbreedt vervolgens je expertise en maakt je een veelzijdigere ontwikkelaar in de technische gemeenschap.

Hoe maak je een WordPress-plug-in stap-voor-stap handleiding

Stap 1: Maak je eerste WordPress-plug-in

1. Begin met het maken van een nieuwe map op uw bureaublad of documentmap en geef deze een naam als ‘plugin-tutorial’ of ‘new-plugin’.
2. Maak vervolgens een nieuw bestand met de teksteditor van uw voorkeur en sla het op in de plug-inmap als “plugin-tutorial.php” of “new-plugin.php”. Zorg ervoor dat het bestand de extensie .php heeft, maar de naam zelf kan alles zijn wat u kiest.
3. Open een nieuw PHP-bestand met uw teksteditor om te beginnen met bewerken.
4. Voeg eerst de header van de plug-in toe aan uw bestand. Dit opmerkingenblok informeert WordPress over de naam, versie, website, auteursnaam en andere relevante informatie van uw plug-in.
5. Nadat je de header van de WordPress-plug-in hebt toegevoegd, kun je beginnen met het schrijven van de aangepaste code eronder.
6. In dit voorbeeld maken we een eenvoudige plug-in die aan het einde van elk artikel een bericht toevoegt om gebruikers aan te moedigen ons te volgen op Twitter.
7. Kopieer en plak de volgende code onder het koptekstblok van het hoofdbestand van de plug-in en zorg ervoor dat je de URL’s van je Twitter- en Facebook-profielen vervangt door je eigen URL’s voordat je de wijzigingen opslaat.

<?php 

function wpb_follow_us($content) {

// Only do this when a single post is displayed 

if ( is_single() ) {  

// Message you want to display after the post 

// Add URLs to your own Twitter and Facebook profiles 

$content .= '<p class="follow-us">If you liked this article, then please follow us on <a href="http://twitter.com/wpbeginner" title="WPBeginner on Twitter" target="_blank" rel="nofollow">Twitter</a> and <a href="https://www.facebook.com/wpbeginner" title="WPBeginner on Facebook" target="_blank" rel="nofollow">Facebook</a>.</p>'; 

} 

// Return the content 

return $content;
} 

// Hook our function to WordPress the_content filter 

add_filter('the_content', 'wpb_follow_us');

8. Navigeer nu naar het bureaublad van uw computer en maak een zipbestand met de map van de plug-in.

9. Voor Mac-gebruikers: klik met de rechtermuisknop op de map en selecteer “Comprimeer plugin-tutorial”. Windows-gebruikers kunnen met de rechtermuisknop op de map klikken en ‘Comprimeren om zipbestand te maken’ kiezen.

Stap 2: Installeer en activeer je eerste WordPress plugin

Nu de aangepaste WordPress-plug-in is gemaakt, is het tijd om deze te installeren en te testen. Raadpleeg voor gedetailleerde instructies onze onderstaande gids over het installeren van een WordPress-plug-in.

1. Navigeer naar het WordPress-beheergebied van uw website en ga naar Plug-ins > Nieuwe toevoegen.
2. Klik bovenaan op de knop Plug-in uploaden om het uploadvak van de plug-in weer te geven.
3. Selecteer de knop Bestand kiezen om het zipbestand te kiezen dat u onlangs hebt gemaakt. Klik vervolgens op de knop Nu installeren om de plug-in te uploaden en te installeren.
4. Zodra de installatie is voltooid, activeert u de plug-in.
5. Ga nu naar uw website om de plug-in in actie te zien.

Al je afzonderlijke berichten hebben nu een nieuwe alinea aan het einde.

Stap 3: Dien je plugin in bij de WordPress.org plugin repository

Om de zichtbaarheid en het gebruik van uw plug-in onder WordPress-gebruikers te vergroten, kunt u deze indienen bij de WordPress.org plug-inrepository.

1. Eerst moet je een ‘Read Me’-bestand maken voor je plugin. Open een leeg tekstbestand en sla het als readme.txt op in uw plug-inmap.
2. Het readme.txt-bestand moet de readme-bestandssyntaxis van WordPress.org volgen, aangezien de informatie die u hier opneemt, wordt weergegeven op de pagina van uw plug-in op WordPress.org.

Syntaxis van het leesmij-bestand

Laten we kort de syntaxis van het leesmij-bestand van de WordPress-plug-in bespreken, zodat u deze zelfs voor een eenvoudige plug-in kunt aanpassen.

1. De eerste regel van het leesmij-bestand moet de naam van uw plug-in zijn, die wordt weergegeven als de titel van de plug-in in de map van de WordPress.org-plug-in.
2. De volgende regel is Contributors, waarin de gebruikers-ID’s worden vermeld die verantwoordelijk zijn voor het beheer van uw plug-in op WordPress.org. Als u nog geen gebruikersaccount heeft, kunt u een gratis account maken om uw gebruikers-ID te verkrijgen.
3. ‘Vereist ten minste’ en ‘Getest tot’ geven de WordPress-versies aan waarmee je bestaande plugins compatibel zijn, terwijl ‘Stable tag’ verwijst naar de versie van je plugin.
4. U kunt de velden ‘Licentie’ als GPL behouden en dezelfde URL behouden.
5. Bewerk vervolgens het gedeelte Beschrijving om de functionaliteit van uw plug-in uit te leggen.
6. Nadat u het leesmij-bestand van uw plug-in hebt bewerkt, vergeet niet uw wijzigingen op te slaan.
7. Uw plug-in is nu klaar voor beoordeling door het WordPress.org plug-ins-team. Om uw plug-in in te dienen, heeft u een gratis WordPress.org-account nodig.
8. Ga naar de pagina Uw plug-in toevoegen en als u nog niet bent ingelogd, klikt u op de knop Inloggen.
9. Nadat u bent ingelogd, kunt u uw eerste plug-in uploaden en ter beoordeling indienen.
10. Klik op de knop Bestand selecteren om het zipbestand van uw plug-in te kiezen, vink vervolgens alle toepasselijke vakjes aan en klik op Uploaden.

Het beoordelingsteam van de WordPress.org plug-in zal uw plug-incode onderzoeken op veelvoorkomende fouten en beveiligingscontroles. Na goedkeuring ontvang je een e-mail met een link naar de Subversion (SVN) repository van je plugin die op WordPress.org wordt gehost.

Stap 4: Subversion (SVN) gebruiken om je plugin te uploaden

Subversion is software voor versiebeheer waarmee gebruikers bestanden en mappen kunnen wijzigen terwijl ze wijzigingen bijhouden, verschillende versies beheren en samenwerking vergemakkelijken.

Het installeren van een SVN-client op uw computer is noodzakelijk om uw eigen plug-ins naar WordPress.org te uploaden. Windows-gebruikers kunnen SilkSVN of TortoiseSVN (gratis) gebruiken, terwijl Mac-gebruikers SmartSVN of de Versies-app kunnen installeren.

We demonstreren het proces met behulp van de Versies-app voor Mac. De procedure is echter vrij gelijkaardig in alle SVN-apps met een GUI.

Stappen om de plug-in te uploaden

1. Nadat je de app hebt geïnstalleerd, open je Versies en bekijk je een kopie van de repository van je WordPress-plug-in door op de knop New Repository Bookmark te klikken.
2. Geef in de pop-up een naam op voor deze bladwijzer (bij voorkeur de naam van uw plug-in) en voeg de SVN-repository-URL van uw WordPress-plug-in toe.
3. Klik op Maken om verbinding te maken met uw repository.
4. Versies downloaden een kopie van de repository van uw plug-in naar uw computer. Klik met de rechtermuisknop op de naam van uw repository in de browserweergave en selecteer Afrekenen.
5. Geef de naam en locatie van een map op voor het opslaan van de lokale kopie van uw WordPress-plug-in op uw computer en klik vervolgens op Afrekenen.
6. Versies maken een lokale kopie van uw plug-in. Kopieer je plug-inbestanden en plak ze in de basismap van je lokale repository.
7. U ziet een vraagteken naast nieuwe bestanden in Versies. Selecteer de nieuwe bestanden en klik op Toevoegen om ze op te nemen in uw lokale map.
8. Klik nu op uw lokale repository en klik op Vastleggen.
9. In de pop-up die verschijnt, zie je een lijst met wijzigingen en een vak om een commit-bericht toe te voegen. Klik op Vastleggen om door te gaan.
10. Je SVN-app synchroniseert je wijzigingen en legt ze vast in de repository van je plug-in.
11. Nadat je je plug-inbestanden naar de basislijn hebt geüpload, tag je ze met een versie.
12. Kopieer in de lokale kopie van uw plug-in de bestanden in de basismap. Open vervolgens de map met tags en maak er een nieuwe map in. Noem het naar het versienummer. Zorg ervoor dat het versienummer overeenkomt met het versienummer in de header van uw plug-in.
13. Nadat je de nieuwe map hebt toegevoegd aan de map /tags/, zie je een vraagteken naast de mapnaam in de Versies-app. Klik op Toevoegen om de map en de bijbehorende bestanden in het archief op te nemen en klik vervolgens op Vastleggen om je wijzigingen te synchroniseren.

Pro-tip

U kunt doorgaan met het bewerken van uw afzonderlijke bestanden van de plug-in in de lokale kopie en wijzigingen vastleggen om te synchroniseren met de WordPress.org repository. Als u belangrijke wijzigingen aanbrengt in uw plug-in, maakt u een nieuwe versie door deze in een nieuwe map te plaatsen met de naam naar het versienummer. Zorg ervoor dat dit versienummer overeenkomt met het nummer in de header van je plugin.

U kunt nu een voorbeeld van uw plug-in bekijken in de map WordPress.org plug-ins.

Stap 5: Voeg illustraties toe aan je plugin op wordpress.org

WordPress.org stelt u in staat om illustraties en schermafbeeldingen toe te voegen met uw eenvoudige WordPress-plug-in. Deze elementen moeten voldoen aan de standaard naamgevingsconventies en worden geüpload met behulp van Subversion.

Plugin header banner

Deze grote afbeelding verschijnt bovenaan de plug-inpagina en kan 772 x 250 of 1544 x 500 pixels zijn in JPEG- of PNG-bestandsindelingen. Het moet altijd als volgt worden genoemd:

• banner-772×250.jpg of banner-772×250.png
• banner-1544×500.jpg of banner-1544×500.png

Plugin icoon

Dit kleinere, vierkante afbeeldingsbestand wordt weergegeven als een plug-in-pictogram in zoekresultaten en plug-inlijsten. Het kan 128 x 128 of 256 x 256 pixels zijn in jpeg- of png-bestandsindelingen.

Het pictogrambestand moet de volgende naam hebben:

• icon-128×128.jpg of icon-128×128.png
• icon-256×256.jpg of icon-256×256.png

Schermafbeeldingen

Screenshot-bestanden moeten een naam hebben in de volgende indeling:

• screenshot-1.png
• screenshot-2.png

Herinneringen:

1. U kunt er zoveel toevoegen als u wilt, en deze schermafbeeldingen moeten in dezelfde volgorde verschijnen als de schermafbeeldingsbeschrijvingen in uw readme.txt bestand.
2. Zodra u al het artwork hebt voorbereid, plaatst u het in de map met activa van de lokale kopie van uw plug-in.
3. Daarna ziet u een vraagteken naast de map met activa. Klik op de knop Toevoegen om het nieuwe itembestand in uw opslagplaats op te nemen.
4. Klik ten slotte op de knop Vastleggen om je bestanden te uploaden naar de WordPress.org repository. Na enige tijd verschijnt de illustratie op uw plug-inpagina.

Veelvoorkomende problemen met plug-ins en snelle oplossingen

Het maken van je eigen WordPress-plug-in kan uitdagingen met zich meebrengen, vooral voor beginners. Hier zijn enkele veelvoorkomende problemen die u kunt tegenkomen en snelle oplossingen om uw plug-inbestand soepel te laten werken:

Syntaxisfouten

Een simpele typefout, zoals een ontbrekende puntkomma of niet-overeenkomende haakjes, kan leiden tot frustrerende fouten op de WordPress-site. Het gebruik van een code-editor met syntaxismarkering kan u helpen deze problemen snel op te sporen. Zorg ervoor dat u uw code controleert op veelvoorkomende syntaxisfouten en test regelmatig om fouten vroegtijdig op te sporen.

Compatibiliteitsproblemen

Wanneer u een WordPress-plug-in maakt, kan deze soms botsen met andere plug-ins of thema’s. Meerdere bestanden van plug-ins die hetzelfde deel van de site proberen te wijzigen, kunnen bijvoorbeeld leiden tot onverwacht gedrag. Test je plug-inbestand altijd eerst in een testomgeving, waarbij je de WP_DEBUG-modus in WordPress inschakelt, die gedetailleerde foutenlogboeken biedt voor het oplossen van problemen.

Fouten bij het activeren van plug-ins

Soms worden plug-ins voor uw WordPress-website niet geactiveerd vanwege ontbrekende bestanden of onjuiste bestandspaden. WordPress is hoofdlettergevoelig, dus controleer nogmaals of de bestandsnamen exact overeenkomen en of alle benodigde bestanden aanwezig zijn. Als er een activeringsfout optreedt, controleert u de bestandspaden en naamgevingsconventies. Dit is een belangrijke stap in het ontwikkelingsproces van WordPress.

Door deze veelvoorkomende problemen vroeg in de ontwikkeling van plug-ins aan te pakken, kunt u tijd besparen en zorgen voor een vlottere lancering van de plug-in.

Beste beveiligingspraktijken

Het waarborgen van de beveiliging van uw eigen WordPress-plug-in is van vitaal belang om zowel uw gebruikers als hun websites te beschermen tegen mogelijke kwetsbaarheden. Door deze best practices te volgen, kunt u een veiligere plug-in maken:

Invoer ontsmetten

Om beveiligingslekken zoals SQL-injecties en cross-site scripting (XSS)-aanvallen te voorkomen, is het van cruciaal belang om alle input van gebruikers op te schonen. WordPress biedt verschillende sanitize_*() functies die het gemakkelijk maken om invoergegevens op te schonen en te valideren, waardoor uw map met plug-ins wordt beschermd tegen kwaadwillende invoer.

Nonces gebruiken voor verificatie

Wanneer uw plug-incode namens de gebruiker acties uitvoert, zoals het indienen van een formulier, voegt het gebruik van WordPress-nonces (eenmaal gebruikte nummers) een beschermingslaag toe tegen Cross-Site Request Forgery (CSRF)-aanvallen. Gebruik functies zoals wp_create_nonce() en check_admin_referer() om verzoeken te verifiëren en ervoor te zorgen dat ze afkomstig zijn van een geautoriseerde bron.

Uitvoer valideren

Net zoals u invoer opschoont, is het belangrijk om de uitvoer te valideren. Gebruik WordPress-functies zoals esc_html() of esc_url() om te ontsnappen aan gegevensuitvoer, vooral als deze dynamisch is of door gebruikers is gegenereerd. Deze stap helpt voorkomen dat onbedoelde scripts op uw site worden uitgevoerd en houdt uw WordPress-site-plug-in veilig.

Door deze beveiligingsmaatregelen op te nemen, kunt u uw plug-in robuuster en betrouwbaarder maken, waardoor gebruikers meer vertrouwen krijgen in de veiligheid ervan.

Geavanceerde aanpassingsopties

Voor ontwikkelaars die hun plug-ins willen verbeteren met geavanceerde functionaliteit, biedt de WordPress-website verschillende tools voor maatwerk. Hier zijn enkele opties om meer veelzijdigheid toe te voegen aan de ontwikkeling van uw WordPress-plug-in:

Plug-ininstellingen maken

Door instellingen aan te bieden voor de ontwikkeling van uw nieuwe plug-in, kunnen gebruikers hun ervaring aanpassen en functies aanpassen aan hun behoeften. Gebruik add_options_page() om een instellingenpagina te maken in het WordPress-beheerderspaneel en register_setting() om de instellingsgegevens veilig op te slaan.

Gebruikersrollen en machtigingen

Als u de toegang tot specifieke plug-infuncties wilt beheren, kunt u aangepaste gebruikersrollen en machtigingen toewijzen. U kunt bijvoorbeeld een “Plugin Manager”-rol maken die toegang geeft tot bepaalde beheerfuncties. De functies add_role() en add_cap() van WordPress maken het gemakkelijk om rollen en mogelijkheden te beheren, zodat u een op maat gemaakte ervaring voor verschillende gebruikers kunt creëren.

Haken en filters toevoegen

Maak uw plug-in flexibeler door gebruik te maken van een geschikte WordPress-functie zoals hook en filter. Hiermee kunnen andere ontwikkelaars uw plug-in wijzigen en uitbreiden zonder de kerncode te wijzigen. Het toevoegen van WordPress-hooks en -filters verbetert niet alleen de compatibiliteit, maar verbetert ook de modulariteit van de plug-in, waardoor deze in de loop van de tijd gemakkelijker kan worden bijgewerkt en onderhouden.

Deze geavanceerde opties kunnen van een eenvoudige plug-in een krachtige, gebruiksvriendelijke tool maken die aan verschillende behoeften voldoet en zich aanpast aan verschillende sitevereisten.

Tot slot

Leren hoe je een WordPress-plug-in maakt, is een fantastische vaardigheid die de functionaliteit van je website een boost geeft en je helpt een carrière in webontwikkeling een kickstart te geven. Deze beginnershandleiding heeft je door de essentiële stappen geleid om je plugin te ontwikkelen, te testen en in te dienen bij de WordPress.org repository.

Door je aan de beschreven best practices te houden, zorg je ervoor dat je WordPress-site-plugin veilig en efficiënt is en goed werkt met verschillende WordPress-thema’s en plug-ins. Bovendien kan het maken van aangepaste plug-ins nieuwe mogelijkheden bieden om geld te verdienen en professioneel te groeien op het gebied van webontwikkeling. Naarmate je je vaardigheden blijft ontwikkelen en complexere projecten aanneemt, zul je merken dat je unieke, op maat gemaakte oplossingen kunt creëren voor je kern WordPress-systeem.

Veelgestelde vragen