U wilt een maken WordPress Plugin ? Deze tutorial leert je hoe je het moet doen.
Plug-ins dragen bij aan de populariteit van WordPress omdat ze gebruikers zonder kennis van coderen in staat stellen geweldige websites te maken.
Er zijn meer dan 50 plug-ins in de rWordPress-map ontworpen voor verschillende doeleinden. Je zal vinden WordPress plugins voor abonnement op de nieuwsbrief , veiligheid et e-commerce . Noem het maar.
Zonder deze is een WordPress-website slechts een verzameling statische afbeeldingen en tekstblokken. Met plug-ins kan het contentmanagementsysteem een ongelooflijk aanpassingsniveau bereiken.
Of u nu een aangepaste plug-in voor uw website nodig heeft of een WordPress Plugin en er geld mee verdienen, laten we gaan.
Veel Gestelde Vragen
Verdienen WordPress-plug-ins geld?
Ja. DE WordPress plugins geld in het laatje brengen. U kunt de plug-in op uw website of op een externe marktplaats verkopen.
CodeCanyon, Themeforest en mojo markt zijn de 3 beste websites om plug-ins te verkopen.
U kunt ook een gratis versie van uw plug-in toevoegen aan de WordPress-repository en een premium-versie met extra functies aanbieden.
Is het moeilijk om WordPress-plug-ins te maken?
De oprichting van een WordPress Plugin is relatief eenvoudig en moeilijk, afhankelijk van de gewenste functies.
Het maken van een plug-in is eenvoudig als u al bekend bent met de basisprincipes van WordPress-ontwikkeling en PHP-programmering. Als je dat niet bent, kan het heel moeilijk zijn. Het is het beste om te beginnen met een eenvoudige plug-in, zoals weergegeven in deze handleiding.
Hoeveel verdienen plug-inontwikkelaars?
Volgens Zip Recruiter het gemiddelde uurtarief voor ontwikkelaars WordPress plugins in de Verenigde Staten is $35 per uur. Dit komt neer op ongeveer $ 72 per jaar en $ 000 per maand.
Als u uw plug-in verkoopt, kunt u tot $ 5 per maand verdienen, afhankelijk van het aantal verkopen. Het aanbieden van plugin-aanpassingsservices kan u tussen de $ 000 en $ 20 per uur opleveren.
Wat u nodig heeft om een WordPress-plug-in te maken
Om een plug-in te maken, hoeft u geen deskundige WordPress-ontwikkelaar te zijn. Je hebt alleen wat basiskennis van coderen nodig om aan de slag te gaan.
- Basiskennis in PHP programmeren: WordPress-plug-ins zijn geschreven in PHP, dus u moet de taal en de syntaxis ervan begrijpen voordat u begint.
- Basis HTML en CSS: Met HTML en CSS kunt u de weergave en het uiterlijk van uw plug-ins bepalen. Het is daarom cruciaal om hun basisprincipes te begrijpen om een WordPress-plug-in te maken.
- Bekendheid met WordPress: het is handig om vertrouwd te raken met het WordPress-platform en de belangrijkste functies ervan, evenals met de Codex van WordPress (de online handleiding voor WordPress-ontwikkeling).
- Een ontwikkelomgeving: Om uw plug-in te ontwikkelen en te testen, moet u WordPress op uw lokale computer of op een ontwikkelingssite installeren. Hiermee kunt u uw plug-in testen zonder een live website te beïnvloeden. In het volgende gedeelte laten we u zien hoe u dit doet.
- Een teksteditor: U hebt een teksteditor nodig om uw plug-incode te schrijven. Er zijn veel opties beschikbaar, zoals Ssublieme tekst, Atoom et Visual Studio-code.
Een WordPress-plug-in maken in 7 stappen
Stap 1: Begrijp hoe WordPress-plug-ins werken
Omdat WordPress in een programmeertaal is geschreven, kan iedereen met codeerkennis de WordPress-code openen en wijzigen.
Dit is precies hoe plug-ins werken. Hiermee kunt u de functionaliteit van WordPress wijzigen en uitbreiden door rechtstreeks met uw WordPress te communiceren met behulp van bepaalde PHP-functies.
Het maken van uw WordPress-plug-in en het toevoegen van code zal alleen iets doen als u de PHP-functie aanroept met behulp van een hook. Hooks zorgen ervoor dat uw plug-in kan communiceren met WordPress zonder dat u kernbestanden hoeft te bewerken.
Laten we eens kijken naar de relatie tussen vierkante haken en functies om de basisprincipes van WordPress-plug-ins te begrijpen.
WordPress-functies:
WordPress-code is gebouwd op functies waarmee elke code van derden kan communiceren met WordPress. Daarom vind je veel functies in plug-ins en thema's. Elke functie heeft zijn naam, gevolgd door accolades en de code binnen de accolade.
Hier is een voorbeeld:
function sticky_header() {
?>
<script>
// Select the header element
var header = document.querySelector(‘header’);
// Get the offset position of the header
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position
function addSticky() {
if (window.pageYOffset > sticky) {
header.classList.add(“sticky”);
} else {
header.classList.remove(“sticky”);
}
}
// Add the sticky class to the header when you scroll the page
window.onscroll = function() {
addSticky();
};
</script>
<?php
}
add_action( ‘wp_footer’, ‘sticky_header’ );U kunt deze functie rechtstreeks in uw WordPress-plug-in aanroepen door sticky_header() te typen waar u de code wilt laten uitvoeren. Maar het is een slechte gewoonte omdat u problemen kunt tegenkomen. Hier zijn nog twee redenen waarom u functies niet rechtstreeks in uw code zou moeten aanroepen.
Ten eerste werkt de directe aanroep alleen voor basisfuncties, zoals het toevoegen van inhoud aan een themabestand. Als u deze aanpak gebruikt, moet u functies ook meerdere keren aanroepen om ze op meerdere plaatsen te gebruiken, wat tijdrovend en omslachtig is in codebestanden.
Het handmatig aanroepen van een functie kan ook lastig zijn als coderen nieuw voor je is. Bij het maken van plug-ins is het het beste om ze aan een hook te koppelen. Dit voorkomt dat u de functie op meerdere plaatsen moet oproepen.
WordPress-haken:
Een hook is een specifiek punt in WordPress-code waar u uw eigen aangepaste functies kunt uitvoeren. Er zijn twee soorten hooks: action hooks en filter hooks.
Actie haken
Action hooks stellen je in staat om aangepaste functies uit te voeren op een specifiek tijdstip in de WordPress-loopcyclus. Dit is hoe de syntaxis van een action hook eruit ziet.
add_action('hook_name', 'my_custom_function');Le haaknaam is de naam van de actiehaak die je wilt gebruiken.
Er zijn verschillende actiehaken in WordPress. Je vindt ze in de cOdex WordPress.
mijn_aangepaste_functie is de functie die de code bevat die u wilt uitvoeren. Deze functie moet vóór de functie worden gedefinieerd add_action.
De syntaxis ziet er als volgt uit om de sticky header-functie hierboven aan een hook te koppelen.
add_action( 'wp_footer', 'sticky_header' );Deze functie voert de functie sticky_header() uit wanneer de actiehook wp_footer wordt aangeroepen. Je kunt de functie ook koppelen aan een specifieke hook door wp_footer te vervangen door de hooknaam van je keuze.
Bijvoorbeeld:
add_action( 'init', 'sticky_header' );Hiermee wordt de sticky header-functie uitgevoerd wanneer de WordPress init-actie wordt aangeroepen.
Filter haken
Met filterhooks kunt u gegevens wijzigen voordat deze worden weergegeven of in de database worden opgeslagen. Hier is een voorbeeld van een filterhaak die de titel van een blogbericht verandert in hoofdletters.
add_filter( ‘the_title’, ‘uppercase_title’ );
function uppercase_title( $title ) {
return strtoupper( $title );
}Deze functie accepteert een enkel argument, $title, wat de originele titel van het blogbericht is.
De functie gebruikt dan de functie strijkstok() om de titel naar hoofdletters te converteren en retourneert de gewijzigde waarde.
Het verschil tussen actie- en filterhaken
Action hooks stellen je in staat om aangepaste functies uit te voeren op een specifiek tijdstip in de WordPress-loopcyclus. In het bovenstaande voorbeeld de actiehaak wp_footer wordt net voor de tag aangeroepen.
Met filterhooks kunt u daarentegen gegevens wijzigen wanneer deze door de WordPress-codebasis worden geleid.
Zoals in het voorbeeld hierboven, de filterhaak de titel stelt u in staat om de titel van een blogpost te bewerken voordat deze op de website wordt weergegeven.
Stap 2: Zet een testomgeving op
De tweede stap bij het maken van een WordPress-plug-in is het opzetten van een test- of ontwikkelomgeving. Het doel is om te voorkomen dat er op een echte site wordt geëxperimenteerd.
Het maken van een plug-in vereist soms heen en weer. U kunt ook fouten maken die uw website beschadigen.
U kunt uw computer gebruiken als een lokale server om een WordPress-testsite te hosten waar u uw plug-in kunt maken en testen.
Als uw planaccommodatie ondersteunt het maken van een testsite, u kunt deze ook gebruiken. Hier zullen we de eerste oplossing gebruiken.
Om een testomgeving op te zetten, zullen we dat doen lokaal downloaden , een ontwikkelingstool voor het lokaal hosten van WordPress-websites.
Zodra de download is voltooid, start u de software op uw computer en klikt u op + icoon linksonder om een nieuwe lokale site te maken.
Kiezen van Maak een nieuwe site en klik op de knop voortzetten.
Volg vervolgens de instructies op het scherm om uw sitenaam toe te voegen, de omgeving in te stellen en WordPress-inloggegevens aan te maken.
Als je eenmaal klaar bent. Klik op de knop Website toevoegen. Nadat u uw site heeft toegevoegd, selecteert u uw website in het lokale dashboard en start u uw WordPress-beheerdersdashboard.
Zodra de inlogpagina van de beheerder is geopend, gebruikt u de gebruikersnaam en WordPress-wachtwoord die u hierboven hebt gemaakt om toegang te krijgen tot uw dashboard.
Het is klaar. Je testomgeving is klaar. Laten we beginnen met het maken van uw WordPress-plug-in.
Stap 3: Maak uw map met plug-ins
Zodra uw testomgeving aanwezig is, is het eerste dat u hoeft te doen een plug-inbestand in uw sitemap maken. Standaard slaat WordPress alle plug-ins op in de directory wp-content/plugin.
Elke plug-in die op een WordPress-site is geïnstalleerd, heeft een map in deze map. Voor uw plug-in moet u daarom een map in deze map maken en deze een naam geven.
Voor deze zelfstudie gaan we naar de map wp-content/plugin in onze lokale sitemap. Hier is hoe.
Let op: Het proces is hetzelfde als u een intermediaire site gebruikt.
Klik op uw lokale dashboard op de Ga naar Sitemap . U wordt doorgestuurd naar uw lokale sitemap.
Selecteer apps in de opties, klik op publiek dan verder wp-content. In deze map ziet u verschillende mappen.
Open de map Plugins en een nieuwe submap met de naam van uw plug-in. We zullen hier gebruiken Sticky Header omdat het de naam is van de plug-in die we willen maken.
Stap 4: Maak het belangrijkste PHP-bestand voor uw plug-in
Na het maken van uw plugin-map, is de volgende stap het toevoegen van een PHP-bestand aan deze map. Hier zijn de codes en functionaliteit van uw plug-in beschikbaar.
Voor deze zelfstudie hebben we slechts één PHP-bestand nodig voor een eenvoudige plug-in die een plakkerige header in WordPress maakt.
Voor complexere plug-ins met geavanceerde functionaliteit kunnen er verschillende bestandstypen in de plug-inmap staan, zoals CSS en javascript. In ons geval volstaat een enkel PHP-bestand.
Om dit te doen, maakt u een PHP-bestand aan in de map met plug-ins, zoals in de onderstaande schermafbeelding.
Zodra het bestand klaar is, is het tijd om wat informatie aan uw plug-in toe te voegen.
Stap 5: Configureer uw plug-in-informatie
Ook bekend als een plug-in-bestandsheader, uw plug-in-informatie is een PHP-commentaarblok dat details over uw plug-in bevat, zoals plug-innaam, versie, URL, naam van de auteur en zijn website, licentie, enz.
Dit is de informatie die u ziet op de WordPress-plug-inpagina na het installeren van een plug-in.
Je vindt de plugin-bestandskop in WordPress-codex . Het ziet er zo uit.
Kopieer en plak deze code in het PHP-bestand van uw plug-in en bewerk vervolgens de details zodat deze bij uw plug-in passen. In ons geval ziet de sticky header-plugin-bestandslezer er zo uit.
<?php
/*
Plugin Name: Sticky Header
Plugin URI: https://wordpress.org/plugins/sticky-header/
Description: Make your website header sticks to the top of every page on your website as users scroll.
Author: The Team
Author URI: https://blogpascher.com/sticky-header
Text Domain: Sticky Header
Domain Path: /languages
*/Zodra u dit bestand opslaat, heeft u een nieuwe plug-in gemaakt en kunt u deze vinden in de lijst met plug-ins die al op uw site zijn geïnstalleerd.
Log in op het WordPress-dashboard van uw testsite en ga naar Plugins>Plugins installés.
U ziet de Sticky Header-plug-in met details. Hier is het.
U kunt de plug-in nu activeren, maar deze doet niets omdat we er nog geen functionaliteit aan hebben toegevoegd. Dus laten we onze plug-in iets laten doen.
Stap 6: voeg code toe aan uw plug-in
Om dit te doen, voegen we de sticky header-code toe die we gebruikten bij het leren van de WordPress-functies en hooks hierboven. Hier is hoe.
Open het PHP-bestand van uw plug-in. Kopieer en plak deze codefragmenten onder de koptekstdetails in het belangrijkste PHP-bestand van uw plug-in en sla het op.
function sticky_header() {
?>
<script>
// Select the header element
var header = document.querySelector(‘header’);
// Get the offset position of the header
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position
function addSticky() {
if (window.pageYOffset > sticky) {
header.classList.add(“sticky”);
} else {
header.classList.remove(“sticky”);
}
}
// Add the sticky class to the header when you scroll the page
window.onscroll = function() {
addSticky();
};
</script>
<?php
}
add_action( ‘wp_footer’, ‘sticky_header’ );Deze code doet twee essentiële dingen,
de functie sticky_header wordt geactiveerd wanneer de gebruiker door de pagina scrolt en stopt wanneer het scrollen stopt.
Ten tweede de actie add_action('wp_footer', 'sticky_header'); gebruik het adres…..
Sla de code op, en dat is alles. U hebt met succes een WordPress-plug-in gemaakt die de kop van uw website plakkerig maakt wanneer gebruikers er doorheen scrollen.
Stap 7: Activeer de plug-in. In actie.
Keer terug naar uw site en activeer de plug-in.
Wanneer u door de live versie van de site scrolt, blijft uw sitekop bovenaan de pagina staan.
Zodra je het effect van de nieuwe plug-in op je demosite hebt gezien, is het tijd om het uit te proberen op je echte site.
Zorg er daarvoor voor dat je de plug-in hebt getest op bugs en kwetsbaarheden. Los ze op, indien van toepassing. Als een voorzorgsmaatregel, maak een back-up van uw WordPress-site voordat u uw nieuwe plug-in implementeert.
Als u tevreden bent met de prestaties van de plug-in op uw site, kunt u uw plug-in uploaden naar de WordPress plug-inrepository. Aangezien website-eigenaren het gratis gebruiken, ontvangt u feedback over wat u kunt verbeteren en hoe u dit kunt doen.
En als u geld wilt verdienen met uw plug-in, kunt u deze verkopen op een van de websites die we hierboven hebben vermeld
Conclusie
Als je zover bent gekomen, ben je het ermee eens dat het maken van een WordPress-plug-in relatief eenvoudig is. Door de instructies in deze handleiding te volgen, kunt u een eenvoudige WordPress-plug-in maken. U kunt met zoveel functies experimenteren als u wilt en de functionaliteit van uw plug-in verbeteren.
Het maken van complexe plug-ins volgt dezelfde methode. Meer functionaliteit betekent meer functies in uw plug-inbestand.
Heb je ooit geprobeerd een WordPress-plug-in te maken? Laten we het hebben over uw ervaringen in de opmerkingen hieronder.
