Så här skapar du ett tillägg till WordPress (steg för steg för Beginner)

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.