Wie man ein WordPress-Plugin erstellt (Schritt für Schritt für Anfänger)

Wir haben im Laufe der Jahre viele WordPress-Plugins entwickelt, die sowohl uns als auch Tausenden von Benutzern geholfen haben. Viele unserer Leser haben uns gefragt, wie sie auch ihre eigenen Plugins erstellen können.

Das Erstellen eines WordPress-Plugins mag anfangs schwierig erscheinen, aber es macht tatsächlich Spaß und ist lohnend. Egal, ob Sie Ihrer Website eine neue Funktion hinzufügen oder etwas Nützliches mit anderen teilen möchten, die Erstellung eines Plugins ist eine großartige Möglichkeit, dies zu tun.

In dieser Anleitung zeigen wir Ihnen Schritt für Schritt, wie Sie Ihr erstes WordPress-Plugin erstellen.

Was brauchen Sie, um Ihr erstes WordPress-Plugin zu erstellen?

WordPress-Plugins sind wie Apps für Ihre WordPress-Website. Genau wie Apps auf Ihrem Handy können Sie Plugins in WordPress installieren, um neue Funktionen hinzuzufügen.

Um mehr über WordPress-Plugins zu erfahren, lesen Sie unseren Leitfaden zu WordPress-Plugins und wie sie funktionieren.

Um Ihr erstes WordPress-Plugin zu erstellen, benötigen Sie grundlegende Kenntnisse von Programmiersprachen wie PHP, CSS, HTML und JavaScript.

Das mag nach viel klingen, aber keine Sorge; Sie können unserer Anleitung trotzdem folgen. Wir führen Sie Schritt für Schritt durch den Prozess, und am Ende werden Sie genug Verständnis für die WordPress-Programmierung haben, um ein einfaches WordPress-Plugin zu erstellen.

Aus diesem Grund werden wir uns auf die Grundlagen beschränken und uns nicht mit fortgeschrittenen WordPress-Coding-Fähigkeiten befassen.

Zweitens benötigen Sie eine lokale Entwicklungsumgebung, um Ihr WordPress-Plugin auf Ihrem Computer zu testen. Um dies einzurichten, lesen Sie unseren Leitfaden zur Installation von WordPress auf Ihrem Windows-Computer oder Mac).

Sie können Ihr Plugin auch auf einer Staging-Website testen. Wenn jedoch ein Fehler auftritt, kann dies dazu führen, dass Ihre Website beschädigt und unzugänglich wird.

Sehen Sie sich unseren Leitfaden an, wie Sie häufige WordPress-Fehler beheben, um diese Probleme anzugehen.

Sie benötigen außerdem einen einfachen Texteditor, um Ihren Code zu schreiben. Notepad oder TextEdit funktionieren gut. Wenn Sie jedoch etwas Fortgeschritteneres ausprobieren möchten, sehen Sie sich diese Code-Editoren für Entwickler an.

Wenn diese bereit sind, beginnen wir mit dem Tutorial. Sie können die Schnelllinks unten verwenden, um zu einem bestimmten Thema zu springen:

• Schritt 1: Erstellen Sie ein grundlegendes WordPress-Plugin
• Schritt 2: Installieren und aktivieren Sie Ihr erstes WordPress-Plugin
• Schritt 3: Reichen Sie Ihr Plugin im WordPress.org Plugin-Repository ein
• Schritt 4: Verwenden Sie Subversion (SVN), um Ihr Plugin hochzuladen
• Step 5: Add Artwork to Your Plugin on WordPress.org

Schritt 1: Erstellen Sie ein grundlegendes WordPress-Plugin

Der erste Schritt ist, einen neuen Ordner auf Ihrem Desktop oder in Ihrem Dokumentenordner zu erstellen und ihn beispielsweise wpb-plugin-tutorial oder my-first-plugin zu nennen.

Als Nächstes müssen Sie in Ihrem Texteditor eine neue Datei erstellen und diese in Ihrem Plugin-Ordner als wpb-plugin-tutorial.php oder my-first-plugin.php speichern. Wichtig ist die .php-Erweiterung, aber Sie können die Datei beliebig benennen.

Sie müssen diese PHP-Datei mit Ihrem Texteditor öffnen.

Das Erste, was Sie Ihrer Plugin-Datei hinzufügen müssen, ist der Plugin-Header. Dieser Kommentarblock teilt WordPress einfach den Namen Ihres Plugins, die Version, die Website, den Namen des Plugin-Autors und mehr mit:

/*
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
*/

Nachdem Sie den Plugin-Header hinzugefügt haben, können Sie mit dem Hinzufügen des Plugin-Codes darunter beginnen.

Für dieses Tutorial erstellen wir ein einfaches Plugin, das am Ende jedes Artikels eine Nachricht hinzufügt, in der die Benutzer aufgefordert werden, uns auf Twitter zu folgen.

Kopieren Sie einfach den folgenden Code und fügen Sie ihn unterhalb Ihres Plugin-Header-Blocks ein:

<?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'); 

Vergessen Sie nicht, die URLs Ihrer Twitter- und Facebook-Profile durch Ihre eigenen zu ersetzen, bevor Sie Ihre Änderungen speichern.

Gehen Sie nun zu Ihrem Desktop und erstellen Sie eine ZIP-Datei für den Plugin-Ordner.

Mac-Benutzer können mit der rechten Maustaste auf den Ordner klicken und „wpb-plugin-tutorial komprimieren“ auswählen. Windows-Benutzer können mit der rechten Maustaste auf den Ordner klicken und „In ZIP-Datei komprimieren“ auswählen.

Schritt 2: Installieren und aktivieren Sie Ihr erstes WordPress-Plugin

Jetzt, da wir das Plugin erstellt haben, ist es an der Zeit, es zu installieren, damit Sie es testen können. Schritt-für-Schritt-Anleitungen finden Sie in unserem Artikel über die Installation eines WordPress-Plugins.

Gehen Sie zum WordPress Admin-Bereich Ihrer Website und besuchen Sie die Seite Plugins » Neu hinzufügen.

Sie müssen auf die Schaltfläche „Plugin hochladen“ oben klicken, um Ihr Plugin hochzuladen. Daraufhin wird die Box zum Hochladen von Plugins angezeigt.

Klicken Sie auf die Schaltfläche „Datei auswählen“, um die gerade erstellte ZIP-Datei auszuwählen. Klicken Sie dann auf die Schaltfläche „Jetzt installieren“, um das Plugin hochzuladen und zu installieren.

Sobald es installiert ist, aktivieren Sie das Plugin.

Sie können Ihre Website jetzt besuchen, um das Plugin in Aktion zu sehen.

Sie werden den neuen Absatz am Ende aller Ihrer Einzelbeiträge sehen können.

Schritt 3: Reichen Sie Ihr Plugin im WordPress.org Plugin-Repository ein

Wenn Sie möchten, dass Ihr Plugin von anderen WordPress-Benutzern entdeckt und verwendet wird, können Sie es im Plugin-Repository von WordPress.org einreichen.

Um dies zu tun, müssen Sie zuerst eine 'Read Me'-Datei für Ihr Plugin erstellen. Öffnen Sie eine leere Textdatei und speichern Sie sie als readme.txt in Ihrem Plugin-Ordner.

Diese readme.txt-Datei muss die Syntax der readme-Datei von WordPress.org erfüllen. Die Informationen, die Sie in der readme.txt-Datei hinzufügen, werden auf der Seite Ihres Plugins auf WordPress.org angezeigt.

Hier ist eine Beispiel-Readme.txt-Datei, die Sie als Ausgangspunkt verwenden können:

=== 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.

Nun erklären wir Ihnen ein wenig, wie die Syntax der WordPress-Plugin-Readme-Datei funktioniert, damit Sie sie für Ihr Plugin anpassen können.

Die erste Zeile der Readme-Datei Ihres Plugins ist Ihr Plugin-Name. Dieser Name wird im WordPress.org Plugin-Verzeichnis als Titel Ihres Plugins angezeigt.

Die nächste Zeile ist „Contributors“. Dies sind die Benutzer-IDs, die für die Verwaltung Ihres Plugins auf WordPress.org verantwortlich sind. Wenn Sie noch kein WordPress.org-Benutzerkonto haben, können Sie ein kostenloses WordPress.org-Benutzerkonto erstellen, um Ihre Benutzer-ID zu erhalten.

„Erfordert mindestens“ und „Getestet bis“ beziehen sich auf die WordPress-Versionen, mit denen Ihr Plugin funktioniert. Das „Stabile Tag“ ist die Version Ihres eigenen Plugins.

Sie können die Felder „Lizenz“ als GPL und die URL unverändert lassen.

Dann können Sie den Bereich Beschreibung bearbeiten, um zu erklären, was Ihr Plugin tut.

Vergessen Sie nach der Bearbeitung der Readme-Datei Ihres Plugins nicht, Ihre Änderungen zu speichern.

Jetzt ist Ihr Plugin bereit für die Überprüfung durch das Plugins-Team von WordPress.org. Um Ihr Plugin einzureichen, benötigen Sie ein kostenloses WordPress.org-Konto.

Besuchen Sie die Seite Add Your Plugin und wenn Sie noch nicht angemeldet sind, klicken Sie auf die Schaltfläche „Bitte anmelden“.

Nach der Anmeldung können Sie Ihr Plugin hochladen und zur Überprüfung einreichen.

Klicken Sie einfach auf die Schaltfläche 'Datei auswählen', um die Zip-Datei Ihres Plugins auszuwählen. Überprüfen Sie danach alle zutreffenden Kontrollkästchen und klicken Sie auf 'Hochladen'.

Das WordPress.org Plugin-Review-Team prüft dann Ihren Plugin-Code auf häufige Fehler und Sicherheitsüberprüfungen. Nach der Genehmigung erhalten Sie eine E-Mail vom Plugin-Team.

Diese E-Mail enthält einen Link zum Subversion (SVN)-Repository Ihres Plugins, das auf WordPress.org gehostet wird.

Schritt 4: Verwenden Sie Subversion (SVN), um Ihr Plugin hochzuladen

Subversion ist eine Versionskontrollsoftware. Sie ermöglicht es Benutzern, Änderungen an Dateien und Verzeichnissen vorzunehmen und gleichzeitig eine Aufzeichnung der Änderungen zu führen, verschiedene Versionen zu verwalten und die Zusammenarbeit zu ermöglichen.

Sie benötigen einen installierten SVN-Client auf Ihrem Computer, um Ihr Plugin auf WordPress.org hochzuladen.

Windows-Benutzer können SilkSVN oder TortoiseSVN (kostenlos) verwenden. Mac-Benutzer können SmartSVN oder Versions App auf ihren Computern installieren.

In diesem Artikel zeigen wir Ihnen Screenshots der Versions-App für Mac. Der Vorgang ist jedoch in allen SVN-Apps mit einer GUI sehr ähnlich.

Nach der Installation müssen Sie die Versions-App öffnen und eine Kopie des Repositories Ihres WordPress-Plugins auschecken. Klicken Sie einfach auf die Schaltfläche „Neues Repository-Lesezeichen“.

Dies öffnet ein Popup, in dem Sie zuerst einen Namen für dieses Lesezeichen angeben müssen. Sie können es nach Ihrem Plugin benennen.

Danach müssen Sie die SVN-Repository-URL Ihres WordPress-Plugins hinzufügen.

Klicken Sie auf die Schaltfläche „Erstellen“, um eine Verbindung mit Ihrem Repository herzustellen.

Die Versions-App lädt nun eine Kopie des Repositories Ihres Plugins auf Ihren Computer herunter. Klicken Sie anschließend mit der rechten Maustaste auf Ihren Repository-Namen in der Browseransicht und wählen Sie dann 'Auschecken'.

Sie werden aufgefordert, einen Namen für den Ordner anzugeben und einen Speicherort auf Ihrem Computer auszuwählen. Sie können denselben Ordnernamen wie Ihr Plugin-Verzeichnis verwenden und auf die Schaltfläche „Checkout“ klicken, um fortzufahren.

Die Versions-App erstellt nun eine lokale Kopie Ihres Plugins auf Ihrem Computer. Sie können sie im Repository Ihres Plugins anzeigen oder sie mit der Finder-App durchsuchen.

Jetzt müssen Sie Ihre Plugin-Dateien kopieren und in den Trunk-Ordner Ihres lokalen Repositories einfügen.

Wenn Sie dies tun, werden Sie ein Fragezeichen-Symbol neben neuen Dateien in der Versions-App bemerken.

Da diese Dateien vorher nicht existierten, müssen Sie sie hinzufügen. Wählen Sie die neuen Dateien aus und klicken Sie auf die Schaltfläche „Hinzufügen“, um diese Dateien zu Ihrem lokalen Ordner hinzuzufügen.

Jetzt, da Ihre Plugin-Dateien zum Subversion hinzugefügt wurden, können Sie sie hochladen. Grundsätzlich synchronisieren Sie Änderungen in Ihrem lokalen Ordner und dem Subversion-Verzeichnis.

Klicken Sie auf Ihr lokales Repository, um es auszuwählen, und klicken Sie dann auf die Schaltfläche „Commit“.

Ein neues Popup wird angezeigt.

Sie sehen die Liste der Änderungen und ein Feld zum Hinzufügen einer Commit-Nachricht. Klicken Sie einfach auf „Commit“, um fortzufahren.

Ihre SVN-App synchronisiert nun Ihre Änderungen und committet sie in das Repository Ihres Plugins.

Jetzt, da Sie Ihre Plugin-Dateien in den Trunk hochgeladen haben, ist es an der Zeit, sie mit einer Version zu versehen.

Gehen Sie zur lokalen Kopie Ihres Plugins und kopieren Sie die Dateien im Trunk-Ordner. Danach müssen Sie den Tags-Ordner öffnen und darin einen neuen Ordner erstellen.

Benennen Sie diesen Ordner nach einem Versionsnamen. Stellen Sie sicher, dass er mit der Version übereinstimmt, die Sie im Header Ihres Plugins eingegeben haben. Im obigen Beispielcode haben wir für unser Plugin die Version 1.0 verwendet.

Nachdem Sie den Ordner 1.0 im Ordner /tags/ hinzugefügt haben. Sie werden das Fragezeichen-Symbol neben dem Ordnernamen in der Versions-App bemerken.

Da dies ein neuer Ordner ist, müssen Sie auf die Schaltfläche „Hinzufügen“ klicken, um den Ordner und alle seine Dateien in das Repository aufzunehmen.

Danach können Sie auf die Schaltfläche „Commit“ klicken, um Ihre Änderungen zu synchronisieren. Sie können Ihre Plugin-Dateien weiterhin in der lokalen Kopie bearbeiten.

Wenn Sie mit Ihren Änderungen fertig sind, klicken Sie einfach auf die Schaltfläche "Commit", um sie mit dem Repository von WordPress.org zu synchronisieren.

Wenn Sie wesentliche Änderungen an Ihrem Plugin vorgenommen haben, möchten Sie eine neue Version hinzufügen, indem Sie einen neuen Ordner mit dem Namen der Versionsnummer erstellen. Stellen Sie sicher, dass die Versionsnummer mit dem Header Ihres Plugins übereinstimmt.

Sie können Ihr Plugin jetzt im WordPress.org-Plugin-Verzeichnis in der Vorschau anzeigen.

Schritt 5: Fügen Sie Ihrem Plugin auf WordPress.org Grafiken hinzu

WordPress.org ermöglicht es Ihnen, Grafiken und Screenshots zu Ihren Plugins hinzuzufügen. Diese Elemente müssen den üblichen Namenskonventionen folgen und über Subversion hochgeladen werden.

Plugin-Header-Banner

Dies ist das große Bild, das oben auf der Plugin-Seite erscheint. Es kann in den Dateiformaten JPEG oder PNG mit 772 x 250 oder 1544 x 500 Pixeln vorliegen. Es sollte immer so benannt werden:

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

Plugin-Symbol

Diese kleinere quadratische Bilddatei wird als Plugin-Symbol in Suchergebnissen und Plugin-Listen angezeigt. Sie kann im JPEG- oder PNG-Format in den Größen 125 x 125 oder 250 x 250 Pixel vorliegen.

Diese Icon-Datei sollte wie folgt benannt sein:

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

Screenshots

Screenshot-Dateien sollten nach folgendem Format benannt werden:

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

Sie können so viele hinzufügen, wie Sie möchten. Diese Screenshots sollten in der gleichen Reihenfolge erscheinen wie die Screenshot-Beschreibungen in Ihrer readme.txt-Datei.

Sobald Sie alle Grafiken vorbereitet haben, können Sie sie in den Assets-Ordner der lokalen Kopie Ihres Plugins einfügen.

Danach sehen Sie ein Fragezeichen-Symbol neben dem Ordner „Assets“. Klicken Sie auf die Schaltfläche „Hinzufügen“, um die neue Assets-Datei zu Ihrem Repository hinzuzufügen.

Klicken Sie abschließend auf die Commit-Schaltfläche, um Ihre Dateien in das WordPress.org-Repository hochzuladen. Nach einer Weile können Sie die Grafiken auf Ihrer Plugin-Seite sehen.

Ultimative Anleitungen zur Entwicklung von WordPress-Plugins

WordPress-Plugins können so einfach sein wie das, das wir Ihnen oben gezeigt haben. Sie können auch viel leistungsfähiger sein, wie z. B. Quizze, Countdown-Timer, RSVPs, Abstimmungen, Google-Bewertungen und vieles mehr.

Einige leistungsstarke WordPress-Plugins können auch Add-ons haben. Diese Add-ons funktionieren wie Plugins, die andere Plugins erweitern.

Hier sind einige Ressourcen, die Ihnen helfen, weitere Möglichkeiten zur Funktionalität Ihrer WordPress-Plugins zu erfahren:

• Nützliche WordPress-Code-Schnipsel für Anfänger
• Einen Shortcode in WordPress hinzufügen
• functions.php-Dateitricks, die Sie jetzt in einem standortspezifischen Plugin verwenden können
• Erstellen von benutzerdefinierten Beitragstypen und Taxonomien
• Stylesheets und JavaScript in WordPress korrekt hinzufügen

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie man ein WordPress-Plugin erstellt. Möglicherweise möchten Sie auch einen Blick auf unseren Leitfaden werfen, wie Sie neue Funktionsvorschläge für WordPress einreichen können, und unsere Liste der erfolgreichsten WordPress-Unternehmen und -Firmen. wie man neue Funktionsvorschläge für WordPress einreicht und unsere Liste der erfolgreichsten WordPress-Unternehmen und -Firmen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.