Wie man eine Rezeptkarte mit dem WordPress Block Editor erstellt – WP Tavern

19. März 2022

Letzten Sommer war ich auf einer Musterkreationssause. In zwei Monaten habe ich knapp 100 Blockmuster entworfen. Neben der Arbeit und den notwendigen Aufgaben im Haushalt verbrachte ich jede wache Minute damit, zum Spaß Dinge mit dem Block-Editor zu bauen. Ich hatte völlige kreative Freiheit, musste kein kommerzielles Produkt auf den Markt bringen und musste niemanden zufriedenstellen außer mich selbst.

Als Künstler lebte ich den Traum. Es gab keinen Druck, etwas anderes zu tun als das zu schaffen, was mir in den Sinn kam. Natürlich bin ich nach einer Weile abgestürzt. Die reale Welt holt mich immer wieder ein, aber ich habe über den Sommer ein paar tolle Muster gebaut.

Mitte Juni habe ich mich drei Tage lang ausschließlich auf Muster für Food-Blogger und Rezeptseiten konzentriert. Ich erinnere mich noch gut daran, wie meine Schwester, die eine Woche lang bei mir übernachtete, mich fragte, warum ich am Computer saß, anstatt den Film im Fernsehen zu sehen.

Ich drehte meinen Laptop in ihre Richtung und sagte: "Sieh dir das an. Ich baue eine Möglichkeit für Food-Blogger, Rezeptkarten in ihre Beiträge einzufügen. Du weißt schon, wie die Karte, die du siehst, wenn du dich durch mehr als 2.000 Wörter der Lebensgeschichte von jemandem durchscrollst und nur ein Rezept suchst? Ziemlich cool, oder?"

Das ist zwar kein genaues Zitat, aber es ist nah genug dran - Dies ist meine Geschichte, also werde ich sie so erzählen, wie ich mich erinnere.

Ich hatte einen dieser entscheidenden Momente während der Zeit, in der ich Food-Blogger-Muster entwickelt habe. Wenn ich das jetzt schaffe, können Designer irgendwann jedes Layout mit Themes erstellen und bündeln, und die Nutzer können sie mit einem Klick einfügen, dachte ich.

Zu diesem Zeitpunkt war ich bereits auf dem Block-Zug. Aber es gibt immer wieder diese Momente, in denen sich die Dinge zusammenzufügen scheinen. Die Glühbirne schaltet sich ein. Die Sterne stehen in einer Reihe. Wie auch immer du es nennen willst.

Leider gibt es nur wenige Muster aus dem Sommer '21 etwas anderes als einen Ordner in einem obskuren GitHub-Repository gesehen haben. Für den heutigen Eintrag in die Bauen mit Blöcken Serie, habe ich einen herausgezogen, um ihn zu teilen. Das war auch eine gute Gelegenheit, sie mit neueren Blockdesign-Tools von Grund auf neu zu bauen.

Bau einer Rezeptkarte

In dieser Anleitung zum Bauen mit Blöcken werde ich dich durch die einzelnen Schritte zur Erstellung einer einfachen Rezeptkarte führen. Ich empfehle die Aktivierung der Zwanzig Zweiundzwanzig Theme, um das gleiche Ergebnis zu erzielen. Ich habe jedoch absichtlich nur Schwarz und Weiß für die Text-, Hintergrund- und Rahmenfarben verwendet, damit es sich auf möglichst viele Themes übertragen lässt.

Wenn du fertig bist, sollte deine Rezeptkarte ungefähr so aussehen wie die folgende:

Eine Rezeptkarte mit dem Bild einer Pizza am oberen Rand.  Danach folgen ein Titel, eine Beschreibung, eine Zutatenliste, eine Anfahrtsbeschreibung und ein Abschnitt zum sozialen Teilen.

Ich empfehle dir, jeden Schritt selbst auszuprobieren, aber du kannst auch Kopiere das HTML-Muster von Gist und füge es direkt in den Editor ein.

Der letzte Schritt dieser Komplettlösung erfordert die Social Sharing Block Plugin von Nick Diego. Wenn du es vorziehst, bei den WordPress-Kernblöcken zu bleiben, kannst du den letzten Abschnitt weglassen.

Schritt 1: Kartengruppe

WordPress-Blockeditor mit einem eingefügten Gruppenblock.  Er hat einen 2px breiten schwarzen Rand.
Einfügen eines Gruppenblocks mit Rahmen.

Beginnen wir diese Anleitung mit etwas Einfachem. Es gibt keinen Grund, die Dinge so früh zu verkomplizieren.

Öffne einen neuen Beitrag oder eine Seite in deinem WordPress-Admin und füge einen Gruppenblock hinzu. In den Blockoptionen auf der rechten Seite suchst du den Abschnitt "Abmessungen" und setzt die Option "Blockabstand" auf 0. Das ist notwendig, um das gewünschte Kartendesign zu erhalten. Dann fügst du einen Rand deiner Wahl hinzu.

Hinweis: Du kannst in diesem Schritt eine Hintergrundfarbe für die gesamte Karte hinzufügen. Wenn du das tust, fügt WordPress jedoch eine Standardauffüllung hinzu. Daher musst du auch die Option "Padding" auf 0.

Schritt 2: Kartenbild-Kopfzeile

WordPress-Blockeditor mit einem Bildblock innerhalb eines Gruppenblocks.
Einfügen eines Bildblocks für den Kartenkopf.

Dies ist der erste Moment, in dem du wirklich eine Entscheidung für deine Karte treffen kannst. Die beiden naheliegendsten Möglichkeiten für ein Rezeptkartenbild sind die Blöcke Bild und Cover. Ich habe mich für ein Bild entschieden und es in den Gruppenblock aus Schritt 1 eingefügt.

Das Bild für die Veggie-Pizza ist von Jennifer Bourn und ist verfügbar im WordPress Photo Verzeichnis.

Wenn du dich entscheidest, einen Titelblock hinzuzufügen, kannst du den Rezepttitel und die Beschreibung aus Schritt 4 darin einfügen.

Schritt 3: Karteninhaltsgruppe

Eine Rezeptkarte im Blockeditor. Oben ist ein Bild von einer Pizza.  Darunter befindet sich ein ausgefüllter Gruppenblock.
Einfügen eines Gruppenblocks mit Füllung nach dem Bildblock.

Halten wir die Dinge erst einmal einfach. Wir müssen den "Inhalt" der Rezeptkarte gruppieren. Füge wieder einen neuen Gruppenblock hinzu.

Die einzige Änderung, die du an diesem Block vornehmen musst, ist, dass du etwas Platz um ihn herum einbaust. In den Blockoptionen in der Seitenleiste stellst du die Option "Auffüllung" auf 2rem oder deinen bevorzugten Wert.

Schritt 4: Kartentitel und Beschreibung

Eine Rezeptkarte mit einem Bild von Pizza, gefolgt von einem Überschriften- und Absatzblock im Blockeditor.
Einfügen von Überschriften- und Absatzblöcken.

Füge innerhalb des Gruppenblocks aus Schritt #3 einen Überschriftenblock ein. Verwende diesen für den Titel deines Gerichts. Füge dann direkt danach einen Absatz für eine Beschreibung ein.

Hier kannst du so viele oder so wenige Details einfügen, wie du möchtest.

Schritt 5: Karten-Meta

Eine Rezeptkarte im WordPress-Editor.  Sie enthält ein Bild der Pizza, gefolgt von einem Titel, einer Beschreibung und Metadaten.
Zeilenblock für Rezept-Metadaten einfügen.

Bis hierhin sollte alles relativ einfach gewesen sein. Die vorherigen vier Schritte haben nichts Kompliziertes mit dem Layout gemacht. Das wird sich jetzt ändern.

Für diesen Schritt musst du einen vierspaltigen Abschnitt erstellen, der die Garzeiten und andere Metadaten des Rezepts enthält. Die beste Lösung in WordPress dafür ist der Row-Block. Wenn du willst, kannst du es auch mit Columns versuchen. Beide Erfahrungen können sich ein bisschen janky auf kleinem Raum.

Füge einen neuen Zeilenblock innerhalb des Gruppenblocks hinzu, in dem du gearbeitet hast. Ich habe die Option "Abstand zwischen den Elementen" für das Steuerelement "Ausrichtung" ausgewählt. Dadurch wird sichergestellt, dass alle Elemente gleichmäßig angeordnet sind, aber die Entscheidung liegt bei dir.

Dann klickst du auf das "+"-Symbol in der Zeile und fügst einen Absatzblock darin ein. Für meinen ersten Absatzblock habe ich zuerst den Text "Vorbereitungszeit" hinzugefügt. Dann drücke ich Shift + Enter auf meiner Tastatur, um einen Zeilenumbruch zu erzeugen und fügte "2 Stunden" hinzu. Zum Spaß habe ich noch ein Emoji eingefügt.

Der Trick, um den Rest einfach zu machen, ist, den ersten Absatzblock so zu gestalten, wie du es willst, ihn dreimal zu duplizieren und den Text anzupassen.

Schritt 6: Kartenzutaten und Anleitung

Eine Rezeptkarte im WordPress-Editor.  Hier siehst du die Metadaten, gefolgt von der Zutatenliste und der Wegbeschreibung.
Einfügen von Überschriften- und Listenblöcken für Rezeptzutaten und Wegbeschreibung.

Der schwierige Teil ist jetzt erledigt. Das verspreche ich dir. Der nächste Schritt ist so einfach wie das Hinzufügen von Überschriften- und Listenblöcken für einen Abschnitt "Zutaten" und das Gleiche für einen Abschnitt "Wegbeschreibung". Diese Blöcke sollten in der gleichen Gruppe platziert werden, in der auch die vorherigen Blöcke waren.

Für die Überschriftenblöcke habe ich die Ebene auf H3. Die einzige andere Einstellungsänderung, die ich vorgenommen habe, war die Auswahl der Schaltfläche "In geordnete Liste umwandeln" in der Symbolleiste für die Liste unter Wegbeschreibung.

Schritt 7: Karte Social Sharing

Rezeptkarte im WordPress-Editor.  Gezeigt wird die Richtungsliste, gefolgt von einem Abschnitt zum sozialen Teilen.
Einfügen einer neuen Gruppe und von Social-Sharing-Symbolen.

Du kannst keine moderne Rezeptkarte ohne einen sozialen Bereich haben, oder? Dafür musst du das Social Sharing Block Plugin installiert haben. Oder du kannst jetzt mit deiner ausgefüllten Karte aufhören.

Für diesen Abschnitt fügst du eine neue Gruppe nach (nicht innerhalb) der Gruppe ein, die den Inhalt des Rezepts enthält. Ändere die Textfarbe in Weiß und füge eine dunkle Hintergrundfarbe hinzu. Du kannst auch den Abstand zwischen den Zeilen ändern (ich habe ihn auf 2rem) oder einen Spacer-Block verwenden, wenn du mehr Spielraum brauchst.

Für den Text "Gefällt dir dieses Rezept?" fügst du einen Überschriftenblock mit der H3 Ebene ein. Füge dann den Social Sharing-Block darunter ein. Du kannst gerne mit dem Design spielen. Ich habe den Block zentriert ausgerichtet und die Option "Beschriftungen anzeigen" aktiviert.

Das war's!

Notizen und andere Gedanken

Ich wollte die WordPress-Kernblöcke für alles in dieser Rezeptkarte verwenden. Der Social Sharing-Bereich war das offensichtliche Hindernis, so dass ich mich auf ein Plugin eines Drittanbieters verlassen musste.

Im Vergleich zu vielen modernen Rezeptkarten, die ich im Internet gesehen habe, fehlen dieser Lösung noch zwei Funktionen:

  • Aufgabenähnliche Kontrollkästchen oder Radioeingaben zum Streichen von Zutaten oder Schritten.
  • Eine Schaltfläche "Dieses Rezept drucken".

Für die Aufgabenliste wird die Todo Block Plugin von David Towoju ist eine tolle Alternative zum Listenblock. Es ist leichtgewichtig und ermöglicht es den Besucherinnen und Besuchern der Website, Aufgaben zu streichen, während sie das Rezept durcharbeiten.

Für einen Druckbutton habe ich keine empfohlene Lösung. Es wäre nicht besonders schwierig, das per Code zu machen, und ich würde mich freuen, wenn ein Themenautor diese Idee aufgreifen und umsetzen würde.

Quelle


Dieser Artikel ist im Original von wptavern.com und wurde übersetzt
https://wptavern.com/how-to-build-a-recipe-card-via-the-wordpress-block-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