So erstellen Sie Buch- und Buchrezensionskarten mit WordPress-Blöcken – WP Tavern

2. April 2022
So erstellen Sie Buch- und Buchrezensionskarten mit WordPress-Blöcken - WP Tavern

Ich war in den Monaten vor seinem Debüt im Jahr 2018 tief im Blocksystem verwurzelt. Dies fiel auch zufällig mit dem ersten November zusammen, den ich je abgeschlossen hatte. Nationaler Monat des Schreibens von Romanen, eine 30-tägige Herausforderung, einen ersten Entwurf eines Romans mit 50.000 Wörtern zu schreiben. Seitdem habe ich 2021 ein zweites Mal gewonnen.

Als Romanautor mit Sternenaugen und Möchtegern-Romanautor war eines der ersten Dinge, die mich an dem Blocksystem begeisterten, wie Autoren ihre Bücher mit WordPress zeigen konnten. Natürlich hatte ich keine andere Wahl, als eine benutzerdefinierte Gruppierung von Blöcken zu erstellen, um das Manuskript zu zeigen, das ich irgendwie in einem Monat ausgearbeitet hatte.

Homepage-Screenshot eines Themas für Romanautoren.  Es verfügt über ein Buch und einen Verkaufsknopf.
Homepage-Design des Themas für Romanautoren.

Dies war die Pre-Pattern-Ära von WordPress. Die Benutzeroberfläche war klobig. Die Dinge schienen zufällig zu brechen. Design-Tools waren fast nicht vorhanden, aber es lag ein bisschen Magie in der Luft. Zu keinem Zeitpunkt in der Geschichte der Plattform konnten Benutzer visuell ein so einfaches Layout mit WordPress erstellen. Trotz all seiner Fehler während des Beta-Laufs war dies der Moment, in dem ich ein Block-Fanboy wurde.

Erst Monate später veröffentlichte ich das Thema für Romanautoren - es war ein Kind eines anderen Projekts, das noch nicht gestartet war.

Für diesen Eintrag in der Serie Bauen mit Bausteinenwollte ich die Leser durch die Erstellung eines der Muster führen, die mich dazu inspiriert haben, weiterhin mit dem Blocksystem zu entwerfen und zu entwickeln. Als Bonus werde ich auch zeigen, wie man ein Buchrezensionsmuster erstellt.

Ich benutze die Design "Archeo" von Automattic in diesem Tutorial. Es sollte jedoch mit jedem Thema funktionieren, das Blöcke unterstützt. Sie erhalten auch mehr Kilometer aus einem Blockthema.

Karte buchen

Diese Karte soll ein Ausgangspunkt für Autoren sein, die eines ihrer Bücher präsentieren möchten, aber sie könnte auf jedes Produkt angewendet werden. Es gibt 1.000 Möglichkeiten, wie Sie dies ändern können, und ich ermutige jeden, es anzupassen, sobald er die Schritte durchlaufen hat. Das Endergebnis sollte in etwa wie folgt aussehen:

Buchkartendesign mit dem Buchcover-Bild auf der linken Seite und dem Intro + Kaufen-Button auf der rechten Seite.
Endgültiges Buchkartendesign.

Der letzte HTML-Code des Blocks ist erhältlich über Gist. Sie können es kopieren und in den Editor einfügen, aber ich ermutige Sie, die erste Runde von Grund auf neu zu erstellen. In dieser Serie geht es darum, zu lernen, mit Blöcken zu bauen. Der kopierbereite Code ist nur für den Fall da, dass Sie stecken bleiben.

Schritt 1: Containergruppe (optional)

WordPress-Post-Editor mit einem Gruppenblock, der gepolstert ist und einen dunkelblauen Hintergrund hat.
Gruppieren Sie den Block mit Polsterung und Farben.

Fast in der Regel beginne ich mit einem Gruppenblock, wenn ich Muster oder Abschnitte von Blöcken baue. Ich habe mich entschieden, es dieses Mal hinzuzufügen, weil ich einen dunklen Hintergrund mit etwas Polsterung um den Inhalt der Karte wollte. Sie können sich davon abmelden, wenn Sie möchten.

Sobald der Block vorhanden ist, fügen Sie dem Block Textfarbe, Hintergrundfarbe und Auffüllung hinzu. Ich habe 2rem für die Auffüllung, da der Standard meines aktiven Themas nicht auf allen Seiten konsistent ist.

Schritt 2: Hinzufügen von Medien

WordPress-Post-Editor mit einem Medien- und Textblock.  Es zeigt ein Buchcover-Bild auf der linken Seite.
Medien- und Textblock innerhalb einer Gruppe.

Einer meiner Lieblingsblöcke in WordPress ist Media & Text. Es hat so viele Anwendungsfälle, und es ist eine Art Mini-Muster ganz für sich. Auf der einen Seite lassen Sie Ihre Medien fallen. Auf der anderen Seite fügen Sie den gewünschten Inhalt hinzu.

Fügen Sie im Gruppenblock aus Schritt 1 Medien und Text ein. Machen Sie weiter und schnappen Sie sich ein Bild Ihrer Wahl. Das WordPress-Fotoverzeichnis hat reichlich, wenn man keinen zur Hand hat.

Die einzige Änderung, die ich an diesem Block vorgenommen habe, besteht darin, die Option "Medienbreite" auf 35 in der Seitenleiste "Blockoptionen". Abhängig von den Abmessungen Ihres Bildes können Sie eine andere Option wählen. Stellen Sie nur sicher, dass Sie Platz für Ihre Inhalte geben.

Schritt 3: Gruppieren (optional)

WordPress Media & Text Block im Post-Editor.  Innerhalb des Text-/Inhaltsbereichs befindet sich eine weitere Gruppe.
Hinzufügen eines inneren Gruppenblocks.

Innerhalb des Medien- und Textblocks habe ich eine weitere Gruppe hinzugefügt. Es ermöglicht konsistente Abstände, die WordPress aus irgendeinem Grund nicht auf den Bereich "Inhalt" des Medien- und Textblocks anwendet. Dies ist ein optionaler Schritt, bietet jedoch mehr Kontrolle über das Design.

Wenn Sie sich mit dem Abstand Ihres Themas nicht wohl fühlen, können Sie t ändernDie Option "Blockabstand" in der Seitenleiste der Blockoptionen. Ich habe dies angepasst, um 2rem, aber es hängt vom aktiven Thema ab.

Nebenbei bemerkt, dies sind Details, die ich selten in anderen Tutorials erwähnt sehe - die "Gotchas" und andere Probleme, auf die Sie stoßen könnten. Ich habe das Gefühl, dass sie hilfreiche Einschlüsse sind, aber ein bisschen langweilig sein können. Fühlen Sie sich frei, mich in den Kommentaren wissen zu lassen, wenn Sie möchten, dass ich diesen Detaillierungsgrad weiter abdecke.

Schritt 4: Karteninhalt

Medien- und Textblock im WordPress-Post-Editor.  Innerhalb des Inhaltsabschnitts befinden sich eine Überschrift, ein paar Absätze und eine Schaltfläche.
Hinzufügen von Überschriften-, Absatz- und Schaltflächenblöcken.

Der letzte Schritt bei der Erstellung der Karte sollte relativ einfach sein. Ich habe eine Überschrift, zwei Absätze und einen Buttons-Block eingefügt. Ich ermutige zum Experimentieren.

Ich habe keine Änderungen an den Blöcken Überschrift und Absatz vorgenommen. Ich habe jedoch den Stil "Outline" für den einzelnen Button ausgewählt.

Und das war's! Die Einbeziehung des eingebauten Media & Text-Blocks machte es einfacher als das Bauen mit anderen. Lesen Sie weiter, wenn Sie es vorziehen, Bücher zu rezensieren, anstatt sie zu schreiben und zu verkaufen.

Buchbesprechung Intro Card

Diese exemplarische Vorgehensweise führt Sie durch das Erstellen einer Buchbesprechungskarte (oder eines Rezensionsintros). Wie zuvor können Sie die volle HTML von Gist blockieren. Das Ergebnis sollte in etwa wie folgt aussehen:

Ein Buchrezensionsbereich, der das Titelbild auf der linken Seite und die Buchdetails auf der rechten Seite enthält, einschließlich eines Zitats.
Endgültiges Intro-Design der Buchrezension.

Mit all dem Wirbel um die vorherige Rezeptkarten-Tutorial, lassen Sie mich diesem Abschnitt eine kurze Anmerkung voranstellen. In dieser Tutorial-Serie geht es darum, zu lernen, mit Blöcken zu bauen, und nicht darum, ausgearbeitete Lösungen für jedes mögliche Szenario zu erstellen.

Für diejenigen, die mehr wollen, gibt es bestehende Lösungen. Donna Peplinskies Buchbesprechungsblock ist eine ausgezeichnete Wahl. Es hat ISBN-Integration, Review-Schema und viele andere Schnickschnack. Ich sogar schrieb bereits 2020 darüber.

Dies ist für die manchmal Buchrezensenten, Leute, die keine Bewertungsseite starten, oder diejenigen, die nur einen Tipp abholen möchten.

Schritte 1-3: Spülen und wiederholen

Ein Gruppenblock im WordPress-Post-Editor.  Ein Medien- und Textblock befindet sich darin mit einem eigenen verschachtelten Gruppenblock.
Hinzufügen einer Gruppe, Medien und Text und eines weiteren Gruppenblocks.

Diese Schritte sind buchstäblich die gleichen wie die obige Buchkarte: Fügen Sie einen Gruppenblock hinzu, fügen Sie Medien und Text hinzu und verschachteln Sie eine weitere Gruppe im Inhaltsbereich. Die einzige Änderung, die ich vorgenommen habe, bestand darin, den Medienbereich auf 40 (es war 35 vorher).

Fühlen Sie sich frei, dies zu vermischen und neue Dinge auszuprobieren. Überspringen Sie den anfänglichen Gruppenblock, wenn Sie den aufgefüllten Hintergrund nicht verwenden möchten.

Schritt 4: Karteninhalt

WordPress-Post-Editor mit Medien- und Textblock.  Eine Überschrift, eine Liste und ein Zitat sind innerhalb des Inhaltsbereichs verschachtelt.
Hinzufügen eines Überschriften-, Listen- und Zitatblocks.

Fügen Sie wie bei der vorherigen Buchkarte einen Überschriftenblock für den Buchtitel hinzu. Dies geschieht innerhalb der Gruppe, die innerhalb des Medien- und Textblocks verschachtelt ist.

Der nächste Teil des Inhalts ist, wo die Dinge ablenken. Für die Buchinfo müssen Sie einen Listenblock einfügen. Füllen Sie dann die Details aus, die Sie für relevant halten, wie folgt:

  • ✍️ Geschrieben von Justin Tadlock
  • 🔖 Verschlagwortet mit Adult Fiction
  • 📚 Veröffentlicht von Words & Press
  • 📅 Veröffentlicht am 01. Mai 2099
  • 📃 599 Seiten
  • ⭐⭐⭐⭐⭐ / 5 Sterne

Ich wollte die Dinge mit ein paar Emoji aufpeppen. Wenn das nicht Ihr Ding ist, besteht keine Notwendigkeit, sie einzubeziehen.

In einem realen Projekt würde ich auch einen "No Marker" -Stil für den Listenblock einfügen, so dass das Emoji als Faux Aufzählungspunkte. Das Thema, mit dem ich getestet habe, hatte jedoch keinen Stil dafür.

Das bringt uns zum letzten Abschnitt. Ich mag es, Buchrezensionen zu beginnen, indem ich ein Lieblingszitat einfüge. Es bringt mich in Stimmung, über das Buch zu schreiben und lässt mich etwas vom Autor teilen. Daher habe ich mich dafür entschieden, einen Quote-Block als letztes Stück zu platzieren.

Eine Alternative könnte eine kurze Zusammenfassung sein. Sie können sogar einfach von dort aus direkt in die Bewertung eintauchen oder den Platz leer lassen. Es ist Ihre Karte, und Sie können damit tun, was Sie wollen.

Quelle


Dieser Artikel ist im Original von wptavern.com und wurde übersetzt
https://wptavern.com/how-to-build-book-and-book-review-cards-with-wordpress-blocks

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