Sidebar
ein-/ausblenden

WP - Tutorial, wir schreiben ein WordPress Plugin - Teil 1

Plugin für WordPress SEO

Anzeige

Immer wieder kommt es zu Anfragen und Hilferufen auf meinem Blog. Oft werden nur kleine Funktionserweiterungen für die Seite gesucht. Die meisten gibt es schon, das Umfeld an WP-Plugins ist riesig und kaum noch zu überschauen. Trotzdem kommt es eben zu Wünschen und die sollte man mit Hilfe der Pluginschnittstelle realisieren. Natürlich könnte man auch die Core-Dateien von WP verändern, aber beim nächsten Update macht man es dann gegebenenfalls nochmal.

Um den Einsteiger und Laien zum Thema Plugins erstellen unter WordPress einen kleinen Einstieg zu bieten, schreibe ich diesen Artikel. Ich hoffe, dass meine Schritte und die Überlegungen nachvollziehbar sind und wünsche mir, dass damit der Weg für den einen oder anderen ein wenig leichter fällt, seine Wunschfunktion in WP zu integrieren, denn ich halte WP für ein ausgeklügeltes und tolles Werkzeug, mit dem man eine Menger Spass im Netz haben kann.
Trotzdem die Bitte, ich bin auch nur Laie und betreibe WP als Hobby - damit gebe ich keine Garantie auf Vollständigkeit, Richtigkeit und 100%tige Funktionsfähigkeit.

Als Hinweis, während diese Zeilen entstehen, arbeite ich parallel an diesem Plugin um alle Schritte gleichzeitig zu machen und somit nicht allzuviel zu überspringen und gegebenenfalls Fehler und Probleme besser zu verstehen und zu erörten. Falls also dem einen oder anderen Fehler auffallen oder Fehler entdeckt werden, so freue ich mich über diesen Hinweis per eMail oder Kommentar. Außerdem wird der Artikel im Laufe der Zeit wachsen. Dieser soll nur den ersten Abschnitt einläuten und den Tutorialbeteiligten Zeit zum „spielen“ geben. Also ein wenig Geduld, es geht weiter.
Über Feedback und Wünsche würde ich mich freuen.

Während diese Zeilen entstehen, ist mir aufgefallen, dass es bei potenziellen Anwendern Probleme mit Grundlagen zum Theme Plugin für WP gibt, so dass ich den Teil 0 vorgeschoben habe. Viel Spass damit.

Als Beispiel möchte folgende Idee aufgreifen, die ich mit einem lieben Leser "Enrique Bergemann" per eMail erörtert habe.

Wenn man sich den Quellcode eines Beitrags näher anschaut und dabei die SEO-Regeln im Hinterkopf hat, so fällt mehr oder weniger auf, dass die META-Description nicht sonderlich zum Inhalt des Beitrags passen. Hm - woran liegt das? Nun, die Ausgabe ist natürlich abhängig vom verwendeten Theme. Je nach Codierung des Themes sind diese Meta-Daten händisch gepflegt oder werden mit Hilfe des Tags bloginfo('description') ausgelesen. Diese Beschreibung wird über das Admin-Panel gepflegt, im Bereich Optionen --> Allgemein. Ganz klar, dies kann nie zum jeweiligen Thema des Beitrags passen.

Die Überlegung ist nun so, dass wir für diese Funktion eine benutzerdefiniertes Feld (en: Custom Fields) benutzen wollen und dieses mit dann im Header ausgeben. Dafür bringt WP an sich schon eine Funktion mit the_meta(), allerdings kenne ich keine Möglichkeit einzelne Schlüssel aus der Tabelle _postmeta, in der die Metaangaben hinterlegt werden, auszulesen. Die Funktion the_meta() gibt alle Felder in einer Liste aus. Dies wollen wir natürlich in unserem Fall nicht.

Außerdem eignet sich dieses Beispiel sehr gut, da die gewünschte Funktion außerhalb von the loop liegt und damit ist das Schreiben des Plugins ein wenig aufwändiger. Prinzipiell soll es aber rein zum Erlernen der Plugin-Schnittstelle dienen.

Nun werden einige schlaue Köpfe auf diverse Plugins hinweisen, die dieses Problem schon erkannt haben und Abhilfe schaffen. Das könnte ich jetzt hier auch tun, aber ich möchte ja anhand dieses Problems erklären, wie wir nun zu unserem ersten eigenen Plugin kommen. Außerdem bringen die meisten Plugins dann wieder derart viele Zusatzfunktionen und Einträge in der Datenbank mit sich, dass sich vielleicht die Entwicklung eines eigenen Plugins lohnt - und, nicht zu vergessen, der Spass daran etwas neues zu lernen.

Nun gut der Vorrede - es geht los.

Was brauchen wir?

  1. Zu erst einmal einen laufenden WP-Blog, dazu reicht ein lokal laufender, schnell mit XAMPP und WP eingerichtet. Dadurch kann man spielen ohne zu zerstören. Ein Tutorial dazu beschreibt der Artikel: WordPress unter XAMPP installieren
  2. Außerdem ist ein Editor, der php beherrscht recht nützlich. Prinzipiell reicht aber auch Notepad. Als Editor nutze ich UltraEdit, da der aber kostenpflichtig ist empfehle ich PHP Designer 2006, der kann sogar debuggen.
  3. Ebenso sind Kenntnisse der Sprache php nützlich, wobei ich alles mir Basisanweisungen schreibe, so dass man es recht leicht versteht.
  4. Um die Funktion unter WP zu testen, in Beitrag oder Seite, benötigt wir ein php-Plugin, da WP dies - aus gutem Grund - standardmäßig nicht beherrscht (z.B. Exec-PHP).

Vorarbeiten im Blog!

Zuerst müssen wir uns in unserem Test-Blog einen Beitrag, oder Seite, einrichten die ein Benutzerdefiniertes Feld besitzt. In meinem Fall erstelle in also ein Feld mit Schlüssel (en: Key) description und Wert (en: Value) Test description. Screenshot WP

Nun lasst das php-Plugin laufen, z.B. Exec-PHP, laufen und gebt dieses Feld schonmal im Beitrag mit aus, nur zum Überprüfen. Im weiteren Verlauf wird uns diese Überprüfung sich als sehr nützlich erweisen.


Meta-Ausgabe: <?php the_meta(); ?>

Schaut euch nun die Seite mit eurem Beitrag an. Wer die Funktion mit php eingebunden hat, bekommt nun den Schlüssel und Wert ausgegeben. In meinem Fall sieht es so aus.

Meta-Ausgabe:

Nun wollen wir ja nur den Schlüssel description auslesen, dazu schauen wir uns mal die Funktion the_meta() an. Die findet man in der template-functions-post.php in wp-includes. Darin steht:


function the_meta() {
	global $id, $post_meta_cache;

	if ( $keys = get_post_custom_keys() ) {
		echo "<ul class='post-meta'>\n";
		foreach ( $keys as $key ) {
			$values = array_map('trim', get_post_custom_values($key));
			$value = implode($values,', ');
			echo "<li><span class='post-meta-key'>$key:</span> $value</li>\n";
		}
		echo "</ul>\n";
	}
}

Nach dem wir uns den Code nun zu Gemüte geführt haben, ist ersichtlich, die foreach-Schleife sorgt dafür dass alle vorhanden Schlüssel ($key) mit ihrem Wert ($value) ausgegeben werden.

Nun endlich ein Plugin!

Jetzt kommen wir zum Kern, ein Plugin erstellen. Im Editor unserer Wahl erzeugen wir eine neue php-Datei. In diese Datei kopieren wir den Code von the_meta(), denn alle notwendigen Eigenschaften sind schon dabei. Nun die Datei speichern, ich nenne sie fb_meta_description.php und sie beinhaltet folgenden Code. Aufpassen, den Namen der Funktion müssen wir ändern, denn es darf natürlich keinen Kollisionskonflikt geben. Deshalb nenne ich die Funktion nun fb_meta_description. Warum das alles und was noch so wichtig ist beim coden eines Plugins erwähnte ich bereits im Beitrag WP - Hinweise für das Schreiben eines WordPress-Plugins.


<?php
function fb_meta_description() {
	global $id, $post_meta_cache;

	if ( $keys = get_post_custom_keys() ) {
		echo "<ul class='post-meta'>\n";
		foreach ( $keys as $key ) {
			$values = array_map('trim', get_post_custom_values($key));
			$value = implode($values,', ');
			echo "<li><span class='post-meta-key'>$key:</span> $value</li>\n";
		}
		echo "\n";
	}
}
?>

Wenn ihr diese Datei in euren Plugin-Ordner (/wp-content/plugins) kopiert, dann ist dieses Plugin nicht für WP zu erkennen und damit auch nicht im Admin-Panel ersichtlich. Dazu müssen wir noch einige Kommentare hinzufügen, nach WP-Standard. Folgendes Beispiel zur Hilfe. Die letzten drei Zeilen sind optional, sie sind dazu da, damit das Plugin Installer (auch dazu hier mehr) unterstützt.


/*
Plugin Name: Meta Description
Plugin URI: http://bueltge.de/
Description: Benutzerdefiniertes Feld Description auslesen
Version: 1.0
Author: Frank Bueltge
Author URI: http://bueltge.de/
Update Server: http://bueltge.de/wp-content/download/wp/
Min WP Version: 1.5
Max WP Version: 2.0.4
*/

Das Plugin sollte nun folgenden Code haben:


<?php
/*
Plugin Name: Meta Description
Plugin URI: http://bueltge.de/
Description: Benutzerdefiniertes Feld Description auslesen
Version: 1.0
Author: Frank Bueltge
Author URI: http://bueltge.de/
Update Server: http://bueltge.de/wp-content/download/wp/
Min WP Version: 1.5
Max WP Version: 2.0.4
*/

function fb_meta_description() {
	global $id, $post_meta_cache;

	if ( $keys = get_post_custom_keys() ) {
		echo "<ul class='post-meta'>\n";
		foreach ( $keys as $key ) {
			$values = array_map('trim', get_post_custom_values($key));
			$value = implode($values,', ');
			echo "<li><span class='post-meta-key'>$key:</span> $value</li>\n";
		}
		echo "\n";
	}
}
?>

Testen wir das ganze, das Plugin in eurer Plugin-Verzeichnis (/wp-content/plugins) kopieren und im Admin-Panel aktivieren. In euren Beitrag zurück und dort noch ein wenig mehr php-Code hinzu bringen.


Meta-Ausgabe: <?php fb_meta_description(); ?>

Den Beitrag wieder ansehen, aktualisieren nicht vergessen, und siehe da, die selben Daten wie bei the_meta() - Logisch.

Anpassen der Funktion für unsere Zwecke.

Nun wollten wir aber nur die Ausgabe des Schlüssels description. Dazu ändern wir den Code in unserem Plugin:


<?php
/*
Plugin Name: Meta Description
Plugin URI: http://bueltge.de/
Description: Benutzerdefiniertes Feld Description auslesen
Version: 1.0
Author: Frank Bueltge
Author URI: http://bueltge.de/
Update Server: http://bueltge.de/wp-content/download/wp/
Min WP Version: 1.5
Max WP Version: 2.0.4
*/

function fb_meta_description() {
	global $id, $post_meta_cache;

	if ( $keys = get_post_custom_keys() ) {
		foreach ( $keys as $key ) {
			$values = array_map('trim', get_post_custom_values($key));
			$value = implode($values,', ');
			if ( $key == 'description' ) {
				echo "$value";
			}
		}
	}
}
?>

Download des Beispiels: Download als zip-DateiDownload als phps-Datei: fb_meta_description_1.phps - 680 Byte

Test, Beitrag wieder mal aktualisieren und nun sollte nur noch der Wert des Schlüssels description ausgegeben werden - Test description

Außerhalb von the loop

So weit so gut, bauen wir nun die php-Anweisung <?php fb_meta_description(); ?> in die header.php eures Themes ein. Das muss dann so im Header stehen:


<meta name="description" content="<?php echo fb_meta_description(); ?>" />
</meta>

Nun die Seite neu laden. Schaut euch den Quellcode an! Nun, der Bereich content enthält leider keinen Inhalt. Warum ? - wir befinden uns außerhalb von „the loop“ und damit stehen uns nicht alle Informationen zur Verfügung. Um die Daten in den Meta-Tag zu bekommen, müssen wir eine weitere Funktion schreiben, oder die bestehende erweitern.

So weit so gut, mehr beim nächste Teil - wenn gewünscht ? Gibt's nun hier: Tutorial, Optionen aus dem Adminbereich übergeben

13 Kommentare zu „WP - Tutorial, wir schreiben ein WordPress Plugin - Teil 1“

  1. 1
    Kommentar von Enrique Bergemann

    Da den Beitrag hier (leider) noch niemand kommentiert hat: Chapeau ! - Frank hat sich (mal wieder) sehr viel Mühe gegeben. Selbst wenn man die der Beschreibung zugrunde liegende Funktion (Meta-Description und Meta-Keywords) auf diesem Wege nicht realisieren möchte, der Beitrag vermittelt Grundkenntnisse und Einblicke in die Funktionsweise der WordPress-Schnittstelle.

    "So weit so gut, mehr beim nächste Teil - wenn gewünscht ?" - Ja, bitte!

    :-)

  2. 2
    Kommentar von Holger

    Denn hau mal rein ;-)

  3. 3
    Pingback von WP - Tutorial, wir schreiben ein WordPress Plugin - Teil 2 - bueltge.de [by:ltge.de]
  4. 4
    Kommentar von Prinz Borderline

    Danke für den nächsten Teil!

  5. 5
    Pingback von Layer-Werbung nur mit Suchmaschinen-Referrer - S-O-S SEO Blog
  6. 6
    Pingback von WP - Tutorial, wir schreiben ein simples WP-Plugin - Teil 0 | bueltge.de [by:ltge.de]
  7. 7
    Pingback von WordPress benutzerdefinerte Felder (Custom Fields) | bueltge.de [by:ltge.de]
  8. 8
    Pingback von Matthias Pospiech » Blog Archive » Development of a Plugin for Wordpress
  9. 9
    Kommentar von moep

    und wie bekomm ich nun das zeug in die metatags? :( ((

  10. 10
    Kommentar von Frank Bültge

    @moep: Das Plugin holt die Daten aus den benutzerdefinierten Feldern. Der Text verdeutlicht es. Die Funktion des Plugins muss in den head des Themes.

  11. 11
    Pingback von Feldstudie.net .::. Mein erstes Wordpress-Plugin .::. AdSense, Plugin, Werbung, Wordpress
  12. 12
    Kommentar von gnarf

    ich bin leider völliger wordpress neuling, mit php hatte ich schon etwas zu tun. was hältst du von dieser kürzeren und schnelleren version der funktion:

    function meta() {
    global $id, $post_meta_cache;
    if ($keys=get_post_custom_values("description"))
    echo $keys[0];
    }

    danke für dieses und deine anderen brillianten tutorials !

    lg

    gnarf

  13. 13
    Kommentar von Frank Bültge

    @gnarf: jein; dein Code liest das Feld aus und gibt den ersten Schlüssel des Array zurück. Insofern wird es reichen, man muss aber Arrays verstehen und die Abfrage verkürzt lesen können. Einziger Hinweis: Variablen gehören nach WP Codex nach rechts, sonst alles OK.

  14. 14
    Kommentar von Bianker

    sehr gutes tut

  15. 15
    Kommentar von Irmen

    Hallo, erstmal vielen Dank für das tutorial.
    Leider scheitere ich wiedermal gleich ganz am Anfang- denn das plugin exec-php geht bei mir schon mal nicht!!
    Es zeigt leider nur
    Meta-Ausgabe: spitze klammer fragezeichenphp the_meta(); fragezeichen spitzeklammerzu an

    hm und hier sieht das alles wieder ganz anders aus als ich es ins kommentarfeld geschrieben habe ... - wahhhh

    auf der Startseite meiner angegebenen test-website kann man das sehen der artikel heisst "mit meta".
    Kann mir jemand sagen, was ich falsch mache?

    Vielen Dank!
    Irmen

  16. 16
    Kommentar von Lars

    Hallo,
    ich habe dieses Tutorial über Google gefunden und muss sagen, dass es echt einfach gehalten ist.
    Mein Problem ist jetzt, ich habe das ganze in "if ( $key == 'rechts' )" abgeändert und möchte nun, dass wenn ich ein Benutzerdefiniertes Feld mit dem Namen "rechts" eingebe und als "Option" eine Adresse, dass diese Adresse im img src="ADRESSE" landet. Dazu habe ich folgendes Versucht:
    <?php
    $image = fb_meta_image();
    if ($image != '') {
    echo "(ID, "rechts", $single = true);" ="echo get_the_title();" />";
    };
    ?>

    (Ich habe das das < hier eingeklammert, weil sonst versucht wird, das Bild auszugeben.)
    Da meine PHP- Kentnisse zu wünschen bleiben, ist das natürlich falsch und dementsprechend kommt eine Fehlermeldung. Wie kann ich das korrigieren?
    Grüße

  17. 17
    Kommentar von Michael

    Danke für das Tutorial. Endlich mal ein gutes deutschsprachiges Tutorial zur Plugin-Erstellung. Bisher hatte ich nur englische Tutorials gefunden und da tue ich mich schon mit der Sprache schwer. Danke nochmal!

  18. 18
    Kommentar von Mario

    Ich danke dir auch für diese sehr schöne Anleitung. Wie es scheint werde ich doch etwas mehr Zeit brauchen um das zu kapiere....:crazy:

  19. 19
    Kommentar von daniel

    Sehr schönes Tutorial. Damit habe ich angefangen WordPress zu lernen, und im nachhinein sieht alles natürlich so einfach aus :-D

    Für Anfänger mitunter das beste. Man muss sich keine endlos langen Bücher wälzen um das Thema zu begreifen.

    Schön kurz und informativ erklärt. Good Job !

Kommentare sind geschlossen.