Kategorien
Plugins

So erstellst Du ein einfaches, unabhängiges WordPress Plugin

Wenn Du eine eigene WordPress Seite betreibst, kann es manchmal sinnvoll sein, ein eigenes WordPress Plugin zu entwickeln, anstatt auf die riesige WordPress Plugin Bibliothek zurückzugreifen. Hier erfährst Du, wann das sinnvoll ist und zusammen entwickeln wir ein eigenes kleines WordPress Plugin.

Anzeige

Wann sollte ich ein eigenes Plugin programmieren?

Die meisten Funktionen werden einfach in ein spezielles Theme Template oder die functions.php programmiert. Das ist aber oftmals nicht die schönste und sauberste Lösung.
Denn: Wenn Du ein Theme Update einspielst, werden alle Änderungen in der functions.php und Deinem Template überschrieben.

Aus diesem Grund sollte man bei Anpassungen immer ein Child Theme anlegen. Bei einem Update wird das Haupt Theme (z.B. twentynineteen) auf den neusten Stand gebracht und das Child Theme (z.B. twentynineteen-child) bleibt unverändert. In diesem Beitrag erfährst Du, wie Du ein eigenes Child Theme erstellen und nutzen kannst.

Spätestens wenn Du zu einem neuen Theme wechselst, ist diese Möglichkeit aber auch wieder hinfällig. Und genau dann sind WordPress Plugins die richtige Wahl!

Wenn Du also z.B. eigene Inhaltstypen (Custom Post Types) hast, die Du für mehrere Seiten nutzen möchtest, kannst Du diese in ein Plugin auslagern und bei Bedarf in einer anderen Seite oder einem neuen Theme importieren.

Schritt 0: Was soll das Plugin können?

Nachdem Du nun weißt, wann Du ein eigenes Plugin programmieren solltest, starten wir direkt durch und beginnen, die Dateistruktur zu erstellen.

Anzeige

Das folgende Plugin soll folgende Funktion bekommen:

  • Menüpunkt im Backend, bei dem wir Einstellungen vornehmen können
  • Ausgabe über einen Shortcode (mit Einstellungen)

 

Schritt 1: Dateistruktur erstellen

Dazu legen wir unter /wp-content/plugins einen neuen Ordner mit dem Namen unseres Plugins an (Sonderzeichen und Leerzeichen vemeiden). In unserem Beispiel nennen wir das Plugin “drweb_plugin”. In diesem Ordner befindet sich eine gleichnamige Datei mit der Dateiendung .php, also “drweb_plugin.php”.

Ordnerstruktur - Eigenes WordPress Plugin

 

Schritt 2: Plugin Header anlegen

Damit WordPress unser Plugin erkennt, müssen wir einen Header anlegen, in dem Infos zum Plugin übergeben werden.

<?php
/**
* Plugin Name: Dr. Web Plugin
* Plugin URI: https://drweb.de/
* Description: Dieses Plugin erstellt einen Backend Menüpunkt und registriert einen Shortcode.

* Version: 1.0 * Author: LH * License: MIT */ ?>

Den Namen des Plugins musst Du immer angeben, alle anderen Angaben sind optional und können durch weitere Angaben ergänzt werden.

Nun bekommen wir unser Plugin bereits im Backend angezeigt. Wir können es auch aktivieren, hätte allerdings natürlich noch keine Funktion.

Plugin Ansicht im WordPress Backend

 

Schritt 3: Plugin absichern

Damit Dein Plugin nicht einfach über den Browser aufgerufen werden kann, bauen wir direkt unterhalb eine Sicherheitsabfrage ein:

defined( 'ABSPATH' ) or die( 'No script kiddies please!' );

 

Schritt 4: Backend Menüpunkt mit Optionen hinzufügen

Die Option Überschrift und Hintergrundfarbe soll im Backend konfigurierbar sein. Dazu müssen wir ein Einstellungsmenü ausgeben und auch speichern können.

Einstellungen ausgeben

Wir legen eine neue Einstellungsseite an und erstellen dort unsere eigene HTML Struktur. Die Klassenbezeichnungen kannst Du Dir von anderen Einstellungsseiten holen oder hier nachlesen. Damit ist gewährleistet, dass Einstellungsseiten immer gleich aussehen und in jedem Browser funktionieren. Alternativ könntest Du aber Deine eigenen CSS Dateien einbinden, wenn Du ein eigenes Styling möchtest.

// Add menu entry in our backend
add_action("admin_menu", "drweb_plugin_menu");
function drweb_plugin_menu() {
	add_options_page( 'Dr. Web Plugin Optionen', 'Dr. Web Plugin', 'manage_options', 'drweb-plugin-settings', 'drweb_plugin_options' );
}
function drweb_plugin_options() {
	// Check if user has permissions to access this page
	if(!current_user_can("manage_options")) {
		wp_die(__("You do not have sufficient permissions to access this page."));
	}
	// start ob to handle easier output
	ob_start();
	?>
	<div class="wrap">
		<h1>Dr. Web Plugin Einstellungen</h1>
		<p>Auf dieser Seite kannst Du verschiedene Einstellungen für Dein Plugin festlegen.</p>
		<form method="post">
			<table class="form-table">
				<tr>
					<th>Überschrift</th>
					<td>
						<input
							type="text"
							id="headline"
							name="headline"
							class="regular-text"
							value="<?php echo get_option("drweb_plugin_headline"); ?>"
						>
					</td>
				</tr>
				<tr>
					<th>Hintergrundfarbe</th>
					<td>
						<input
							type="color"
							id="background_color"
							name="background_color"
							value="<?php echo get_option("drweb_plugin_background_color"); ?>"
						>
					</td>
				</tr>
			</table>
			<p class="submit">
				<input type="submit" name="submit" id="submit" class="button button-primary" value="<?php esc_attr_e('Save Changes') ?>">
			</p>
		</form>
	</div>
	<?php
	// get all written stuff
	echo ob_get_clean();
}

Wenn wir unser Plugin nun aktivieren und auf die richtige Seite navigieren, haben wir schon ein anschauliches Ergebnis. Natürlich ohne Inhalt, da in der Datenbank zu den Identifiern (“drweb_plugin_headline” und ” drweb_plugin_background_color”) noch keine Daten hinterlegt sind.

Einstellungsmenü im WordPress Backend

Einstellungen speichern

Dazu fügen wir vor Zeile 14 noch folgenden Code ein:

// save changes (when submit button was clicked)
if(isset($_POST["submit"])) {
	$headline = $_POST["headline"];
	$background_color = $_POST["background_color"];
	update_option("drweb_plugin_headline", $headline);
	update_option("drweb_plugin_background_color", $background_color);
	// show saved message
	echo "<div class=\"updated\"><p><strong>Einstellungen gespeichert.</strong></p></div>";
}

Dieser Code registriert, wenn der Submit-Button gedrückt wurde und speichert die beiden Optionen über “update_option()” in der Datenbank ab. Zusätzlich geben wir noch eine Erfolgsmeldung aus. Hier kann optional noch eine Validierung der Daten vorgenommen werden.

Jetzt ist unser Einstellungsmenü im Backend fertig. Wir können die Daten laden und überschreiben. Probier’s gern schon mal aus!

 

Schritt 5: Frontend Ausgabe (Shortcode) programmieren

Im nächsten Schritt möchten wir einen Block im Frontend ausgeben. Dazu sollen unsere Einstellungen aus der Datenbank geladen werden und im Block mit ausgegeben werden.

Mit diesem Code registrieren wir einen neuen Shortcode und geben unsere beiden Optionen (Hintergrundfarbe und Überschrift) mit aus.

// register shortcode
add_shortcode("drweb_plugin", "drweb_plugin_shortcode");
function drweb_plugin_shortcode($atts, $content = null) {
	ob_start();
	?>
	<div class="drweb-plugin-container" style="background-color: <?php echo get_option("drweb_plugin_background_color"); ?>;">
		<h2><?php echo get_option("drweb_plugin_headline") ?></h2>
		<p><?php echo $content; ?></p>
	</div>
	<?php
	return ob_get_clean();
}

Shortcode API Dokumentation

Um den Shortcode zu benutzen kannst Du ihn direkt in deinem Gutenberg Editor einfügen:

oder als Codeschnipsel in Deinem Template:

do_shortcode("[drweb_plugin]Lorem Ipsum dolor sit amet.[/drweb_plugin]");

Beide Möglichkeiten erzeugen die gleiche Ausgabe (Ich habe die Hintergrundfarbe und die Überschrift im Backend festgelegt).

Frontend Ausgabe eines eigenen WordPress Plugins

Logischerweise muss hier je nach Einsatzgebiet noch eigenes Styling eingefügt werden. Dieses Beispiel dient der Anschaulichkeit und ist deshalb so ausreichend.

Kann ich so auch aufwendigere/größere Plugins programmieren?

Prinzipiell, ja. Größere Plugins kommen jedoch oft mit einer aufwendigeren Struktur als dieses Plugin daher. Meist werden diese objektorientiert und nicht wie unser Beispiel prozedural programmiert.

Diese Boilerplate bietet eine Grundlage, in der neben dem objektorientierten Programmierparadigma auch Mehrsprachigkeit und Backend und Frontend Aufteilung der Dateien bereits vorgesehen ist. Aber Du kannst natürlich auch von Grund auf ein eigenes Plugin entwickeln, diese Boilerplate ist lediglich eine hilfreiche Grundlage und soll die Struktur für alle Entwickler vereinheitlichen.

Ein Guide zur Entwicklung eines WordPress Plugins wird auch von WordPress direkt bereitgestellt. Dort findest Du auch noch ein paar interessante Hinweise.

Fazit

Du siehst, auch mit wenig Erfahrung im Bereich Plugin Entwicklung lassen sich kleinere Funktionalitäten relativ einfach in ein Plugin für WordPress auslagern. Gerade wenn Du eine Funktion für mehrere Seiten verwenden möchtest, kannst Du ab sofort Deine eigenen Plugins entwickeln.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.