Anleitung: Web-Slices für WordPress-Blogs als RSS-Alternative

Seit der Version 8 des Internet Explorers ist es möglich, ein sogenanntes Web-Slice einer Website zu abonnieren, sofern die aufgerufene Internetseite ein solches WebSlice (oder auch mehrere Web-Slices) bereitstellt. Bei einem WebSlice handelt es sich im Prinzip um eine “normale” Internetseite, die lediglich gewisse Formatangaben beinhalten muss um vom IE8 als WebSlice interpretiert zu werden. Dementsprechend ist es relativ simpel, ein WebSlice per css zu gestalten, auch das Einfügen von Bildern, Links oder Scripts ist möglich.

Ein Webslice kann in einem WordPress-Blog eine Alternative zu einem RSS-Feed sein, dementsprechend wird das Symbol für ein WebSlice im IE8 anstelle des RSS-Icons angezeigt (die RSS-Icons werden im Dropdown nachgelistet). Abonniert man als Benutzer ein Webslice, wird die Favoritenleiste des eigenen Browsers um eine Schaltfläche erweitert, die das WebSlice nach einem Klick in einer Ebene über der momentan aufgerufenen Internetseite anzeigt. Da der Internet Explorer ein soeben aktualisiertes WebSlice erkennen kann, erhält man so unmittelbar einen Hinweis, wenn sich auf einer abonnierten Internetseite (bzw. in dem abonnierten WebSlice) etwas geändert hat.

» Microsoft: Infos zu Web-Slices

Während die sogenannten RSS Newsfeeds bereits fester Bestandteil in jedem WordPress-Blog sind, muss man als Seitenbetreiber ein WebSlice selbst hinzufügen – was einleuchtet, wenn man die grundsätzlich möglichen grafischen Gestaltungsmöglichkeiten für ein Web-Slice bedenkt. Prinzipiell wäre es denkbar, dass man eine Miniaturausgabe seines WordPress-Blogs als WebSlice bereitstellt, inklusive teilweiser Übernahme des Layouts, der Grafiken u.ä. Elemente.

Die Bereitstellung eines Web-Slices für das eigene WordPress-Blog als zusätzliche Alternative zu einem RSS-Feed erfolgt in zwei Schritten:

1. Erstellung des WebSlice (hier: als separate php-Datei)
2. Einbindung des WebSlice in das eigene WordPress-Blog (über z.B. die footer.php des Themes)

Will man mehrere WebSlices bereitstellen (um z.B. jede einzelne Kategorie oder die Kommentare eines Artikels als separates Web-Slice anzubieten), ist evtl. ein dritter Schritt zur Angabe des Standard-WebSlice (“default-slice”) im Header des WordPress-Blogs nötig.

Ein WebSlice könnte z.B. – ähnlich einem RSS Newsfeed – eine Liste mit den zwanzig letzten Artikeln enthalten. Um ein solches WebSlice mit den Bordmitteln von WordPress (also ohne Abhängigkeit von einem Plugin) zu erstellen, reicht grundsätzlich eine php-Datei, ergänzt mit ein paar css-Angaben. Hierzu nutzen wir

<?php require_once('wp-load.php'); ?>

und

<?php wp_get_archives('type=postbypost&limit=20'); ?>

Die so erstellte Liste muss in zwei umschließende Block-Elemente (div) eingebunden werden, deren Klassen (class) zwingend die Bezeichnungen “hslice” und “entry-content” haben müssen. Über die optionale Klassenbezeichnung “entry-title” kann man die Schaltflächenbeschriftung in der Favoritenleiste des Internet Explorers vorgeben.

Das WebSlice als externe Datei sollte zudem wie jede normale Internetseite Angaben zur Zeichenkodierung und andere HTML-Kopfdaten enthalten, die letztendlich auch die Erscheinungs- und Funktionsweise des Web-Slices beeinflussen. So veranlasst man z.B. mit

<base target="_new">

das Öffnen der Links im WebSlice in einem neuen Fenster bzw. in einer neuen Registerkarte. Fehlt diese Angabe, öffnet der IE8 den Link in der WebSlice-Ebene, was meistens wenig Sinn macht. Zudem können in den Kopfdaten auch die Stylesheet-Angaben untergebracht werden, wobei sich insbesondere

... overflow-x:hidden;overflow-y:scroll; ...

als nützlich erweist. Da der Internet Explorer offenbar ein langes oder breites WebSlice nicht automatisch mit Scroll-Balken versieht, kann man so und über die Breitenangabe die horizontale oder vertikale Sichtbarkeit des Web-Slices beeinflussen.

Die volltändige webslice.php zum Download als zip-Datei findet ihr » HIER, als txt-Datei zum Anschauen auch » HIER. Ladet die extrahierte webslice.php ins Stammverzeichnis eures WordPress-Blogs – falls ihr den Speicherort ändern wollt, muss der Pfad im nächsten Schritt/Code entsprechend angepasst werden.

Um dem Internet Explorers des Besuchers die Existenz des neuen WebSlice für das eigene WordPress-Blog mitzuteilen, muss nun (per style=”display:none” unsichtbar bzw. versteckt) im Quelltext des Blogs das WebSlice verlinkt werden. Das kann z.B. in der footer.php des aktuell genutzten Themes geschehen, prinzipiell wäre es aber auch über ein Widget oder an anderer Stelle möglich.

Fügt an der gewünschten Stelle bzw. in der gewählten Datei folgenden Code ein:

<div class="hslice" id="webslice" style="display:none"> <p class="entry-title"><?php bloginfo('name'); ?></p> <a rel="entry-content" href="<?php bloginfo('wpurl'); ?>/webslice.php" style="display:none" rel="nofollow"></a> <a rel="bookmark nofollow" href="<?php bloginfo('wpurl'); ?>/webslice.php" target="_blank" style="display:none"></a> </div>

In unserem Fall ergibt das im Quelltext:

<div class="hslice" id="webslice" style="display:none"> <p class="entry-title">markensysteme.de</p> <a rel="entry-content" href="http://www.markensysteme.de/webslice.php" style="display:none" rel="nofollow"></a> <a rel="bookmark nofollow" href="http://www.markensysteme.de/webslice.php" target="_blank" style="display:none"></a> </div>

Das war’s. Spätestens beim Aufruf der nächsten Blog-Seite sollte in der Favoritenleiste des IE8 das kleine grüne WebSlice-Icon für das eigene WordPress-Blog angezeigt werden. Bei einem Klick sollte mit einem Popup-Fenster die Nachfrage für die Einbindung im Browser erscheinen, siehe unten. Wird diese Nachfrage bestätigt, wird die Favoritenleiste um die entsprechende Schaltfläche erweitert. In der dann aufklappenden Liste werden jedem Abonnenten die zwanzig letzten News eures WordPress-Blogs angezeigt.

Will man mehrere Web-Slices anbieten, sollte die header.php des Themes noch um die folgende Zeile erweitert werden:

<link rel="default-slice" type="application/x-hatom" href="#webslice" title="<?php bloginfo('name'); ?> News">

Damit legt man das Standard-WebSlice des Blogs fest.