1. Teil: Das HTML 5 Markup
2. Teil: Erstellung des Stylesheets
3. Teil: HTML 5 Darstellung im IE

Das IE Problem: Darstellung unbekannter Elemente

Wie man bei Peter Kröner nachlesen kann, legen die Internet Explorer 6-8 unbekannte Elemente falsch aus. Aus

<aside>
<h3>Sidebar</h3>
<p>Paragraph...</p>
</aside>

wird mit dem IE:

<aside></aside>
<h3>Sidebar</h3>
<p>Paragraph...</p>
</aside><//aside>

Das schwerwiegende Problem, was sich dadurch ergibt ist, dass Inhalte nicht mehr von den Tags umrandet werden und so schlecht zu formatieren sind.

Javascript Lösung

Die wohl einfachste Möglichkeit diese Problem zu beheben ist es, diese Elemente für den IE neu zu erzeugen. Das geht indem man folgenden Code einbaut:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Dieser sollte in den head Bereich, da der IE, bevor er die neuen Elemente zu Gesicht bekommt, wissen muss was zu tun ist.
Die html5.js- Datei lagert auf Google Code. Wem das nicht zusagt, kann sie natürlich selbst hosten. Mehr Infos zur Datei gibt es hier.

Ein Problem wäre bei diesem Ansatz die Deaktivierung von Javascript. Dadurch wird das ganze natürlich recht unnötig. Daher hier noch eine Ausweg-Möglichkeit.

CSS & Conditional Comments Lösung

Diese Möglichkeit erlaubt es speziell für den IE ausgerichtet ein Stylesheet zu erstellen. Der Nachteil ist der Mehraufwand, welcher dadurch entsteht. Jedoch kann man auch sagen, dass diese Version die Javascript-Lösung komplett ersetzt. In meinem Template kommen trotzdem beide Varianten zum Einsatz, da ich sie natürlich auch ausprobieren wollte!
Zuerst sollte man ein neues Stylesheet für den Internet Explorer anlegen und dieses in die Webseite einbinden. Wenn man eine Kombination aus der obigen Javascript-Version und dieser verwenden möchte, sollte man diese Zeile in die IE-Bedingung einfügen:

<noscript><link rel="stylesheet" href="ie.css" type="text/css" media="screen" /></noscript>

Nun greift der IE nur auf das Stylesheet zurück, wenn Javascript deaktiviert ist.

Um die ganzen Elemente wie header, section, aside und article anzusprechen, braucht man zusätzliche “Formatierungs-Elemente”. Diese fügt man entweder direkt ein.
Beispiel: Direkt eingefügte Zusatz-Elemente

<div id="header">
<header>
...
</header>
</div>

Auch möglich ist es das ganze noch in Conditional Comments zu packen. Dadurch lässt sich leichter unterscheiden, was zum IE gehört und was nicht und lässt sich dann auch leichter herausnehmen, wenn der IE neue Elemente unterstützt.
Beispiel: Element mit Conditional Comments

<!--[if IE]><div id="header"><![endif]-->
<header>
...
</header>
<!--[if IE]></div><![endif]-->

Nun lassen sich im ie.css diese zugefügten Elemente über ihre ID ansprechen. Statt der Formatierung des header-Tags wird nun die ID #header angesprochen und gleich formatiert.
Tipp: Statt um das section#wrap ein div zu spannen, reicht es aus, das body-Element dafür zu nutzen und statt des body-Elements das html-Element zu nutzen.

Weiterhin kann es vorkommen, dass man folgende Situation hat und das h2 formatieren möchte:

<div id=sidebar>
<aside>
  <header>
   <h2>...</h2>
</header>
...

Man könnte jetzt überlegen und den Fehler machen, das h2 so anzusprechen:

#sidebar > * > * > h2

Jedoch sollte man sich noch einmal daran erinnern, wie der IE das unbekannte Element umsetzen möchte:

<div id=sidebar>
<aside></aside>
  <header></header
   <h2>...</h2>
</header><//header>
...

Daraus ergibt sich, dass es keinen direkten Kindelemente gibt unter dem aside. Man muss daher wie folgt das h2 ansprechen:

#sidebar > * + * + h2

Mit diesen Hilfsmitteln kann man dann ein Stylesheet für IE optimieren. Damit sieht das Template auch im Internet Explorer (ab Version 7) korrekt aus.

<code>global $posts;
rewind_posts();
query_posts('cat=0&showposts=10');</code>

Dabei sorgt cat=0 dafür, dass aus allen Kategorien die Posts angezeigt werden und showposts=10, dass genau 10 auf der Seite stehen. Wenn mehr als 10 Posts vorhanden sind erscheint eine Seitennavigation. Der Link der Seitennavigation weist dann z.B auf “paged=2″ oder auch “page/2″ hin.

Wenn der Aufruf auf eine nächste Seite keine Änderung bewirkt, liegt das daran, dass die URL nicht in die query miteinbezogen wird. Die Erweiterung paged='.$paged löst das Problem:

<code>query_posts('cat=0&showposts=10&paged='.$paged);</code>

wp_enqueue_script(jquery);

Dies funktioniert auch einwandfrei.
Als ich meine entsprechende Javascript-Datei mit den Funktionen eingebunden hatte, war mir noch nicht bewusst, dass WordPress dann keine “$” mehr akzeptiert um Konflikte mit anderen Bibliotheken wie Prototype aus dem Weg zu gehen. Demnach werden bei einer Funktion alle $ gegen jQuery ausgetauscht:
Nochmal ein Beispiel, aus:

$(document).ready(function() {
	$("div#images, div#download").addClass('hide');

wird dann:

jQuery(document).ready(function() {
	jQuery("div#images, div#download").addClass('hide');

Weiterführende Links

• Frank Bülgte: JavaScript-Bibliotheken in und aus WordPress nutzen
• aus dem WordPress-Forum Deutschland

Die WordPress-Suche ist nicht gerade die effektivste Lösung, wenn es um das Suchen auf der eigenen Plattform geht. Um trotzdem eine kleine Verbesserung zu erzielen und keine Plugins zu nutzen, zeige ich ein paar Funktionen. Zunächst einmal soll in der Überschrift der Seite die Anzahl der Suchergebnisse und das Suchwort mit ausgegeben werden. Dazu findet man in der Loop die Überschrift der Seite. Man ersetzt mit folgendem:

<code>
<h2><?php echo $wp_query->found_posts; ?> Suchergebnisse für "<?php echo the_search_query(); ?>"</h2>
</code>

Der erste Teil fragt die Anzahl der Suchergebnisse ab und mit the_search_query() wird das gesuchte Wort ausgegeben.

Die Anzahl der auszugebenden Suchergebnisse wird grundlegend über das Backend bestimmt. Die Einstellung findet man über “Einstellungen → Ausgabe → Blogseiten zeigen maximal”. Jedoch bewirkt eine Änderung hier, dass jedes Mal beim Aufruf der Loop genau diese Anzahl an Posts dargestellt wird. Das Problem lässt sich auch wieder direkt in der search.php des Templates lösen mit der query_posts()-Funktion.

<code>
<?php query_posts($query_string . '&post_type=any&showposts=10'); ?>
</code>

Diese Zeile sollte vor Beginn der Loop stehen. Zur Erklärung der Parameter: Die Variable $query_string ist sehr wichtig, da sie dafür sorgt, dass die eigentliche Intention beibehalten wird. Dadurch wird also zunächst einmal der Suchvorgang nicht unterbrochen. Weiterhin wird sowohl in den Artikeln als auch in den Seiten gesucht und die Anzahl der herausgegebenen Suchergebnisse pro Seite auf 10 erhöht.

Bei mir findet die query_posts()-Funktion auch in der archive.php Anwendung, da ich hier auch mehr Posts ausgeben möchte, als grundlegend im Backend eingestellt. Der Einsatz dieser Funktion ist dabei ziemlich vielfältig, wenn es um die Loop geht. Daher lohnt sich ein Blick in die Funktionsreferenz.

Die Navigationshilfe soll eigentlich passende Vorschläge liefern für die falsch eingegebene Adresse. Dies tut sie aber nicht. Glücklicherweise lässt sie sich ausschalten. Auf der Seite sieht man schon einen Link für das Kundencenter, dem folgen, anmelden und ausschalten. Man bekommt den Hinweis, dass dies erst nach einer erneuten Einwahl ins Internet möglich ist. Da jedoch mein Router ständig mit dem Internet verbunden ist, musste ich die Konfiguration nochmal neu laden. Jetzt surfe ich wieder Navigationslos durchs Internet und fühle mich gut dabei die alt bewährte “Adresse nicht gefunden”-Seite zu bekommen.