So stellen Sie sich WordPress -Block -Themen -Cover -Vorlagen mit dynamischen Post -Feature -Bildern an

Dynamische Cover -Vorlage im WordPress -Thema: Verwenden Sie vorgestellte Bildblöcke, um die Benutzererfahrung zu verbessern

Viele WordPress -Themen enthalten Cover -Bilder, was eine beliebte Funktion ist. Dieser Trend zeigt sich auch in Screenshots des Blockthema -Katalogs.

Das zwanzig zwanzig Thema als Beispiel enthält eine Cover -Vorlage, die in einzelnen Artikeln und Seiten verwendet werden kann. Die vorgestellten Bilder des Artikels werden oben angezeigt, wobei der gesamte Browserbildschirm mit dem Artikel -Titel und anderen Metadaten unten überspannt wird. Deckvorlagen ermöglichen die Erstellung von Inhalten, die sich von der traditionellen Art der Anzeige von Inhalten unterscheiden.

Derzeit muss eine Cover -Vorlage erstellt werden, um PHP -Code zu schreiben, z. B. die Cover -Vorlage für zwanzig Standardthema. In der Datei template-parts/content-cover.php enthält es Code, um Inhalte anzuzeigen, wenn die Deckungsvorlage verwendet wird.

Für gewöhnliche WordPress -Benutzer, die nicht in PHP verfügen, besteht die einzige Option darin, Plugins wie die benutzerdefinierte Benutzeroberfläche zu verwenden, wie im Video gezeigt.

Blockblock in Blockthema

abdecken

Beginnend mit WordPress 5.8 können Themenautoren den Cover -Block des Blockeditors verwenden, um eine benutzerdefinierte Vorlage (z. B. einzelne Beiträge, Autoren, Kategorien usw.) zu erstellen und sie in das Thema aufzunehmen, ohne zu schreiben oder nur eine kleine Menge Code.

Bevor Sie mit dem Erstellen großer Coverblöcke in Block-Themenvorlagen eintauchen, werfen wir kurz einen Blick auf die beiden Blockthemen von 222 und Wabi von Rich Tabor.

header-dark-large 22undzwanzig implementiert große Titel, indem ein verstecktes Bild als Schemaspeicher im Abschnitt assets/js/accent-colors.js hinzugefügt wird. Im WABI-Thema wird die Hintergrundfarbe eines einzelnen Artikels mit großer Title erreicht, indem die Hintergrundfarbe und ein 50px-Höhenintervallblock betont werden. Die Betonung der Farben werden von

Dateien verwaltet.

Viele andere Themen verwenden Coverblöcke, um Top -Cover -Blöcke zu erstellen. Dadurch kann der Benutzer die Hintergrundfarbe ändern und statische Bilder hinzufügen, ohne Code zu schreiben. Wenn Sie das vorgestellte Bild des Artikels als Hintergrundbild eines einzelnen Artikel verwenden möchten, müssen Sie das Bild jedem einzelnen Artikel manuell hinzufügen.

Cover -Block mit dynamischem Artikel enthalten Bilder

WordPress 6.0 bietet eine coole Feature -Bildcover -Blockfunktion, die die Verwendung von Bildern eines beliebigen Artikel oder einer Seite als Hintergrundbild des Cover -Blocks ermöglicht.

Im kurzen Video unten diskutierten Automattic Engineers, wie man den Cover -Block vorstellte Bilder hinzufügt, und demonstrierten sie mit dem Archaeo -Thema als Beispiel:

theme.json Die Bildblöcke, die die speziellen Bilder des Artikels enthalten, können mit den zweifarbigen Farben in

weiter angepasst werden.

Benutzerfall (Wei, Bright -Modus)

Beim Durchsuchen von Miniaturbildern im Blockthema -Verzeichnis sehen wir, dass die meisten Bilder große Cover -Titelblöcke enthalten. Wenn Sie tiefer in ihre Vorlagendateien eintauchen, werden Sie feststellen, dass sie Deckblöcke mit statischen Bildhintergründen verwenden.

Einige kürzlich entwickelte Themen verwenden Coverblöcke mit Hintergründen von dynamischen Artikeln (z. B. Archaeo, Wei, Frost, Bright -Modus usw.). Eine kurze Übersicht über diese neue Funktion finden Sie im GitHub -Video.

Rich Tabor kombiniert die dynamischen Akzentfarbenfunktionen des WABI -Themas mit Cover- und Post -Bildblöcken und erweitert seine Kreativität in seinem neuen Thema weiter, um dynamische Cover -Bilder aus einem einzigen Beitrag anzuzeigen.

In seinem WEI-Ankündigungsartikel schrieb Rich Tabor: "Hintergrund Die Szenen verwendet die single.html -Schamplatte einen Cover-Block, der die vorgestellten Bilder des Artikels nutzt. Dann wird ein Zwei-Tone-Block über das dem Artikel zugewiesene Farbschema angewendet. Auf diese Weise wird fast jedes Bild gut aussehen."

Wenn Sie einen tieferen Blick auf die Titel -Cover -Blöcke von Wei -Themen sehen und lernen möchten, wie Sie Ihre eigenen Coverblöcke erstellen, finden Sie hier ein kurzes Video von Fränk Klein (WP -Entwicklungskurse), das seinen Erstellungsprozess Schritt für Schritt erklärt.

Ähnlich wie bei Wei -Thema verwendete Brian Gardner auch einen Cover -Block mit Post -Bildblöcken in seinem neuesten Hell -Modus -Thema, um überzeugende Inhalte und leuchtende Farben zu zeigen.

Brian sagte zu WPTAVERVern: "Sein Lieblingsthema ist, wie Coverblöcke auf einer einzelnen Seite verwendet werden. Es zieht Bilder in den Coverblock und bietet benutzerdefinierte Blockstile für Schatten und Optionen mit voller Höhe.

Weitere Informationen finden Sie auf der Website der Demo und der vollständigen Überprüfung des Brian's Bright Mode -Themas.

Entwerfen Sie komplexe Layouts mit dem Block -Editor

Kürzlich hat WordPress einen neuen Block -Editor zum Entwerfen von Login -Home -Seiten und Downloadseiten veröffentlicht. Die Ankündigung löste verschiedene Reaktionen von Lesern aus, darunter Matt Mullenweg von Automatic, der die 33 Tage kommentierte, die es brauchte, um eine solche "einfache Seite" zu entwerfen und zu veröffentlichen. Hier finden Sie andere Diskussionen hinter den Kulissen.

Als Reaktion darauf erstellte Jamie Marsland von Pootlepress dieses YouTube -Video und erstellte in fast 20 Minuten eine nahezu identische Homepage.

WP Traverns Sarah Gooding kommentierte Marslands Video: "Er kann als erfahrener Benutzer des Blockeditors sein. Er kann schnell Zeilen, Spalten und Gruppen anpassen, Pads und Ränder bei Bedarf anpassen und jedem Block entsprechende Designfarben zuweisen.

Obwohl Blockeditor große Fortschritte erzielt hat, gibt es immer noch einige Schwierigkeiten beim Erstellen und Entwerfen komplexer Layouts für die meisten Themenentwickler und durchschnittlichen Benutzer.

Verbesserungen zu TT2 -Gopher -Blöcken

hinzufügen

In diesem Abschnitt werde ich Sie durchführen, indem ich das Thema TT2 Gopher Blocks hinzufügt, das ich in meinem vorherigen Beitrag erwähnt habe. Inspiriert von den Coverblöcken im zuvor beschriebenen Thema wollte ich dem Thema drei Cover -Vorlagen (Autor, Kategorie und einseitiges Cover) hinzufügen.

Beim Durchsuchen der Website werden wir zwei Arten von Cover -Titeln bemerken. Der häufigste Titel ist, dass der Cover-Block mit dem Website-Titel (Site-Titel und Top-Navigation) in den Coverblock (z. B. zwanzig, zwanzig zweiundzwanzig, Wei, Wabi, Frost, Bright-Modus usw.) verschmolzen ist. Wir werden auch feststellen, dass sich der Titel -Cover -Block nicht mit dem Website -Titel einfügt, sondern sich direkt darunter befindet, z. B. die BBC Future -Website. Für das Thema TT2 Gopher Blocks habe ich mich für das letztere entschieden.

Cover -Titelmodus erstellen

Erstellen wir zunächst ein Cover -Titelmuster für Autoren, Einzelartikel und andere Vorlagen (Kategorie, Etikett) mit dem Cover -Block. Wir wandeln sie dann in Muster um und rufen das entsprechende Titelabdeckungsmuster in die Vorlage auf.

Wenn Sie mit Blockeditor vertraut sind, entwerfen Sie Ihren Titelblock mit Coverblöcken im Site -Editor und konvertieren den Cover -Titelcode in ein Muster. Wenn Sie jedoch mit dem FSE -Editor nicht vertraut sind, besteht der einfachste Weg, das Muster aus dem Musterverzeichnis im Artikel zu kopieren, die erforderlichen Änderungen vorzunehmen und es dann in das Muster umzuwandeln.

In meinem vorherigen CSS-Tricks-Artikel habe ich die Erstellung und Verwendung von Blockmustern ausführlich besprochen. Hier finden Sie einen Überblick über den Workflow zum Erstellen eines einzelnen Artikel -Cover -Titelmusters:

Einzelartikel -Cover Titelmodus

Schritt 1 : Verwenden der FSE -Schnittstelle erstellen wir eine neue leere Datei und erstellen Sie die im linken Feld angezeigte Blockstruktur.

Alternativ kann dies zuerst in einem Artikel oder einer Seite erfolgen und dann das Markup in die Schema -Datei kopieren und einfügen.

Schritt 2 : Als nächstes sollten wir die obige Marke in den Modus umwandeln, wir sollten zuerst die Code -Marke kopieren und in eine neue -Datei im Code -Editor einfügen. Wir sollten auch die erforderlichen Schema -Datei -Titel -Tags hinzufügen (z. B. Titel, Slug, Kategorie, Inserter usw.). /patterns/header-single-cover.php

Folgendes ist der vollständige Code der

Datei: /patterns/header-single-cover.php

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

Schritt 3 : Für diese Demonstration habe ich dieses Bild aus dem Photos-Verzeichnis als Füllhintergrundbild verwendet und die Mitternacht zweifarbige Farbe angewendet. Um das ausgestellte Bild dynamisch zu verwenden, sollten wir vor dimRatio:50 hinzufügen, indem wir den oben genannten Füllbildlink ersetzen, damit Zeile 10 so aussieht: "useFeaturedImage":true

<code></code>

Alternativ können Sie auch das Füllbild ändern, indem Sie auf

klicken und auswählen, um die Option zu verwenden: Jetzt sollte der Titelabdeckungsmodus im Modus -Einfügen -Panel sichtbar sein und überall in Vorlagen, Artikeln und Seiten verwendet werden.

Archiv -Cover -Titel Inspiriert von diesem Artikel von WP Tavern und einer Schritt-für-Schritt-Anleitung zum Erstellen des Titels der Autor-Vorlage wollte ich einen ähnlichen Cover-Titel erstellen und ihn dem TT2 Gopher-Thema hinzufügen.

Erstellen wir zunächst ein Archiv -Cover -Titelmuster für die author.html -Theplate, folgt dem obigen Workflow. In diesem Fall erstelle ich es in einer neuen leeren Seite, indem ich einen Block hinzufüge (wie in der folgenden Listenansicht gezeigt):

Im Hintergrund des Covers habe ich dasselbe Bild verwendet, das im Cover des Einzelpost -Titels verwendet wurde.

Da wir ein kurzes Autorenprofil im Autorenblock anzeigen möchten, sollten wir der Benutzerprofilseite eine biografische Anweisung hinzufügen, da ansonsten das Front -End einen leeren Speicherplatz anzeigen.

Folgendes ist der Tag -Code für header-author-cover Wir werden als Muster verwenden:

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

Um das Tag in den header-author-cover -Modus zu konvertieren, sollten wir das erforderliche Muster -Datei -Tag -Tag hinzufügen, wie zuvor beschrieben. Durch Bearbeitung des header-author-cover.php -Modus können wir ähnliche Cover -Titel für Etiketten, Taxonomie und andere benutzerdefinierte Vorlagen erstellen.

header-category-cover.php Modus ist in meiner category.html -Schange auf GitHub verfügbar.

Vorlagen erstellen mithilfe von Deckblöcken

WordPress 6.0 und zuletzt Gutenberg 13.7 Erweitern Sie die Funktionen für die Erstellung von Vorlagen in den Block-Editor. So viele WordPress-Benutzer können jetzt ihre benutzerdefinierten Vorlagen auch ohne eingehende Codierungswissen erstellen.

Weitere Informationen und Anwendungsfälle finden Sie in den umfassenden Anpassungsanweisungen von Justin Tadlock.

Der Blockeditor ermöglicht die Erstellung verschiedener Arten von Vorlagen, einschließlich Deckvorlagen. Lassen Sie uns kurz beschreiben, wie Sie Coverblöcke und Post -Bildblöcke mit der neuen Vorlagen -Benutzeroberfläche kombinieren, um einfach verschiedene Arten von benutzerdefinierten Vorlagen ohne oder mit einer geringen Menge an Codierungsfähigkeiten zu erstellen.

Vorlagen erstellen ist mit Gutenberg 13.7 viel einfacher. So erstellen Sie Blockvorlagen in Code und im Site -Editor werden im -Foperhandbuch und in meinem vorherigen Beitrag beschrieben.

Autorenvorlage mit Deckblock

Die obere (Titelblock) der Vorlage lautet wie folgt (Zeile 6): author.html

<code></code>

Folgendes ist ein Screenshot des Cover -Titels der Vorlagen

und author.html: category.html

Der vollständige Code für diese beiden Vorlagen finden Sie auf GitHub.

einzelner Artikel mit Cover -Block Um den Deckblock in einem einzelnen Artikel anzuzeigen, müssen wir den

-Modus (Zeile 3) aufrufen:

header-cover-single

Dies ist ein Screenshot, das die Front-End-Ansicht eines einzelnen Beitrags mit einem Titel-Cover-Block zeigt:

<code><div style="min-height:200px">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159750414.jpeg" class="lazy" alt="" data-object-fit="cover" data-object-position="50% 75%"   style="max-width:90%">
    <div>
        <div>
            <div style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem">


                <div>
                    <div>
                        <p>Published by:</p>


                    </div>



                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>
</code>

Der vollständige Code für die Vorlage

ist auf GitHub verfügbar.

single-cover.html Sie finden weitere Schritt-für-Schritt-Walkthrough-Tutorials zum Erstellen von Helden-Titel-Postblöcken und verwenden Sie den postgebenden Bildhintergrund-Coverblöcken auf der

WP Tavern

und die vollständigen Site-Bearbeitungswebsites. Das ist es!

Nützliche Ressourcen

vorgestellte Bildcoverblock

• Artikel aus Bildblock (WordPress Support)
• Artikel verwenden Sie Bilder mit dem Cover -Block YouTube (Dave on WP)
Schritt-für-Schritt-Tutorial zu Coverblöcken (WordPress-Unterstützung)
vorgestellte Coverblöcke und die Zukunft der Bindung von Daten an universelle WordPress -Blöcke (WP Tavern)
Anpassen Sie das Layout "Einzelartikel" mit WordPress Gutenberg (Pootlepress)
Dynamisieren Sie den Deckblock und fügen Sie die vorgestellten Bildbindungen #39658 (GitHub)

hinzu

Blog -Beiträge

vorgestellte Coverblöcke und die Zukunft der Bindung von Daten an universelle WordPress -Blöcke (WPTAVern)
einen Eindruck hinterlassen: So verwenden Sie Blöcke zum Erstellen von Artikelheldentitel (WPTAVern)
Core -Editor -Verbesserung: Verwenden Sie mehr Vorlagenoptionen für eine tiefere Anpassung (Make WordPress Core)

Obwohl Blockthemen von Mitgliedern der WordPress -Community im Allgemeinen stark boykottiert wurden, denke ich, dass sie auch die Zukunft von WordPress sind. Mit Blockthemen können Amateur-Themenautoren auch ohne ausführliche Codierungsfähigkeiten und die Beherrschung von PHP- und JavaScript-Sprachen die in diesem Artikel beschriebenen Helden-Coverblöcke in Kombination mit Muster- und Stilvarianten verwenden, um Themen mit komplexen Layouts zu erstellen.

create block theme Als früher Gutenberg -Benutzer war ich sehr begeistert von neuen Themen -Tools (wie

Plugins usw.), mit denen Themenautoren die folgenden Funktionen direkt aus der UI Blockeditor -Benutzeroberfläche implementieren können, ohne einen Code zu schreiben:

(i) erstellen
(ii) Überschreiben Sie die Themendatei und den Export
(iii) generieren Sie ein leeres Thema oder Unterthema und
(iv) Ändern und Speichern der Stilvariation des aktuellen Themas

theme.json

Zusätzlich ermöglichen die jüngsten Versionen des Gutenberg-Plugins eine reibungslose Typografie- und Layout-Ausrichtung sowie andere Styling-Steuerelemente mit nur

Dateien (keine JavaScript- und Ein-Line-CSS-Regeln erforderlich).

Vielen Dank für das Lesen, bitte teilen Sie Ihre Kommentare und Gedanken unten mit!

Das obige ist der detaillierte Inhalt vonSo stellen Sie sich WordPress -Block -Themen -Cover -Vorlagen mit dynamischen Post -Feature -Bildern an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!