PHP Maniac

Das PHP Blog für PHP-Profis und alle die es werden wollen

Tutorial: Erstellen eines einfachen WordPress Plugins

7 März, 2010 (21:15) | Tutorials | Von: PHP Maniac

Da ich mich in der letzten Zeit vermehrt mit der Erstellung von WordPress-Plugins beschäftigt habe, möchte ich diese Gelegenheit nutzen um euch die Erstellung eines einfachen WordPress-Plugins näher zu erklären. Im Rahmen dieses HowTos werden wir ein sehr simples Plugin erstellen, dass jedem Artikel ein Bild hinzufügt. Welches Bild das Plugin auswählt hängt mit den den Tags des jeweiligen WordPress-Artikels zusammen. Somit lassen sich z.B. Themenrelevante Bilder automatisch in jeden Beitrag einfügen, wie ich es z.B. auf dem alldeals.de Schnäppchen-Blog realisiert habe.

Vorbereitungen

Im Wesentlichen besteht ein WordPress-Plugin aus einem Ordner im „wp-content/plugins“-Ordner der WordPress-Installation. Der Ordnername sollte dem des Plugins entsprechen. In diesem Ordner legen wir nun eine PHP-Datei, ebenfalls mit dem Plugin-Namen, an. Unser Beispielplugin wird „wp-catpics“ heissen, es ergibt sich also folgende Ordnerstruktur innerhalb der WordPress-Installation:

/wp-content/plugins/wp-catpics
/wp-content/plugins/wp-catpics/wp-catpics.php

Besonders wichtig bei WordPress-Plugins sind zunächst die Meta-Informationen zu Beginn der PHP-Datei, die WordPress dem Benutzer bei der Installation anzeigt. Damit PHP diesen Teil der Datei nicht ausführt, werden alle Meta-Informationen in einem PHP-Kommentarblock abgelegt. Die wp-catpics.php sollte also wie folgt beginnen:

/*
Plugin Name: wp-catpic
Plugin URI: http://www.alldeals.de/
Description: Kategorie-Bilder nach Tags einfügen
Author: M.E.
Version: 0.0.1
Author URI: http://www.alldeals.de
*/

Wie ihr seht sind hier wichtige Informationen für WordPress hinterlegt. Neben dem Plugin-Namen und dessen Homepage wird auch eine kurze Beschreibung sowie die Version und URL des Autors angegeben. WordPress liest diese Informationen automatisch aus und bereitet sie für den Benutzer auf.

Bilder in Artikel einfügen

Nachdem wir alle Vorbereitungen für unser Plugin getroffen haben, werden wir nun die eigentliche Funktionalität implementieren. Wir werden diese in eine PHP-Funktion kapseln, warum das sinnvoll ist, werden wir am Ende des Artikels sehen. Fangen wir direkt mit dem Quellcode an, den ich im Anschluss näher erläutern werde:

function add_pics($content)
{
	$d = '/var/www/img/cat/';
	$tags = get_the_tags();

	if(is_array($tags))
	{
		foreach($tags as $tag)
		{
			if ($dh = opendir($d))
			{
				while (($file = readdir($dh)) !== false)
				{
					list($name, $ext) = explode('.', $file);

					if($ext == 'jpg')
					{
						if($name == $tag->name)
						{
							$content = '<img src="/img/cat/'.$file.'" title="'.$tag->name.'" align="left" style="padding-right:8px;padding-top:4px;padding-bottom:8px;"> '.$content;
							closedir($dh);
							return $content;
						}
					}
				}
			}
			closedir($dh);
		}
	}
	return $content;
}

Zunächst legen wir den absoluten Pfad zum Verzeichnis mit unseren Kategoriebildern fest. Diesen benötigen wir, da das Plugin in diesem Ordner nach den passenden Bildern suchen soll. Das Problem lässt sich natürlich auch mit einer Datenbank lösen, doch so ist es wesentlich einfacher. Mit Hilfe der WordPress-Funktion get_the_tags() bekommen wir von WordPress einen Array mit Tag-Objekten. Wir prüfen zunächst ob für den aktuellen Artikel überhaupt Tags vergeben wurden (is_array). Ist dies der Fall iterieren wir durch alle Tags und versuchen für jeden Tag ein passendes Bild zu finden. Da wir pro Artikel lediglich ein einziges Bild einfügen wollen, brechen wir die komplette Funktion beim ersten Treffer ab (Dies ist beim Einsatz des Plugins zu beachten, falls mehrere Bilder möglich sind wählt das Plugin immer den ersten Treffer). Um Treffer zu finden öffnen wir das Verzeichnis mit den Bildern und iterieren hier durch alle Dateien, handelt es sich bei der aktuellen Datei um ein jpg vergleichen wir den Namen des Bildes und den des Tags (selbstverständlich lässt sich das Plugin auch für PNGs oder GIFs umbauen). Sind Name und Tag identisch hängen wir einen passenden IMG-Tag vor den Content und geben diesen zurück. Andernfalls wird das nächste Bild verglichen.
Soweit so gut, doch wie bewegen wir WordPress dazu unsere Funktion zum passenden Zeitpunkt aufzurufen und das auch noch mit dem Inhalt des Artikels als Parameter? Ganz einfach, für solche Anwendungsfällt lassen sich in WordPress so genannte Filter installieren, die die Ausgaben des Blogs vorab filtern und verändern können. In unserem Fall können wir einen solchen Filter wie folgt aktivieren:

add_filter('the_content', 'add_pics');

Im Klartext bedeutet dies das WordPress den Content eines jeden Artikels an die Funktion add_pics übergeben soll. Anschließend wird der Artikel-Content mit dem Rückgabewert der add_pic Funktion ersetzt. Einfach oder? Wenn ihr nun in den Adminbereich eures Blogs schaut, sollte dort euer Plugin auftauchen. Ihr könnt es wie gewohnt aktivieren und deaktivieren.

Abschließende Worte

Die erfahreneren PHP-Programmierer unter euch werden es sicherlich schon gemerkt haben, der Code des Plugins ist nicht perfekt. So wäre es z.B. sinnvoller vorab eine Liste mit den Bilddateien zu erstellen, anstatt jedesmal das Dateisystem zu beanspruchen. Die Plugin-Version, die sich bei mir im Einsatz befindet habe ich bereits entsprechend erweitert. Da ich hier aber gerne die absoluten Grundlagen für die ersten eigenen WordPress-Plugins vorstellen wollte, habe ich mich entschieden diese sehr simple Implementierung zu veröffentlichen. In meinen Augen ist diese ein wesentlich besserer Startpunkt für die WordPress-Plugin-Enwicklung als ein deutlich komplexeres Beispiel. Wer möchte kann seine Verbesserungen aber gerne in den Kommentaren vorstellen. Viel Spaß beim Ausprobieren und Erweitern!

Be Sociable, Share!

Kommentare

Kommentar von Long Hoang
Datum 8. März 2010 um 17:41 Uhr

Hast du mir noch nen Tutorial wie ich mit einem WordPress Plugin Themes manipulieren kann?

Kommentar von PHP Maniac
Datum 8. März 2010 um 19:34 Uhr

Meinst du die Dateien manipulieren oder die Ausgabe der Themes? Machbar ist das bestimmt, wenn du etwas genauer schreibst was du machen willst schaue ich mal ob ich das in ein kleines Tutorial einbauen kann 🙂

Kommentar von Long Hoang
Datum 8. März 2010 um 21:50 Uhr

Einfach gesagt.. ich will einfach nur den Theme an der Stelle bei den Kommentaren, etwas hinzufügen. Auch wär es nett, wenn man noch ne jQuery Lib im Header angeben kann

Kommentar von Blair Shelton
Datum 16. September 2010 um 10:00 Uhr

Meinst du die Dateien manipulieren oder die Ausgabe der Themes? Machbar ist das bestimmt, wenn du etwas genauer schreibst was du machen willst schaue ich mal ob ich das in ein kleines Tutorial einbauen kann
+1

Kommentar von Phil
Datum 22. November 2012 um 12:43 Uhr

Über die Suche zur Erstellung WP Plugin bin ich auf deinen Blog gestoßen. Für eine grobe Vorstellung hat es mir geholfen. Daher vielen Dank.

Leider sind noch nicht alle Fragen beanwortet, daher werde ich weiter suchen.

Deine Funktion würde eine Warning auswerfen, wenn er kein Bild findet, weil die return Variable nicht existiert. Im Return könnte man ein default Bild erzeugen.

Schreibe einen Kommentar