Im 4. Teil des Video-Tutorials habe ich die Grundstruktur meines Layouts in den Theme-Dateien angelegt. Heute zeige ich, wie das Layout des WordPress-Themes mit Hilfe von CSS3 Media Queries und dem Viewport meta-tag responsive (engl. für reagierend, ansprechend) machen kann. Ein responsive Layout reagiert auf unterschiedliche Browser-Größen (z.B. bei der Ansicht des Themes auf einem Tablet PC oder einem Smartphone) und passt sich in der Layout-Breite entsprechend an.



Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer Vimeo-Seite.

Hilfreiche Link-Tipps
Codeschnipsel aus dem Video

Die CSS3 Media Queries können entweder über einen Link-tag unterhalb des Links zum style.css Hauptstylesheet innerhalb des head-tags eingefügt werden:

[php]
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="small.css" />
[/php]

oder im style.css Hauptstylesheet unterhalb der CSS-Eigenschaften des Hauptlayouts über @media:

[php]
@media screen and (max-width : 1024px) {
hier CSS-Eigenschaften einfügen
}
[/php]

Außerdem muss noch in der header.php Datei innerhalb des head-tags (möglichst ganz oben) der Viewport meta-tag eingefügt werden:

[php]
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
[/php]

Wenn man dem Nutzer die Zoom-Option in einem mobilen Browsern weiterhin ermöglichen möchte nutzt man:

[php]
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
[/php]

Wenn du weitere Fragen oder Ergänzungen zum Tutorial hast, schreibe mir doch einfach einen Kommentar. Ich freue mich auf deine Nachricht!

Weitere Teile des WordPress Video-Tutorials