Ich habe meinen Blog auf WordPress umgestellt und am Wochenende kam ich auf die spontane Idee meinen WordPress Blog noch einmal eine HTML Validierung mit dem Markup Validation Service des W3C zu gönnen. Dazu muss geschrieben werden, dass das verwendete Theme, als auch die Inhalte davor komplett valide waren. Wie kam es trotzdem zu mehr als hundert Fehlern? Hier eine (vermutlich) unvollständige Liste von Fehlerquellen, die gerne übersehen werden.

Shortcodes

Manche Plugins oder Themes bieten Shortcodes an, um Bloggern aufwendige Formatierungen via HTML und CSS zu ersparen. Auch wenn im Hintergrund CSS-Klassen ausgetauscht werden, sich das HTML-Gerüst für das verwendete Feature ändern oder es komplett ausgetauscht wird, bei der Verwendung von Shortcodes muss nur die Verarbeitung des Shortcodes und nicht jeder einzelne Beitrag angepasst werden.

Eigentlich ganz praktisch, aber WordPress hat eine ebenfalls praktische Funktion, bei der Absätze und Zeilenumbrüche automatisch zu Texten hinzugefügt werden: wpautop. Diese kommt ganz gerne mit Shortcodes in Konflikt.

Beispiele für Shortcodes

Beispiele für die Anwendung von Shortcodes zur Formatierung sind zum Beispiel die Shortcodes zum Einfügen von Bildern mit Bildunterschrift, Bildergalerien, oder diese Box hier.

Verwendet man also zusätzlich Shortcodes zur Formatierung des Textes, so kann es sein, dass diese Shortcodes mit <p>-Tags versehen werden und anschließend

<div>-Tags zurückgeben werden, was zu invaliden Konstruktionen führt: <p><div class="special_shortcode_feature">Etwas Text im Shortcode.</div></p>

Da ich weder auf die Shortcodes, noch auf wpautop verzichten wollte, habe ich kurzerhand einige regulären Ausdrücke geschrieben, die typische Fehler beim Ersetzen von Shortcodes in den von mir verwendeten Themes und Plugins  im Nachhinein korrigieren.

Social Networks

Einige Plugins bieten eine bessere Vernetzung mit sozialen Netzwerken an. Dies funktioniert unter anderem, durch die Generierung zusätzlicher Metadaten, wie zum Beispiel für das Open Graph Protokoll von Facebook. Diese Metadaten sind jedoch nicht kompatibel mit manchen W3C Standards, wie zum Beispiel XHTML. Es gibt Tricks, diese Metadaten vor dem Validierungsservice zu verbergen, jedoch ist es einfacher einen Standard zu wählen, der dieses Protokoll unterstützt, wie zum Beispiel XHTML+RDFa.

CSS Dateien von Plugins

Viele Plugins bringen ihre eigenen CSS Dateien mit, die sie in die Ausgabe von WordPress mit unterbringen. Hierbei sind mir jedoch drei Dinge aufgefallen:

  1. Es gibt Plugins, die sich nicht die Mühe machen, den Link zur CSS Datei via wp_head action hook in den dafür vorgesehenen Bereich zu laden, sondern diesen direkt ausgeben.
  2. Andere Plugins, die eigentlich nur im Backend aktiv sind, geben invalide CSS Links im Frontend aus.
  3. Ein Phänomen, welchem ich bisher noch nicht auf den Grund gegangen bin, ist dass in manchen Themes per wp_head action hook hinzugefügter Code von Widgets nicht mehr in den -Bereich geladen, sondern direkt ausgegeben wird. Dies sorgt ebenfalls für Probleme bei der HTML Validierung.

(X)HTML vs HTML5

Einige Plugins helfen bei der automatischen Generierung zusätzlicher Metadaten, wie zum Beispiel für soziale Netzwerke, RSS Feeds und so weiter. Manche dieser Plugins verwenden hierfür als Ausgabe XHTML kompatiblen Code, andere HTML5 kompatiblen Code. Je nachdem, welche Theme/Pluginkombination man verwendet, kommt es so zu Problemen bei der HTML Validierung.

Meistens lässt sich die Funktionalität dieser Plugins selbst implementieren oder überschreiben. Sollte das nicht der Fall sein, so kann die Ausgabe wieder mit Hilfe von WordPress Filtern und regulären Ausdrücken anpassen.

Manchmal verwenden Plugins, Themes oder WordPress selbst auch Auszeichnungen oder Attribute, die erst in relativ neuen Standards aufgenommen wurden. Verwendet man also ein eher konventionelles Theme mit einem, ist es eventuell nötig, diese Features mit regulären Ausdrücken wieder zu entfernen.

Der More Quicktag

Mit dem More Quicktag lässt sich ein Beitrag in Ausschnitt und Gesamttext unterteilen. Leider übersehen manche Filter oder Editoren dabei, dass der Text nach dem Quicktag abgeschnitten wird, und so geöffnete Tags im Auszug nicht geschlossen werden: <strong>hier kommt gleich der Link <!--more--> und hier geht es weiter.</strong>.

Des Weiteren kommt die schon erwähnte wpautop Funktion manchmal durcheinander, wenn der Quicktag zusammen mit Shortcodes eingesetzt wird und sorgt so für weitere Probleme bei der HTML Validierung.


Ich bin schon gespannt, welche weiteren Problemstellen ich noch entdecken werde und vielleicht veröffentliche ich auch noch eine konkrete Version der angesprochenen Problemlösungen.