Das Standard-Theme von WordPress ist Dir zu langweilig? Mit der folgenden Anleitung für ein Twenty Sixteen Child Theme hebst Du Dein Blog von der Masse ab.
Twenty Sixteen ist modern, flexibel und als Standard-Theme weit verbreitet. Doch nicht jeder mag die Seitenleiste oder den eintönigen Hintergrund. In diesem Beitrag zeigen wir, wie Du Twenty Sixteen mit wenigen Handgriffen in ein Foto-Theme verwandelst:
- ohne Sidebar
- mit großen Bildern
- und einem transparenten Hintergrund
Das Child Theme gibt es am Ende als Download. Voraussetzungen für die Anpassungen sind ein Hosting-Paket mit FTP-Zugriff, eine aktuelle WordPress-Version inkl. Twenty Sixteen sowie Kenntnisse in WordPress und CSS.
![Screenshot Twenty Sixteen ohne Anpassungen]()
Twenty Sixteen ohne Anpassungen: klassisches Blog-Design mit Sidebar und charakteristischem Rand
So sieht unser Twenty Sixteen Child Theme am Ende aus:
![Screenshot Twenty Sixteen Child]()
Child Theme anlegen
Als Erstes legen wir das Child Theme an. Layout-Änderungen, die über die Einstellungen des WordPress Customizers hinausgehen, sollten immer per Child Theme vorgenommen werden. Sonst kann es passieren, dass die Änderungen mit dem nächsten Theme-Update wieder verschwinden. Um das Child Theme anzulegen, folgen wir dieser Schritt-für-Schritt-Anleitung.
a) CSS Datei anlegen
Ein Child Theme benötigt immer mindestens eine CSS-Datei, eine PHP-Datei und (optional) ein Vorschaubild. Die zu erstellende CSS-Datei bekommt die Bezeichnung style.css. Zunächst gibst Du nur die üblichen Informationen zum Theme ein. Wichtig ist hier vor allem die korrekte Angabe des Eltern-Templates – in unserem Fall twentysixteen. Der Anfang der CSS-Datei des Child Themes sieht so aus:
![Screenshot CSS: Template-Informationen]()
b) PHP-Datei anlegen
Die zweite Datei bezeichnen wir functions.php und verknüpfen damit Child Theme und Eltern-Theme:
![Screenshot Code functions.php]()
c) Vorschaubild festlegen
Das Vorschaubild wird im Backend in der Theme-Übersicht angezeigt. Weil Du noch keine Änderungen vorgenommen hast, kannst Du den Screenshot am Ende machen und dann erst hochladen. Die Datei muss screenshot.png heißen und sollte ein Seitenverhältnis von 4:3 haben.
Das Child Theme kannst Du entweder als .zip-Datei über das WordPress-Backend (Design -> Themes -> Installieren -> Theme hochladen) oder per FTP in einem Ordner namens twentysixteen-child hochladen. Nach dem Upload aktvierst Du das das Child Theme in WordPress (Design -> Themes).
Anschließend sieht das Blog aber noch genauso aus wie Twenty Sixteen. Warum? Das Child Theme übernimmt sämtliche CSS-Eigenschaften des Eltern-Themes, bis diese durch eigene Definitionen überschrieben werden.
Tipp: Entwickler-Werkzeuge des Browsers nutzen
Nachdem die Grundlagen erstellt sind, fängt der Spaß erst richtig an. Um einzelne Elemente der Website zu erfassen, nutzen wir den sogenannten Inspektor im Firefox: einfach F12-Taste drücken, Auswahlmodus aktivieren und mit der Maus über den gewünschten Bereich fahren.
Mit dem Inspektor erhalten wir die aktuellen CSS-Anweisungen (Selektoren, Eigenschaften) für jedes Seitenelement. Außerdem können wir unsere gewünschten Anpassungen live und gefahrlos testen, bevor wir sie in unser Stylesheet schreiben.
Diese Entwickler-Werkzeuge gibt es auch für andere Browser wie Chrome und Safari.
![Entwickler Werzeug Inspektor im Firefox]()
Entwickler-Werkzeuge Firefox (Inspektor): links HTML, rechts CSS
CSS anpassen
Die nachfolgenden Anpassungen (a) – c)) musst Du natürlich nicht alle durchführen. Wenn Dir zum Beispiel die Sidebar gefällt, überspringst Du den Schritt einfach. Du kannst die Änderungen nach Belieben anpassen und in den Entwickler-Werkzeugen testen. Danach schreibst Du die entsprechende Anweisung in die style.css unterhalb von /* Eigene CSS-Eigenschaften ab hier einfügen */. Eindeutige Kommentare wie dieser werden Dir helfen, die Anpassungen auch später nachvollziehen zu können.
a) Sidebar entfernen und volle Breite nutzen
Für unser Foto-Blog möchten wir die Sidebar entfernen beziehungsweise verstecken. Dadurch schaffen wir zusätzlichen Platz für Texte und Bilder. Mit unserer ersten CSS-Anweisung verstecken wir die Sidebar inkl. Widgets. Wichtig: Es muss mindestens ein Widget in der (versteckten) Sidebar aktiv sein, damit dieser Schritt funktioniert.
Mit folgendem Code verstecken wir die Sidebar und nutzen den kompletten Content-Bereich:
![CSS-Code zum Sidebar verstecken]()
Auf die meisten Widgets in der Sidebar können wir verzichten. Wir brauchen nur das Kategorien-Widget, da es beim Navigieren hilft. Kein Problem: Wir verschieben einfach unsere Kategorien ins Menü. In WordPress rufen wir über Design -> Menüs unser primäres Menü auf und erstellen einen Menüpunkt namens Kategorien mit entsprechenden Unterpunkten.
![Menüstruktur in WordPress]()
Menüs in WordPress: Unterpunkte werden einfach per Drag & Drop an die gewünschte Position gezogen.
b) Hintergrundbild und Transparenz hinzufügen
Bei Twenty Sixteen kannst Du ein Hintergrundbild hinzufügen. Davon bekommst Du aber nur den Rand zu sehen, weil der darüber liegende Seitenbereich einfarbig ist. Um das Hintergrundbild komplett sichtbar zu machen, brauchst Du einen transparenten Seitenbereich.
1. Hintergrundbild einrichten
Für unser Beispiel-Blog haben wir einfach unsere Schreibtischplatte aus Buche fotografiert und hochgeladen (Design -> Anpassen -> Hintergrundbild). Nach dem Upload wählen wir die Optionen Wiederholen, Zentriert und Fixiert. Grundsätzlich sollte ein Hintergrundbild wenige Farben haben, damit es nicht ablenkt.
![Hintergrundbild-Einstellungen]()
Hintergrundbild-Einstellungen in Twenty Sixteen (Child)
2. Transparenz hinzufügen
Damit die Schrift vor dem Hintergrund gut zu lesen ist, muss der Kontrast möglichst groß sein. Wir entscheiden uns für die Farbvorlage „dunkel“ (Anpassen -> Farben -> Basis-Farbvorlage). Alternativ können die Farben natürlich auch manuell angepasst werden.
Mit dieser CSS-Anweisung machen wir anschließend den Seitenbereich transparent:
![CSS-Code für Transparenz]()
Je nach Hintergrundbild können andere Werte besser geeignet sein. Die im Code gezeigten rgba-Angaben verbinden die drei bekannten RGB-Werte mit einem Wert für die Transparenz zwischen 0 und 1.
Wenn beispielsweise der Kontrast von weißer Schrift zum Hintergrund zu gering ist, erhöhst Du die Deckkraft auf 0.4 oder mehr. Vielleicht ist die Schrift sogar dann noch gut zu lesen, wenn Du den Seitenbereich komplett transparent machst. Einfach ausprobieren!
3. Bilder anpassen
Wenn wir jetzt mit der Maus über ein Vorschaubild hovern, mischen sich Hinter- und Vordergrund:
![Bild mit Hintergrund vermischt]()
Wir müssen also dafür sorgen, dass die verlinkten Elemente volle Deckkraft (opacity) bekommen. Dazu ergänzen wir die CSS-Datei um folgende Zeilen:
![CSS-Code für mehr Deckkraft]()
In einem Foto-Blog sollten die Vorschaubilder möglichst groß angezeigt werden. Nachdem die Sidebar ausgeblendet ist, steht Dir eine Breite von 1.200 Pixeln zur Verfügung. Unter Einstellungen -> Medien lassen sich neue Vorschaubilder auf die richtige Größe bringen.
![Medien-Einstellungen in WordPress]()
Die bestehenden Bilder kannst Du mit dem Plugin Regenerate Thumbnails nachträglich anpassen. Nach der Installation und Aktivierung wählst Du Werkzeuge -> Vorschaubilder reg. -> Regeneriere alle Vorschaubilder.
Ein Blick aufs Frontend zeigt, dass sich Fotos auf Fotohintergrund nicht gut machen. Um die Bilder von unserem Schreibtisch abzugrenzen, versehen wir sie mit einem 3 Pixel breiten weißen Rand. Wer auf Sofortbildkamera-Flair steht, macht den Rand breiter. ![:)]()
c) Header optimieren
Die folgenden beiden CSS-Anweisungen betreffen den Kopfbereich. Um den großzügigen Abstand zwischen oberen Rand und Blogtitel zu verringern, kannst Du den Innenabstand (padding) auf 0px setzen.
![CSS-Code für Header]()
Außerdem ist beim Untertitel der Zeilenabstand zu klein geraten, so dass die Schrift teilweise unten abgeschnitten wird. Mit einer letzten CSS-Anpassung ist auch das erledigt:
![CSS-Code für Header]()
So sieht der Kopfbereich vorher (oben) und nachher aus:
![Screenshot Header vorher und nachher]()
Vom Standard zum individuellen Layout
Es gibt gute Gründe, auf Twenty Sixteen als Eltern-Theme zu setzen. Das Layout ist flexibel und bietet im Customizer viele Einstellungsmöglichkeiten. Weil das Theme das schon neue Responsive Preview Feature unterstützt, kannst Du direkt sehen, wie die Anpassungen auf mobilen Geräten aussehen. Als Standard wird Twenty Sixteen noch einige Jahre mit Updates versorgt. Und weil es häufig eingesetzt wird, bist Du bei Problemen nicht allein.
Unser einfaches Child Theme zeigt, wie man Twenty Sixteen mit Hilfe des Customizers und wenigen CSS-Anweisungen komplett umbauen kann. Dabei ist das nur ein Einstieg: Über Media Queries lassen sich zum Beispiel verschiedene Bildschirmgrößen bedienen und mit PHP Funktionen integrieren. Als Belohnung winkt ein einzigartiges Theme, das alles andere als Standard ist.
Unser Twenty Sixteen Child Theme inkl. Hintergrundbild kannst Du hier herunterladen.