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 Leihen 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 leihe und betreibe WP als Hobby - damit gebe ich leine 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

10 Kommentare und 6 Trackbacks 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

Kommentar schreiben

Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.

Kommentar-Hilfe

händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.

Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.

xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>

Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als &lt; und > als &gt; einfügt.

E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.

Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.

Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.

Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.