Erstellen Sie Gutenberg-Blockvorlagen für ein besseres Erlebnis

WordPress 5.x ist die neueste Version des weltweit beliebtesten CMS. Ein interessantes Feature der neuen Version ist der Gutenberg Editor, der die Art und Weise revolutionieren wird, wie WordPresser Inhalte auf der Plattform erstellen. Das ist zumindest die offizielle Version!

Unabhängig davon, was Sie über den Gutenberg-Editor denken, ist es wichtig zu wissen, dass dieser Editor in den kommenden WordPress-Releases nicht verschwindet. Der Grund ist einfach: Der „klassische“ WordPress-Editor ist in die Jahre gekommen. Darüber hinaus ist die neue Generation von Benutzern, die mit Editoren auf anderen ähnlichen Plattformen vertraut sind, mit dem Editor im Gutenberg-Stil vertrauter als mit dem klassischen Editor.

Anpassen von Gutenberg-Blöcken

Der Gutenberg-Editor basiert auf der Idee von „Blöcken“, diskreten Komponenten, die nach Belieben verwendet werden können, um dem Inhalt die gewünschte Funktionalität hinzuzufügen. Durch diese Gutenberg-Blöcke kann der Benutzer anpassbare und unabhängig verwaltbare Abschnitte hinzufügen, die einen Mehrwert für die Leser darstellen.

Da die Anpassung im Kern von WordPress liegt, unterstützt der Gutenberg-Editor benutzerdefinierte Blockvorlagen, mit denen Benutzer ihrem CMS benutzerdefinierte Blöcke hinzufügen können.

Es gibt zwei Möglichkeiten, benutzerdefinierte Gutenberg-Blockvorlagen zu erstellen. Beachten Sie, dass beide Methoden einige WordPress-Entwicklungskenntnisse erfordern.

Gutenberg-Blöcke registrieren

Die erste Methode umfasst das Erstellen benutzerdefinierter Blockvorlagen, die zum Erstellen von vorbelegten Blöcken verwendet werden können. Fügen Sie dazu den folgenden Code in die Datei functions.php ein

 add_action( 'init', function() {
    $args = Array(
        'öffentlich' => wahr,
        'label' => 'Neuigkeiten',
        'show_in_rest' => wahr,
        'template_lock' => 'alle',
        'Vorlage' => Array(
            Array( 'Kern/Absatz', Array(
                'placeholder' => 'Breaking News',
            )),
            Array( 'Kern/Bild', Array(
                'ausrichten' => 'rechts',
            )),
        ),
    );

    register_post_type( 'news', $args );
} );

So würde diese benutzerdefinierte Vorlage für den Gutenberg-Block in Aktion aussehen:

Im obigen Code-Schnipsel ist der Array-Parameter 'core/paragraph' für den Inhalt des Blocks verantwortlich. Ebenso ermöglicht der Array-Parameter 'core/image' das Hochladen von Bildern auf drei Arten: Direktes Hochladen, Auswählen aus der Medienbibliothek und Einbetten über eine URL.

Der Parameter 'show_in_rest' zeigt dem WordPress-Kern an, dass dieser benutzerdefinierte Block über die WordPress-REST-API abgerufen werden kann.

Das Argument 'template_lock' verhindert, wenn es auf 'all' gesetzt ist, das Hinzufügen (oder Entfernen) der benutzerdefinierten Blöcke zur Vorlage.

Wenn Sie dieser Vorlage einen benutzerdefinierten Block hinzufügen möchten, verwenden Sie das Unterarray "Vorlage". Betrachten Sie zum Beispiel das folgende Snippet:

 'Vorlage' => Array(
            array( 'core/heading', array( 'level' => '4', 'content' => 'heading' ) ),
            Array( 'Kern/Absatz' ),
        )

Erstellen Sie ein Gutenberg-Plugin

Wenn Sie mit benutzerdefinierten Vorlagen und Gutenberg-Vorlagen arbeiten, sollten Sie am besten ein benutzerdefiniertes Plugin für das benutzerdefinierte Gutenberg-Editor-Plugin erstellen.

Wie alle Plugins befindet sich dieses Plugin im Verzeichnis wp-content/plugins, das separate Ordner für alle auf der Website installierten Plugins enthält.

Um das Plugin zu erstellen, gehen Sie in das Verzeichnis wp-content/plugins und erstellen Sie einen neuen Ordner. Der Name des Ordners sollte der Name des benutzerdefinierten Gutenberg-Vorlagen-Plugins sein. Für dieses Tutorial habe ich mein Plugin 'Gutenberg Blocks' genannt. Der Name des Ordners wäre also ' Gutenberg-Blocks '.

Erstellen Sie in diesem Ordner eine Datei namens Gutenberg-blocks.php und den folgenden Code dazu:

 /**
 * Plugin-Name: Gutenberg-Blöcke
 * Autor: Muhammad Owais Alam
 * Beschreibung: Mit diesem Plugin können Benutzer eine benutzerdefinierte WordPress Gutenberg-Vorlage für den Gutenberg-Editor hinzufügen
 * Version: 1.0.0
 */

add_action( 'init', function() {
    $args = Array(
        'öffentlich' => wahr,
        'label' => 'Neuigkeiten',
        'show_in_rest' => wahr,
        'template_lock' => 'alle',
        'Vorlage' => Array(
            Array( 'Kern/Absatz', Array(
                'placeholder' => 'Breaking News',
            )),
            Array( 'Kern/Bild', Array(
                'ausrichten' => 'rechts',
            )),
        ),


    );

    register_post_type( 'news', $args );
} );

Beachten Sie, dass dieser Code nur als Richtlinie gedacht ist und Sie die Details an Ihre Anforderungen anpassen können. Nach der Installation erscheint dieses Plugin in der Liste der verfügbaren Plugins.

Gutenberg WordPress Theme Beispiel – Gutenberry

Der neue ablenkungsfreie Editor Gutenberg ist seit fast einem Jahr Teil des WordPress-Kerns. Bis Gutenberry herauskam, war es jedoch ziemlich schwierig, ein ausgereiftes und gut durchdachtes Gutenberg-Theme im Internet zu finden.

Gutenberry ist derzeit eines der besten 100% Gutenberg-ready-Themen. Dieses saubere und minimalistische Thema wurde in Gutenberg erstellt und bietet Ihnen beispiellose Bearbeitungsfreundlichkeit und beispielhafte Geschwindigkeit. Google Speed ​​bewertet Gutenberry beispielsweise mit A 97.

Dieses Top-Theme enthält auch 5 Homepage-Designs, die alle für moderne Blogs mit Rich Media-Integration erstellt wurden. Darüber hinaus bietet Ihnen Gutenberry jede Menge Blog- und Post-Layouts, mehr als 10 Widgets, Arbeitsformulare und eine starke Social-Media-Integration.

Hier sind die bemerkenswerten Merkmale des Gutenberg-Themas:

• Beispieldaten-Installer
• Lebenslanger 24/7-Support
• Optimierter Quellcode
• MailChimp-bereit
• Vollständig reaktionsschnell
• Alternative Modullayouts
• 3 dynamische Blog-Layouts

Einpacken!

Das Anpassen von Gutenberg-Vorlagen ist eine großartige Möglichkeit, den Gutenberg-Editor an benutzerdefinierte Anforderungen anzupassen. Wie bei allem WordPress ist das Erstellen einer benutzerdefinierten Gutenberg-Vorlage eine einfache Angelegenheit des Hinzufügens von Inline-Code oder der Einrichtung eines benutzerdefinierten Plugins.