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

 

Menu

Veröffentlicht am: 29. April 2016

WordPress Child Theme: Twenty Sixteen schöner machen

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:

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

Strohballen, Baum und ein Himmel voll Holz: ohne Anpassung scheint der Hintergrund durch die Bilder.

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.

Der Autor:

Autor: Christian Lingnau

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

9 Kommentare

  1. Martin Scharfe sagte am 3. Januar 2017 um 13:54:

    Wie kann ich Farbe und Größe der Überschrift (Gelbe Pflanze entdeckt) ändern?

    Antworten
    • Christian Lingnau sagte am 5. Januar 2017 um 17:04:

      Hallo Martin,

      du findest die Stelle in der CSS-Datei (Zeile 1703). Als Schriftfarbe (color) gibst du dort die gewünschte hexadezimale Zeichenfolge ein (z. B. #f90 für ein schönes Orange) und für die Schriftgröße (font-size) z. B. 1.2em (für 120 Prozent). Das sieht dann so aus:
      .entry-title a {
      color: #f90;
      font-size: 1.2em
      }
      Damit die Farbe beim Hovern und Klicken bleibt, müsstest du die nachfolgenden Zeilen in der CSS-Datei ebenfalls entsprechend anpassen (entry-title a:hover, .entry-title a:focus).

      Viele Grüße
      Christian

      Antworten
  2. Andre sagte am 28. Juli 2017 um 22:00:

    Hallo Christian,

    sehr lehrreicher Artikel. Ich habe folgende Frage an dich:

    Wie kann ich im Twenty Sixtenn den Header-Bereich in der gesamten Breite der Darstellung (Blogtitel und Untertitel) mit einer Farbe hinterlegen (z.B. ein dezentes Grau) und gleichzeitig dafür sorgen, dass der Button „Menue“ im Header-Bereich weiss bleibt.

    Besten Dank für deine Antwort
    Andre

    Antworten
  3. Saskia Menges sagte am 16. März 2018 um 15:41:

    Hallo Christian,
    ich würde in dem Theme gerne einfach nur kurze Einleitungen auf einen Artikel verfassen, aktuell ist es so, dass immer direkt der ganze Artikel angezeigt wird. Schön fände ich es, wenn man einige Sätze lesen kann und dann auf den Artikel klickt, wenn man weiter lesen möchte. Gibt es da auch eine Möglichkeit?
    Vielen Dank vorab,
    Saskia

    Antworten
    • Christian Lingnau sagte am 17. März 2018 um 18:44:

      Hallo Saskia,
      dazu musst du nur an der gewünschten Stelle einen more-/Weiterlesen-tag einfügen. Im Editor, wo du deinen Beitrag eingibst, gibt es oben in der Werkzeugleiste einen entprechenden Button. Dann zeigt WordPress auf der Startseite nur die Wörter bis dahin an und fügt einen Weiterlesen-Link ein, über den man auf die Beitragsseite kommt.
      Viele Grüße
      Christian

      Antworten

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

Oliver Meiners
Schreibt über alles, was für Dich als STRATO Kunde wichtig ist

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

Ann-Christin Schmitt
Schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent