Zum Inhalt springen

Wie speichert man einen Gutenberg-Block in WordPress als Template, um ihn später per Shortcode einzusetzen?

Wie speichert man einen Gutenberg-Block in WordPress als Template, um ihn später per Shortcode einzusetzen?

Wenn Sie an einer WordPress-Website arbeiten und auf einen Gutenberg-Block stoßen, den Sie mehrfach verwenden möchten, kann das Speichern als Vorlage viel Zeit sparen. In diesem Artikel besprechen wir, wie Sie einen WordPress-Gutenberg-Block als Vorlage speichern und ihn später über einen Shortcode nutzen können.

Speichern eines Gutenberg-Blocks als Vorlage mit einem Plugin

Reusable Gutenberg Blocks by Editor Blocks

Eine der schnellsten und einfachsten Methoden, einen Gutenberg-Block als Vorlage zu speichern, ist die Verwendung eines Plugins wie Reusable Gutenberg Blocks by Editor Blocks. Dieses Plugin ermöglicht es, jeden beliebigen Gutenberg-Block als Vorlage zu speichern, die Sie später leicht wiederverwenden können. So geht’s:

  1. Installieren und aktivieren Sie das Plugin Reusable Gutenberg Blocks by Editor Blocks aus dem WordPress-Plugin-Verzeichnis.
  2. Gehen Sie zu einer beliebigen Seite oder einem Beitrag und fügen Sie den Block hinzu, den Sie als Vorlage speichern möchten.
  3. Wählen Sie den Block aus und klicken Sie dann auf die Schaltfläche “Zu Reusable Blocks hinzufügen” (oben rechts im Editor).
  4. Geben Sie Ihrem Block einen Namen und speichern Sie die Änderungen.

Später können Sie diesen Block auf einer anderen Seite oder in einem Beitrag verwenden, indem Sie ihn aus der Liste der verfügbaren Gutenberg-Blöcke auswählen.

Erstellung eines Shortcodes mit dem Plugin Shortcoder

Um die erstellte Gutenberg-Block-Vorlage über einen Shortcode zu nutzen, können wir das Plugin Shortcoder verwenden.

  1. Installieren und aktivieren Sie das Plugin Shortcoder aus dem WordPress-Plugin-Verzeichnis.
  2. Gehen Sie zum WordPress-Adminbereich und dann zu “Shortcoder”.
  3. Klicken Sie auf “Create a new shortcode”, geben Sie ihm einen Namen und fügen Sie den HTML-Code Ihrer Gutenberg-Block-Vorlage ein.
  4. Speichern Sie die Änderungen.

Wenn Sie diesen Block jetzt verwenden möchten, genügt es, den Shortcode an einer beliebigen Stelle auf Ihrer Seite oder in Ihrem Beitrag einzufügen.

Erstellung einer Gutenberg-Block-Vorlage mit PHP-Code

Wenn Sie mit dem Programmieren vertraut sind, können Sie sich für einen manuelleren Ansatz entscheiden. So erstellen Sie eine Gutenberg-Block-Vorlage und einen Shortcode mit PHP-Code:

  1. Erstellen Sie eine neue PHP-Datei in Ihrem Theme oder Child-Theme. Sie können sie zum Beispiel ‘gutenberg-template.php’ nennen.
  2. Fügen Sie in dieser Datei den HTML-Code Ihres Gutenberg-Blocks ein, denken Sie aber daran, dass Sie ihn innerhalb einer PHP-Funktion platzieren müssen, zum Beispiel so:
function my_gutenberg_template() {
    ob_start();
    ?>
    <!-- Wklej tutaj kod HTML swojego bloku Gutenberg -->
    <?php
    return ob_get_clean();
}
  1. Fügen Sie anschließend den folgenden Code hinzu, um einen Shortcode zu erstellen, der diese Funktion aufruft:
function register_my_gutenberg_template_shortcode() {
    add_shortcode('my_template', 'my_gutenberg_template');
}
add_action('init', 'register_my_gutenberg_template_shortcode');

Wenn Sie diesen Block jetzt verwenden möchten, genügt es, den Shortcode ‘[my_template]’ an einer beliebigen Stelle auf Ihrer Seite oder in Ihrem Beitrag einzufügen.

Zusammenfassend bietet WordPress verschiedene Methoden, um einen Gutenberg-Block als Vorlage zu speichern und ihn anschließend über einen Shortcode zu nutzen. Wir können verfügbare Plugins wie Reusable Gutenberg Blocks by Editor Blocks oder Shortcoder verwenden oder eine eigene Lösung mit PHP-Code erstellen. Die Wahl der Methode hängt von Ihrer Erfahrung und Ihren Vorlieben ab.

[reblex id='56434']

Entdecken Sie über 1.500 Premium-Plugins und -Themes für WordPress!


Neueste Beiträge

ACF für Anfänger: Eine vollständige Schritt-für-Schritt-Anleitung zu benutzerdefinierten Feldern in WordPress

ACF für Anfänger: Eine vollständige Schritt-für-Schritt-Anleitung zu benutzerdefinierten Feldern in WordPress

Lesezeit: ~12 Min. · Niveau: mittel Der native WordPress-Editor endet bei Titel, Inhalt und Beitragsbild.…

Mehr erfahren →
Elementor – Was ist das und wie funktioniert es? Leitfaden 2026

Elementor – Was ist das und wie funktioniert es? Leitfaden 2026

Lesezeit: ~14 Min. · Niveau: mittel Elementor ist ein visueller Page- und Theme-Builder für WordPress.…

Mehr erfahren →
Wie erstellt man in Elementor Pro einen FAQ-Bereich mit korrektem FAQ-Schema, um die Google-Rankings zu verbessern?

Wie erstellt man in Elementor Pro einen FAQ-Bereich mit korrektem FAQ-Schema, um die Google-Rankings zu verbessern?

Lesezeit: ~9 Min. · Niveau: mittel Der Titel verspricht bessere Google-Rankings durch einen FAQ-Bereich mit…

Mehr erfahren →
Warenkorb