webwork-blog.net

Home > How-To´s, Wordpress > Beschreibung der Linklistenlinks als Tooltipp anzeigen

Beschreibung der Linklistenlinks als Tooltipp anzeigen

27. Mai 2009 Jan Einen Kommentar schreiben Kommentare

Die Beschreibungen der Hyperlinks in der Linkliste in der Sidebar von WordPress werden standardmäßig bei aktiviertem show_descriptions in der Funktion
wp_list_bookmarks neben den eigentlichen Links angezeigt.
Dies wollte ich natürlich gleich mal verschönern :-) . Statt der langweiligen Darstellung neben den Links, habe ich die Beschreibung in einen hübschen JavaScript-Tooltipp gepackt.

Wer das nachbauen will, hier ein kleines How-To:
Was man braucht:

Eine Selfhosted WordPress Installation
FTP-Client (z.B.FileZilla)
Einen Texteditor (Notepad++,Windows-Editoroder unter Linuxnano, …)
PHP-Grundwissen

Außerdem benötigt ihr für die Tooltipps dieWalterZorn Tooltipp Library
Fangen wir nun mit dem Einbau der Tootipps an:Als erstes die .zip-Dateihierdownloaden, entpacken und diewz_tooltip.jsmit dem FTP-Programm auf euren Server hochladen. Am bestens ins/wp-include/js/- Verzeichnis. Selbstverständlich auch irgendwo anders auf euren Webspace. Ist das geschehen, müsst ihr die .js-Datei in euer Template einbinden. Dafür öffnet ihr im Admin-Panel das Design-Menü und klickt auf Editor:
Hier draufklicken
Jetzt müsstet ihr das CSS-File eures Templates sehn. Wenn ja, klickt ihr rechts bei der Dateiauswahl auf “Hauptindex-Template“. Dies wird jetzt zum bearbeiten geöffnet und ihr bindet nach der Zeile

<body>

euer JavaScript-File ein. Dies geschieht so:

<script src="/pfad/zum/skript/wz_tooltip.js" type="text/javascript"></script>

wobei der Pfad je nach Speicherort angepasst werden muss. Dies sollte eine absolute URL mit Domain sein, da es Probleme mit aktiviertem SEO geben kann. Kommen wir zum nächsten Schritt, dem editieren der Funktion wp_list_bookmarks() in den Core-Files:

!! ACHTUNG !!

Man sollte schon ein paar PHP-Kenntnisse mitbringen, um an diesen Dateien herumzuschrauben ! Man könnte sonst sein ganzes Blog lahmlegen :-(

Diesmal wird wird wieder der FTP-Client benötigt. Mit diesem wurschtelt man sich in die den wp-includes/-Ordner und lädt die die bookmark-template.php herunter. Dieses PHP-Skript öffnet ihr nun mit einem Editor eurer Wahl. Werft die Suchfunktion eures Editors an und sucht nach der Funktion “_walk_bookmarks” (ohne Anführungszeichen). Scrollt weiter runter bis ihr diese Zeile zu Augen bekommt:

if ( '' != $title )
$title = ' title="' . $title . '"';

Dem Namen der Variable $title verpasst ihr einen _(Unterstrich) ans Ende, dass das dann so aussieht:

$title_ = ' title="' . $title . '"';

Unter der obigen Zeile fügt ihr folgendes ein:

$tooltip = ' onmouseover="Tip(\''. $title . '\')" onmouseout="UnTip()" ';

Hiermit wird eine neue Variable namens $tooltip deklariert und die Werte für die Tooltipp-Funktionen zugewiesen. Die JS-Funktion Tip lässt bei einem mouseover den Tooltipp erscheinen , die Funktion UnTip() lässt ihn wieder verschwinden.

Ca. acht Zeilen unter dem obigen Code findet ihr die Zusammensetzung des fertigen Links in der Linkliste als Variable:

$output .= '<a href="' . $the_link . '"' . $rel . $title . $target. '>';

Diese Ausgabe manipulieren wir jetzt folgendermaßen:

$output .= '<a href="' . $the_link . '"' . $rel . $title_ . $tooltip . $target. '>';

Dem HTML-Element für den Link werden nun die vorher zugewiesenen zusätzlichen Attribute hinzugefüt. Ja das wars eigentlich schon wieder :-)
Nur noch das File wieder ins wp-includes-Verzeichnis uppen und dein Blog im Browser neu laden. Das ganze wurde für WordPress 2.7.x getestet. Ob es für andere Versionen funktioniert, ist noch nicht getestet. Für Schäden übernehme ich keine Haftung.