Twenty Nineteen – das neue WordPress Theme

Das Upgrade auf WordPress 5.x hat in den einschlägigen Nachrichten mächtige Wellen produziert. Viele beschrieben es als das grösste Update von WordPress, das es je gab. Technisch enthielt das Upgrade eigentlich „nur“ einen neuen Editor, schloss ein paar Sicherheitslücken und enthielt ein neues Theme. Der Editor verändert jedoch die Art und Weise, wie Beiträge erstellt werden. Im alten Editor war ein Beitrag ein einziger grosser „Klumpen HTML“. Im neuen Editor ist es im Hintergrund zwar immer noch ein grosser HTML Klumpen, es ist jetzt allerdings möglich und notwendig, einzelne Blöcke zu definieren und so einen Beitrag zu strukturieren. Wenn der neue Editor mit dem verwendeten Theme harmoniert, lassen sich jetzt ganz ohne spezielle Site Builder Plugins auch unterschiedliche Layout Elemente im Editor definieren.

Was das bedeutet, zeigt dieses Video sehr schön:

WordPress 5.0 „Bebo“

Hinweis: Wem diese neue und bunte Welt nicht gefällt, der kann sich einfach das Classic Editor Plugin installieren und alles ist wie vorher.

Eine Website erstellen – einfach so …

Du kannst mit WordPress direkt nach der Installation ohne zusätzliche Themes und Plugins „einfach so“ eine ansprechende Website erstellen! Für diesen Zweck wurde WordPress entwickelt und der neue Gutenberg Editor macht dir die Erstellung einfacher als je zuvor.

Twenty Nineteen

Also los, dann erstellen wir doch mal eine Website mit dem neuen Theme Twenty Nineteen.
Zunächst musst du das Theme aktivieren.
Auf einer neu installierten WordPress Site ist es bereits aktiviert, auf einer bereits existierenden Site kannst du es unter Design – Themes aktivieren.

Aktiviertes Twenty Nineteen Theme

Anpassen im Customizer

Jedes WordPress Theme lässt sich auch ohne Programmierkenntnisse im sogenannten Customizer konfigurieren.

Customizer

Im Customizer befinden sich auf der linken Seite die Einstellungsmöglichkeiten und auf der rechten Seite deine Website. Hier erscheint eine Vorschau deiner Anpassungen. Erst ein Klick auf den Veröffentlichen Button stellt deine Anpassungen live. Du kannst in der Vorschau ganz normal auf der Site navigieren. Im unteren Bereich sind drei Icons für die Ansicht auf einem PC Bildschirm, einem Tablet und einem Telefon.

Vorschau auf unterschiedlichen Geräten

Website-Informationen

Deine Website sollte einen Titel und einen Untertitel, ein Logo und natürlich ein Website-Icon haben, welches in Browser-Tabs erscheint und wenn die Seite als Lesezeichen gespeichert wird.

Website-Informationen

Farben

Twenty Nineteen bietet die Möglichkeit genau eine, die „primäre“, Farbe zu bestimmen. Standardmässig ist es ein Blau, wenn du den Radio Button Individuell auswählst, erscheint eine Farbauswahlmöglichkeit.
Damit der Effekt besser sichtbar wird, solltest du zu deinem Hallo Welt Beitrag ein Beitragsbild hochladen. Ein Beitragsbild ist auch hilfreich wenn du deinen Artikel auf sozialen Medien teilst weil dieses Beitragsbild im jeweiligen Posting angezeigt wird. Bearbeite einfach den Beitrag und lade in der rechten Seitenleiste ein Bild hoch.

Beitragsbild im Editor

Wenn du zurück in den Customizer wechselst und den Punkt Farben auswählst, siehst du das Beitragsbild in der Vorschau mit einem blauen Filter. Die primäre Farbe gilt auch für den Filter. Wenn dir das nicht gefällt, kannst du den Filter deaktivieren.

Farben

In der Liste der Beiträge, in einem Blog die Startseite, erscheinen die Beiträge mit ihren Beitragsbildern untereinander. In der einzelnen Beitragsansicht wird das Beitragsbild als Hintergrundbild im Header verwendet.

Beitragsansicht

Wenn du den Filter deaktivierst, so wird das Hintergrundbild abgedunkelt.

Beitragsansicht mit unterschiedlichen Filtern

Menüs

Twenty Nineteen hat drei Menüpositionen. Primär (oben), Footer (unten) und ein Social-Links-Menü unterhalb des primären Menüs.
Die Menüs lassen sich von hier aus auch erzeugen und mit Links füllen.
Die Icons im Social-Links-Menü erscheinen automatisch, abhängig vom Domainnamen für die gängigen sozialen Netzwerke.

Menüs

Widgets

Widgets in WordPress sind vordefinierte Blöcke, die neben dem Beitragsinhalt, der innerhalb des Editors erzeugt wird, positioniert werden. Bei Twenty Nineteen werden sie unterhalb des Beitragsinhalts in Spalten angezeigt. Du kannst die Widgets per Drag and Drop umsortieren, neue hinzufügen und existierende löschen. Standardmässig stehen bereits viele Widgets zur Verfügung. Zusätzlich installierte Plugin bringen oft eigene Widgets mit, die dann auch hier angezeigt werden.

Startseiten-Einstellungen

Wenn du dein WordPress als Blog benutzt, möchtest du vermutlich deine letzten Beiträge auf der Startseite sehen. Wenn du eine einzelne statische Seite als Startseite haben möchtest, kannst du es hier einstellen. Die Startseite kann ein Beitrag oder eine statische Seite sein

Startseiten-Einstellung

Zusätzliches CSS

In diesem Bereich kannst du deiner Kreativität freien Lauf lassen und CSS Befehle schreiben, die das Layout und das Design des Themes erweitern. Hier hinzugefügte CSS Befehle bleiben auch nach einem Update des Themes erhalten. Als einfaches Beispiel kannst du die Überschrift (h2) in einer anderen Farbe anzeigen.

Zusätzliches CSS

Auch wenn dieses Beispiel sehr einfach gewählt ist, so kannst du mit zusätzlichem CSS sehr weitgehende Änderungen machen. Hier ein Beispiel mit der eigenen Handschrift als Font.

Veröffentlichen

Der Veröffentlichen Button kann ebenfalls konfiguriert werden. Durch einen Klick auf das Zahnrad rechts neben dem Button wird ein weiterer Konfigurationsdialog aufgerufen. Es ist möglich, die Änderungen zu speichern und einen Vorschaulink an einen Dritten zu verschicken. Es ist ebenfalls möglich, die Änderungen zu einem bestimmten Zeitpunkt zu veröffentlichen.

Veröffentlichen

Das sind die Anpassungen, die du am Twenty Nineteen Theme sehr einfach vornehmen kannst.

„Volle Breite“ im Gutenberg Editor

Die Beitragsinhalte kannst du bereits im Editor „layouten“.

Der Spalten-Block im Gutenberg bietet dir beispielsweise die Möglichkeit beliebig viele Spalten nebeneinander anzuordnen. Die Spalten können dann in der Breite des Textes, einer „weiten“ Breite oder der „vollen“ Breite dargestellt werden.

Spalten im Text in voller oder weiter Breite

Das Ergebnis kannst du bereits im Editor sehen …

und natürlich auch auf der Website:

Volle Breite im Beitrag

Die Volle Breite lässt sich auch für Bilder nutzen …

Bild in voller Breite

Farben und Effekte für Absätze

Ein einfacher Absatz mit Text kann farblich verändert werden. Damit lassen sich natürlich auch Texte innerhalb von Spalten formatieren.

Unter anderem durch diese Effekt lassen sich ansprechende Beiträge und Seiten erstellen, die sich im Ergebnis nicht vor einem Sitebuilder Plugin verstecken müssen.

Fazit

Das Twenty Nineteen Theme in Kombination mit dem Gutenberg Editor erleichtert das Erstellen einer Website ungemein. Alle beschriebenen Funktionen sind bereits ohne Zusatzplugins im WordPress Core verfügbar. Es sind zahlreiche Zusatz Plugins für Gutenberg verfügbar die weitere Effekte erlauben.


tl;dr: Bau doch mal eine Website – einfach so!

Autor: hagengraf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Ein Gedanke zu „Twenty Nineteen – das neue WordPress Theme“

  1. lieber Autor, der Artikel ist sehr informativ. Mir fehlt noch ein Punkt: Wie kann ich ein großes Eingangsbild auf den Monitor zaubern, das dann auf Klick der Startseite Platz macht? Vielen Dank für die Antwort Frank Müller

Kommentar verfassen