WordPress Plugin programmieren: Do it yourself

Daniel on 29. November 2017

Mit großem Abstand basieren die meisten unserer Medienfabrik-Websites auf der Grundlage des Content-Management-Systems WordPress. Es bringt zwar schon ordentlich Grundfunktionen mit sich, diese reichen aber dennoch nicht aus um alle Funktionen und Bedürfnisse des Seitenbetreibers zu erfüllen. Wer den Funktionsumfang seiner Seite erweitern möchte kommt an Plug-Ins also nicht vorbei.

Sofern es nicht ein fertiges Plug-In zum download gab habe ich diese bisher immer direkt im Plug-In-Ordner der Website entwickelt. Dies funktioniert natürlich sehr schnell und effizient, unterliegt nur den eigenen Richtlinien und Sicherheitsbedürfnissen, hat aber den Nachteil, dass die Öffentlichkeit von diesem Plug-In nie etwas erfahren wird. Der nächste Schritt ist es also ein Plug-In den Richtlinien entsprechend so zu schreiben, dass es den Weg in das WordPress-Repository schafft. Die beiden großen Vorteile eines Plug-Ins im Repository liegen auf der Hand: Es ist für alle User zugänglich über die Plug-In Seite im Back-End und die Update-Funktionalität ist gewährleistet. Nicht nur für das korrekte schreiben des Codes, sondern auch für das Bereitstellen des Plug-Ins erfordert es einige Hürden zu nehmen, die für Anfänger zunächst abschreckend wirken. Über diese Hürden berichte ich in diesem Blog-Beitrag.

 

Schritt #1: Entwicklung

Unser Plugin im Dashboard
Unser Plugin im Dashboard

Was soll das Plug-In können? In meinem Fall handelt es sich um das Plug-In „Medienfabrik-Info“. Dieses wird in Zukunft auf allen Kundenwebsites zum Einsatz kommen. Es bietet zwei Funktionen für die Seiten-Admins:

  • In unserem Blog informieren wir in regelmäßigen Abständen über Sicherheitslücken im Web sowie über Verbesserungsmöglichkeiten von Webseiten. Erster Beitrag dies betreffend war „Wozu ein SSL-Zertifikat?“. Nach Installation des Plug-Ins erscheint im Dashboard des Back-Ends ein neues Widget. Hier greifen wir den RSS-Feed dieser Beiträge ab und stellen sie verkürzt dar.
  • Auf unserer eigenen Website nutzen wir ein Chat-Tool für schnelle Kontakt- oder Support-Anfragen. Diese Chat-Funktion ist nun auch im Dashboard verfügbar und kann unten rechts auf der Seite aufgerufen werden.

Was ist dazu nötig?
Die Entwicklung fand auf unserer eigenen Website statt. ich habe zunächst per ftp im Plug-In-Verzeichnis den Ordner „medienfabrik-info“ erstellt. Des weiteren die beiden Unterordner „images“ und „styles“ welche entsprechende Dateien enthalten sowie die Datei „medienfabrik-info.php“.  In dieser gilt es zunächst die Informationen des Plug-Ins einzutragen (mehr dazu):

/*
Plugin Name: Medienfabrik Info
Plugun URI: https://pfeiffer-medienfabrik.de
Description: Ein Dashboard-Widget informiert die Kunden der Pfeiffer Medienfabrik GmbH & Co. KG über Sicherheitswarnungen und Neuerungen im Webbereich. Es wird eine Chat-Symbol für Support-Fragen direkt zur Medienfabrik auf der Back-End-Startseite eingebunden.
Version: 1.0.6
Author: Daniel Kaiser
Author URI: https://pfeiffer-medienfabrik.de/ist/daniel/
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

Anschließend wird das Dashboard Widget eingebunden (mehr dazu):

add_action( 'wp_dashboard_setup', 'add_my_mi_dashboard_widget' );

function add_my_mi_dashboard_widget() {
	wp_add_dashboard_widget( 'my_widget_id',
		'Medienfabrik Info',
		'insert_my_mi_widget_data'
	);
} 

function insert_my_mi_widget_data() {
    //Hier wird der Inhalt des Widgets generiert
}

Und zuletzt habe ich noch eine Options-Page erstellt. Diese bietet die Möglichkeiten die Anzahl der Posts im Widget, die Länge der Beitragsvorschau und ein Opt-In für die Einbindung eines Firmenbrandings im Widget (dazu später mehr) einzustellen. (mehr zur Options-Page)

function miInfoPlugIn_add_menu() {
//Datenbankfelder in Datenbanktabelle options einfügen wenn nicht vorhanden
	add_option( 'mi_article_count', '3' );
	add_option( 'mi_excerpt_length', '150' );
	add_option( 'mi_allow_refer', '0' );

	add_options_page( 'Pfeiffer Medienfabrik Info PlugIn', 'Pfeiffer Medienfabrik Info PlugIn', 9, __FILE__, 'miInfoPlugIn_option_page' );
}

add_action( 'admin_menu', 'miInfoPlugIn_add_menu' );

function miInfoPlugIn_option_page() {
    //Hier steht der Inhalt der Optionspage
}

Die Options-Page enthält Formularfelder die ihren Inhalt zunächst aus der Datenbank abfragen:

$mi_article_count  = esc_attr( get_option( 'mi_article_count' ) );
$mi_excerpt_length = esc_attr( get_option( 'mi_excerpt_length' ) );
$mi_allow_refer    = esc_attr( get_option( 'mi_allow_refer' ) );

Werden andere Werte eingetragen und gespeichert werden sie in die Datenbank geschrieben.  Dabei ist es unbedingt erforderlich die Daten VOR dem senden auf Korrektheit zu überprüfen bzw. als Zahl umzuwandeln:

if ( isset( $_POST['MI_SENT'] ) ) {
    if (isset( $_POST['mi_article_count'] ) &&
		strlen( $_POST['mi_article_count'] ) != 0 &&
		is_numeric( $_POST['mi_article_count'] ) &&
		isset( $_POST['mi_excerpt_length'] ) &&
		strlen( $_POST['mi_excerpt_length'] ) != 0 &&
		is_numeric( $_POST['mi_excerpt_length'] ) &&
		isset( $_POST['mi_allow_refer'] )
	) {
		update_option( 'mi_article_count', (int) $_POST['mi_article_count'] );
		update_option( 'mi_excerpt_length', (int) $_POST['mi_excerpt_length'] );
		update_option( 'mi_allow_refer', (int) $_POST['mi_allow_refer'] );
	}
}

Wenn das Plug-In nun das tut was es soll geht es in die nächste Runde.

 

Schritt #2: Upload ins Repository

Upload ins WordPress Plugin Repository
Upload ins WordPress Plugin Repository

Der schwierige Teil ist zum Glück bereits abgeschlossen, jetzt wird nur noch schnell veröffentlicht… dachte ich… und wurde eines Besseren belehrt. Wer sein erstes Plug-In veröffentlicht steht vor vielen Fragezeichen, Ich versuche ein bisschen Licht ins Dunkel zu bringen.

Falls noch nicht vorhanden, muss zunächst ein Account auf wordpress.org erstellt werden. Als nächstes gilt es einen Speicherplatz für das eigene Plug-In im Repository zu beanspruchen. Zunächst muss aber der Ordner des Plug-Ins noch gezippt werden. Anschließend geklickt auf http://wordpress.org/extend/plugins/add/, den Anweisungen dort gefolgt und das zip-File hochgeladen. Nun dauert es einige Tage bis eine Antwort kommt. Ein echter Mensch aus Fleisch und Blut wird sich das Plug-In anschauen und kontrollieren ob es den Richtlinien entspricht. In meinem Fall war das nicht so. So überhaupt nicht: „There are issues with your plugin code.“! Wichtige Punkte waren:

 

Schritt #3: Korrekturen

  • Ich habe zunächst das Stylesheet fehlerhaft eingebunden.  Die korrekte Referenzierung auf Stylesheets sollte wie folgt aussehen:
    wp_enqueue_style( 'miInfo-widget-style', plugin_dir_url( __FILE__ ) . 'styles/widget-styles.css' );
  • Ein weiterer Hinweis war: „## Please sanitize, escape, and validate your POST calls“. Das bedeutet, dass ich auf meiner Options-Page die Daten aus dem Formular nicht überprüft hatte vor dem senden. Bei einer Fehleingabe wäre so ein „fatal error“ entstanden und die Seite wäre leer geblieben, schlimmer noch: Schadcode hätte übermittelt werden können. Abhilfe schafften hier mehrere Korrekturen: die Inputfelder des Formulares mit entsprechendem Typ versehen (type=“number“), vor dem senden zur Ganzzahl parsen oder die WoprdPress-Funktion sanitize benutzen.
  • Beim Laden der Optionspage werden die Werte der Optionen zunächst aus der Datenbank geladen und anschließend in die Inputfelder übergeben. Bevor die Daten übergeben werden sollten sie noch escaped werden. Somit wird ein Admin hijack verhindert. Dies geschieht über die WordPress escape Funktion.
  • Beim Absenden eines Formulares ist es nötig das sogenannte  „Cross Site Request Forgery“ zu verhindern. Hierzu wird beim senden eine einmalige und für 24 Stunden gültige „nonce“ generiert. Diese wird auf Korrektheit überprüft und somit verhindert, dass von Außen Schaden zugefügt wird. Da das allerdings für sich selbst ein sehr komplexes Thema ist möchte ich nicht weiter darauf eingehen. Ich habe mich selbst in das Thema einlesen müssen, sehr hilfreich war dieser Artikel.
  • Und dann war da noch das Problem mit dem Medienfabrik-Link im Footer des Widgets. Die WordPress-Richtlinien sehen vor, dass ohne explizites Opt-In keine Links, nicht einmal der Firmenname angezeigt werden darf. Um dem zu entsprechen habe ich in die Options-Page Radiobuttons eingebunden um das Opt-In zu realisieren und die Ausgabe zu steuern. Standardwert muss natürlich „OFF“ sein.

Sobald man den Code bereinigt hat kann man ihn neu zippen und direkt auf die Mail des „echten Menschen“ angehängt antworten. Bereits am nächsten Tag hatte ich  erneut Antwort auf meine Arbeit und…  weitere Anweisungen erhalten. Insgesamt durfte ich vier Mal nacharbeiten bis der gute Mann mit meinem Code zufrieden war. Im nachhinein betrachtet war dieses Vorgehen nicht wie zuerst abgestempelt pingelig. Es war eher notwendig um mich selbst mit den Sicherheitsrichtlinien vertraut zu machen. WorPress garantiert dadurch eine gewisse Qualität aller Plug-Ins und ich schütze meinen Code vor Angriffen. Win-Win-Situaltion oder?

 

Schritt #4: Veröffentlichung

Letztendlich war die erlösende Mail mit der Bestätigung „Congratulations, your plugin hosting request for Medienfabrik Info has been approved.“ im Postfach und die Freude erstmal groß, doch weitere Hürden müssen noch genommen werden: Wie verbinde ich mich mit dem SVN, also dem Repository von WordPress?

Die Mail lieferte viele Links, die einem die Welt zwar erklären, aber trotzdem noch genügend Fragen aufwarfen um nach einem Tutorial zu googeln. Ich stieß dann auf folgendes Video:

Schritt #5: Feintuning

Lasst euch von dem Kerl zu Beginn nicht abschrecken, im Gegenteil, damit wurden alle Fragen geklärt. Die Ordner-Struktur meines Plug-In-Verzeichnisses und wie ich Daten übertragen muss, ebenfalls wie man die Versionierung korrekt durchführt.

Das veröffentlichte Plugin. Yeah! :D
Das veröffentlichte Plugin. Yeah! 😀

Die readme.txt im Stammverzeichnis spielt noch eine sehr wichtige Rolle und ist zwingend vorgeschrieben. WordPress teilt uns auf einigen Seiten mit wie diese korrekt anzulegen ist. Hier sind die wichtigsten Informationen über die readme.txt zusammengefasst. Zusätzlich gibt es noch einen Validator zum überprüfen der Datei. Ein sehr hilfreiches Tool zum Erstellen ist der Readme-Generator.

Als letztes galt es nur noch die öffentliche PlugIn-Seite etwas zu gestalten. Nicht nur das Plug-In-Icon sondern auch das Banner habe ich in verschiedenen Auflösungen erstellt und per SVN (das kennt ihr aus dem Video) unter /assets abgelegt. Auch hier gibt es einige Fallstricke, die richtige Dateibenennung ist der Schlüssel zum Erfolg. Informationen hierzu gibt es unter diesem Link.

Das war es dann auch endlich, das neue Plug-In ist nun angekommen im World Wide Web.

Ich hoffe ich konnte einen Einblick in die Entwicklung von Plug-Ins für WordPress geben und blutigen Anfängern eine Art Leitfaden bieten.

Viel Erfolg bei Eurer Erstentwicklung!

0 comments
Post a comment