Hättest Du gern ein Fullwidth-Layout oder doch lieber eine Sidebar? Mit eigenen HTML-Klassen und CSS kannst Du Dein Theme nach Herzenslust gestalten.
Im zweiten Teil dieser Beitragsserie haben wir gezeigt, wie Du WordPress-Funktionen und Bootstrap-Elemente für die Entwicklung Deines eigenes Themes auf Basis von Underscores verwendest. Unabhängig davon, ob es sich um ein eigenes oder vorgefertigtes Theme handelt: Um möglichst flexibel zu sein, hilft es, die HTML-Struktur anzupassen und dann per CSS zu gestalten. Auf diese Weise kannst Du etwa den Content-Bereich mittig platzieren oder eine Sidebar einfügen.
Wichtig: Diese Anleitung richtet sich an erfahrene Nutzer mit PHP-Kenntnissen. Voraussetzung ist eine lokale WordPress-Installation bzw. ein Hosting-Paket für den Live-Betrieb.
Flexibel ist besser
Underscores teilt den Inhaltsbereich in #Primary (Content) und #Secondary (Sidebar). Die Sidebar befindet sich standardmäßig unterhalb des Content-Bereichs, weil dieser die komplette Breite einnimmt. Um den linksbündigen Content-Bereich in die Mitte zu verschieben, könntest Du einfach folgende CSS-Anweisung verwenden:
#page {
width: 1170px;
margin: 0 auto;
}Das Problem dabei ist allerdings, dass der Content-Bereich auf die angegebene Breite beschränkt bleibt. Nicht möglich wäre daher beispielweise ein Header, der die volle Bildschirmbreite nutzt. Darum ist es besser, auf den globalen #page-Container zu verzichten und stattdessen separate Klassen einzuführen.
Die Bereiche Header, Content und Footer bekommen je zwei Klassen: Eine eigene Klasse (area) für unabhängige CSS-Anpassungen und eine übergeordnete Klasse (main-page). Wir werden zu diesem Zweck drei Dateien anpassen, die im Hauptverzeichnis des Themes liegen: header.php, footer.php und style.css.
Mit den Entwickler-Werkzeugen im Firefox sieht man, dass die neue Klasse „main-content-area“ die volle Breite einnimmt.
HTML-Struktur anpassen
Der Container #page beginnt im Header und endet im Footer. Um ihn zu entfernen, löschst Du in der header.php die Zeile
<div id="page" class="site">
und in der footer.php folgenden Code:
</div><!-- #page -->
Header
Danach fügst Du in der header.php an gleicher Stelle eine Klasse für den Header (.header-area) und direkt darunter (also innerhalb des Containers) die zweite Klasse (main-page) für die gesamte Seite ein:
<div class=“header-area“>
<div class=“main-page“>Schließe die beiden Container unmittelbar nach
</header><!-- #masthead -->
mit
</div> </div>
Content
Das Gleiche wiederholst Du für den Content.
<div id="content" class="site-content">
beginnt ebenfalls in der header.php (unten). Füge direkt darüber Folgendes ein:
<div class="main-content-area">
<div class="main-page">Anschließend schließt Du die beiden div-tags in der footer.php direkt nach
</div><!-- #content -->
mit
</div> </div>
Footer
Aller guten Dinge sind drei. Gib nun für den Footer direkt unterhalb des gerade eingegebenen Codes in der footer.php dies ein:
div class="footer-area">
<div class="main-page">Die Tags werden unterhalb von
</footer><!-- #colophon -->
geschlossen mit:
</div> </div>
Content mittig platzieren
Nun verfügt das Theme über je eine Klasse für Header, Content und Footer, die bei Bedarf die volle Breite nutzen können. Mit der übergeordneten Klasse main-page kannst Du in der style.css eine fixe Breite von 1.170px definieren. Das entspricht der Größe der Bilder, die wir in Teil 2 dieser Serie festgelegt haben. Mit den Anweisungen für #Primary und #Secondary verhindern wir außerdem das Umfließen der Container. So bleibt die Sidebar bzw. der Widgetbereich unterhalb des (mittigen) Contents:
.main-page {
max-width: 1170px;
margin: 0 auto;
}
#primary, #secondary {
float: none;
padding: 0;
width: 100%;
}Über .navbar kannst Du den Abstand der Bootstrap-Navigationsleiste nach oben und über .main-content-area den Abstand des Contents zum Footer vergrößern:
.navbar {
margin-top: 1%;
}
. main-content-area {
padding-bottom: 2%;
}
Mittig platzierte Inhalte mit einer maximalen Breite von 1.170 Pixel
Sidebar einfügen
Falls Du in Deinem Fullwidth-Layout doch die Sidebar vermisst, kannst Du problemlos zur bekannten Blog-Aufteilung wechseln. Dabei solltest Du allerdings die unterschiedlichen Auflösungen von Desktops und mobilen Geräten beachten. Die Bootstrap-Navigationsleiste wechselt bei einer Bildschirmbreite unterhalb von 768 Pixel in den mobilen Modus. An diesem Breakpoint sollte auch die Sidebar nach unten wandern. Ändere dazu die media query in der style.css wie folgt:
@media screen and (min-width: 768px) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
#primary {
float: left;
padding-right: 3%;
width: 66.5%
}
#secondary {
float: left;
width: 33.5%
}
}Damit sagst Du Deinem Theme, dass das Bootstrap-Menü ab einer Bildschirmbreite von 768 Pixeln nicht mehr eingeklappt wird. Mit den zusätzlichen Anweisungen unten legst Du fest, dass der Content zwei Drittel und die Sidebar ein Drittel der Breite einnehmen.
Layout mit Sidebar in der Desktop-Ansicht
In der mobilen Ansicht wird das Menü eingeklappt und die Sidebar unterhalb des Inhaltsbereichs platziert:
Abstände anpassen
Noch zwei Korrekturvorschläge für Schönheitsfehler, die ins Auge fallen: Damit die Meta-Angaben ober- und unterhalb der Beiträge (Datum, Autor, Kategorien etc.) einheitliche Abstände haben, solltest Du deren Außenabstände korrigieren. Zum Beispiel so:
.page-content,
.entry-content,
.entry-summary {
margin: 1% 0;
}Und falls Dich die Listenpunkte in den Widgets stören – weg damit:
.widget-area ul {
list-style-type: none;
margin: 0px;
padding-left: 0px;
}
Schon besser: Korrekte Abstände im Content-Bereich und Widgets ohne Listen
Der Anfang ist gemacht
Ob Fullwidth- oder klassisches Blog-Layout mit Sidebar: Mit den gezeigten Modifikationen der HTML-Struktur hast Du die Gestaltung Deines Themes selbst in der Hand. Wenn Header oder Footer breiter sein sollen als der Inhaltsbereich, verwendest Du die separaten area-Klassen. Farben, Abstände, Schriften kannst Du nach Lust und Laune über die main-page ändern. Viel Erfolg!