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
- ausführliche Infos zur Verwendung von CSS3 Media Queries bei W3C.org
- hilfreicher Artikel zum Viewport meta-tag von David B. Calhoun
- die Eigenschaften des Viewport meta-tags in einer übersichtlichen Tabelle in der Safari Developer Library
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:
<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:
@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:
<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:
<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
- WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes
- WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
- WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
- WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
- WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme
- WordPress Video-Tutorial Teil 1: WordPress lokal installieren
Schreibe einen Kommentar