Ein eigenes WordPress-Plugin programmieren – das klingt kompliziert und aufwendig. Doch das muss nicht sein, im Gegenteil: Dadurch ergeben sich einige Vorteile, die die Arbeit schnell aufwiegen.
Normalerweise nimmst du Änderungen an deiner Webseite an Theme-Dateien wie der functions.php oder header.php vor. Durch Updates können diese aber überschrieben werden. Lagerst du die Anpassungen stattdessen in ein Plugin aus, bleiben sie von Theme-Updates unberührt. Ein weiterer Vorteil: Treten Fehler bei der Darstellung der Webseite auf, erleichtert die Auslagerung von Code-Snippets in Plugins die Fehlersuche, weil sie sich bequem aktivieren und deaktivieren lassen.
Die Installation jedes zusätzlichen (externen) Plugins kann zudem ein Sicherheitsrisiko darstellen. Jene Plugins, die Code ins Template einfügen, zum Beispiel für den Trackingcode von Google Analytics, werden durch eigene Plugins überflüssig. Zuletzt ist es gutes Training: Die Programmierung eines eigenen Plugins hilft, den Code von WordPress noch besser zu verstehen.
Beispiele für nützliche Code-Snippets in WordPress
Was könntest du mit einem eigenen Plugin realisieren? Hier sind ein paar Beispiele zur Inspiration:
- Tracking durch Google Analytics, Matomo und Co.
- Favicons
- Preloads
- Custom Post Types
- Deaktivierung von APIs
- Deaktivierung von Frontend-Ressourcen wie JavaScript für Emojis
Die Code-Snippets musst du dabei nicht einmal selbst schreiben, sondern kannst sie aus Anleitungen und Entwicklerforen kopieren oder durch verschiedene Tools individuell generieren lassen.
Vorbereitungen für die Programmierung eines eigenen WordPress-Plugins
Um mit der Erstellung eines eigenen WordPress-Plugins loszulegen, brauchst du nur eine funktionierende WordPress-Instanz, etwa auf einem Web- oder lokalen Server sowie einen beliebigen Texteditor. Prinzipiell funktioniert jeder mit dem Betriebssystem installierte Editor, allerdings fehlt dort meistens das Syntax-Highlighting. Beliebte, kostenlos nutzbare Alternativen mit Syntax-Highlighting sind Brackets, Notepad++ oder die umfangreiche Entwicklungsumgebung Visual Studio Code von Microsoft.
Bevor du mit der Programmierung deines Plugins startest, musst du zunächst einen Ordner in deiner WordPress-Installation anlegen. Navigiere in den Ordner /wp-content/plugins und erstelle einen neuen Ordner mit einem Namen deiner Wahl. Wichtig ist, dass du in diesem Ordner gleich noch eine PHP-Datei mit dem gleichen Namen anlegst. Der Pfad zur Datei könnte am Ende zum Beispiel so aussehen: /wp-content/plugins/code-snippets/code-snippets.php.
Der Code eines jeden WordPress-Plugins sollte folgendermaßen beginnen:
<?php
/**
* Plugin Name: Code-Snippets
* Description: Erweitert WordPress um neue Funktionen
* Author: Name
* Version: 1.0
*/
?>
So speicherst du Informationen zu Namen, Beschreibung, Autor:in und Versionsnummer.
Anwendungsbeispiele
Beispiel 1: Code-Snippets zum Erweitern oder Modifizieren der WordPress-Funktionen
Jetzt kannst du Code-Schnipsel in die angelegte PHP-Datei einfügen, die du ansonsten in die functions.php-Datei deines Themes geschrieben hättest. Für weitere Funktionen musst du nicht unbedingt ein neues Plugin erstellen: Du kannst auch mehrere Funktionen in einem Plugin zusammenfassen. Wird es zu komplex oder treten Fehler auf, empfehlen wir hingegen die Aufteilung auf mehrere Plugins.
Die nachstehenden Zeilen sorgen etwa dafür, dass der <title>-Tag immer die aktuelle Jahreszahl enthält. So musst du sie nicht jedes Jahr manuell anpassen. Das ist vor allem bei zeitlosen Inhalten wie Bestenlisten sinnvoll.
<?php
/**
* Plugin Name: Code-Snippets
* Description: Erweitert WordPress um neue Funktionen
* Author: Name
* Version: 1.0
*/
//Das aktuelle Jahr im Titel setzen, in dem die Variable {{year}} im Titel platziert wird
function replace_year_in_title($title) {
$current_year = date('Y');
return str_replace('{{year}}', $current_year, $title);
}
add_filter('the_title', 'replace_year_in_title');
//Funktion 2
//Funktion 3
?>
Beispiel 2: Code-Snippets für Head, Body und Footer
Durch Theme-Updates können eigene Anpassungen überschrieben werden, wenn du etwa die header.php des Themes direkt bearbeitet hast. Mit einem Plugin kannst du ohne dieses Risiko bequem Änderungen am Head, Body und Footer des Frontend-Quellcodes vornehmen.
Mit der folgenden Code-Struktur kannst du bestimmen, ob dein Snippet im HTML-Head (etwa für Favicons), HTML-Body (etwa für <noscript>-Tags) oder nach dem HTML-Footer ausgeführt werden soll:
<?php
/**
* Plugin Name: Code-Snippets für Head, Body und Footer
* Description: Erweitert Head, Body und Footer um Code-Snippets
* Author: Name
* Version: 1.0
*/
add_action('wp_head', 'mein_plugin_head_wp_head');
function mein_plugin_head_wp_head(){
//START HEAD
?>
<!-- Head Code-Snippets hier einfügen -->
<?php //END HEAD
}
add_action('wp_body_open', 'mein_plugin_body_wp_body_open');
function mein_plugin_body_wp_body_open(){
//START BODY
?>
<!-- Body Code-Snippets hier einfügen -->
<?php //END BODY
}
add_action('wp_footer', 'mein_plugin_footer_wp_footer');
function mein_plugin_footer_wp_footer(){
//START FOOTER
?>
<!-- Footer Code-Snippets hier einfügen -->
<?php //END FOOTER
}
?>
Im folgenden Codebeispiel haben wir exemplarisch HTML-Code in den <head> eingefügt, der dank des Plugins auf jeder WordPress-Seite im Frontend ausgeführt wird.
Der unten gezeigte Code demonstriert den manuellen Einbau von Favicons in unterschiedlichen Auflösungen.
Analog dazu kannst du deinen HTML-Code im <body> oder <footer> einfügen.
<?php
/**
* Plugin Name: Code-Snippets für Head, Body und Footer
* Description: Erweitert Head, Body und Footer um Code-Snippets
* Author: Name
* Version: 1.0
*/
add_action('wp_head', 'mein_plugin_head_wp_head');
function mein_plugin_head_wp_head(){
//START HEAD
?>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="256x256" href="/favicons/favicon-256x256.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<?php //END HEAD
}
add_action('wp_body_open', 'mein_plugin_body_wp_body_open');
function mein_plugin_body_wp_body_open(){
//START BODY
?>
<!-- Body Code-Snippets hier einfügen -->
<?php //END BODY
}
add_action('wp_footer', 'mein_plugin_footer_wp_footer');
function mein_plugin_footer_wp_footer(){
//START FOOTER
?>
<!-- Footer Code-Snippets hier einfügen -->
<?php //END FOOTER
}
?>