Alles eine (Tag-)Wolke

Wer das expertinnen-web immer wieder mal besucht, kann heute eine neue Seite entdecken: Die Tag-Wolke (noch ein Beitrag zu Web2.0). Mit dem WordPress-Plugin Jerome’s Keyword-Plugin  lassen sich Technorati-, Flickr- und del.icio.us-fähige Tags und Links erstellen, die den netten Nebeneffekt haben, dass sie die Beiträge übersichtlicher und auch suchmaschinentauglicher machen.

Und so geht’s

• Plugin herunterladen und auspacken, ab in den Wordpres-Plugin-Ordner
• Plugin aktivieren und Vorgaben für Permalinks (Optionen>>Permalinks) noch einmal speichern
• Beitrag schreiben: Unterhalb des Eingabefeldes erscheint ein neues Feld für die Tags.

Keywords benutzen
Wenn Ihr hier schon Tags für einen Beitrag eingetragen habt, erscheinen als Vorschlag die letzten verwendeten Begriffe. Eine gute Hilfe, damit man nicht unterschiedliche Schreibweisen für dasselbe verwendet (z.B. blog, Blog, blogs, Blogs). Das Plugin ist case-sensitive und kann nicht zwischen Singular und Plural eines Begriffs unterscheiden. Also besser vorher ein paar feste Begriffe finden und merken/aufzeichnen.

Die Tags werden kommasepariert eingegeben. So kann ein Leerzeichen innerhalb eines Tags verwendet werden: Tags wie „barrierefreies Webdesign“ gehen also auch.
Tags ausgeben
Die Tags befinden sich in einem benutzerdefinierten Feld und werden schon einmal über das Template-Tag the_meta() ausgegeben. Vorsicht also, wenn Ihr benutzerdefinierte Felder benutzt und sie darüber in die Seiten schreibt. Jerome sieht für die Ausgabe der Tags die Funktion the_post_keytags() vor. Die Funktion läßt sich durch unterschiedliche Parameter modifizieren.  Man fügt also in den gewünschten Templates z.B.
Tags:
<?php the_post_keytags(false, ‘tag’, ‘Alle Beitr&auml;ge lesen zu ‘); ?>
innerhalb der Loop ein und erhält die Tags umgeben von ihrem Link und den Vorspann „Tag: „ als Beschriftung:

Tags: <a xhref= http://meinedomain.de/tag/meintag" rel="tag" title="Alle Beitr&auml;ge lesen zu meintag">meintag</a>

Die Bedeutung der einzelnen Parameter – z.B. die Umstellung des englischen Link-Title auf Eure Vorgaben – lest Ihr bei Jerome nach.

Da wir benutzerdefinierte Felder auf der Homepage des Blog auswerten (und hier erscheinen die Tags dann auch schon automatisch), haben wir sie als Links nur auf den Einzelpostings (WordPress-Template: Beitrags-Template) eingebunden. Wer etwas für die Suchmaschinenoptimierung seiner Seiten tun will, umgibt die Tags mit einer überschrift-Notierung:

<h*>Tags: <a xhref=>"http://meinedomain.de/tag/meintag" rel"tag" title"Alle Beitr&auml;ge lesen zu meintag">meintag</a></h*>

Wo bleibt die Wolke?
Ihr wollt eine so formschöne Wolke Eurer Tag? Mit Gewichtung der Häufigkeit der Keywords auf Eurer Website? Da kommt sie:

• Die Wolke wird auf einer Seite – also ausserhalb der Blogchronologie erzeugt.
• Kopiert ein Seitentemplate und benennt es um in (z.B.) wolke.php
• Fügt hier im Inhaltsbereich diesen Code ein:
  <ul class="wolke">
  <?php all_keywords(‘<li><a xhref="/tag/%keylink%" style="font-size: %count%px" >%keyword%</a></li>’, ”, 10, 30); ?>
  </ul>
• Neue Seite erstellen und in den benutzerdefinierten Feldern _wp_page_template auswählen, wolke.php eingeben
• Das erzeugt eine Seite nach dem neuen Template, die aus allen Tags die gewünschte Wolke erzeigt.
  Vorsicht: Wenn Ihr die WordPress-Loop aus dem Seitentemplate entfernt habt, wird alles, was Ihr beim Erstellen der Seite im Feld  "Titel" und "Beitrag" eingegeben habt, nicht erfaßt. Ersatzweise könnt Ihr den gewünschten Seitentitel schon in das wolke.php-Template schreiben.
  

Das bringt eine alphabetische Liste Eurer Tags, gewichtet nach der Anzahl ihrer Verwendung. Im Detail habt Ihr diese Möglichkeiten, die Ausgabe zu beeinflussen:

• %keylink%: Euer Tag als Link
• %count%: Die gewichtete Häufigkeit des Tags auf Eurer Seite, die innerhalb der von Euch vorgegebenen Pixelwerte (10, 30) ausgezeichnet wird: Große Schrift bis 30px für die am häufigsten verwendeten Tags, die untere Grenze sind bei uns 10px.
• %keyword: Das Tag

Jetzt könnt Ihr die die Liste per CSS gestalten, z.B.

• ul.wolke {list-style-type: none; text-align:center;} ohne Listenpunkt und zentriert. Das erzeugt einen ansprechenden Wolken-effekt, da die einzelnen list-items je nach verfügbarer Breiteumbrochen werden.
• ul.wolke li {display:inline; padding: 1em;} stellt die Links in einer (umrechenden) Zeile neben einander an und gibt ihnen einen netten Weißraum, damit sie locker angeordnet sind.

Fertig ist die Web2.0-fähige Wolke.