Wenn wir uns das WordPress Theme-Verzeichnis ansehen, zeigen die meisten Themes Titelbilder. Das ist eine Funktion, die sehr gefragt ist. Der Trend zu Titelbildern zeigt sich auch in den Screenshots des Block Theme-Verzeichnisses.
Betrachten wir das folgende Beispiel von Twenty Twenty (ein klassisches Theme), das eine Cover-Vorlage enthält, die sowohl für einzelne Beiträge als auch für Seiten verwendet werden kann. Dabei wird das Beitragsbild am oberen Rand angezeigt und erstreckt sich über den gesamten Browserbildschirm, mit dem Beitragstitel und anderen gewünschten Metadaten darunter. Cover-Vorlagen ermöglichen die Erstellung von Inhalten, die sich von den traditionellen Beschränkungen der Inhaltsanzeige abheben.
Die Erstellung von Cover-Vorlagen erfordert derzeit das Schreiben von PHP-Code, wie hier in der Standard-Cover-Vorlage des Twenty Twenty Themes erfasst. Wenn wir uns die Datei template-parts/content-cover.php ansehen, enthält sie den Code zur Anzeige von Inhalten, wenn die cover-template verwendet wird.
Daher ist es nicht möglich, eine benutzerdefinierte Cover-Seite zu erstellen, wenn Sie keine tiefen PHP-Kenntnisse besitzen. Für viele normale WordPress-Benutzer ist die einzige Option die Verwendung eines Plugins wie Custom Post Type UI, wie in diesem kurzen Video beschrieben.
Cover-Bereiche in Block-Themes
Seit WordPress 5.8 können Theme-Autoren benutzerdefinierte Vorlagen (wie einzelne Beiträge, Autoren, Kategorien und andere) mit einem oberen Hero-Bereich unter Verwendung des Block-Editors Cover-Blocks erstellen und mit minimalem oder keinem Code in ihre Themes integrieren.
Bevor wir uns ansehen, wie große obere Cover-Bereiche in Block-Theme-Vorlagen erstellt werden, werfen wir einen kurzen Blick auf die beiden Block-Themes Twenty Twenty-Two und Wabi von Rich Tabor (vollständige Rezension hier).
Im Hintergrund implementiert Twenty Twenty-Two eine große Kopfzeile, indem ein verstecktes Bild als Muster in den header-dark-large -Teilen hinzugefügt wird. Im Wabi-Theme hingegen wird die große Hintergrundfarbe der Kopfzeile in einem einzelnen Beitrag mit Akzent-Hintergrundfarben und einem 50px hohen Spacer-Block (Zeilen: 5-9) umgesetzt. Die Akzentfarben werden von der Datei assets/js/accent-colors.js verwaltet.
Viele andere haben sich entschieden, einen oberen Cover-Bereich mit dem Cover-Block zu erstellen, der es Benutzern ermöglichte, die Hintergrundfarbe zu ändern und ein statisches Bild aus der Mediathek hinzuzufügen oder von Mediengeräten hochzuladen – ohne Code schreiben zu müssen. Mit diesem Ansatz mussten Bilder aus dem Beitragsbild-Block manuell zu jedem einzelnen Beitrag hinzugefügt werden, wenn das Beitragsbild als Hintergrundbild in einzelnen Beiträgen verwendet werden sollte.
Cover-Blöcke mit dynamischem Beitragsbild
WordPress 6.0 machte ein weiteres cooles Feature verfügbar: Featured Image Cover Blocks, das die Verwendung des Beitragsbildes jedes Beitrags oder jeder Seite als Hintergrundbild im Cover-Block ermöglicht.
In dem folgenden kurzen Video diskutieren Automattic-Ingenieure das Hinzufügen von Beitragsbildern zu Cover-Blöcken mit einem Beispiel aus dem Archeo-Theme.
Der Bildblock, einschließlich des Beitragsbild-Blocks, kann weiter mit Duotone-Farben in theme.json angepasst werden, wie in diesem kurzen YouTube-Video Connecting The Dots (Automattic's Anne McCarthy) besprochen.
Anwendungsbeispiele (Wei, Bright Mode)
Wenn wir uns die Vorschaubilder im Block-Theme-Verzeichnis ansehen, stellen wir fest, dass die Mehrheit davon große Cover-Header-Bereiche enthält. Wenn wir uns ihre Vorlagendateien ansehen, verwenden sie Cover-Blöcke mit statischem Bildhintergrund.
Einige kürzlich entwickelte Themes verwenden Cover-Blöcke mit dem dynamischen Beitragsbild-Hintergrund (z. B. Archeo, Wei, Frost, Bright Mode usw.). Ein kurzer Überblick über die neue Funktion ist in diesem kurzen GitHub-Video verfügbar.
Durch die Kombination der dynamischen Akzentfarben-Funktionen des Wabi-Themes mit Cover- und Beitragsbild-Blöcken erweitert Rich Tabor seine Kreativität in seinem neuen Wei-Theme (vollständige Rezension hier) weiter, um dynamische Cover-Bilder von einem einzelnen Beitrag anzuzeigen.
In seinem Wei-Ankündigungspost schreibt Rich Tabor: „Im Hintergrund verwendet die Vorlage single.html einen Cover-Block, der das Beitragsbild nutzt. Dann wird die Duotone-Farbe über das für den Beitrag zugewiesene Farbschema angewendet. Auf diese Weise sieht fast jedes Bild gut aus.“
Wenn Sie tiefer in den Header-Cover-Block des Wei-Themes eintauchen und lernen möchten, wie Sie Ihren eigenen erstellen, gibt es hier ein kurzes Video von Fränk Klein (WP Development Courses), der Schritt für Schritt erklärt, wie er erstellt wurde.
Ähnlich wie beim Wei-Theme nutzt Brian Gardner in seinem neuen Bright Mode-Theme ebenfalls einen Cover-Block mit einem Beitragsbild-Block, um herausragende Inhalte mit kräftigen Farben anzuzeigen.
Brian erzählte WPTavern: „Was er an dem Theme am meisten liebt, ist die Art und Weise, wie der Cover-Block auf Einzelansichtsseiten verwendet wird. Er zieht das Beitragsbild in den Cover-Block und bietet auch benutzerdefinierte Blockstile für Schatten und Vollhöhenoptionen. […] Ich habe das Gefühl, dass dies wirklich zeigt, was mit modernem WordPress möglich ist.“
Für weitere Details finden Sie hier die Demo-Site und die vollständige Rezension von Brians Bright Mode-Theme.
Komplexe Layouts mit dem Block-Editor gestalten
Kürzlich hat WordPress einen neuen Block-Editor-gestalteten Landingpage und eine Download-Seite gestartet. Die Ankündigung erzeugte gemischte Reaktionen von seinen Lesern, einschließlich von Matt Mullenweg (Automattic), der sich über die 33 Tage für die Gestaltung und Veröffentlichung einer so „einfachen Seite“ beschwerte. Zusätzliche Diskussionen hinter den Kulissen finden Sie hier.
Als Reaktion darauf erstellte Jamie Marsland von Pootlepress dieses YouTube-Video, in dem er eine nahezu identische Homepage in fast 20 Minuten reproduziert.
In Bezug auf Marslands Video schreibt Sarah Gooding von WP Tavern: „Er ist jemand, den man als Power-User des Block-Editors bezeichnen könnte. Er kann Zeilen, Spalten und Gruppen schnell verschieben, Abstände und Ränder nach Bedarf anpassen und jedem Bereich die entsprechende Farbe für das Design zuweisen. Zu diesem Zeitpunkt ist das nichts, was die meisten durchschnittlichen WordPress-Benutzer tun könnten.“
Obwohl der Block-Editor einen langen Weg zurückgelegt hat, gibt es für die meisten Theme-Entwickler und gewöhnlichen Benutzer immer noch wachsende Schwierigkeiten, komplexe Layouts damit zu erstellen und zu gestalten.
Verbesserungen an den TT2 Gopher Blocks
In diesem Abschnitt werde ich Sie durch die Verbesserungen führen, die ich an dem TT2 Gopher Blocks Theme vorgenommen habe, auf das ich in meinem früheren Artikel Bezug genommen habe. Inspiriert von den Cover-Blöcken der zuvor beschriebenen Themes, wollte ich dem Theme drei Cover-Vorlagen (Autor, Kategorie und Single-Cover) hinzufügen.
Beim Surfen im Internet sehen wir zwei Arten von Cover-Headern. Der am häufigsten beobachtete Header ist ein Cover-Bereich, der mit der Website-Kopfzeile (Website-Titel und obere Navigation) in den Cover-Block integriert ist (z. B. Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode usw.). Wir finden auch Header-Cover-Bereiche, die nicht mit der Website-Kopfzeile integriert sind und direkt darunter positioniert sind, wie z. B. die BBC Future-Website. Für das TT2 Gopher Blocks Theme habe ich mich für Letzteres entschieden.
Erstellung von Cover-Header-Mustern
Zuerst erstellen wir Cover-Header-Muster für Autor-, Einzelbeitrags- und andere Vorlagen (Kategorien, Schlagwörter) mithilfe von Cover-Blöcken. Dann wandeln wir sie in Muster um (wie hier bereits beschrieben) und rufen die entsprechenden Header-Cover-Muster in die Vorlagen auf.
Wenn Sie mit dem Block-Editor vertraut sind, gestalten Sie Ihren Header-Bereich mit Cover-Blöcken im Site-Editor und wandeln Sie dann den Cover-Header-Code in Muster um. Wenn Sie jedoch mit dem FSE-Editor nicht vertraut sind, ist der einfachste Weg, Muster aus dem Musterverzeichnis in einen Beitrag zu kopieren, notwendige Änderungen vorzunehmen und ihn in ein Muster umzuwandeln.
In meinem früheren CSS-Tricks-Artikel habe ich die Erstellung und Verwendung von Block-Mustern im Detail besprochen. Hier ist ein kurzer Überblick über den Workflow, den ich zur Erstellung des Single-Post-Cover-Header-Musters verwende.
Single-Post-Cover-Header-Muster
Schritt 1: Verwenden Sie die FSE-Oberfläche, erstellen Sie eine neue leere Datei und beginnen Sie mit dem Aufbau der Blockstruktur, wie im linken Bereich gezeigt.
Alternativ kann dies zuerst in einem Beitrag oder einer Seite erfolgen und dann die Markierung in eine Musterdatei kopiert werden.
Schritt 2: Um die obige Markierung in ein Muster umzuwandeln, kopieren wir zuerst die Code-Markierung und fügen sie in eine neue /patterns/header-single-cover.php -Datei in unserem Code-Editor ein. Wir sollten auch die erforderliche Musterdatei-Header-Markierung hinzufügen (z. B. Titel, Slug, Kategorien, Inserter usw.).
Hier ist der vollständige Code der /patterns/header-single-cover.php -Datei.
<?php
/**
* Title: Header cover single
* Slug: tt2gopher/header-cover-single
* Categories: tt2gopher-header
* Block Types: core/template-part/header
* inserter: yes
*/
?>
<!-- wp:cover {"url":"https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg","id":100,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->
<div class="wp-block-cover alignfull is-light" style="margin-top:0px;margin-bottom:0px;min-height:50vh"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-100" alt="" src="https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg" style="object-position:40% 37%" data-object-fit="cover" data-object-position="40% 37%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"blockGap":"10px"}},"textColor":"base","layout":{"wideSize":"800px"}} -->
<div class="wp-block-group has-base-color has-text-color has-link-color"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"textColor":"primary","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"},"fontSize":"small"} -->
<div class="wp-block-group has-primary-color has-text-color has-small-font-size"><!-- wp:post-date {"textColor":"foreground"} /-->
<!-- wp:paragraph -->
<p>|</p>
<!-- /wp:paragraph -->
<!-- wp:post-terms {"term":"category","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}}}} /--></div>
<!-- /wp:group -->
<!-- wp:post-title {"textAlign":"center","level":1,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"foreground","fontSize":"max-60"} /--></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->Für diese Demo habe ich dieses Bild aus dem Foto-Verzeichnis als Platzhalter-Hintergrundbild verwendet und die Duotone-Farbe Midnight angewendet. Um das Beitragsbild dynamisch zu verwenden, sollten wir "useFeaturedImage":true zum Cover-Block hinzufügen, indem wir den obigen Platzhalter-Bildlink vor "dimRatio":50 ersetzen, sodass die Zeile 10 wie folgt aussieht.
<!-- wp:cover {"useFeaturedImage":true,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->Alternativ kann das Platzhalterbild auch durch Klicken auf **Ersetzen** und Auswahl der Option **Beitragsbild verwenden** geändert werden.
Nun sollten die Header-Cover-Muster im Muster-Inserter-Panel sichtbar sein und überall in den Vorlagen, Beiträgen und Seiten verwendet werden können.
Archiv-Cover-Header
Inspiriert von diesem WP Tavern-Beitrag und einer Schritt-für-Schritt-Anleitung zur Erstellung einer Autorenvorlagen-Header, wollte ich einen ähnlichen Cover-Header erstellen und auch zum TT2 Gopher-Theme hinzufügen.
Zuerst erstellen wir das Archiv-Cover-Header-Muster für die Vorlage author.html nach dem oben beschriebenen Workflow. In diesem Fall erstelle ich dies auf einer neuen leeren Seite, indem ich Blöcke hinzufüge (wie unten in der Listenansicht gezeigt).
Als Hintergrund für das Cover habe ich das gleiche Bild wie im Single-Post-Cover-Header verwendet.
Da wir eine kurze Autorenbiografie im Autorenblock anzeigen möchten, sollte auch eine biografische Aussage zur Benutzerprofilseite hinzugefügt werden, sonst wird im Frontend ein leerer Bereich angezeigt.
Das Folgende ist der Markierungs-Code des header-author-cover, den wir im nächsten Schritt als Muster verwenden werden.
<!-- wp:cover {"url":"https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg","id":226,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.75"},"minHeight":200,"minHeightUnit":"px","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]}}} -->
<div class="wp-block-cover alignfull is-light" style="min-height:200px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-226" alt="" src="https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg" style="object-position:50% 75%" data-object-fit="cover" data-object-position="50% 75%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"2rem","bottom":"1rem","left":"2rem"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group" style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem"><!-- wp:avatar {"size":70,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /-->
<!-- wp:group -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"flex"},"fontSize":"large"} -->
<div class="wp-block-group has-large-font-size"><!-- wp:paragraph {"textColor":"foreground","fontSize":"large"} -->
<p class="has-foreground-color has-text-color has-large-font-size">Published by:</p>
<!-- /wp:paragraph -->
<!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"large","fontWeight":"600"},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"foreground"} /--></div>
<!-- /wp:group -->
<!-- wp:post-author-biography {"textColor":"foreground","fontSize":"small"} /-->
<!-- wp:separator {"backgroundColor":"foreground"} -->
<hr class="wp-block-separator has-text-color has-foreground-color has-alpha-channel-opacity has-foreground-background-color has-background"/>
<!-- /wp:separator --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->Um die Markierung in ein header-author-cover -Muster umzuwandeln, sollten wir die erforderliche Musterdatei-Header-Markierung wie zuvor beschrieben hinzufügen. Durch Bearbeiten des header-author-cover.php -Musters können wir ähnliche Header-Cover für Schlagwörter, Taxonomien und andere benutzerdefinierte Vorlagen erstellen.
Das Muster header-category-cover.php für meine Vorlage category.html ist auf GitHub verfügbar.
Erstellung von Vorlagen mit Header-Cover-Blöcken
WordPress 6.0 und das kürzlich erschienene Gutenberg 13.7 erweiterten die Funktionen zur Erstellung von Vorlagen in den Block-Editor, wodurch es für viele WordPress-Benutzer ohne tiefgehende Programmierkenntnisse möglich ist, ihre benutzerdefinierten Vorlagen zu erstellen.
Für detailliertere Informationen und Anwendungsfälle finden Sie hier eine ausführliche Anpassungsnotiz von Justin Tadlock.
Der Block-Editor ermöglicht die Erstellung verschiedener Vorlagentypen, einschließlich Cover-Vorlagen. Lassen Sie uns kurz einen Überblick geben, wie die Kombination von Cover-Blöcken und Beitragsbild-Blöcken mit der neuen Vorlagen-UI das einfache Erstellen verschiedener Arten von benutzerdefinierten Cover-Vorlagen auch mit geringen oder keinen Programmierkenntnissen ermöglicht.
Die Erstellung von Vorlagen wurde mit Gutenberg 13.7 erheblich vereinfacht. Wie Block-Vorlagen mit Code und im Site-Editor erstellt werden, wird im Theme-Handbuch und in meinem früheren Artikel beschrieben.
Autorenvorlage mit Cover-Block
Die obere Markierung (Header-Bereich) der Vorlage author.html ist unten gezeigt (Zeile 6).
<!-- wp:template-part {"slug":"header-small-dark","theme":"TT2-GOPHER-V2","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0","bottom":"0px"},"padding":{"bottom":"80px"},"blockGap":"0px"}},"className":"site-content"} -->
<main class="wp-block-group site-content" style="margin-top:0;margin-bottom:0px;padding-bottom:80px">
<!-- wp:pattern {"slug":"tt2gopher/header-author-cover"} /-->
...
...
...
<!-- /wp:group -->
...Hier sind Screenshots von Cover-Headern für die Vorlagen author.html und category.html.
Der gesamte Code für beide Vorlagen ist auf GitHub verfügbar.
Einzelbeitrag mit Cover-Block
Um den Cover-Block in unserem einzelnen Beitrag anzuzeigen, müssen wir das Muster header-cover-single unterhalb des Header-Bereichs (Zeile 3) aufrufen.
<!-- wp:template-part {"slug":"header-small-dark","tagName":"header"} /-->
<!-- wp:pattern {"slug":"tt2gopher/header-cover-single"} /-->
<!-- wp:spacer {"height":32} -->
<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
....
....
....Hier ist eine Bildschirmaufnahme, die die Frontend-Ansicht des einzelnen Beitrags mit dem Header-Cover-Bereich zeigt.
Die gesamte Vorlage single-cover.html ist auf GitHub verfügbar.
Zusätzliche Schritt-für-Schritt-Tutorials zur Erstellung eines Hero-Header-Beitragsbereichs und zur Verwendung von Beitragsbild-Hintergrund-Cover-Blöcken finden Sie auf den Websites WP Tavern und Full Site Editing.
Das war's!
Hilfreiche Ressourcen
Featured Image Cover Block
- Post Featured Image Block (WordPress Support)
- Using the Post Featured Image with the Cover Block YouTube (Dave on WP)
- Cover Block Step by Step tutorial (WordPress Support)
- Featured Cover Blocks and the Future of Binding Data to Generic WordPress Blocks (WP Tavern)
- Custom Single Post Layouts with WordPress Gutenberg (Pootlepress)
- Makes cover block dynamic and adds featured image binding #39658 (GitHub)
Blogbeiträge
- Featured Cover Blocks and the Future of Binding Data to Generic WordPress Blocks (WPTavern)
- Making an Impression: How To Build a Post Hero Header With Blocks (WPTavern)
- Core Editor Improvement: Deeper customization with more template options (Make WordPress Core)
Obwohl Block-Themes im Allgemeinen viel Gegenwind von WordPress-Community-Mitgliedern erfahren, sind sie meiner Meinung nach die Zukunft von WordPress. Mit Block-Themes können Amateur-Theme-Autoren ohne tiefgehende Programmierkenntnisse und Beherrschung von PHP und JavaScript Themes mit komplexen Layouts und einem Hero-Cover-Bereich erstellen, wie in diesem Artikel beschrieben, kombiniert mit Mustern und Stilvarianten.
Als früher Gutenberg-Nutzer bin ich begeistert von den neuen Theme-Tools wie dem Create Block Theme Plugin und anderen, die es Theme-Autoren ermöglichen, Folgendes direkt über die Block-Editor-UI zu erreichen, ohne Code schreiben zu müssen.
- (i) Erstellen
- Theme-Dateien überschreiben und exportieren
- Ein leeres oder ein Child-Theme generieren und
- Stilvariante des aktuellen Themes bearbeiten und speichern.
Zusätzlich ermöglichen die neuesten Iterationen des Gutenberg-Plugins die Aktivierung von flüssiger Typografie und Layout-Ausrichtungen sowie andere stilistische Kontrollen unter Verwendung nur der theme.json -Datei, ohne JavaScript und eine Zeile CSS-Regeln.
Vielen Dank fürs Lesen und teilen Sie Ihre Kommentare und Gedanken unten!
Eine Blockvorlage wird als Liste von Blockelementen definiert. Solche Blöcke können vordefinierte Attribute, Platzhalterinhalte und statisch oder dynamisch sein. Blockvorlagen ermöglichen die Angabe eines Standardzustands für eine Editorsitzung.