Vi har skapat många WordPress-plugins genom åren och hjälpt både oss själva och tusentals användare. Många av våra läsare har frågat oss hur de också kan skapa sina egna plugins.
Att skapa ett WordPress-plugin kan verka svårt till en början, men det är faktiskt ganska roligt och givande. Oavsett om du vill lägga till en ny funktion på din webbplats eller dela något användbart med andra, är det ett bra sätt att skapa ett plugin.
I den här guiden visar vi dig hur du steg för steg skapar ditt första WordPress-plugin.
Vad behöver du för att skapa ditt första WordPress tillägg?
WordPress plugins gillar appar för din WordPress website. Precis som appar på din telefon kan du installera plugins i WordPress för att lägga till utvalda funktioner.
Om du vill veta mer om tillägg till WordPress kan du läsa vår guide om tillägg till WordPress och hur de fungerar.
För att skapa ditt första WordPress plugin behöver du grundläggande kunskaper i kodningsspråk som PHP, CSS, HTML och JavaScript.
Detta kan låta som mycket, men oroa dig inte; du kan fortfarande följa vår tutorial. Vi kommer att gå igenom processen steg för steg, och i slutet av den kommer du att ha tillräcklig förståelse för WordPress-programmering för att skapa ett enkelt WordPress plugin.
Av denna anledning kommer vi att klistra oss på grunderna och inte dyka in i avancerade WordPress-kodningskunskaper.
För det andra behöver du en lokal utvecklingsmiljö för att testa din WordPress plugin på din dator. För att ställa in detta, se vår guide om hur du installerar WordPress på din Windows-dator eller Mac).
Du kan också testa ditt plugin på en staging website. Men om ett error uppstod kan det sluta med att du förstör din website och gör den otillgänglig.
Se vår guide om hur man fixar vanliga WordPress error för att hantera dessa issues.
Du kommer också att behöva en plain text editor för att skriva din kod. Notepad eller TextEdit fungerar bra. Men om du vill prova något mer avancerat kan du kontrollera dessa kodredigerare för utvecklare.
Med dessa klara, låt oss komma igång med tutorialen. Du kan använda snabblänkarna under för att hoppa till ett visst ämne:
Steg 1: Skapa ett grundläggande WordPress-plugin
Det första steget är att skapa en new folder på skrivbordet eller i mappen documents och döpa den till något som gillar wpb-plugin-tutorial eller my-first-plugin.
Därefter måste du skapa en new fil i din textredigerare och save den i din plugin folder som wpb-plugin-tutorial.php eller my-first-plugin.php. Det viktiga är utökningen .php, men du kan döpa filen till vad du vill.
Du måste öppna PHP-filen med din textredigerare.
Det första du behöver add to din plugin-fil är plugin-headern. Detta comment block berättar helt enkelt WordPress namnet på ditt plugin, version, website, plugin författare namn, och mer:
/*
Plugin Name: WPBeginner Plugin Tutorial
Plugin URI: https://www.wpbeginner.com
Description: A short little description of the plugin. It will be displayed on the Plugins page in WordPress admin area.
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpb-tutorial
Domain Path: /languages
*/
När du har lagt till plugin-headern kan du börja lägga till plugin-koden under den.
För denna tutorial kommer vi att skapa ett enkelt plugin som lägger till ett meddelande i slutet av varje artikel som ber användarna att följa oss på Twitter.
Bara copy and paste följande kod under ditt plugin header block:
<?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');
Glöm inte att ersätta URL:erna till Twitter- och Facebook-profilerna med dina egna innan du sparar ändringarna.
Gå nu till skrivbordet på din dator och skapa en ZIP-fil för plugin-foldern.
Mac-användare kan högerklicka på foldern och välja ”Compress wpb-plugin-tutorial”. Windows-användare kan högerklicka på mappen och välja ”Compress to zip file”.
Steg 2: Installera och aktivera ditt första WordPress-plugin
Nu när vi har skapat pluginet är det dags att installera det så att du kan testa det. För Step-by-Step-instruktioner kan du kontrollera vår artikel om hur du installerar ett plugin för WordPress.
Head över till WordPress admin area på din website och besök Plugins ” Add New page.
Du måste klicka på knappen ”Upload Plugin” högst upp för att ladda upp ditt plugin. Detta kommer att visa dig plugin uppladdare box.
Gå vidare och klicka på knappen ”Choose File” för att selecta ZIP-filen som du just skapade. Klicka sedan på knappen ”Install Now” för att uploada och installera pluginet.
När det har installerats, gå vidare och aktivera plugin.
You can now visit your website to see the plugin in action.
Du kommer att kunna se det nya stycket i slutet av alla dina enskilda inlägg.
Steg 3: Skicka in ditt plugin till WordPress.org Plugin Repository
Om du vill att ditt plugin ska upptäckas och användas av andra användare av WordPress kan du submit det till WordPress.org:s plugin repository.
För att göra det måste du först skapa en ”Läsa mig”-fil för ditt plugin. Öppna en tom textfil och save den som readme.txt i din plugin folder.
Denna readme.txt-fil måste uppfylla WordPress.org:s syntax för readme-filer. Informationen som du lägger till i filen readme.txt kommer att visas på din plugin-sida på WordPress.org.
Här är ett exempel på en readme.txt-fil som du kan använda som utgångspunkt:
=== Your Plugin Name ===
Contributors: WPBeginner
Tags: wpbeginner, plugin tutorial
Requires at least: 6.0
Tested up to: 6.2
Stable tag: 1.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
A WordPress plugin to teach beginners how to write a WordPress plugin.
== Description ==
This simple plugin is part of our beginner's guide to writing a WordPress plugin.
== Installation ==
1. Upload the plugin folder to your /wp-content/plugins/ folder.
1. Go to the **Plugins** page and activate the plugin.
== Frequently Asked Questions ==
= How do I use this plugin? =
Answer to the question
= How to uninstall the plugin? =
Simply deactivate and delete the plugin.
== Screenshots ==
1. Description of the first screenshot.
1. Description of the second screenshot.
== Changelog ==
= 1.0 =
* Plugin released.
Låt oss nu förklara lite om hur WordPress plugin readme-filsyntax fungerar, så att du kan customize den för ditt plugin.
Den första raden i tilläggets read me är ditt plugin-namn. Detta namn kommer att visas i WordPress.org plugin directory som titeln på ditt plugin.
Nästa rad är Contributors. Detta är de ID:n för användare som är responsiva för att hantera ditt plugin på WordPress.org. Om du inte redan har ett WordPress.org-användarkonto kan du skapa ett gratis WordPress.org-användarkonto för att få ditt ID:n.
”Requires at least” och ”Tested up to” hänvisar till de WordPress-versioner som ditt plugin fungerar med. ”Stable tagged” är versionen av ditt eget plugin.
You can leave the ’License’ fields as GPL and the URL the same.
Sedan kan du edit the Description area för att förklara vad ditt plugin gör.
När du har editerat ditt plugins readme-fil, glöm inte att save dina ändringar.
Nu är ditt plugin redo att revieweras av WordPress.org:s plugin-team. För att submit ditt plugin behöver du ett gratis WordPress.org account.
Besök Add Your Plugin page, och om du ej redan är inloggad, klicka på knappen ”please logging”.
När du är inloggad kan du ladda upp och skicka in ditt plugin för review.
Klicka bara på knappen ”Select File” för att välja ditt plugins ZIP-fil. Därefter kontrollerar du alla boxar som är tillämpliga och klickar på ”Upload”.
WordPress.org plugin review team kommer sedan att titta på din plugin-kod för vanliga error och säkerhetskontroller. När du är approved får du ett email från teamet för tillägg.
Detta email kommer att innehålla en länk till Subversion (SVN) repository av din plugin hosted på WordPress.org.
Steg 4: Använd Subversion (SVN) för att ladda upp ditt plugin
Subversion är en programvara för versionskontroll. Det tillåter användare att göra ändringar i filer och directories samtidigt som de håller en post över ändringar, hanterar olika versioner och tillåter samarbete.
Du behöver en SVN-klient installerad på din dator för att uppladare ditt plugin till WordPress.org.
Windows-användare kan använda SilkSVN eller TortoiseSVN (gratis). Mac-användare kan installera SmartSVN eller Versions App på sina datorer.
I den här artikeln visar vi screenshots av Versions App för Mac för dig. Processen är dock mycket lik i alla SVN-appar med ett GUI.
När du har installerat måste du öppna Versions-appen och kontrollera en kopia av ditt WordPress plugins repository. Klicka helt enkelt på knappen ”New Repository Bookmark”.
Detta kommer att ge upp en popup där du först måste ange ett namn för detta bokmärke. Du kan namnge det efter ditt plugin.
Efter det måste du add to din WordPress plugin SVN repository URL.
Click on the ”Create” button to connect with your repository.
Appen Versions kommer nu att downloada en kopia av ditt plugins repository till din dator. Högerklicka sedan på namnet på ditt repository i webbläsarens view och välj sedan ”Checkout”.
Du kommer att bli ombedd att ange ett namn för foldern och välja en location där du vill store den på din dator. You can use the same folder name as your plugin directory and click on the ’Checkout’ button to continue.
Versions app kommer nu att skapa en lokal kopia av ditt plugin på din dator. You can view it under your plugin’s repository or browse it using the Finder app.
Nu måste du kopiera dina plugin-filer och klistra in dem i trunk-mappen i ditt lokala repository.
När du gör det kommer du att notera en icon med ett frågetecken bredvid nya filer i appen Versioner.
Eftersom dessa filer inte fanns tidigare måste du ”Add” dem. Välj de nya filerna och click på knappen ”Add” för att lägga till filerna i din lokala folder.
Nu när dina plugin-filer har addats till Subversion är du nu redo att uppladare dem. I grund och botten kommer du att synkronisera ändringar i din lokala folder och subversion directory.
Click on your local repository to select it, and then click on the ”Commit” button.
En new popup kommer att visas.
Du kommer att se en lista över ändringar och en box där du kan add to ett commit message. Klicka bara på ”Commit” för att fortsätta.
Din SVN-app kommer nu att synkronisera dina ändringar och överföra dem till ditt plugins repository.
Nu när du har uploadat dina plugin-filer till trunken är det dags att tagga dem till en version.
Gå till den lokala kopian av ditt plugin och kopiera filerna i trunk foldern. Efter det måste du öppna mappen tags och skapa en ny mapp i den.
Namnge denna folder efter ett versionsnamn. Se till att det matchar den version som du har enter i din plugin’s header. I exempelkoden ovan har vi använt version 1.0 för vårt plugin.
Efter att ha lagt till 1.0 mappen i /tags/ mappen. You will notice the question mark icon next to the folder name in the Version app.
Eftersom det här är en new folder måste you klicka på knappen ”Add” för att inkludera foldern och alla dess filer i repository.
Efter det kan du gå vidare och klicka på knappen ”Commit” för att synkronisera dina ändringar. You can continue editing your plugin files in the local copy.
När du är klar med dina ändringar klickar du helt enkelt på knappen Commit för att synkronisera dem med WordPress.org repository.
Om du har gjort några större ändringar i ditt plugin, vill du lägga till en ny version genom att lägga till en ny folder som är uppkallad efter versionsnumret. Se till att versionsnumret matchar din plugins header.
Du kan nu previewa ditt plugin i WordPress.org plugins directory.
Steg 5: Lägg till illustrationer till ditt plugin på WordPress.org
WordPress.org allow you to add artwork and screenshots with your plugins. Dessa objekt måste följa standardnamngivningspraxis och bör uppladdas med hjälp av Subversion.
Plugin Header Banner
Det här är den stora image som visas högst upp på plugin-sidan. Den kan vara i formaten 772 x 250 eller 1544 x 500 pixlar i jpeg- eller png-filformat. Den bör alltid namnges så här:
- banner-772×250.jpg eller banner-772×250.png
- banner-1544×500.jpg eller banner-1544×500.png
Icon för tillägg
Denna mindre square-formade image-fil visas som en plugin icon i search-resultat och plugin-listor. Den kan vara i 125 x 125 eller 250 x 250 pixlar i formaten jpeg eller png.
Denna icon-fil ska ha ett namn som gillar det här:
- icon-128×128.jpg eller icon-128×128..png
- icon-256×256.jpg eller icon-256×256.png
Screenshots
Filer med screenshots ska namnges enligt följande format:
- screenshot-1.png
- screenshot-2.png
Du kan add to så många som du gillar. Dessa screenshots bör visas i samma order som screenshot beskrivningarna i din readme.txt-fil.
När du har förberett all grafik kan du placera den i mappen ”assets” i din lokala kopia av pluginet.
Efter det kommer du att notera en icon med ett frågetecken bredvid mappen assets. Click on the ”Add” button to add the new assets file to your repository.
Slutligen går du vidare och klickar på knappen commit för att uploada dina filer till WordPress.org repository. Efter ett tag kommer du att kunna se konstverket visas på din plugin page.
Ultimata guider för att lära dig WordPress Tillägg Utveckling
WordPress-plugins kan vara så enkla som den vi visade dig ovan. De kan också vara mycket kraftfullare, som frågesporter, nedräkningstimer , RSVP, röstning, Google-recensioner och mycket mer.
Vissa kraftfulla WordPress plugins kan också ha tillägg. Dessa utökning fungerar som plugins som utökar andra plugins.
Här är några resurser som hjälper dig att lära dig fler sätt att add funktionalitet till din WordPress tillägg:
- Användbara code snippets i WordPress för nybörjare
- Lägga till en shortcode i WordPress
- functions.php-filen tricks som du nu kan använda i ett site-specifikt plugin
- Skapa custom post types och taxonomier
- Lägga till stylesheets och JavaScript på rätt sätt i WordPress
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ett WordPress-plugin. Du kanske också vill ta en titt på vår guide om hur du gör nya funktionsförslag för WordPress och vår lista över de mest framgångsrika WordPress-affärerna och företagen.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi says
As someone with no coding experience, I found this article on WordPress plugin development to be incredibly helpful and well-explained.
Even though I don’t see myself coding a plugin anytime soon, I managed to understand some key concepts thanks to the clear step-by-step instructions. I especially liked learning about how developers can submit their plugins to the WordPress Plugin Repo.
even though I do not see myself coding one, one thing for sure is that I have learned something new today! Thank you WPBeginner!
WPBeginner Support says
Glad to hear you found our guide helpful!
Administratör
mohadese esmaeeli says
How interesting that every feature we have in mind can be created as a plugin and installed in WordPress. I’ve installed the Jannah theme on my site, but it has some shortcodes, and I’m planning to change the theme. With the method you provided, maybe I can keep the shortcodes of the previous theme as a plugin alongside the new theme.
WPBeginner Support says
It would require some coding knowledge but you could look to add the features to your new theme
Administratör
maven says
How do you end the plugin code? with this } or what?
WPBeginner Support says
It would depend on the code you are using, you want to use } if there is an opening { that needs to be closed but you do not need a specific end of file marker.
Administratör
andrea vironda says
What would happen if I avoid to use ”add_filter(’the_content’, ’wpb_follow_us’);”?
WPBeginner Support says
If you don’t use that code then the paragraph with your follow links would not be added to the end of the content. The $content is the links to be added and the add_filter is what includes it in the content.
Administratör
andrea vironda says
What’s the meaning of ”Text Domain” and ”Domain path”?
WPBeginner Support says
The Text domain is used to tell where your text is located for translation purposes and must be the same as the folder name.
The Domain path is where translations for your plugin can be found.
Administratör
Ritik says
Thanks,
its very helpfull.
WPBeginner Support says
Glad we could show how to create a plugin in a beginner friendly way
Administratör
Raja Poudel says
Your explanation is very simple to understand for me as a beginner in wordpress plugin development.
WPBeginner Support says
Glad you found our guide helpful
Administratör
Ahroihan says
Hello,
I want to make a plugin, can you give me tutorial about it?
Thank you
mamta says
hi,i’m php developer and wordpress developer.i would like to create custom wordpress plugin.please send tutorials.
Siva says
Hi i am php and wordpress developer, so i want to create custom wordpress plugin
please give me plugin tutorials and help to create plugin.
ramesh ram says
hi,i’m php developer and wordpress developer.i would like to create custom wordpress plugin.please send tutorials.
Marcy says
I’m a virgin programer, but have decided to create my own plug in for a fund raiser thermometer for my adoption blog because none of the ones I’ve found are comparable with my WP version and have what I want on them… and needless to say, I need help, direction, tips, something similar to what I need that I can tweek… etc. Please help !
thanks
suresh says
It’s Good Article and it’s much simple
Shrini says
Good article to learn WP plugin development…
JasonCrews says
WordPressmodder is a viagra site now
rakeshtiwary022 says
hi am php and wordpress developer, so i want to create custom wordpress plugin
please give me plugin tutorials and help to create plugin
email:-rakeshtiwary022@gmail.com
HomeTivi says
hi am php and wordpress developer, so i want to create custom wordpress plugin
please give me plugin tutorials and help to create plugin
MannuSingh says
hi am php and wordpress developer, so i want to create custom wordpress plugin
please give me plugin tutorials and help to create plugin
BanksBen says
I have a limited knowledge of php . I am integrating my old site in to my new wp site my old site is a PHP SQL driven system that collects leads and stores them.My site is http://www.moverscommunity.com/ and http://tsveetech.com
Bagesh Singh says
I am a programmer. From last two days I am trying to create custom plugin and it’s help me better thanks a lot.
Nigel says
Thanks for this great collection of articles. I can’t wait to get started hacking together my own plugin
Dadang Iskandar says
I am very grateful to find this article because I’m learning php programming. very nice brother
John Franklin says
Very nice, I’m a huge fan of WordPress and it’s great to see new really useful plugins getting released. I’ll download and check it out, looks exactly like what I have been looking for for weeks. So, thanks alot!
Kent Tan says
Nice collection of tutorials. Where can I get the more advanced stuff – e.g. creating an options page to configure the plugin etc?
Editorial Staff says
Buy one of the plugin books… Study the Codex, and the Trunk.
Administratör
Brad says
Thanks for the article, have always wanted to know a little more about making plugins so now I will give it a try!
Rosti The Snowman says
I think this list will be really helpful
thanks
I also agree you should change the title
Tim Trice says
Two of the first four cover the same function of echoing ”Hello World” (the first, at least, let’s you customize the echo statement). I’d like to see some more articles focused on plugin standards, deactivation hooks and removing data from the DB as well as exports.
Joe says
+1 change title
Marco says
Well, I suggest to change the title from ”How to Create a WordPress Plugin” to ”A list of the best tutorials to help you create your own WordPress Plugin”.
Anwer says
Well that’s good Idea..!!!Agree with you
Nikunj Tamboli says
Nice article will try to create couple of plugin using the article here