Wenn wir die durchsuchen WordPress-Theme-Verzeichnis, zeigen die meisten Themen Titelbilder. Es ist eine Funktion, die häufig nachgefragt wird. Der Titelseiten-Trend setzt sich auch in der Themenverzeichnis blockieren auch Screenshots.
Betrachten wir das folgende Beispiel aus Zwanzig Zwanzig (ein klassisches Thema) mit a Cover-Vorlage Das kann verwendet werden, um sowohl in einem einzelnen Beitrag als auch auf einer Seite angezeigt zu werden, wobei das vorgestellte Bild des Beitrags oben angezeigt wird und sich über den Browserbildschirm erstreckt, mit dem Titel des Beitrags und anderen gewünschten Metadaten darunter. Cover-Vorlagen ermöglichen das Erstellen von Inhalten, die sich von den traditionellen Beschränkungen der Anzeige von Inhalten abheben.
Das Erstellen von Cover-Vorlagen erfordert derzeit das Schreiben von PHP-Code, wie hier in der erfasst Twenty Twenty Cover-Vorlage des Standarddesigns. Betrachten wir die template-parts/content-cover.php Datei, sie enthält die Code zum Anzeigen von Inhalten, wenn die cover-template wird eingesetzt.
Daher ist es nicht möglich, ein individuelles Deckblatt zu erstellen, wenn Sie nicht über fundierte PHP-Kenntnisse verfügen. Für viele normale WordPress-Benutzer besteht die einzige Option darin, Plugins wie zu verwenden Custom Post Type UI wie beschrieben in dieses kurze Video.
Decken Sie Abschnitte in Blockthemen ab
Da WordPress 5.8, können Themenautoren benutzerdefinierte Vorlagen (wie Einzelpost, Autor, Kategorie und andere) mit einem Top-Helden-Abschnitt erstellen Blockeditor Cover-Block und gebündelt in ihre Themen mit minimalem oder keinem Code.
Bevor wir uns damit befassen, wie obere große Cover-Abschnitte in Blockdesign-Vorlagen erstellt werden, wollen wir uns kurz die beiden Blockdesigns ansehen Zwanzig zweiundzwanzig und Wabi von Rich Tabor (vollständige Rezension hier).
Hinter den Kulissen führt Twenty Twenty-Two einen großen Kopfball durch Hinzufügen eines versteckten Bildes, das als Muster gespeichert ist der header-dark-large Teile. Wohingegen im Wabi-Design die Hintergrundfarbe der großen Kopfzeile in einem einzelnen Beitrag mit implementiert wird Akzenthintergrundfarben und einen 50px hohen Abstandsblock (Zeilen: 5-9). Die Akzentfarben werden von verwaltet assets/js/accent-colors.js Datei.
Viele andere entschieden sich dafür, einen oberen Abdeckungsabschnitt mithilfe von zu erstellen Abdeckblock, die es Benutzern ermöglichte, die Hintergrundfarbe zu ändern und ein statisches Bild aus der Medienbibliothek hinzuzufügen oder von Mediengeräten hochzuladen – ohne Code schreiben zu müssen. Mit diesem Ansatz werden Bilder aus der Beitragsbildblock posten musste manuell zu jedem einzelnen Beitrag hinzugefügt werden, wenn Sie das Beitragsbild als Hintergrundbild in einzelnen Beiträgen haben wollten.
Cover-Blöcke mit dynamischem Beitragsbild
WordPress 6.0 stellte ein weiteres cooles zur Verfügung gekennzeichnete Bildabdeckungsblöcke Funktion, mit der das vorgestellte Bild eines beliebigen Beitrags oder einer Seite als Hintergrundbild im Cover-Block verwendet werden kann.
Im Folgenden kurzes Video, Automattic-Ingenieure diskutieren das Hinzufügen von Featured Images zu Cover-Blöcken mit einem Beispiel aus Archaeo Thema:
Der Bildblock, einschließlich des Beitragsbildblocks, kann mithilfe von weiter angepasst werden duotone Farbe in theme.json wie in diesem kurzen besprochen Die Punkte verbinden YouTube-Video (Anne McCarthy von Automattic).
Anwendungsbeispiele (Wei, Heller Modus)
Wenn wir die Miniaturbilder in der durchsuchen Themenverzeichnis blockieren, sehen wir, dass die meisten von ihnen große Kopfzeilenabschnitte enthalten. Wenn wir in ihre Vorlagendateien graben, verwenden sie Abdeckblöcke mit statischem Bildhintergrund.
Einige kürzlich entwickelte Themes verwenden Cover-Blöcke mit dem dynamischen Post-Featured-Bildhintergrund (z. B. Archeo, Wei, Frost, Bright Mode usw.). Einen kurzen Überblick über die neue Funktion gibt es in dieses kurze GitHub-Video.
Die Kombination dynamischer Akzentfarben bietet Merkmale von Wabi Theme mit Cover- und Post-Featured-Image-Blöcken erweitert Rich Tabor seine Kreativität in seinem neuen Wei Thema (vollständige Rezension verfügbar hier), um dynamische Titelbilder aus einem einzelnen Beitrag anzuzeigen.
In seinem Wei-Ankündigungsposten Rich Tabor schreibt: „Hinter den Kulissen, die single.html Die Vorlage verwendet einen Cover-Block, der das Beitragsbild nutzt. Dann wird der Duotone durch das dem Post zugewiesene Farbschema angewendet. Auf diese Weise sieht fast jedes Bild gut aus.“
Wenn Sie tiefer in den Header-Cover-Block des Wei-Themas eintauchen und lernen möchten, wie Sie Ihren eigenen erstellen, finden Sie hier eine kurzes Video für Fränk Klein (WP Development Courses), der Schritt für Schritt erklärt, wie es entstanden ist.
Ähnlich wie beim Wei-Thema, Brian Gardner verwendet auch den Cover-Block mit Post-Featured-Image-Block in seinem letzten Heller Modus Thema, um herausragende Inhalte anzuzeigen leuchtende Farben.
Brian sagte WPTavern: „Er liebt am meisten an dem Thema, wie der Cover Block verwendet wird einzelne Seiten. Es zieht das vorgestellte Bild in den Cover-Block und bietet auch benutzerdefinierte Blockstile für Schatten und Optionen in voller Höhe. […] Ich habe das Gefühl, dass dies wirklich zeigt, was mit modernem WordPress möglich ist.“
Für mehr Details, hier ist es Demo-Website und vollständige Überprüfung von Brians Bright Mode-Thema.
Entwerfen komplexer Layouts mit dem Blockeditor
Vor kurzem hat WordPress einen neuen Blockeditor entwickelt Landing-Homepage und einem Download-Seite. Die Ankündigung stieß auf gemischte Reaktionen von seinen Lesern, einschließlich von Matt Mullenweg (Automattic), der die 33 Tage kommentierte, die für die Gestaltung und den Start einer solchen „einfachen Seite“ benötigt wurden. Sie können finden zusätzliche Diskussionen hinter den Kulissen hier.
Als Reaktion darauf schuf Jamie Marsland von Pootlepress Dieses YouTube-Video wo er in fast 20 Minuten eine nahezu identische Homepage reproduziert.
Kommentar zum Marsland-Video, Sarah Gooding von WP Travern schreibt: „Er ist das, was man als Power-User mit dem Blockeditor bezeichnen könnte. Er kann Zeilen, Spalten und Gruppen schnell mischen, Polsterung und Ränder nach Bedarf anpassen und jedem Abschnitt die entsprechende Farbe für das Design zuweisen. An diesem Punkt ist dies nicht etwas, was die meisten durchschnittlichen WordPress-Benutzer tun könnten.“
Obwohl der Blockeditor einen langen Weg zurückgelegt hat, gibt es für die meisten Theme-Entwickler und normalen Benutzer immer noch wachsende Probleme, komplexe Layouts damit zu erstellen und zu entwerfen.
Hinzufügen von Verbesserungen zu TT2-Gopher-Blöcken
In diesem Abschnitt werde ich Ihnen erklären, wie ich Verbesserungen an der hinzugefügt habe TT2 Gopher Blocks-Design auf die ich in meinem vorherigen Artikel verwiesen habe. Inspiriert von Cover-Blöcken aus Themen, die ich zuvor beschrieben habe, wollte ich dem Thema drei Cover-Vorlagen (Autor, Kategorie und Einzel-Cover) hinzufügen.
Beim Durchsuchen von Websites bemerken wir zwei Arten von Cover-Headern. Der am häufigsten beobachtete Header ist der Cover-Abschnitt, der mit dem Site-Header (Site-Titel und Top-Navigation) in den Cover-Block gemischt wird (z. B. Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode usw.). Wir finden auch einen Header-Cover-Abschnitt, der nicht mit dem Site-Header verschmolzen ist und direkt darunter positioniert ist, wie dieser BBC Future Webseite. Für das Thema TT2 Gopher-Blöcke habe ich mich für letzteres entschieden.
Cover-Header-Muster erstellen
Lassen Sie uns zunächst Cover-Header-Muster für Autoren-, Single- und andere Vorlagen (Kategorien, Tags) mithilfe von Cover-Blöcken erstellen. Dann werden wir sie in Muster umwandeln (wie beschrieben hier vorher) und rufen Sie die jeweiligen Header-Cover-Muster in die Templates auf.
Wenn Sie mit der Arbeit mit dem Blockeditor vertraut sind, entwerfen 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 es am einfachsten, Muster aus dem zu kopieren Musterverzeichnis Nehmen Sie in einem Beitrag die erforderlichen Änderungen vor und konvertieren Sie sie in ein Muster.
In meinem vorheriger CSS-Tricks-Artikel, Ich habe ausführlich über das Erstellen und Verwenden von Blockmustern gesprochen. Hier ist ein kurzer Überblick über den Arbeitsablauf, den ich verwende, um das Header-Muster für einzelne Post-Cover zu erstellen:
Header-Muster für einzelne Pfostenabdeckung
Schritt 1: Lassen Sie uns mit der FSE-Schnittstelle eine neue leere Datei erstellen und mit der Bausteinstruktur beginnen, wie im linken Bereich gezeigt.
Alternativ könnte dies zuerst in einem Beitrag oder einer Seite erfolgen und das Markup später in eine Musterdatei kopiert und eingefügt werden.
Schritt 2: Als nächstes, um das obige Markup in ein Muster zu konvertieren, sollten wir zuerst sein Code-Markup kopieren und in ein neues einfügen /patterns/header-single-cover.php in unserem Code-Editor. Wir sollten auch das erforderliche Musterdatei-Header-Markup hinzufügen (z. B. Titel, Slug, Kategorien, Inserter usw.).
Hier ist der gesamte Code der /patterns/header-single-cover.php Datei:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Schritt 3: Für diese Demo habe ich verwendet dieses Bild aus dem Fotoverzeichnis als Füller-Hintergrundbild und angewendet Mitternacht Duoton-Farbe. Um das Beitragsbild dynamisch zu verwenden, sollten wir hinzufügen "useFeaturedImage":true im Cover-Block, indem Sie den obigen Füllbild-Link direkt vor dem ersetzen "dimRatio":50 so dass die Zeile 10 wie folgt aussehen sollte:
Alternativ könnte das Füllbild auch durch Anklicken verändert werden Ersetzen und Auswählen Beitragsbild verwenden Option:
Jetzt sollten die Header-Cover-Muster im Muster-Einfügefeld sichtbar sein, damit sie überall in den Vorlagen, Beiträgen und Seiten verwendet werden können.
Archiv-Cover-Header
Inspiriert durch diesen WP-Tavern-Beitrag und eine Schritt-für-Schritt-Anleitung zum Erstellen eines Autorenvorlagen-Headers, wollte ich einen ähnlichen Cover-Header erstellen und auch zum TT2-Gopher-Design hinzufügen.
Lassen Sie uns zuerst das Archiv-Cover-Header-Muster für erstellen author.html auch die Vorlage, indem Sie dem obigen Arbeitsablauf folgen. In diesem Fall erstelle ich dies auf einer neuen leeren Seite, indem ich Blöcke hinzufüge (wie unten in der Listenansicht gezeigt):
Im Hintergrund für das Cover habe ich das gleiche Bild verwendet, das im Titel-Cover des einzelnen Beitrags verwendet wurde.
Da wir auf dem Autorenblock eine kurze Autorenbiografie anzeigen möchten, sollte auch auf der Profilseite des Nutzers ein biografisches Statement eingefügt werden, sonst wird im Frontend ein Leerzeichen angezeigt.
Das Folgende ist der Markup-Code der header-author-cover, das wir im nächsten Schritt als Muster verwenden:
Published by:
Um das Markup in a umzuwandeln header-author-cover pattern, sollten wir das erforderliche Header-Markup der Musterdatei hinzufügen, wie zuvor beschrieben. Durch Bearbeiten der header-author-cover.php Muster können wir ähnliche Header-Cover für Tags, Taxonomie und andere benutzerdefinierte Vorlagen erstellen.
Das header-category-cover.php Muster für meine category.html Vorlage ist auf GitHub verfügbar.
Erstellen von Vorlagen mit Header-Cover-Blöcken
WordPress 6.0 und die jüngste Gutenberg 13.7 Erweiterte Funktionen zum Erstellen von Vorlagen in den Blockeditor, wodurch es vielen WordPress-Benutzern ohne tiefgreifende Programmierkenntnisse ermöglicht wird, ihre benutzerdefinierten Vorlagen zu erstellen.
Ausführlichere Informationen und Anwendungsfälle finden Sie hier a gründliche Anpassungsnotiz von Justin Tadlock.
Blockeditor ermöglicht das Erstellen verschiedener Arten von Vorlagen, einschließlich Cover-Vorlagen. Lassen Sie uns einen kurzen Überblick über das Kombinieren geben Abdeckblock und Beitragsbildblock posten Mit der neuen Vorlagen-Benutzeroberfläche können Sie ganz einfach verschiedene Arten von benutzerdefinierten Cover-Vorlagen erstellen, auch ohne oder mit geringen Programmierkenntnissen.
Das Erstellen von Vorlagen wurde mit Gutenberg 13.7 erheblich vereinfacht. So erstellen Sie Blockvorlagen mit Codes und im Site-Editor ist in der beschrieben Themenhandbuch und im meinem vorherigen Artikel.
Autorenvorlage mit Deckblatt
Top (Header-Abschnitt) Markup der author.html Vorlage ist unten dargestellt (Zeile 6):
...
...
...
... Hier sind Screenshots von Cover-Headern für die author.html und category.html Vorlagen:
Die gesamte Code für beide Vorlagen ist auf GitHub verfügbar.
Einzelpfosten mit Abdeckblock
Um den Cover-Block in unserem Einzelbeitrag anzuzeigen, müssen wir die aufrufen header-cover-single pattern unter dem Header-Bereich (Zeile 3):
....
....
....Hier ist eine Bildschirmaufnahme, die die Vorderansicht des einzelnen Beitrags mit dem Header-Cover-Abschnitt zeigt:
Die gesamte single-cover.html Vorlage ist auf GitHub verfügbar.
Hier finden Sie zusätzliche Schritt-für-Schritt-Anleitungen zum Erstellen einer Abschnitt "Held Header Post". und Verwenden von Post-Featured-Image-Hintergrund-Cover-Blöcken on WP Tavern und Vollständige Site-Bearbeitung Webseite.
Hier hast du es!
Hilfreiche Ressourcen
Ausgewählter Bild-Abdeckungsblock
Blog
Obwohl die Blockthemen im Allgemeinen sind viel Gegenwind von Mitgliedern der WordPress-Community bekommen, meiner Meinung nach, Sie sind die Zukunft von WordPress, zu. Mit Block-Themen können Amateur-Themenautoren ohne tiefgreifende Programmierkenntnisse und Beherrschung von PHP- und JavaScript-Sprachen jetzt Themen mit komplexen Layouts mit einem Hero-Cover-Abschnitt erstellen, wie in diesem Artikel beschrieben, kombiniert mit Muster und Stilvariationen.
Als früher Gutenberg-Benutzer könnte ich nicht begeisterter sein von den neuen Theming-Tools wie Blockthema erstellen Plugin und andere, mit denen Themenautoren direkt von der Blockeditor-Benutzeroberfläche aus Folgendes erreichen können, ohne Code schreiben zu müssen:
- (I) erstellen
- (ii) Themendateien überschreiben und exportieren
- (iii) ein leeres oder untergeordnetes Thema generieren und
- (iv) Stilvariationen des aktuellen Themas ändern und speichern
Darüber hinaus ermöglichen die jüngsten Iterationen des Gutenberg-Plugins die Aktivierung flüssige Typografie und Layout-Ausrichtungen und andere stilistische Steuerelemente nur mit theme.json Datei ohne JavaScript und eine Reihe von CSS-Regeln.
Vielen Dank für das Lesen und Teilen Ihrer Kommentare und Gedanken unten!
