So erstellen Sie einen zweispaltigen Single Post Header mit dem WordPress Site Editor – WP Tavern

25. März 2022
So erstellen Sie einen zweispaltigen Single Post Header mit dem WordPress Site Editor - WP Tavern

Eine der Funktionen, die mir gefallen hat Archeo-Design von Automattic Das, was ich Anfang dieser Woche überprüft habe, war der Split-Screen-Single-Post-Header. Ich fand es toll, dass ein Autor mit dem Featured Image-Block etwas anderes machte und den Benutzern etwas Abwechslung gab.

Das Design war einfach. Es ist ein zweispaltiger Abschnitt mit einem Bild auf der rechten Seite und dem Titel und Datum des Beitrags auf der linken Seite.

Einzelner Beitragstitel in einer WordPress-Post-Seitenansicht.  Das Datum und der Titel befinden sich auf der linken Seite.  Das vorgestellte Bild befindet sich auf der rechten Seite.
Titel und Bild des Split-Screen-Beitrags.

Es erinnerte mich daran, einen der unzähligen "Ideen" -Ordner auf meinem Computer zu entstauben. Ich wusste, dass ich letztes Jahr etwas Ähnliches gebaut hatte. Ich musste es nur finden.

Ich bin nach ein wenig Stöbern endlich darüber gestolpert - Ich muss wirklich lernen, wie man Dinge benennt, damit sie leichter zu finden sind:

Einzelner Blogbeitrag mit einem vorgestellten Bild auf der rechten Seite und Beitragstitel, Autor, Datum, Kommentarlink und Auszug auf der linken Seite.
Alte Split-Post-Header-Design-Idee.

Meine Herangehensweise an das Problem war anders, und ich erinnere mich, warum es auf den Schrotthaufen ging. Es verwendete den Medien- und Textblock anstelle von Spalten. Dann, und das ist immer noch der Fall, ist es unmöglich, das Featured Image innerhalb von Media & Text zu verwenden.

Der Spaltenblock ist eine anständige zweite Wahl, aber er stapelt sich auf mobilen Ansichten anders, wobei die erste Spalte immer oben landet. Das Bild hat bei der Verwendung des Blocks Media & Text Vorrang, unabhängig von seiner horizontalen Position in Desktop-Ansichten.

Es gibt ein offenes Ticket, um das vorgestellte Bild des Beitrags zu verwenden innerhalb des Medien- & Textblocks. Es gibt ein ähnliches Ticket für die Verwendung innerhalb eines Covers. Beides würde gelöst werden, indem ein Problem angegangen wird, das eine größere Reichweite hätte, indem man es erlaubt, generische Blöcke zur Verwendung von Website- oder Post-Metadaten.

Zumindest im Moment müssen wir mit den Werkzeugen arbeiten, die wir haben.

Für diesen Eintrag in der Bauen mit Blöcken -Serie werde ich Sie durch die Änderung der Single-Post-Vorlage von Twenty Twenty-Two führen, um ein ähnliches Layout zu erstellen.

Es ist für manche Leute schwierig, das Ergebnis ohne die Post-Daten zu visualisieren. Wie im folgenden Screenshot gezeigt, verfügt der Editor über Platzhalter:

WordPress-Site-Editor, der die Einzelne-Post-Ansicht mit einem Split-Screen-Header anzeigt.
Editoransicht des Split-Screen-Post-Headers.

Diese Platzhalter werden jedoch am Front-End transformiert. Woher wissen wir, dass das, was wir dort sehen, korrekt übersetzt wird und sich wie folgt herausstellt?

Front-End-Ansicht eines einzelnen Beitrags mit Split-Screen-Header.

Selbst ich kämpfe manchmal mit dieser Visualisierung. Die Platzhalter, die für Post*-Blöcke verwendet werden, bieten mir nicht genug direktes Feedback, daher aktualisiere ich oft einen Beispielbeitrag im Frontend, während ich Layouts wie dieses erstelle. Ich wollte dies für den Fall notieren, dass es jemanden desorientiert oder sogar abwirft. Es ist in Ordnung, Ihre Arbeit am Frontend zu speichern und zu überprüfen, während Sie dies durchgehen.

Randnotiz: Ich würde gerne ein Plugin sehen, das Dummy-Post-Daten anstelle der Standardplatzhalter hinzufügt.

Schritt 1: Auswählen der Einzelbeitragsvorlage

WordPress-Site-Editor mit geöffnetem Vorlagenbildschirm.  Die Option Einzelner Beitrag ist ausgewählt.
Wählen Sie die Vorlage Einzelner Beitrag aus.

Um diese Layoutänderung für alle einzelnen Beiträge vorzunehmen, müssen Sie im Adminbereich über Appearance > Editor zum Site-Editor gehen. Wählen Sie das WordPress-Logo / -Symbol in der oberen linken Ecke aus, um das Slide-Out-Panel zu öffnen. Klicken Sie dort auf den Link Vorlagen. Auf dem nächsten Bildschirm sollte eine Liste der bearbeitbaren Vorlagen angezeigt werden. Wählen Sie "Einzelner Beitrag".

Wenn Sie es vorziehen, dies zu einer optionalen Vorlage zu machen, sollten Sie diese aus dem Vorlagen-Editor. Der Prozess ist ähnlich, aber die Benutzeroberfläche weist einige Unterschiede auf.

Schritt 2: Anpassen der Website-Kopfzeile (optional)

WordPress-Site-Editor mit dem inneren Zeilenblock der Header-Vorlage auswählen.  Es werden Anpassungen an der Ausrichtung vorgenommen.
Anpassen der Ausrichtung und des Abstands der Kopfzeilenblöcke der Zeilenblöcke.

Der Header von Twenty Twenty-Two funktioniert nicht gut für die Art des Layouts, das wir erstellen. Es hat eine Tonne Polsterung an der Unterseite, und seine Breite ist begrenzt. Sie werden ein paar Änderungen für ein idealeres Design vornehmen wollen. Beachten Sie, dass dadurch die Kopfzeile auf der gesamten Site geändert wird, es sei denn, Sie speichern sie als separates Vorlagenteil. Dieser Schritt ist optional, aber das Endergebnis sieht besser aus.

Im Header-Bereich der Bearbeitungoder wählen Sie den Zeilenblock aus, der die Blöcke Websitetitel und Navigation enthält. Wählen Sie in der Symbolleiste die Ausrichtungsoption "Volle Breite". Setzen Sie im Blockseitenleistenbereich auf der rechten Seite die Option "Auffüllung" auf 2rem oder einen Wert Ihrer Präferenz.

Schritt 3: Spalten erstellen

WordPress-Site-Editor mit einem Post-Titel und einem Post Featured Image-Block ausgewählt. Das Dropdown-Menü Transformation wird ausgewählt, wobei die Option Spalten hervorgehoben ist.
Umschließen der Blöcke "Beitragstitel" und "Vorgestelltes Beitrag" in Spalten.

Da Twenty Twenty-Two bereits die Blöcke Post Title und Post Featured Image gruppiert hat, müssen Sie hier nicht bei Null anfangen. Wählen Sie beide mit der Maus oder Tastatur aus, klicken Sie in der Symbolleiste auf die Schaltfläche "Transformieren in" und wählen Sie die Option Spalten.

Wenn Sie von einem Design mit einem anderen Layout aus arbeiten, können Sie manuell einen Spaltenblock mit einer 50/50-Einstellung hinzufügen und die Bausteine Beitragstitel und Beitrag ausgewähltes Bild in die beiden Spalten einfügen.

Schritt 4: Entwerfen von Spalten

Anpassen der Ausrichtung, der Farben und des Abstands des Spaltenblocks.

Wir haben einige der langweiligen Layout-Sachen aus dem Weg geräumt. Jetzt können Sie anfangen, Ihre eigene Marke der Kunst zu diesem Ding hinzuzufügen. Ich habe einen schwarzen Hintergrund und weißen Text für den Spaltenblock gewählt. Fühlen Sie sich jedoch frei, die gewünschten Farben hinzuzufügen. Vielleicht probieren Sie sogar die Grenzoptionen aus, um es zu vermischen.

Nun zurück zu langweiligen Layout-Anpassungen.

Damit dieses Layout funktioniert, müssen Sie zwei Änderungen am Block Spalten vornehmen. Wählen Sie zunächst in der Symbolleiste die Ausrichtung "Volle Breite" aus.

Ändern Sie dann die Option "Auffüllung" in der Blockseitenleiste in 0. Wenn Sie dies auf Null setzen, kann sich das ausgewählte Bild bis zum Rand dehnen. Dies ist keine schwierige Anforderung, wenn Sie ein wenig Platz um sich herum haben möchten.

Schritt 5: Titelgruppe

WordPress-Site-Editor mit einem Gruppenblock, der um den Post-Titelblock ausgewählt ist.
Gruppieren des Post-Titelblocks und Hinzufügen von Auffüllungen.

Da wir die Auffüllung im vorherigen Schritt auf Null gesetzt haben, stößt der Post Title-Block nun gegen die Seite des Layouts. Text braucht immer Raum, um im Design zu atmen, also müssen wir dieses Problem lösen, das wir für uns selbst geschaffen haben.

Es gibt zwei Möglichkeiten, dies zu tun. Die erste besteht darin, dem Spaltenblock, in dem sich der Beitragstitel befindet, einfach Auffüllung hinzuzufügen. Dies sollte gut funktionieren, aber WordPress behandelt dies nicht gut (es verwendet nicht box-sizing: border-box B. für Spaltenblöcke). Wenn Sie hier Polsterung hinzufügen, wird die linke Seite breiter als die rechte. Leider ist dies eine kleine Macke, die zusätzliche Arbeit schafft.

Die beste Option besteht darin, den Beitragstitel auszuwählen und in eine Gruppe umzuwandeln. Suchen Sie dann das Steuerelement "Padding" in der Seitenleiste und ändern Sie es in 2rem oder Ihren bevorzugten Wert.

Einige Themen können das Problem der Spaltenauffüllung korrigieren, also geben Sie der ersten Option eine Chance, wenn Sie etwas anderes als Twenty Twenty-Two verwenden.

Schritt 6: Anpassen des vorgestellten Bildes

WordPress-Site-Editor mit ausgewähltem Block
Entfernen des Rands aus dem Block "Ausgewähltes Bild posten".

Weder WordPress noch Twenty Twenty-Two fügen eine Standard-Margin-Behandlung für den Post Featured Image-Block hinzu. Das <figure> Das Wrapping-Element fällt auf die Standardeinstellung des Browsers zurück (Browser fügen im Allgemeinen oben und unten etwas Rand hinzu).

Um sicherzustellen, dass das Bild keinen zusätzlichen Abstand hat, wählen Sie es im Editor aus, suchen Sie die Einstellung "Rand" in der Seitenleiste und setzen Sie sie auf 0.

Schritt 7: Viel Spaß

WordPress-Site-Editor, der die Einzelne-Post-Ansicht mit einem Split-Screen-Header anzeigt.
Benutzerdefinierte Split-Screen-Post-Kopfzeile.

Das Fundament des Layouts ist nun vorhanden. Das Anpassen von Polsterungen, Rändern und ähnlichen Einstellungen ist der riesige Berg, den Sie erobern müssen, um einige der wirklich coole Sachen, die möglich sind. Ich möchte die Leute nicht mit dem Rest des Designs einschränken und würde es lieben, wenn jeder seinen eigenen Spin darauf legen würde.

Ich habe die vertikale Ausrichtung im Spaltenblock für mein Layout auf die Einstellung "Unten ausrichten" geändert. Über dem Beitragstitel habe ich eine Zeile mit den Blöcken Beitragsautorenname, Beitragsdatum und Beitragskategorien hinzugefügt. Ich habe auch das Trennzeichen entfernt, das Twenty Twenty-Two vor dem Inhalt hinzufügt.

Bitte teilen Sie Anpassungen, die Sie in den Kommentaren vorgenommen haben, wenn Sie diesem Tutorial gefolgt sind.

Quelle


Dieser Artikel ist im Original von wptavern.com und wurde übersetzt
https://wptavern.com/how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor

Abonniere den RSS-Feed von unseren WP News und verpasse keine Meldung: https://die-mainagentur.de/feed/?post_type=wp-news

Alternativ kannst du unseren WP-Newsletter abonnieren

Mit dem Eintrag in den WP-Newsletter bekommst du per Mail über neue Artikel zugesendet. Du kannst den Newsletter jederzeit abbestellen.
Mehr dazu in der Datenschutzerklärung