Anleitung für Anfänger: Verwendung von WordPress-Blockmustern

Möchten Sie lernen, wie Sie WordPress-Blockmuster auf Ihrer Website verwenden können?

Mit Blockmustern können Sie Ihren Beiträgen oder Seitenlayouts schnell häufig verwendete Designelemente hinzufügen.

In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Blockmuster verwenden und weitere Muster finden, die Sie auf Ihrer Website einsetzen können.

Die folgenden Themen werden in diesem Leitfaden behandelt.

• Was sind WordPress Block Patterns
• Verwendung von Blockmustern in WordPress
• Weitere Blockmuster zur Verwendung auf Ihrer Website finden
• Wie Sie Ihre eigenen Blockmuster erstellen und weitergeben
• Manuelles Erstellen von WordPress-Blockmustern
• Entfernen eines Blockmusters in WordPress
• Was ist der Unterschied zwischen wiederverwendbaren Blöcken und Blockmustern?

Was sind WordPress Block Patterns?

WordPress-Blockmuster sind eine Sammlung vorgefertigter Designelemente, die Sie verwenden können, um benutzerdefinierte Inhaltslayouts schneller zu erstellen.

WordPress verfügt über einen intuitiven Editor, der allgemein als Block-Editor bekannt ist. Er ermöglicht es Benutzern, schöne Layouts für ihre Beiträge und Seiten zu erstellen, indem sie Blöcke für gemeinsame Inhaltselemente verwenden.

Allerdings sind nicht alle WordPress-Benutzer Designer oder wollen jedes Mal, wenn sie einen Beitrag oder eine Seite erstellen müssen, Zeit mit der Erstellung von Layouts verbringen.

Blockmuster bieten eine einfache Lösung für dieses Problem. WordPress verfügt jetzt standardmäßig über eine Reihe nützlicher Blockmuster.

Beliebte WordPress-Themes bieten auch eigene Muster, die Sie beim Schreiben von Inhalten verwenden können.

Diese Muster umfassen Elemente wie vorgefertigte mehrspaltige Layouts, Medien- und Textmuster, Call-to-Action-Muster, Kopfzeilen, Schaltflächen und mehr.

Auf der WordPress.org-Website finden Sie noch mehr Muster, und Sie können sogar Ihre eigenen Muster erstellen und weitergeben.

Werfen wir also einen Blick darauf, wie Sie in WordPress ganz einfach Blockmuster verwenden können, um schöne Inhalte für Ihre Website zu erstellen.

Video-Anleitung

Wenn Sie eine schriftliche Anleitung bevorzugen, lesen Sie einfach weiter.

Verwendung von Blockmustern in WordPress

WordPress wird standardmäßig mit einer Reihe nützlicher Blockmuster geliefert, die Sie auf Ihrer Website verwenden können. Ihr WordPress-Theme und einige Plugins können auch eigene Muster hinzufügen.

Um Blockmuster zu verwenden, müssen Sie den WordPress-Beitrag oder die Seite bearbeiten, auf der Sie das Blockmuster verwenden möchten.

Klicken Sie auf dem Bearbeitungsbildschirm für Beiträge auf die Schaltfläche Block hinzufügen, um die Blockeinfügemaschine zu öffnen. Wechseln Sie von hier aus zur Registerkarte „Muster“, um die verfügbaren Blockmuster anzuzeigen.

Sie können nach unten scrollen, um die verfügbaren Blockmuster zu sehen.

Sie können auch Blockmuster in verschiedenen Kategorien wie „Featured“, „Buttons“, „Columns“, „Header“ und anderen anzeigen.

Alternativ können Sie auch auf die Schaltfläche „Erkunden“ klicken, um Blockmuster anzuzeigen.

Hier können Sie eine größere Vorschau in einem Popup sehen.

Wenn Sie ein Muster gefunden haben, das Sie ausprobieren möchten, können Sie es einfach anklicken, um es in den Inhaltsbereich Ihres Beitrags oder Ihrer Seite einzufügen.

Danach können Sie einfach auf einen beliebigen Block innerhalb des Musters zeigen und klicken, um dessen Inhalt nach Ihren Wünschen zu bearbeiten und zu ändern.

Sie haben weiterhin alle Optionen, die Sie normalerweise für jeden Block haben. Wenn es sich zum Beispiel um einen Titelblock handelt, können Sie die Farbe des Titelbildes oder das Hintergrundbild ändern.

Sie können so viele Muster hinzufügen, wie Sie für Ihren Blogbeitrag oder Ihre Seite benötigen. Sie können ein Muster auch einfach löschen, um es aus einem Beitrag oder einer Seite zu entfernen, so wie Sie jeden WordPress-Block löschen würden.

Durch die Verwendung von Blockmustern können Sie schnell schöne Layouts für Ihre Artikel und Ihre WordPress-Website erstellen.

Letztlich helfen Ihnen Blockmuster dabei, Zeit zu sparen, die Sie sonst für die manuelle Anordnung von Blöcken aufwenden müssten, wenn Sie eine Kopfzeile, eine Galerie, Schaltflächen usw. hinzufügen möchten.

Weitere Blockmuster zur Verwendung auf Ihrer Website finden

WordPress verfügt standardmäßig über einige häufig verwendete Blockmuster. WordPress-Themes können auch ihre eigenen Muster zu Ihrer Website hinzufügen.

Sie können jedoch noch viel mehr Blockmuster finden als die, die unter dem Block-Inserter auf Ihrer Website verfügbar sind.

Gehen Sie einfach auf die Website WordPress Patterns Directory, um viele weitere Blockmuster zu sehen.

Hier finden Sie viele weitere Blockmuster, die von der WordPress-Community eingereicht wurden.

Um eines dieser Blockmuster zu verwenden, fahren Sie einfach mit der Maus über das Blockmuster und klicken Sie auf die Schaltfläche Kopieren.

Als Nächstes müssen Sie zu Ihrem WordPress-Blog zurückkehren und den Beitrag oder die Seite bearbeiten, in die Sie dieses Blockmuster einfügen möchten.

Klicken Sie im Bearbeitungsbildschirm des Beitrags einfach mit der rechten Maustaste und wählen Sie im Browsermenü die Option Einfügen oder drücken Sie STRG+V (Befehl + V auf dem Mac).

Wie Sie Ihre eigenen Blockmuster erstellen und weitergeben

Möchten Sie Ihre eigenen WordPress-Blockmuster erstellen und sie mit der ganzen Welt teilen?

Mit WordPress ist es ganz einfach, Blockmuster zu erstellen und sie auf Ihren eigenen Websites zu verwenden oder sie mit allen WordPress-Nutzern auf der ganzen Welt zu teilen.

Besuchen Sie einfach die Website des WordPress-Musterverzeichnisses und klicken Sie auf den Link „Neues Muster erstellen“.

Hinweis: Sie müssen sich anmelden oder ein kostenloses WordPress.org-Konto erstellen, um Ihre Muster zu speichern.

Sobald Sie angemeldet sind, gelangen Sie zur Seite für den Blockmuster-Editor. Er ist identisch mit dem Standard-WordPress-Block-Editor und Sie können ihn verwenden, um Ihr Muster zu erstellen.

Fügen Sie einfach Blöcke hinzu, um Ihr Musterlayout zu erstellen.

Sie können Layout-Blöcke wie Gruppe, Cover, Galerie und andere verwenden, um Ihr Layout zu organisieren.

Es gibt auch lizenzfreie Bilder, die Sie in Ihren Medienblöcken verwenden können. Mit der WordPress-Mediathek können Sie diese Bilder leicht finden und in Ihren Mustern verwenden.

Wenn Sie mit Ihrem Blockmuster zufrieden sind, können Sie es als Entwurf speichern oder an das Musterverzeichnis senden.

Bevor Sie Ihr Blockmuster für das Musterverzeichnis einreichen können, sollten Sie die Richtlinien für das Blockmusterverzeichnis lesen.

Sie können alle Ihre Blockmuster verwalten, indem Sie auf den Link „Meine Muster“ klicken. Es werden alle Blockmuster angezeigt, die Sie freigegeben haben, Musterentwürfe und Muster, die Sie favorisiert haben.

Wenn Sie nur Blockmuster für Ihren eigenen Gebrauch erstellen möchten, können Sie sie als Entwürfe speichern. Danach können Sie sie einfach von der Seite „Meine Muster“ kopieren und in Ihre WordPress-Website einfügen.

Manuelles Erstellen von WordPress-Blockmustern

Sie können Blockmuster auch manuell erstellen und sie zu Ihrem WordPress-Theme oder Ihrem benutzerdefinierten Snippets-Plugin hinzufügen.

Erstellen Sie einfach einen neuen Beitrag oder eine neue Seite in WordPress. Verwenden Sie im Inhaltsbereich Blöcke, um ein benutzerdefiniertes Layout oder eine Blocksammlung zu erstellen, die Sie als Muster speichern möchten.

Wechseln Sie anschließend in den Code-Editor-Modus und kopieren Sie alle Inhalte, die Sie im Code-Editor sehen.

Öffnen Sie dann einen einfachen Texteditor wie Notepad und fügen Sie den Code dort ein. Sie werden ihn im nächsten Schritt benötigen.

Jetzt können Sie Ihre Blöcke als Muster registrieren.

Kopieren Sie dazu einfach den folgenden Code und fügen Sie ihn in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin ein. Wenn Sie noch nie einen Code in Ihre functions.php-Datei eingefügt haben, empfehlen wir Ihnen, das kostenlose WPCode-Plugin zu verwenden, um ihn hinzuzufügen.

Hier finden Sie die vollständige Anleitung zum Hinzufügen von benutzerdefiniertem Code in WordPress.

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

Kopieren Sie nun die Rohdaten des Blocks, die Sie zuvor kopiert haben, und fügen Sie sie als Wert für den Inhaltsparameter ein. Mit anderen Worten: Ersetzen Sie den Text „Your block content code goes here“ durch Ihren Blockcode. Achten Sie darauf, dass die einfachen Anführungszeichen, die den Text umgeben, erhalten bleiben.

Vergessen Sie nicht, den Titel und die Beschreibung nach Ihren Vorstellungen zu ändern und die Änderungen zu speichern.

Sie können nun Ihre Website besuchen und einen Beitrag oder eine Seite bearbeiten. Sie können nun Ihr neu registriertes Blockmuster in der Blockeinfügemaschine sehen.

Entfernen eines Blockmusters in WordPress

Sie können jedes Blockmuster in WordPress leicht entfernen oder deregistrieren. Nehmen wir an, Sie möchten das Blockmuster, das Sie im obigen Beispiel erstellt haben, entfernen.

Sie müssen lediglich den folgenden Code in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin kopieren.

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

In diesem Beispiel ist "my-plugin/my-awesome-pattern" der Name des Musters, das wir bei der Registrierung verwendet haben.

Sie können diesen Code verwenden, um die Registrierung eines beliebigen Blockmusters aufzuheben, das von Ihrem Thema oder einem Plugin erstellt wurde. Alles, was Sie wissen müssen, ist der Name, mit dem Sie das Muster registriert haben.

Grundlegende WordPress-Muster entfernen

Die WordPress-Kernmuster sind für alle WordPress-Nutzer verfügbar. Das bedeutet, dass sie möglicherweise übermäßig genutzt werden und nicht einmal zum Rest Ihres WordPress-Themas passen.

Wenn Sie ein Muster nicht verwenden möchten, können Sie es einfach vermeiden, es zu Ihrem Inhalt hinzuzufügen. Wenn Sie jedoch eine WordPress-Website mit mehreren Autoren betreiben, möchten Sie vielleicht verhindern, dass alle Benutzer diese Kernmuster verwenden.

Um alle WordPress-Kernmuster zu entfernen, müssen Sie den folgenden Code in die Funktionsdatei Ihres Themes oder in ein Site-spezifisches Plugin einfügen.

remove_theme_support( 'core-block-patterns' );

Was ist der Unterschied zwischen wiederverwendbaren Blöcken und Blockmustern?

Blockmuster und wiederverwendbare Blöcke zielen beide darauf ab, ein ähnliches Problem zu lösen: den Benutzern die Möglichkeit zu geben, häufig verwendete Blöcke einfach hinzuzufügen.

Sie sind jedoch recht unterschiedlich.

Wiederverwendbare Blöcke können zum Beispiel direkt im Beitragseditor bearbeitet und gespeichert werden, sind aber nicht so flexibel wie Blockmuster.

Ein großer Unterschied besteht darin, dass eine Änderung an einem wiederverwendbaren Block den Block in jedem Beitrag oder auf jeder Seite, auf der Sie ihn verwendet haben, ändert.

Weitere Einzelheiten finden Sie in unserem Tutorial über die Verwendung wiederverwendbarer Blöcke in WordPress.

Wenn Sie hingegen ein Muster einfügen und es bearbeiten, gelten diese Änderungen nur für den Beitrag oder die Seite, auf der Sie das Muster hinzugefügt haben.

Blockmuster können auch von Ihrem WordPress-Theme oder von Plugins wie den Block-Plugins registriert werden. Dadurch können diese Entwickler Ihnen viel mehr Designoptionen für die Gestaltung Ihrer Beiträge und Seitenlayouts anbieten.

Wir hoffen, dass dieser Leitfaden Ihnen geholfen hat, die Verwendung von WordPress-Blockmustern auf Ihrer Website zu erlernen. Vielleicht interessiert Sie auch unsere Anleitung zum Hinzufügen von benutzerdefiniertem Code in WordPress oder die Anleitung für Anfänger zum Einfügen von Snippets aus dem Web in WordPress

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.