Twenty Sixteen: Das neue Standard-Theme für WordPress in der Kurzvorstellung

Am Dienstag wurde das neue Standard-Theme für WordPress, Twenty Sixteen, vorgestellt. Seit gestern ist das Theme im GitHub-Repository von WordPress zu finden und kann ausprobiert werden. Hier stelle ich euch das Theme kurz vor.

Der erste Eindruck: Schlicht und aufgeräumt

Bei Twenty Sixteen wird der Fokus klar auf den Inhalt gelegt. Der Aufbau der Übersichtsseiten ist linear, die Sidebar lässt sich ausblenden, indem keine Widgets zugewiesen werden. Im Header gibt es besonders viel Weißraum, die Navigation ist rechts horizontal positioniert.

In breiteren Viewports sind die Meta-Informationen der Beiträge links neben dem Inhalt angeordnet. Wenn der Viewport schmaler wird, rutschen die Informationen in horizontaler Anordnung untern den Inhalt des Beitrags. Wenn zu wenig Platz für die Sidebar ist, wird diese nach unten verschoben – die Navigation lässt sich in dem Fall über eine Menü-Schaltfläche einblenden.

Die Beitragsübersicht in Twenty Sixteen. Das Featured Image geht über die komplette Breite, die Meta-Informationen stehen links vom eingerückten Inhalt. Unter der Überschrift wird der Auszug angezeigt. (Screenshot: Eigene WordPress-Installation)
Die Beitragsübersicht in Twenty Sixteen. Das Featured Image geht über die komplette Breite, die Meta-Informationen stehen links vom eingerückten Inhalt. Unter der Überschrift wird der Auszug angezeigt. (Screenshot: eigene WordPress-Installation)

Wie ihr auf dem Screenshot sehen könnt, wird das Featured Image über die komplette Breite des Inhalts angezeigt. Der hervorgehobene Satz direkt unter dem Beitragstitel ist der Auszug, den ihr im Backend festlegen könnt.

Im Footer finden Links zu Social-Media-Profilen Platz, die ihr über ein Menü einfügen könnt. Das müsst ihr dann lediglich mit euren Links befüllen und der Menüposition „Social Links Menu“ zuordnen.

Twenty Sixteen: Möglichkeiten im Customizer

Wie bei Twenty Fifteen können auch bei Twenty Sixteen verschiedene Farbschemata ausgewählt werden. Neben dem Standard-Schema könnt ihr aus vier voreingestellten Farbkombinationen wählen. Zusätzlich könnt ihr die einzelnen Farbwerte auch individuell verändern.

Die Auswahl der Farben im Customizer. (Screenshot: eigene WordPress-Installation)
Die Auswahl der Farben im Customizer. (Screenshot: eigene WordPress-Installation)

Wie gewohnt könnt ihr ein Header-Bild festlegen, das dann zwischen dem Header und dem Inhaltsbereich angezeigt wird. Das Hintergrundbild ist nur am Rand der Website zu sehen, der im Normalzustand schwarz ist. Widgets lassen sich einmal in der Sidebar einfügen und zudem gibt es noch zwei Widget-Bereiche, die unter dem Seiteninhalt angezeigt werden.

Nette Details

Die verschiedenen Ausrichtungen der Blockzitate. (Screenshot: eigene WordPress-Installation)
Die verschiedenen Ausrichtungen der Blockzitate. (Screenshot: eigene WordPress-Installation)

Ein Detail fiel bei den Screenshots in dem Make/Core-Beitrag zu Twenty Sixteen ziemlich schnell auf: Die Möglichkeit, in den leeren Bereich links von dem Inhalt auszubrechen. Das könnt ihr mit Zitaten und Bildern erreichen. Das blockquote-Tag muss dafür die Klasse alignleft bekommen. Für die rechte Ausrichtung, die ihr auf dem Screenshot auch sehen könnt, gibt es entsprechend die Klasse alignright.

Für das Bild nutzt ihr die Klasse size-big. Dann wird das Bild so dargestellt, wie ihr es in dem folgenden Screenshot sehen könnt.

Auch Bilder können in Twenty Sixteen hervorgehoben werden. (Screenshot: eigene WordPress-Installation)
Auch Bilder können in Twenty Sixteen hervorgehoben werden. (Screenshot: eigene WordPress-Installation)

Wenn ihr das Theme schon mal selbst ausprobieren möchtet, könnt ihr es auf der GitHub-Seite herunterladen und ganz normal über das Backend hochladen.

Was haltet ihr von Twenty Sixteen?

5 Reaktionen zu »Twenty Sixteen: Das neue Standard-Theme für WordPress in der Kurzvorstellung«

  1. Hi Florian,

    ich schaue mir gerade den Code vom 2016er an. Da wird schon eine Menge Flexbox gebraucht. Das finde ich sehr spannend und macht mich neugierig, was noch so unter der Haube steckt.

    Walter

  2. Hi,

    nutze das Theme auch. Meine Bilder werden jedoch nicht angezeigt, sondern nur die alt-Tags. Hast du eine Idee woran das liegen kann? Außerdem, würde ich gerne den Textbereich etwas schmaler machen. Bin leider absoluter CSS Anfänger 🙁

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert