Von einigen Nutzern meiner Revierphone-Charts tauchte auch die Frage auf, wie man die URLs der Grafik anklickbar machen kann. Das ist im Prinzip ganz einfach, mit einer image-map. :-)
Eine zum jeweils aktuellen Chart passende Map liegt im selben Verzeichnis wie die Grafik und hat den Namen top-10-map.txt. Dies Datei für Revierphone kann man ganz normal aufrufen und hineinsehen. Es steht ein Imagemap drin. Wichtig ist dabei der Mapname, hier z.B. ‚gcmap-27‘, mit dem die Map von der Grafik referenziert wird.
Revierphone-Map mit WordPress Shortcode
Seit Wordperess Version 2.5 gibt es die Shortcodes mit denen man spezielle Funktionen direkt in den Inhalt einer Seite oder eines Artikels einbinden kann. Ein Beispiel ist der seitdem existierende gallery-Shortcode, mit dem man die Bilder zu einem Beitrag als kleine Galerie im Artikel anzeigen kann.
Aber auch für eigene Erweiterungen ist die Shorcode-API wunderbar und vorallem einfach einsetzbar. Für das Einlesen der Revierphone-Image-Map sind nur wenige Zeilen PHP-Code in der functions.php-Datei des Themes erforderlich:
function plw_get_chart_map( $atts, $content = null ) {
extract( shortcode_atts( array(
'name' => null,
), $atts ) );
if( is_null( $name ) )
return '';
$url = "http://chart.hbgf.de/$name/top-10-map.txt";
$response = wp_remote_get( $url );
if( is_wp_error( $response ) )
return '';
if( 200 != $response['response']['code'] )
return '';
return $response['body'];
}
add_shortcode( 'chartmap', 'plw_get_chart_map');
Der Shortcode erwartet den Namen der Map als Parameter name. In diesem Fall ist es ‚revierphone‘, alles klein geschrieben. Falls kein Name übergeben wurde, wird ein Leerstring zurück gegeben.
Dann wird die URL zusammengesetzt und die Map mit der WordPress-Funktion wp_remote_get eingelesen. Die Funktion gibt es erst seit WordPress 2.7, deshalb funktioniert meine Funktion erst ab dieser WordPress-Version. Man vermeidet durch Nutzung das Jonglieren mit den diversen Netzwerkfunktionen wie cURL, Streams und fsockopen. Wenn die Konfiguration stimmt, funktioniert das auch sehr gut, schließlich verwendet WordPress die Funktion selbst für alle HTTP-Requests. :-)
Nach ein wenig gegebenenfalls erforderlicher Fehlerbehandlung wird vom Shortcode-Handler die eingelesene Map zurück gegeben.
Revierphone-Chart mit klickbaren URLs
Um die Image-Map im WordPress-Artikel zu verwenden, muß an der gewünschen Stelle einfach der Shortcode mit dem map-Parameter eingegegen werden. Am besten dirket vor der Revierphone-Chart-Grafik selbst:
[chartmap name='revierphone']
<img src="http://chart.hbgf.de/revierphone/top-10.png" alt="reVierphone Top-10" usemap="#gcmap-27"/>
Wichtig ist, damit es überhaupt funktioniert, beim img-Tag das Attribut usemap. Hier ist der Name der Map so wie im map-Tag angegeben mit einem vorangestellten Doppelkreuz einzutragen, also usemap=“#gcmap-27″.
Und so sieht das dann aus:
[chartmap name=’revierphone‘]
Viel Spaß :-)
