Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 02. März 2018

HTML-Code

Dein eigenes WordPress-Theme (Teil 3): Layout anpassen

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:

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.

Entwickler-Werkzeuge

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

und in der footer.php folgenden Code:

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:

Schließe die beiden Container unmittelbar nach

mit

Content
Das Gleiche wiederholst Du für den Content.

beginnt ebenfalls in der header.php (unten). Füge direkt darüber Folgendes ein:

Anschließend schließt Du die beiden div-tags in der footer.php direkt nach

mit

Footer
Aller guten Dinge sind drei. Gib nun für den Footer direkt unterhalb des gerade eingegebenen Codes in der footer.php dies ein:

Die Tags werden unterhalb von

geschlossen mit:

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.170 Pixel 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:

Über .navbar kannst Du den Abstand der Bootstrap-Navigationsleiste nach oben und über .main-content-area den Abstand des Contents zum Footer vergrößern:

Content mittig

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:

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 (Desktop)

Layout mit Sidebar in der Desktop-Ansicht

In der mobilen Ansicht wird das Menü eingeklappt und die Sidebar unterhalb des Inhaltsbereichs platziert:

Layout mobil

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:

Und falls Dich die Listenpunkte in den Widgets stören – weg damit:

Layout Desktop formatiert

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!

Der Autor:

Autor: Christian Lingnau

Ich heiße Christian Lingnau und bin freier Redakteur für Hosting-Themen, insbesondere WordPress.

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden