WP - RSSFeed mit CSS gestallten

Anzeige

Der RSS-Feed ist ein wesentlicher Bestandteil von Blogs und auch immer mehr andere Seiten bieten diese Art der Information an. Über Sinn und Unsinn eines Feeds und ob er den gesamten Inhalt oder nur Auszüge enthalten soll, ist nicht Themas dieses Beitrags.
Fakt ist, wer einen Feed anbietet, muss sich im klaren sein, dass dieser auch durch Suchmaschinen idenziert wird. Er wird somit also zum Suchobjekt.
Kommt nur ein "Kombuterleihe" über eine Suchmaschine auf einen RSSFeed, also die reine XML-Datei, wird er diesen Code in den meisten Fällen wieder verlassen und die Seite nicht besuchen - er ist mit dem Code überfordert. Der Anwender wird sich eine andere Quelle zu seinem Suchbegriff zu Gemüte führen. Dies ist natürlich nicht im Sinne das Seitenbetreibers, der in der Regel die Daten ins Netz stellt, damit sie gelesen werden.

Nun, es gibt eine kleine Möglichkeit, den Leser darauf aufmerksam zu machen, in dem man den Feed mit eine wenig CSS so formatiert, dass er auch in einem Browser leserlich erscheint. Unter modernen Browsern, wie z.B. Mozillas Firefox, kann außerdem zusätzlicher Content hinzugefügt werden, in dem man den geneigten Leser darauf hinweist, dass er sich auf einem Feed befindet und doch besser die Website besuchen soll.

Um das ganze auch mit WordPress zu realisieren, müssen allerdings die Dateien, welche die Feeds erstellen ein wenig verändert werden. Alle Dateien findet ihr im Root-Verzeichnis eures Blogs. Dort sollte auch eure Stylesheet für den RSS Feed liegen.
Eine ähnliche Art und Weise habe ich schon mal in dem Artikel "Image für den RSS-Feed" beschrieben, in dem unser RSSFeed mit einem Icon/ Image versehen wurde, damit der Feed in denn Readern besser identifiziert wird und damit ein wenig eindeutiger für den User ist.

Achtung:

Sicherheitskopien sind im Vorfeld anzufertigen !

Anleitung:

Ich erläutere das ganze mal an der Datei wp-rss.php, die sich auch im root-Verzeichnis von WP befindet. Dort muss der Code um eine Zeile erweitert werden, so dass der Verweis zum Stylesheet vorhanden ist.
Folgender Code muss bei den genannten Dateien hinzugefügt werden. Achtet darauf, dass ihr den Pfad zu eurem StyleSheet richtig angebt.

<?xml-stylesheet href="rss.css" type="text/css"?>

In der wp-rss.php sieht es dann folgendermaßen aus.

<?php echo '<?xml version="1.0" encoding="'.get_settings('blog_charset').'"?'.'>'; ?>
<?php echo '<?xml-stylesheet href="rss.css" type="text/css" ?>'; ?>
<!-- generator="wordpress/<?php echo $wp_version ?>" -->
<rss version="0.92">
<channel>
	<title>&lt;?php bloginfo_rss('name') ?&gt;</title>

Für den Feed Version 2.0 (wp-rss2.php) sieht es ähnlich aus. Auch dort muss der Verweis hinterlegt werden.

<?php echo '<?xml version="1.0" encoding="'.get_settings('blog_charset').'"?'.'>'; ?>
<?php echo '<?xml-stylesheet href="rss.css" type="text/css" ?>'; ?>

Als Stylesheet legt ihr eine CSS-Datei ab. In meinem Fall ist es die rss.css und liegt im Hauptverzeichnis. Ein Beispiel für eine einfache Formatierung und den Hinweis, dass sich der Leser auf einer XML-Datei, auf dem RSSFeed, befindet könnt ihr im folgender Area sehen. Dieses Stylesheet ist ausschließlich ausreichend für den RSS-Feed Version 0.9*. Da als Standard in den meisten Readern die Version 2* eingelesen wird und diese Version auch von den Suchmaschinen indiziert wird, müsst ihr diese ein wenig aufwändiger beabeiten. Dazu findet ihr ein Beispiel im zweiten Codearea.

Beispiel-Code für das Stylesheet zum Feed V0.9*:

rss {
display:block;
margin:10px;
padding: 10px 0;
font-size: 62.5%;
}

rss:before {
content:"\00BB  Sie befinden sich auf einem RSS-NewsFeed, nicht auf der Website. Bitte besuchen Sie die Website bueltge.de";
font-size: 2em;
color: red;
margin: 10px;
}

channel {
display:block;
background-color:#eee;
font-size: 1.2em;
font-family: Verdana, Arial, Helvetice, sans-serif;
padding: 5px 0;
}

item {
display: block;
padding:10px;
margin: 5px 0;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
background-color: white;
}

channel>title, channel>description, channel>lastBuildDate {
display: block;
margin: 10px;
background-color: #eee;
color: #556B2F;
}

channel>lastBuildDate {
font-size: .8em;
}

channel>lastBuildDate:before {
content:"Letzte Aktualisierung: ";
}

channel>title {
font-size:1.6em;
font-weight:bold;
}

channel>description {
font-size:1em;
margin-bottom:10px;
font-weight:bold;
}

item>title {
font-weight:bold;
}

item>title:after {
content:" \00BB ";
}

item>link {
color: #556B2F;
font-size: .9em;
}

item>link:before {
content:"Link zum Beitrag: ";
color: black;
}

channel>link, channel>language, channel>docs, channel>image {
display: none;
}

Beispiel-Code für das Stylesheet zum Feed V2*:

rss {
display:block;
margin:10px;
padding: 10px 0;
font-size: 62.5%;
}

rss:before {
content:"\00BB  Sie befinden sich auf einem RSS-NewsFeed, nicht auf der Website. Bitte besuchen Sie die Website bueltge.de";
font-size: 2em;
color: red;
margin: 10px;
}

channel {
display:block;
background-color:#eee;
font-size: 1.2em;
font-family: Verdana, Arial, Helvetice, sans-serif;
padding: 5px 0;
}

item {
display: block;
padding:10px;
margin: 5px 0;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
background-color: white;
}

channel>title, channel>description, channel>pubDate {
display: block;
margin: 10px;
background-color: #eee;
color: #556B2F;
}

channel>pubDate {
font-size: .8em;
}

channel>pubDate:before {
content:"Letzte Aktualisierung: ";
}

channel>title {
font-size: 1.6em;
font-weight: bold;
}

channel>description {
font-size: 1.1em;
margin-bottom: 10px;
font-weight: bold;
}

item {
font-size: 0px
}

item>title {
font-weight:bold;
font-size: 12px;
}

item>title:after {
content:" \00BB ";
}

item>link, item>pubDate, item>category {
color: #556B2F;
font-size: 11px;
}

item>link:before {
content:" Link zum Beitrag: ";
color: black;
}

item>pubDate:before {
color: black;
content:" erstellt am: ";
margin-left: 100%;
}

item>category:before {
color: black;
content:" in Kategorie: ";
}

item>description:before {
color: black;
font-weight:bold;
content:" \00BB ";
}

item>description {
font-size: 11px;
margin-left: 100%;
}

item>description:after {
color: black;
font-weight:bold;
content:" \00AB ";
}

channel>link, channel>generator, channel>language, channel>docs, channel>image {
display: none;
}

item>comments, item>guid {

display: none;
}

Weiterführende Links:

• SelfHTML über befor-, after- Pseudoelemente
• XML Transformations with CSS and DOM