Advertisement
  1. Code
  2. WordPress Themes

Twenty Nineteen Teardown: Verwendung von dem neuen WordPress-Standardthemas

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Twenty Nineteen ist das neueste derzeit verfügbare WordPress-Standardthema und wurde in die WordPress 5.0-Version aufgenommen. Es ist bereits mit über 800.000 aktiven Installationen sehr beliebt.

Twenty Nineteen ThemeTwenty Nineteen ThemeTwenty Nineteen Theme

Es ist auch für WordPress.com-Benutzer verfügbar, was die Benutzerbasis noch weiter erhöht. Es wird als minimales und nicht generisches Thema mit einfacher, aber ausgefeilter Typografie beschrieben und unterstützt mehrere Sprachen, darunter:

  • Arabisch
  • Chinesisch
  • griechisch
  • hebräisch
  • japanisch
  • Koreanisch
  • Thai

Das Design ist so konzipiert, dass es eine Vielzahl verschiedener Arten von Websites anspricht, z.B. ein Fotoblog, ein Blog für kleine Unternehmen, gemeinnützige Organisationen oder typografieorientierte Blogs.

Ich persönlich mag das Design und bin mir sicher, dass es auch weiterhin gut funktionieren wird. Es fühlt sich leicht und zugänglich an, ist angenehm für das Auge und profitiert von einem sehr netten und eleganten Aussehen.

Das minimalistische Design kann jedoch einige Benutzer polarisieren, die eher nach einer Designaussage aus einem Standard-WordPress-Design suchen. Es ist jedoch noch früh, und ich bin sicher, dass mehr Ressourcen zur Verfügung stehen, mit denen Benutzer Twenty Nineteen anpassen können. Dies wird zu einer weiteren positiven Akzeptanz beitragen.

Wenn Sie jedoch der Meinung sind, dass Sie es stark anpassen müssen, ist es möglicherweise weniger aufwendig, stattdessen mit einem alternativen Thema zu beginnen. Ich kann jedoch sehen, dass dieses Thema auf textintensiven Websites (d.h. Blogs) sehr beliebt ist. Die Typografie, der Abstand und das minimalistische Design scheinen sehr gut zu dieser Art von Site zu passen.

Für Theme-Entwickler

Wenn Sie WordPress-Themes entwickeln, werden Sie wahrscheinlich an den Funktionen von Twenty Nineteen interessiert sein. Und insbesondere, wie es mit dem neuen Editor (Code namens Gutenberg) funktioniert, der in WordPress 5.0 enthalten ist.

Twenty Nineteen wurde sorgfältig entwickelt, um nahtlos mit dem neuen Editor zusammenzuarbeiten, und dient als Demonstration für die ordnungsgemäße Integration in ihn. Wenn Sie diese neue Methode zum Erstellen von Seiteninhalten mit Blöcken in Ihrem Thema nicht unterstützen, wird sie in Zukunft nur eine sehr begrenzte Anziehungskraft haben. Kurzfristig vielleicht nicht so sehr, aber ich gehe davon aus, dass die Benutzer schnell wachsen werden, um eine enge Editorintegration als Mindestanforderung für Themen zu erwarten.

Das Bearbeitungserlebnis ist sehr raffiniert und passt die Admin-Ansicht so genau wie möglich an die Front-End-Ansicht an. Auf jeden in WordPress 5.0 enthaltenen Kernblock werden benutzerdefinierte Stile angewendet, die dem Thema entsprechen. Und das macht es ziemlich gut.

In der Regel ist es vorteilhaft, Themen in einem regelmäßigen Entwicklungszyklus zu halten, um sie mit den neuesten Best Practices für Funktionen zu aktualisieren, die von einem modernen Thema erwartet werden. Vor diesem Hintergrund ist das Twenty Nineteen-Thema ein guter Maßstab, mit dem Sie Ihr Thema vergleichen können.

Wenn Sie mit dem beliebten WordPress-Starter-Thema _s vertraut sind, haben Sie einen Vorsprung, da Twenty Nineteen teilweise auf diesem und einem anderen Thema basiert: dem Gutenberg-Starter-Thema.

Funktionen auf einen Blick

Schauen wir uns nun einige der herausragenden Funktionen von Twenty Nineteen an. Bevor wir dies tun, ist es erwähnenswert, dass die Themenversion, die wir für diesen Artikel verwenden, Version 1.2 ist. Wenn Sie eine spätere Version verwenden, haben sich möglicherweise einige der Designfunktionen in der Zwischenzeit geändert.

Der vielleicht am schnellsten wahrnehmbare Aspekt von Twenty Nineteen ist der Mangel an Seitenleistenunterstützung. Standardmäßig sind Sie auf allen Seiten auf ein einziges Spaltenlayout beschränkt. Wenn Sie also sofort mehrspaltige Layouts verwenden möchten, werden Sie enttäuscht sein.

Unter dem Inhalt der Website gibt es ein Fußzeilen-Widget-Bereich. Einige mögen sagen, dass dies technisch gesehen eine Seitenleiste ist, aber seien Sie nicht verwirrt. Sie kann nicht verwendet werden, um eine Seitenleiste im herkömmlichen Sinne des Spaltenlayouts anzuzeigen. es sei denn, Sie setzen natürlich eine benutzerdefinierte CSS-Zauberei ein!

Footer widget areaFooter widget areaFooter widget area

Ausgewählte Bilder können zu Posts und Seiten hinzugefügt werden. Für optimale Ergebnisse wird eine Größe von 2000 x 1200 Pixel empfohlen. Es gibt sogar eine Themenoption im Customizer, mit der Sie die Farbe aller vorgestellten Bilder tönen können.

Featured imageFeatured imageFeatured image

Sie können das Abtönen über den Customizer aktivieren. Öffnen Sie es einfach und klicken Sie auf das Menü Farben. Aktivieren Sie dann das Kontrollkästchen Filter mit der Primärfarbe auf ausgewählte Bilder anwenden.

Apply tinting to featured imageApply tinting to featured imageApply tinting to featured image

Unabhängig davon, welches Bild als ausgewähltes Bild festgelegt ist, wird es beim Laden der Seite mit 100vh angezeigt. Dieses Gerät gibt den Prozentsatz der Höhe des Ansichtsfensters im Browserfenster an.

Unabhängig davon, welches Gerät Sie verwenden oder wie hoch das Browserfenster derzeit ist, ist die Angabe von 100vh immer eine Höhe des Browser-Ansichtsfensters (d.h. Des sichtbaren Bereichs des Browserfensters).

Über denselben Einstellungsbildschirm für Customizer können Sie auch eine benutzerdefinierte Akzentfarbe für ein Thema über ein neues Steuerelement für die Farbauswahl festlegen. Das sieht gut aus und die Steuerung fühlt sich beim Ziehen des Schiebereglers ziemlich geschickt an, um die Farben in Echtzeit zu aktualisieren.

Theme color settingsTheme color settingsTheme color settings

Wenn Sie jedoch einen bestimmten Farbwert festlegen möchten, gibt es keine offensichtliche Möglichkeit, dies zu tun, was etwas verwirrend ist. Mit den Cursortasten nach links und rechts können Sie den Schiebereglerwert etwas genauer steuern. Der Schrittwert des Schiebereglers reicht jedoch nicht aus, um jeden möglichen Farbwert abzudecken. Es wäre sinnvoller gewesen, auch ein Texteingabesteuerelement anzuzeigen, damit genaue Farbwerte eingegeben werden können.

Ein weiteres Feature, das Twenty Nineteen unterstützt, ist ein Site-Logo, das auch über den Customizer konfiguriert werden kann. Wenn Sie auf Site Identity und dann auf Select Logo klicken, wird das Dialogfeld WordPress-Medien angezeigt. Laden Sie einfach ein Bild hoch oder wählen Sie ein vorhandenes Bild aus der Medienbibliothek als neues Logo aus. Es wird dann in das Customizer-Bedienfeld und in das Vorschaufenster eingefügt.

Adding site logoAdding site logoAdding site logo

Es spielt keine große Rolle, wie groß das für das Logo verwendete Bild ist, aber ich würde empfehlen, eines mit passenden Abmessungen für Breite und Höhe zu verwenden. Sie haben jedoch die Möglichkeit, das Bild vor dem Einfügen in den Customizer zuzuschneiden, wenn das Bildseitenverhältnis nicht nahe bei 1:1 liegt.

Möglicherweise ist die Logo-Funktion jedoch etwas einschränkend, da nur ein kleines, abgerundetes Logo links neben dem Titel und dem Slogan der Website angezeigt wird. Beim Bewegen des Mauszeigers wird auch ein dunkler Kreis um das Logo gerendert.

Wenn Sie ein rechteckigeres Logo wünschen, das Flexibilität bei der Positionierung und Größe erfordert, müssen Sie benutzerdefinierte Stile anwenden. Es müsste auch ein Filter angewendet werden, um die Standardquadratabmessungen an Ihr Logo anzupassen.

Bei den Navigationsmenüs registriert Twenty Nineteen drei separate Positionen, an denen Sie einzelne Menüelemente anzeigen können.

  • Primary
  • Footer Menu/Fußzeilenmenü
  • Social Links Menu/Menü Soziale Links

Die Menüpositionen des Primary und des Footer Menu sind Standardmenüs, und Sie fügen Menüelemente auf die übliche Weise hinzu. Das Primary unterstützt auch Untermenüelemente, das Footer Menu jedoch nicht standardmäßig.

Primary menu supports sub menu itemsPrimary menu supports sub menu itemsPrimary menu supports sub menu items

Hier sehen Sie dasselbe Menü, das für das Footer Menu verwendet wird, das diesmal nur eine flache Liste von Links ausgibt.

Footer menu outputs flat list of menu itemsFooter menu outputs flat list of menu itemsFooter menu outputs flat list of menu items

Das Social Links Menu erwartet hingegen, dass Sie Links zu Ihren Social-Media-Profilen hinzufügen. Fügen Sie im Customizer-Menü-Editor eine benutzerdefinierte URL für jedes Social Media-Profil hinzu, das angezeigt werden soll. Wenn der Link mit einer der unterstützten Social-Media-Sites übereinstimmt, wird er im Menü durch ein Symbol ersetzt, das der angegebenen Social-Media-Domain entspricht.

Social links menuSocial links menuSocial links menu

Die Farben der Social Links Media-Symbole werden invertiert, wenn ein ausgewähltes Bild auf die Seite angewendet wird.

Social links menu colors when tinting applied to featured imageSocial links menu colors when tinting applied to featured imageSocial links menu colors when tinting applied to featured image

Unterstützte Social Media Links umfassen:

  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Pinterest
  • Twitter
  • YouTube und viele mehr

Editor-Unterstützung

Wie bereits erwähnt, lässt sich Twenty Nineteen sehr gut in den neuen WordPress 5 Gutenberg-Editor integrieren. Dazu wird explizit angegeben, welche Kernfunktionen des Editors über die Funktion add_theme_support() unterstützt werden. Es gibt mehrere Aufrufe dieser Funktion in Twenty Nineteen in functions.php, die sich im Stammdesignordner befindet.

Die für die Blockunterstützung relevanten Aufrufe von add_theme_support() sind:

  • add_theme_support( 'wp-block-styles' )
  • add_theme_support( 'align-wide' )
  • add_theme_support( 'editor-styles' )
  • add_theme_support( 'editor-font-sizes' )
  • add_theme_support( 'editor-color-palette' )

Jedes dieser Elemente stellt eine Besonderheit des neuen Editors dar. Schauen wir uns die einzelnen nacheinander an.

Unterstützung für Blockstile

Im Editor werden auf alle Kernblöcke Standardstile angewendet, damit sie sofort wiedergegeben werden können. Diese Standardblockstile werden jedoch standardmäßig nicht im Front-End angewendet, es sei denn, Sie fügen dies Ihrem Thema hinzu:

Sie können natürlich jeden der wichtigsten Standardstile nach Bedarf überschreiben, aber es ist eine gute Idee, diese zu unterstützen, sodass Sie nur die Stile überschreiben müssen, die Sie benötigen, anstatt alles von Grund auf neu zu definieren.

Richten Sie die Unterstützung für breite Themen aus

Wenn diese Funktion aktiviert ist, haben Sie jetzt zwei zusätzliche Ausrichtungsoptionen im Editor: Weit ausrichten und Voll ausrichten.

New block alignment optionsNew block alignment optionsNew block alignment options

Diese Optionen sind nicht für alle Blöcke verfügbar, werden jedoch von den meisten Blöcken unterstützt, einschließlich des Bildblocks, des Galerieblocks und des Tabellenblocks.

Es liegt an Ihnen, die tatsächlichen Stile für diese Funktion zu implementieren, da WordPress dem entsprechenden HTML-Element des Block-Wrappers nur alignwide- oder alignfull-CSS-Klassen hinzufügt. Keine Sorge, Twenty Nineteen enthält alle erforderlichen Stile, die für Inhalte mit großer und voller Breite erforderlich sind, sodass Sie standardmäßig nichts anderes tun müssen.

Unterstützung für Editor-Stile

Hier geschieht die Magie, die die eigentliche Arbeit erledigt, die Nachbearbeitungserfahrung mit dem Frontend abzugleichen. Alles was benötigt wird ist:

Leider ist es nicht ganz so einfach. Sie müssen WordPress auch auf das Stylesheet verweisen, mit dem Sie Editor-Stile überschreiben möchten, um sie an die Front-End-Stile anzupassen.

Twenty Nineteen verwendet dazu die Datei style-editor.css im Stammverzeichnis des Themas.

Unterstützung für Editor-Schriftgrößen-Themen

Bei bestimmten Blöcken wie dem Absatzblock können Sie aus einer voreingestellten Liste von Schriftgrößen auswählen. Dies kann über add_theme_support( 'editor-font-sizes' ) angepasst werden. Zu diesem Zweck wird ein Array als zweiter Parameter übergeben, der die neuen Schriftarten enthält.

Twenty Nineteen fügt vier einzigartige Schriftgrößen wie folgt hinzu:

Block font size optionsBlock font size optionsBlock font size options

Unterstützung für Editor-Farbpalettenthemen

Der WordPress-Editor implementiert eine Standardfarbpalette, mit der Kernblöcke formatiert werden können. Und wie Sie vielleicht erraten haben, können diese Farben angepasst werden.

Twenty Nineteen implementiert seine eigene Blockfarbpalette wie folgt:

Dadurch werden der benutzerdefinierten Farbpalette fünf einzigartige Farben hinzugefügt: PrimarySecondaryDark GrayLight GrayWhite.

Block color palette optionsBlock color palette optionsBlock color palette options

Werkzeuge

Heutzutage ist es ziemlich üblich, dass Themen und Plugins Tools enthalten, die beim Erstellen und Kompilieren der endgültigen Quellcodedateien helfen. Dies kann beispielsweise das Ausführen von JavaScript-Code über den Babel-Compiler umfassen, wenn Sie in Ihrem Projekt React- oder ES6+ -Code verwenden möchten. Ein weiterer häufiger Anwendungsfall ist das Kompilieren von SCSS- oder WENIGER Code bis hin zu CSS.

Andere Beispiele für Erstellungsschritte sind:

  • Quellcode in eine Zip-Datei packen
  • Sprachübersetzung
  • Bildoptimierung
  • Dateiminimierung
  • Unit-Tests ausführen
  • Einsatz

Dies ist keine vollständige Liste. Es gibt so viel, was Sie mit Nachbearbeitung und Automatisierung tun können, weshalb es viele Tutorial-Serien gibt, die sich ausschließlich diesem Thema widmen!

Twenty Nineteen enthält benutzerdefinierte Skripte in package.json, die sich im Stammordner befinden, um die verschiedenen SCSS-Dateien in CSS zu kompilieren.

Zusätzlich werden alle relevanten CSS-Herstellerpräfixe zum endgültigen CSS-Code hinzugefügt, und eine RTL-CSS-Datei wird aus der Hauptdatei style.css erstellt. Dies erfolgt über RTLCSS, sodass Sie keine separaten RTL- und LTR-Stylesheets erstellen und verwalten müssen. Codieren Sie einfach die LTR wie gewohnt und RTLCSS erstellt automatisch die RTL-Stylesheet-Version für Sie. Ordentlich wie?

Es lohnt sich, sich die in Twenty Nineteen enthaltenen Skripte genauer anzusehen, da sie leicht für andere Themen oder sogar für ein untergeordnetes Thema wiederverwendet werden können.

Stylesheets

Twenty Nineteen verwendet normalize.css (8.0.0), um sinnvolle CSS-Standardeinstellungen für alle führenden Browser zu definieren. Im Allgemeinen scheint es eine beträchtliche Anzahl von Stilen zu geben, die eine breite Palette von Szenarien abdecken, einschließlich der vollständigen RTL-Unterstützung.

Im Stammordner finden Sie bestimmte Stile für:

  • Hauptthema Stile (style.css)
  • Customizer-spezifische Stile (style-editor-customizer.css)
  • Admin-Editor-spezifische Stile (style-editor.css)
  • Automatisch generierte RTL-Stile (style-rtl.css)
  • Drucken von neunundzwanzig Webseiten (print.css)

Jedes Stylesheet wurde in SCSS erstellt und über Skripte in package.json wie zuvor erwähnt in CSS kompiliert.

Various style sheets included with Twenty NineteenVarious style sheets included with Twenty NineteenVarious style sheets included with Twenty Nineteen

Die Zukunft

Twenty Nineteen ist ein poliertes, solides Thema und eine gute Wahl, um die neuen Funktionen von WordPress 5.0 zu demonstrieren. Dies gilt insbesondere für den neuen Editor, der aufgrund der sorgfältigen Gestaltung der Editorblöcke, die den Front-End-Stilen entsprechen, ein sehr angenehmes Bearbeitungserlebnis darstellt.

Das Thema verbessert sich jedoch ständig, und in den kommenden Versionen sind zahlreiche Änderungen geplant. Einige der vorgeschlagenen Aktualisierungen umfassen:

  • Suchoption im Seitenkopf hinzufügen
  • Starterinhalt aus der Themendemo hinzufügen
  • Machen Sie die Standard-Primärfarbe filterbar
  • Verbesserungen des mobilen Menüs auf Touchscreen-Geräten

Diese und viele weitere anstehende Änderungen finden Sie auf der WordPress Core Trac-Seite.

Und schlussendlich...

Insgesamt ist Twenty Nineteen eine großartige Neuerung in der Sammlung der Standard-WordPress-Themes. Ich habe es bisher sehr genossen und empfehle dringend, es auszuprobieren, wenn Sie es noch nicht getan haben.

Lassen Sie mich in den Kommentaren wissen, was Sie von dem neuen Standardthema halten? Planen Sie, es an einem Ihrer Produktionsstandorte einzusetzen? Wenn ja, welche Art von Website(n) haben Sie im Sinn?

Ich werde dieses Tutorial bald mit einer ein- oder zweiteiligen Serie über die Erweiterung von Twenty Nineteen über ein untergeordnetes Thema fortsetzen. Wenn Sie also etwas Besonderes sehen möchten, lassen Sie es mich in den Kommentaren wissen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.