So erstellen Sie Gutenberg-Vorlagen

Einer der Vorteile beim Erstellen von Seiten und Beiträgen mit Gutenberg-Blöcken ist die Möglichkeit, diese als Vorlagen zu speichern. Das Erstellen von Vorlagen für Gutenberg ist eine großartige Möglichkeit, den Veröffentlichungsprozess zu beschleunigen. Es gibt mehrere Möglichkeiten, sie zu erstellen. In diesem Artikel erfahren Sie, wie Sie Gutenberg-Vorlagen erstellen.

Wir werden drei Methoden zu deren Erstellung behandeln:

1. Erstellen eines Layouts zum Hinzufügen zu Ihrer Gutenberg-Bibliothek zum Exportieren oder Klonen.
2. Erstellen eines Layouts zum Kopieren und Einfügen, wenn Sie es verwenden möchten.
3. Erstellen eines Layouts zum Hinzufügen als Standardlayout für Seiten, Beiträge oder benutzerdefinierte Beitragstypen.

Mit diesen Methoden können wir nur die Blöcke wiederverwenden. Andere Einstellungen werden nicht übernommen.

Warum Gutenberg-Vorlagen erstellen?

Nachdem Sie Ihr Seiten- oder Post-Layout entworfen haben, können Sie die Liste der Blöcke mit ihren Attributen zur Wiederverwendung speichern. Dies gibt Ihnen einen Vorsprung bei der Erstellung Ihrer Inhalte, da Sie sich nicht auf das Layout konzentrieren müssen. Blockvorlagen ermöglichen Ihnen ein einheitliches Design.

Die Blockvorlage kann Platzhalterinhalte enthalten. Sie können statisch oder dynamisch sein. Sie können den Standardzustand einer Editorsitzung definieren. Sie können Ihre Vorlagen sogar als JSON-Dateien importieren oder exportieren, sodass Sie Ihre Designs auf mehreren Websites wiederverwenden oder mit anderen teilen können. Sie können sie sperren, damit Benutzer Inhalte hinzufügen, aber die Blöcke nicht ändern können.

Methode 1: Erstellen Sie eine Layout-Vorlage

Mit Layoutvorlagen können Sie die ursprünglich hinzugefügte Mehrfachauswahlfunktion verwenden, damit wir mehrere Blöcke gleichzeitig verschieben oder löschen können.

Wir können jeweils einen Block oder mehrere Blöcke gleichzeitig auswählen und zu unserer Bibliothek globaler wiederverwendbarer Blöcke hinzufügen. Dies erleichtert den Export als JSON-Dateien.

Beispiel-Layout-Vorlage

Ich habe ein einfaches Layout erstellt, das ich als Blogbeitrag, Produktbewertung usw. verwenden kann. Es ist einfach, dieses zur Wiederverwendung in der Bibliothek zu speichern.

Platzieren Sie Ihren Cursor auf dem ersten Block, den Sie einschließen möchten, und ziehen Sie Ihre Maus zum letzten Block, um ihn hervorzuheben.

Über dem ersten Block sehen Sie links drei Punkte. Klicken Sie auf die Punkte und wählen Sie Zu wiederverwendbaren Blöcken hinzufügen aus .

Die grüne Nachrichtenleiste oben zeigt an, dass der Block erstellt wurde. Geben Sie dem Layout einen für Sie sinnvollen Namen und wählen Sie Speichern .

Die Meldung in der grünen Leiste zeigt an, dass der Block aktualisiert wurde. Sie haben das Layout erstellt!

Um es zu verwenden, erstellen Sie eine neue Seite oder einen neuen Beitrag und öffnen Sie die Optionen (drei Punkte). Wählen Sie unter Tools die Option Alle wiederverwendbaren Blöcke verwalten aus .

Dies zeigt eine Liste aller Ihrer Blöcke. Hier können Sie Ihre Blöcke als JSON-Dateien exportieren und importieren. Wiederverwendbare Blöcke sind global. Wenn Sie bearbeiten, bearbeiten Sie das Original. Um das Original zu behalten und einen neuen Beitrag mit dem Layout zu erstellen, musst du ihn exportieren, umbenennen und das Layout importieren.

Doppelte Beiträge

Zum Glück haben wir eine andere Möglichkeit. Ein Plugin namens Duplicate Post fügt eine Klonfunktion für Gutenberg-Blöcke hinzu.

Aktivieren Sie in den Einstellungen zum Duplizieren von Beiträgen die Option Blöcke .

Ich habe jetzt eine Klonoption in der Blockbibliothek. Klonen Sie das gewünschte Layout und bearbeiten Sie es. Jedes Layout ist global, sodass Sie jedes Mal klonen und bearbeiten müssen, wenn Sie das Layout verwenden möchten.

Methode 2: Eine einfache Alternative zum Erstellen einer Gutenberg-Vorlage

Diese Methode ist nur ein einfacher Cheat, aber sie funktioniert. Erstellen Sie zunächst ein Layout, das Sie komplett mit Platzhalterinhalten wiederverwenden möchten.

Wechseln Sie als nächstes zum Code-Editor. Wählen Sie dazu die drei Punkte in der oberen rechten Ecke aus. Wählen Sie unter Editor die Option Code-Editor aus .

Markieren und kopieren Sie den Code.

Fügen Sie den Code in einen Texteditor ein und speichern Sie ihn zur Wiederverwendung.

Wenn Sie die Vorlage verwenden möchten, erstellen Sie einfach einen neuen Beitrag, wechseln Sie zum Code-Editor und fügen Sie den Code ein.

Ich habe jetzt einen neuen Beitrag, zu dem ich Inhalte hinzufügen kann.

Methode 3: Erstellen Sie einen benutzerdefinierten Beitragstyp

Eine Blockvorlage ist ein Argument. Sie können das Argument zu Seiten und Beiträgen hinzufügen oder einen neuen Beitragstyp erstellen. Das Layout ist an diesen Beitragstyp gebunden. Wenn Sie diesen Beitragstyp erstellen, wird das Layout standardmäßig angezeigt.

Dies ist ideal zum Erstellen von Layouts für verschiedene Arten von Artikeln. Sie könnten beispielsweise einen Beitragstyp für eine Produktbewertung, einen Beitragstyp für eine Urlaubszusammenfassung, einen Rezeptbeitragstyp usw. haben, und wenn Sie den Beitragstyp laden, wird Ihnen automatisch das damit verbundene Layout bereitgestellt.

Das Erstellen der Vorlage umfasst:

• Den Standardzustand dynamisch setzen.
• Registrieren als Standardlayout für einen bestimmten Beitragstyp.

Deklarieren der Vorlage

Das Template selbst wird als Array von blockTypes deklariert. Dies geschieht in JavaScript oder in PHP. Wie das Gutenberg-Entwicklerhandbuch zeigt, würde es so aussehen:

const template = [

[ 'block/name', {} ], // [ blockName, attributes ]

];

Oder dieses:

'template' => array(

array( 'block/name' ),

),

Registrieren der Vorlage in benutzerdefinierten Beitragstypen

Der benutzerdefinierte Beitragstyp kann auch die Vorlage registrieren. Es könnte so aussehen:

function myplugin_register_book_post_type() {

$args = array(

'public' => true,

'label'  => 'Books',

'show_in_rest' => true,

'template' => array(

array( 'core/image', array(

'align' => 'left',

) ),

array( 'core/heading', array(

'placeholder' => 'Add Author...',

) ),

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

),

);

register_post_type( 'book', $args );

}

add_action( 'init', 'myplugin_register_book_post_type' );

Das Array identifiziert die Herkunft des Blocks und den Namen des Blocks. In diesem Beispiel verwendet das Array 'core/paragraph'. Dies bedeutet, dass der Block aus dem WordPress-Kern stammt (im Gegensatz zu einem Plugin) und sein Name it-Absatz (der zu verwendende Block identifiziert).

Registrieren der Vorlage in Seiten und Beiträgen

Wenn Sie die Vorlage zu Seiten oder Beiträgen hinzufügen, wird sie jedes Mal automatisch geladen, wenn Sie eine Seite oder einen Beitrag erstellen. Ich ziehe es vor, sie bestimmten benutzerdefinierten Post-Typen hinzuzufügen, weil Sie mehr kreative Freiheit haben und es den Prozess der Inhaltserstellung rationalisiert, indem die Vorlagen leichter zu finden sind.

Wenn Sie sie zu Seiten oder Beiträgen hinzufügen möchten, können Sie diesen Code verwenden:

function my_add_template_to_posts() {

$post_type_object = get_post_type_object( 'post' );

$post_type_object->template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

);

$post_type_object->template_lock = 'all';

}

add_action( 'init', 'my_add_template_to_posts' );

Verschachtelungsvorlagen

Sie können Vorlagen sogar innerhalb von Containerblöcken (z. B. Spaltenblöcken) verschachteln. Dies geschieht, indem dem Block selbst eine verschachtelte Vorlage zugewiesen wird. Zum Beispiel:

$template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add a root-level paragraph',

) ),

array( 'core/columns', array(), array(

array( 'core/column', array(), array(

array( 'core/image', array() ),

) ),

array( 'core/column', array(), array(

array( 'core/paragraph', array(

'placeholder' => 'Add a inner paragraph'

) ),

) ),

) )

);

Sperren der Vorlage

Sie können die Vorlage mit diesem Code sperren:

'template_lock' => 'all', // or 'insert' to allow moving

Beispielvorlage mit einem benutzerdefinierten Beitragstyp

Ich möchte den benutzerdefinierten Beitragstyp namens Bücher erstellen, den wir oben gesehen haben. Es zeigt die Layoutvorlage an und enthält ein Bild, eine Überschrift und einen Absatz.

Der Code wird in die Datei functions.php eingefügt. Verwenden Sie immer ein untergeordnetes Thema, wenn Sie den PHP-Dateien Code hinzufügen. Wenn Sie dies nicht tun, wird der Code überschrieben, wenn Sie das Design aktualisieren.

Sie müssen den Code von Hand schreiben (ich empfehle die Verwendung der Codebeispiele, die ich gezeigt habe). Eine Möglichkeit besteht darin, das gewünschte Layout zu erstellen und dann den Code anzuzeigen (klicken Sie auf die drei Punkte in der oberen rechten Ecke und wählen Sie Code-Editor im Abschnitt Editor ). Dadurch werden die Blöcke mit ihren Attributen aus dem bereits erstellten Layout angezeigt, damit Sie im Voraus wissen, wie Sie die Blöcke in Ihrem Code anordnen.

Gehen Sie in die Themenfunktionen (functions.php) und fügen Sie den Code ein. Den Code habe ich ganz unten eingefügt. Dies ist eine Test-Site und ich habe nicht vor, den Code beizubehalten, daher habe ich kein untergeordnetes Thema verwendet.

Dem Dashboard-Menü wird ein neuer Beitragstyp namens Bücher hinzugefügt. Es enthält eine Liste und einen Link Neu hinzufügen. Ich klickte hinzufügen Neue und meine neue Vorlage wird in den Editor hinzugefügt , wo ich einfach das Hinzufügen von Inhalten beginnen.

Die Blöcke werden in der Reihenfolge platziert, in der sie im Code erscheinen, und enthalten die ihnen zugewiesenen Attribute. Sie können beliebig viele Blöcke in den Code einfügen und ihnen beliebige Attribute zuweisen. Sie können so viele benutzerdefinierte Beitragstypen erstellen, wie Sie möchten, und jeder kann ein einzigartiges Standardlayout haben. Dieses Beispiel enthält Platzhaltertext.

Gedanken beenden

Das ist unser Blick auf die Erstellung von Gutenberg-Vorlagen. Alle drei Methoden funktionieren super. Die wiederverwendbaren Vorlagen oder eine der Duplizierungsmethoden sind möglicherweise die bessere Wahl, wenn Sie keine neuen benutzerdefinierten Beitragstypen erstellen möchten. Ich mag die benutzerdefinierten Beitragstypen, weil es einfach ist, den Inhaltstyp auszuwählen, den Sie erstellen möchten, und die Vorlagen für Sie vorsortiert sind.

Die benutzerdefinierten Beitragstypen sind einfach zu erstellen, wenn Sie mit Code vertraut sind, und sie sind am bequemsten in WordPress zu verwenden. Der Hauptnachteil beim Erstellen von Vorlagen zum Hinzufügen zu Ihrer functions.php besteht darin, dass Sie das Layout im Code und nicht im Gutenberg-Editor erstellen, also nicht visuell.

Ich mag es, dass Sie Ihren Vorlagen vorgefertigte Inhalte hinzufügen können. Dies ist ideal für Platzhaltertext, um Mitwirkenden zu zeigen, welche Informationen wohin gehören. Wiederverwendbare Vorlagen sind eine großartige Möglichkeit, Ihren Workflow-Prozess zu beschleunigen und zu rationalisieren, und sie sind eine großartige Möglichkeit, Seiten- und Beitragslayouts zum Teilen zu erstellen.

Wir wollen von dir hören. Haben Sie Gutenberg-Vorlagen erstellt? Teilen Sie uns Ihre Erfahrungen in den Kommentaren unten mit.

Ausgewähltes Bild über Nadia Snopek / shutterstock.com