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 Plugins also nicht vorbei.
Sofern es nicht ein fertiges Plugin zum Download gab, habe ich diese bisher immer direkt im Plugin-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 Plugin nie etwas erfahren wird. Der nächste Schritt ist es also ein Plugin den Richtlinien entsprechend so zu schreiben, dass es den Weg in das WordPress-Repository schafft. Die beiden großen Vorteile eines Plugins im Repository liegen auf der Hand: Es ist für alle User zugänglich über die Plugin 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 Plugins müssen einige Hürden genommen werden, die für Anfänger zunächst abschreckend wirken. Über diese Hürden berichte ich in diesem Blog-Beitrag.
Schritt #1: Entwicklung
Was soll das Plugin können? In meinem Fall handelt es sich um das Plugin „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 Plugins 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. Wir haben zunächst per ftp im Plugin-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 Plugins 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 diese 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 Plugin nun das tut was es soll geht es in die nächste Runde.
Schritt #2: Upload ins 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 Plugin veröffentlicht steht vor vielen Fragezeichen. Wir versuchen 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 Plugin im Repository zu beanspruchen. Zunächst muss aber der Ordner des Plugins 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 Plugin 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 Formulars 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 Formulars 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. WordPress garantiert dadurch eine gewisse Qualität aller Plugins 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 erst mal 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 (oder der Dame ;)) zu Beginn nicht abschrecken, im Gegenteil, damit werden alle Fragen geklärt. Die Ordnerstruktur meines Plugin-Verzeichnisses, wie ich Daten übertragen muss und ebenfalls wie man die Versionierung korrekt durchführt.
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 Plugin-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 Plugin ist nun angekommen im World Wide Web.
Ich hoffe wir konnten einen guten Einblick in die Entwicklung von Plugins für WordPress geben und blutigen Anfängern eine Art Leitfaden bieten. Fragen gerne in die Kommentare.
Viel Erfolg bei eurer Erstentwicklung!