Entwicklerhandbuch: Verwenden von WordPress Gutenberg für Frontpage und Landing Pages
In diesem Beitrag sehen wir uns an, wie Sie mit dem Gutenberg-Editor gut aussehende und moderne Startseiten oder Zielseiten erstellen können. Wir werden uns insbesondere ansehen, wie Sie als Entwickler Ihren Theme-Code anpassen können, um dies zu unterstützen. Dieser Leitfaden ist perfekt für Sie, die ein älteres Theme anpassen möchten, um Gutenberg zu unterstützen, oder lernen möchten, wie Sie neue Themes entwickeln, die für Gutenberg optimiert sind.
Als WordPress den neuen Gutenberg-Editor in WordPress 5.0 (veröffentlicht um Dezember 2018) einführte, machte es die Verwendung eines separaten Seitenerstellungs-Plugins größtenteils überflüssig. Der Gutenberg-Editor gibt dem WordPress-Autor viel Flexibilität und die Möglichkeit, reichhaltige Inhalte und Designs zu erstellen, die vorher nicht einfach waren – es sei denn, das Theme oder ein Plugin stellten die Funktionalität für sie bereit, z. B. mit Shortcodes.
In WordPress erhalten Sie eine Menge Styling für Gutenberg-Blöcke, die sofort einsatzbereit sind, aber mit ein wenig Arbeit in Ihrem Design und Wissen über die Blöcke können Sie dem Gutenberg-Erlebnis so viel mehr hinzufügen. Schauen wir uns an, wie!
Aktivieren von Wide- und Full-Breite-Blöcken
Bei den meisten Blöcken können Sie Blockausrichtungen auswählen. Wenn Sie in Gutenberg in einem Theme arbeiten, das nicht für Gutenberg entwickelt wurde, haben Sie die Wahl zwischen „Align Left”, „Align Center” und „Align Right”.
Aber wussten Sie, dass es tatsächlich zwei weitere gibt? Die anderen beiden, „Breite Breite” und „Volle Breite”, eignen sich perfekt für die Erstellung einer Startseite oder Zielseite. Wir werden uns genauer ansehen, wie Sie Ihr Theme-Layout und -Design optimieren können, um später breite und volle Blöcke vollständig zu unterstützen. Zuerst müssen Sie WordPress anweisen, Unterstützung für diese beiden Blockausrichtungen in Ihrem Design hinzuzufügen.
In einer angehängten Funktion after_setup_themerufen Sie einfach auf add_theme_support('align-wide'). Sie haben wahrscheinlich bereits eine „Setup”-Funktion in Ihrem Theme, oder falls nicht – fügen Sie diese in Ihrem Theme hinzu functions.php:
add_action('after_setup_theme', function() {
add_theme_support('align-wide');
});Wenn dieser Code in Ihrem Design aktiv ist, sollten Sie nun insgesamt fünf Optionen für Blockausrichtungen erhalten. Bei manchen Blöcken, zB Columns, bekommt man nur die beiden neuen.
Es gibt bestimmte Blocktypen, bei denen Sie Blockausrichtungen festlegen können – meistens sind es die Typen, die verschachtelte Blöcke unterstützen, dh. ein Block, mit dem Sie Blöcke hinzufügen können. Solche beliebten Blöcke sind Cover, Columns, Image, Embed-Blöcke und so weiter. Der Cover-Block ist ein großartiger Block zum Erstellen von Startseiten oder Zielseiten, wie wir in diesem Beitrag sehen werden.
Verwendung des Cover-Blocks
Der Cover-Block ist definitiv der beste Block, wenn Sie eine in Abschnitte unterteilte Startseite oder Zielseite erstellen möchten. Sie können jede Art von Block und beliebig viele Blöcke in einen Cover-Block einfügen. Mit einem Cover-Block können Sie eine Hintergrundfarbe, ein Hintergrundbild oder ein Hintergrundbild mit Farbüberlagerung festlegen.
In Kombination mit der Option, die Anpassung des Blocks auf breite oder volle Breite einzustellen (wie oben beschrieben), ist der Cover-Block ein leistungsstarkes Werkzeug. Sie können eine Seite erstellen, auf der sich der gesamte Inhalt in Abschnitten mit Cover-Blöcken in voller Breite und jeweils mit einer eigenen Hintergrundfarbe oder einem eigenen Hintergrundbild befindet. Mit dem richtigen Styling und Layout in Ihrem Thema haben Sie einen vollwertigen modernen Frontpage-Builder.
In WordPress 5.3 kam eine wichtige Verbesserung für den Cover-Block: Ein innerer HTML-Wrapper. Das bedeutet, dass der Cover-Block ein HTML-Element für den Abschnitt selbst hat – mit seiner Hintergrundfarbe oder seinem Hintergrundbild, und dann ein weiteres HTML-Element, in dem sich der gesamte Inhalt befindet. Kombinieren Sie dies mit einer Blockausrichtung in voller Breite: Gestalten Sie das äußere Element (mit der Hintergrundfarbe oder dem Bild) so, dass es vollständig in voller Breite erscheint, und gestalten Sie dann das innere HTML-Element mit dem Inhalt so, dass es in den Container Ihres Designs passt.
Nehmen Sie zum Beispiel an, dass Ihr Design einen Container mit maximaler Breite von 1200 Pixel hat. Sie haben wahrscheinlich bereits eine bestimmte HTML-Klasse, die mit max-width formatiert ist, um sicherzustellen, dass Ihre Inhalte unabhängig von der Bildschirmgröße nicht einfach in voller Breite angezeigt werden. Fügen Sie Ihr maximales Breiten-Styling zum inneren HTML des Covers hinzu; Klassenname wp-block-cover__inner-container. Als Beispiel:
.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
.wp-block-cover.alignfull .wp-block-cover__inner-container {
position: relative;
width: 100%;
max-width: 1200px;
padding: 0 20px;
}Im obigen CSS-Code ziele ich auf zwei Cover-Elternklassen ab. Die Klasse des übergeordneten Cover-Blocks ändert sich abhängig davon, ob Sie ein Hintergrundbild auswählen oder nicht. Abdeckblöcke mit einem Hintergrundbild erhalten die Klasse „ wp-block-cover-image” und Abdeckblöcke mit einer Hintergrundfarbe erhalten die Klasse „ wp-block-cover“. Zusätzlich ziele ich mit der Klasse „ ” auch auf das Block-Alignment „Volle Breite” alignfull. Die Blockausrichtung „Wide Width” erhält die Klasse „ alignwide“. Fügen Sie CSS hinzu, um auch auf diese Blockausrichtung abzuzielen – je nachdem, was Sie tun möchten.
Wenn Sie angefangen haben, damit herumzuspielen, sind Sie möglicherweise auf Probleme mit dem allgemeinen Layout im Thema gestoßen. Ihr Thema zwingt Ihre Cover-Blöcke in voller Breite wahrscheinlich dazu, überhaupt nicht in voller Breite zu gehen. Schauen wir uns das als nächstes an.
Theme-Layout und Styling in voller Breite
Bisher haben wir Unterstützung für breite und volle Breitenblöcke hinzugefügt und gelernt, wie man den Cover-Block verwendet und optimiert, um sich wie Startseiten- oder Landingpage-Abschnitte zu verhalten. Aber in den meisten Themen können Ihr HTML und Layout verhindern, dass Ihr Beitragsinhalt die volle Breite erreicht.
Ihr Thema hat wahrscheinlich eine rechte Seitenleiste in der Einzelpost- oder Seitenansicht. Es gibt wahrscheinlich zusätzliche HTML-Wrapper, einschließlich eines Containerelements mit maximaler Breite, das verhindert, dass Ihre Blöcke mit voller Breite tatsächlich die volle Breite erreichen. Ihre Wrapper haben wahrscheinlich auch einige Ränder oder Polster, was wiederum verhindert, dass die Blöcke in voller Breite die Ränder des Bildschirms vollständig berühren. Aber Sie müssen dafür sorgen, dass einzelne Posts oder Seiten auch für Posts gut aussehen, in denen der Benutzer keine Cover-Blöcke verwendet. Sie müssen Ihre Wrapper bei der Entwicklung für Gutenberg mit Unterstützung für breite und volle Blöcke berücksichtigen. Es hängt alles vom Design, HTML und Styling Ihres Themas ab – aber schauen wir uns einige Ideen an, um dies zu lösen.
Eine gute Lösung wäre das Hinzufügen von Post-Optionen; benutzerdefinierte Metaeinstellungen für Beiträge und Seiten, die sich auf das Layout dieser Seite auswirken. Sie können eine Einstellung vornehmen, um die Seitenleiste auszublenden oder Ihren Beitragsinhalt auf die volle Breite zu zwingen. Erstellen Sie Post-Einstellungen manuell selbst, indem Sie Metaboxen hinzufügen, oder verwenden Sie erweiterte benutzerdefinierte Felder, um diesen Vorgang zu vereinfachen. Und dann holst du in deinem Theme die Post-Einstellungen und handhabst die HTML-Ausgabe entsprechend.
Andere gute Post-Optionen sind das Ausblenden des Seitentitels und/oder das Ausblenden des vorgestellten Bildes. Auf diese Weise können Sie Inhalte normal erstellen, aber für bestimmte Seiten können Sie ganz einfach eine Zielseite vollständig mit Cover-Blöcken in voller Breite einrichten. Indem Sie den Standard-Seitentitel ausblenden, können Sie eine besser aussehende Kopfzeile oder einen Call-to-Action-Abschnitt erstellen, der stattdessen als Seitentitel fungiert.
Erstellen Sie Blockstile
Es gibt eine wenig bekannte Funktion in WordPress Gutenberg; Blöcke können unterschiedliche Stile haben. Mit dem Quote-Block können Sie Blockstile in Aktion sehen. Fügen Sie den Block in Ihrem Editor hinzu und werfen Sie einen Blick auf den Inspektor (rechte Seitenleiste). Sie finden das Thema „Stile” und zwei Optionen zwischen verschiedenen Stilen.
Erstellen Sie benutzerdefinierte Stile, die das Erstellen von Startseiten und Zielseiten vereinfachen. Ich schlage vor, zumindest benutzerdefinierte Blockstile zum Überschriftenblock hinzuzufügen, damit Sie benutzerdefinierte Stile erstellen können, ohne Überschriften für normale Posts zu unterbrechen. Erstellen Sie einen Blockstil für Abschnittstitel mit extra großer Schrift und zusätzlicher Polsterung.
Wenn Sie versuchen, Titelseiten zu erstellen, notieren Sie sich, was Sie wiederholt anpassen müssen – dies könnte gut zu einem Blockstil passen.
Das Hinzufügen benutzerdefinierter Blockstile ist eigentlich ganz einfach und erfordert keine Javascript-Kenntnisse. Ich habe ein separates Tutorial dazu, wenn Sie mehr darüber erfahren möchten.
PS: Wenn Sie keine Blockstile sehen, fehlt Ihrem Design möglicherweise die Unterstützung dafür. Der Prozess ist derselbe wie bei den Blockausrichtungen mit breiter und voller Breite. im Haken after_setup_themefügen Sie hinzu add_theme_support('wp-block-styles'):
add_action('after_setup_theme', function() {
add_theme_support('wp-block-styles');
});Themenfarben als Farbpalette verwenden
Wenn Sie mit Gutenberg herumgespielt haben, ist Ihnen wahrscheinlich aufgefallen, dass Gutenberg Ihnen einen bestimmten Farbsatz für Text- oder Hintergrundfarbe anbietet. Wenn Sie beispielsweise einen Cover-Block hinzufügen, werden Sie aufgefordert, eine Farbe aus einer Farbpalette auszuwählen.
Sie haben die Möglichkeit, einen Farbwähler zu verwenden, um die Hex-Farbe genau auf die gewünschte Farbe einzustellen oder einzugeben. Sie können darauf zugreifen, indem Sie auf den Link „Benutzerdefinierte Farbe” klicken. Wenn Sie jedoch denselben Farbsatz in Ihrem Design verwenden und ihn konsistent halten möchten, kann es mühsam sein, sich ständig daran zu erinnern und jedes Mal dieselben Hex-Farbcodes einzugeben.
Glücklicherweise erlaubt Ihnen WordPress Gutenberg, die Farbpalette zu definieren! Dies ist ein weiterer add_theme_support()Punkt, an dem Sie ein Array der gewünschten Farben in der Palette bereitstellen. Gehen Sie in einer Funktion after_setup_theme, die mit verknüpft ist, wie folgt vor:
Im obigen Code fügen wir Designunterstützung für „ editor-color-palette” hinzu, und als zweiten Parameter der Funktion definieren wir ein Array mit allen gewünschten Farben. Jede Farbe erfordert die Attribute name, slug, und color. namewird angezeigt, wenn Sie mit der Maus über die Farbe in der Palette fahren. slugist der Klassenname, der dem Blockelement hinzugefügt wird. Und colordefiniert den Hex-Code für Ihre Farbe.
Denken Sie daran, dass Sie Stile in Ihrem CSS hinzufügen müssen, die auf jede dieser Klassen abzielen (definiert durch slug). WordPress wendet die Hex-Farbe nicht automatisch auf deine Blöcke an, obwohl wir WordPress mitteilen, was der Farbcode ist.
Als Beispiel ist das Bild rechts meine Farbpalette, die ich für das Thema dieser Website definiert habe – für A White Pixel:
Das sind meine Themenfarben und in 95% der Fälle werde ich eine dieser Farben verwenden – entweder als Hintergrund- oder als Textfarbe. In seltenen Fällen kann ich den Farbwähler zücken, aber die üblichen Verdächtigen bereits in der Farbpalette definiert zu haben, macht das Leben viel einfacher.
Ein Tipp ist, immer darauf zu achten, Ihrer Farbpalette reines Schwarz (#000000) und reines Weiß () hinzuzufügen. #FFFFFFEs ist wahrscheinlich auch eine gute Idee, ein oder zwei hellgraue Farben zu haben.
Verwenden einer statischen Startseite und Optimieren des Startseiten-Templates
Sie wissen wahrscheinlich bereits davon, aber ich werde es trotzdem erwähnen. In WordPress können Sie eine statische Seite als Startseite festlegen, indem Sie zu Einstellungen > Lesen gehen.
Standardmäßig zeigt die Startseite von WordPress eine Liste der neuesten Beiträge. Wenn Sie jedoch „Eine statische Seite” auswählen und eine Seite aus der Dropdown-Liste auswählen, zeigt WordPress diese Seite als Startseite Ihrer Website an.
Dies ist ein Kinderspiel beim Einrichten einer Startseite für Ihre WordPress-Site. In der ausgewählten Seite können Sie die Startseite mit allen oben genannten Tricks erstellen. Beispielsweise haben Sie möglicherweise nicht aktivierte Beitragsoptionen zum Anzeigen des Seitentitels, der Seitenleiste und des vorgestellten Bildes. Und die Seite ist vollständig mit Cover-Blöcken und Inhalten in voller Breite aufgebaut. Sie können sich jedoch dafür entscheiden, die Post-Optionen (Seitenleiste ausblenden usw.) nicht zu wählen und einfach eine Startseitenvorlage zu erstellen, um diese zu ersetzen oder zu erzwingen.
Wenn Ihr WordPress als statische Seite als Startseite festgelegt ist, sucht WordPress nach der Vorlage front-page.phpin Ihrem Design. Dies wird anstelle von verwendet page.php. Auf diese Weise können Sie eine separate Vorlage erstellen und anpassen, die nur für Ihre Startseite verwendet wird.
In dieser front-page.phpVorlage können Sie bereits HTML definieren, um sicherzustellen, dass alle Blöcke die volle Breite haben, keine Seitenleiste, keinen Seitentitel oder ein ausgewähltes Bild haben. Vielleicht möchten Sie einfach nur tun the_content(), um den Inhalt der Seite vollständig auszugeben.
Dies ist zum Beispiel das, was ich in diesem Site-Design habe front-page.php. Während ich in allen anderen Vorlagen, wie z. B. page.php, jede Menge Ausgaben für Seitenleiste, Beitragstitel usw. habe, ist dies der volle Umfang meiner Schleife in front-page.php:
while (have_posts()): the_post();
the_content('');
endwhile;Das ist es. Mein Wrapping-HTML und meine Klassen stellen sicher, dass der Beitragsinhalt vollständig in voller Breite ist.
Denken Sie daran, dass dies eine gute Lösung ist, wenn Sie als Benutzer des Themas verstehen, wie Ihre Vorlagen funktionieren. Ich weiß, dass alle meine Inhalte auf meiner Startseite vollständig in Cover-Blöcke eingeschlossen sein müssen. Ich verlasse mich auf das innere Container-HTML des Cover-Blocks, um sicherzustellen, dass meine Inhalte gut aussehen und in einen Container mit maximaler Breite fallen. Wenn ich einen einfachen Absatz-Block ohne umhüllenden Cover-Block hinzufügen würde, würde er nicht gut aussehen, da ihm die Polsterung an den Seiten fehlen würde.
Machen Sie Ihren Website-Header beim ersten Cover-Block transparent
Ein sehr häufiges Merkmal moderner Websites ist es, den Header auf der Startseite transparent zu machen. Wenn der Benutzer beginnt, die Seite nach unten zu scrollen, ändert sich die Kopfzeile in ein festes Design und erhält einen Hintergrund. Aber einen transparenten Header zu behalten kann wirklich schön aussehen, wenn wir die Farben oder das Bild hinter dem ersten Abschnitt sehen können.
Ich mache das auf der Titelseite dieser Seite. Schau mal! Ganz oben auf der Seite hat meine Kopfzeile keinen Hintergrund und zeigt den Hintergrund des violetten Farbverlaufsabschnitts (ein Cover-Block) dahinter. Sobald Sie mit dem Scrollen beginnen, wird ein fester fester Hintergrund angezeigt.
Denken Sie daran, dass Sie sich der Farben in Ihrer Kopfzeile und dem Hintergrund des ersten Covers bewusst sein müssen. Wenn Ihre Kopfzeile aus einem weißen Logo und weißen Menüelementen besteht (wie bei mir), können Sie diesen Trick nicht mit einem Cover-Block mit hellem Hintergrund verwenden. Das würde Ihren Header unlesbar machen!
Wenn Sie dies tun möchten, denken Sie daran, dass ein wenig Javascript-Kenntnisse erforderlich sind. Aber es ist eigentlich ganz einfach. Ich werde die Grundlagen für Sie durchgehen:
Mein gesamtes Header-Element ist immer position: fixed. Da ich normalerweise nicht möchte, dass mein Inhalt hinter dem Header verschwindet, habe ich dem body-Element ein padding-top hinzugefügt, das den Inhalt nach unten unter den Header schiebt. Ich habe jedoch eine Regel hinzugefügt, dass diese Auffüllung nicht hinzugefügt wird, wenn wir uns auf der Startseitenvorlage befinden. Dadurch wird sichergestellt, dass nur auf der Titelseite der Body-Teil hinter dem Header erscheint. Dann richte ich den ersten Cover-Block auf die Titelseite aus und füge ein zusätzliches Padding-Top hinzu, um sicherzustellen, dass der Inhalt dieses ersten Blocks nicht hinter dem Header aufliegt – was ihm eine schöne gute Polsterung nach dem Header gibt.
Und dann habe ich einen sehr einfachen Javascript-Code mit jQuery hinzugefügt:
Dieser Code fügt eine Klasse „ navbar-fixed” hinzu, wenn die Seite weiter als 60 Pixel nach unten gescrollt wird. Und in meinem CSS ziele ich einfach auf diese Klasse und füge eine feste Hintergrundfarbe hinzu. Ohne diese Klasse ist der Hintergrund des Headers auf der Startseite transparent.
Das sind die Grundlagen. Spielen Sie mit dem CSS herum – passen Sie den „Spitzenpunkt” von Javascript an und verwenden Sie zum Beispiel transitiondie Eigenschaft, um einen fließenderen Übergang zu erzielen, wenn die Hintergrundfarbe angewendet wird.
Tolle Blöcke für Startseiten und Zielseiten
WordPress bietet eine vollständige Palette von Blöcken, die Sie sofort verwenden können. Einige von ihnen sind besonders nützlich beim Erstellen einer Titelseite oder Zielseite. Wenn Sie bereits mit allen verfügbaren Blöcken vertraut sind, kennen Sie diese wahrscheinlich bereits.
- Spalten. Ein Block, der verschachtelte Blöcke zulässt, was bedeutet, dass Sie beliebige Blöcke in jeder Spalte hinzufügen können. Sie können Spalten auch innerhalb eines Cover-Blocks hinzufügen. Perfekt, um Inhalte in Spalten zu strukturieren. Sie können die Anzahl der Spalten und für jede Spalte deren Breite festlegen. Sie können alle gleich breit oder benutzerdefinierte Breiten haben.
- Gruppe. Ein weiterer Block, der verschachtelte Blöcke erlaubt. Großartig, um einen farbigen Hintergrund um eine Reihe anderer Blöcke zu setzen (wie einen Titel und ein paar Absätze).
- Schaltfläche. Es gibt keine Startseite ohne Schaltflächen. Buttons eignen sich hervorragend als Call-to-Action und um Ihre Besucher dorthin zu leiten, wo Sie sie hinführen möchten. Sie können das Aussehen und Design der Schaltfläche anpassen. Kombinieren Sie dies mit benutzerdefinierten Blockstilen für Schaltflächen!
- Abstandshalter. Wenn Sie das Gefühl haben, dass Ihnen in Ihren Abschnitten der Platz fehlt, fügen Sie einen Spacer-Block hinzu – das ist einfach nur Platz ohne Inhalt. Sie können die Höhe des Abstandshalters definieren.
- Trennzeichen. Ähnlich wie der Spacer-Block, fügt aber eine schöne Linie hinzu. Eine weitere Möglichkeit, Inhalte klar zu trennen. Passen Sie das Design der Linie im CSS Ihres Designs an oder fügen Sie benutzerdefinierte Blockstile hinzu.
- Galerie. Hervorragend zum Präsentieren von Bildern. Hat Unterstützung für Blockausrichtung in voller Breite, sodass Sie eine Bildergalerie in voller Breite auf Ihrer Startseite erstellen können.
- Medien & Text. Eine schöne einfache Möglichkeit, ein Bild oder Medium neben Text auszurichten. Könnte in einigen Fällen eine bessere Option als Spalten sein.
- Einbettungen: Youtube ++. WordPress bietet eine Reihe von Einbettungen für Medien. Sie können zum Beispiel ein Youtube-Video in voller Breite auf Ihrer Startseite abspielen lassen.
- Widgets: Suchfeld, neuste Beiträge, Kalender++. WordPress bietet einige nette Standardinhaltselemente. Wenn Sie eine Liste der letzten Beiträge oder eine Suchleiste auf Ihrer Zielseite anzeigen möchten, tun Sie dies.
Wenn Sie jedoch das Gefühl haben, dass Ihnen Blöcke fehlen, um das zu tun, was Sie wollen, besteht die Lösung darin, Ihre eigenen benutzerdefinierten Blöcke zu erstellen.
Benutzerdefinierte Blöcke erstellen
Ein sehr häufiges Merkmal auf einer Titelseite oder Zielseite ist ein „Shortcut”-Element; wo Sie einen Beitrag oder eine Seite auswählen, und es wird ein Block ausgegeben, der auf den Beitrag verweist und das vorgestellte Bild, den Titel des Beitrags und möglicherweise den Auszug enthält. Zum Zeitpunkt der Erstellung dieses Artikels gibt es keine solche Option in Standard-WordPress. Sie müssten diese Verknüpfung manuell selbst erstellen, indem Sie dasselbe vorgestellte Bild wie im Beitrag manuell einfügen, den Titel und den Auszug des Beitrags manuell eingeben und alles in einen Link einschließen.
Andere Beispiele für Blöcke, die für den Aufbau von Startseiten und Zielseiten sehr nützlich sind, sind Schieberegler / Karussells, Preisvergleichstabellen und Testimonials.
Um für diese Art von Blöcken zu optimieren, müssen Sie entweder ein Plugin finden, das Ihnen dies bietet (ich habe diese Option nicht untersucht), oder sie selbst erstellen. Das Erstellen Ihrer eigenen benutzerdefinierten Blöcke erfordert erhebliche Kenntnisse in Javascript und React sowie eine Menge Codierung. Ich empfehle jedoch, diesen Weg zu gehen, wenn Sie es ernst meinen, ein WordPress-Entwickler zu sein.
Wenn Sie daran interessiert sind zu lernen, wie man benutzerdefinierte Blöcke für Gutenberg erstellt, habe ich eine Tutorial-Serie, die dies im Detail durchgeht.
Sie können sich auch für eine einfachere Route entscheiden und Advanced Custom Fields Pro (ACF) erwerben. Mit diesem Plugin können Sie ohne Javascript-Kenntnisse benutzerdefinierte Gutenberg-Blöcke erstellen. Sie steuern einfach die PHP-Ausgabe der Blöcke und überlassen ACF den Javascript-Teil. Beachten Sie jedoch, dass dadurch eine Abhängigkeit Ihres Designs von einem lizenzierten Plugin entsteht.
Fazit
Ich hoffe, dieser Beitrag hat Ihnen geholfen, Ihre Fähigkeiten und Ihr Wissen mit WordPress Gutenberg weiterzuentwickeln! Zum Zeitpunkt des Schreibens fehlt es wirklich an Informationen und Erfahrung, wie Sie Ihr Thema für Gutenberg optimieren können. Es fiel mir besonders schwer, etwas darüber zu finden, wie man eine Titelseite schön aufbaut. Das habe ich also durch viel Experimentieren und Herumspielen gelernt.