Anfängerleitfaden: So verwenden Sie WordPress-Blockmuster

Veröffentlicht: 2022-05-03

Möchten Sie erfahren, wie Sie WordPress-Blockmuster auf Ihrer Website verwenden?

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

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

Using block patterns in WordPress

Hier sind die Themen, die wir in diesem Leitfaden behandeln werden.

  • Was sind WordPress-Blockmuster
  • So verwenden Sie Blockmuster in WordPress
  • Weitere Blockmuster finden, die Sie auf Ihrer Website verwenden können
  • So erstellen und teilen Sie Ihre eigenen Blockmuster
  • Manuelles Erstellen von WordPress-Blockmustern
  • Entfernen Sie ein Blockmuster in WordPress
  • Was ist der Unterschied zwischen wiederverwendbaren Blöcken und Blockmustern?

Was sind WordPress-Blockmuster?

WordPress-Blockmuster sind eine Sammlung vorgefertigter Designelemente, mit denen Sie benutzerdefinierte Inhaltslayouts schneller erstellen können.

WordPress wird mit einem intuitiven Editor geliefert, der allgemein als Blockeditor bekannt ist. Es ermöglicht Benutzern, schöne Layouts für ihre Beiträge und Seiten zu erstellen, indem sie Blöcke für allgemeine Inhaltselemente verwenden.

WordPress block editor

Allerdings sind nicht alle WordPress-Benutzer Designer oder möchten jedes Mal Zeit damit verbringen, Layouts zu erstellen, wenn sie einen Beitrag oder eine Seite erstellen müssen.

Blockmuster bieten eine einfache Lösung für dieses Problem. WordPress wird jetzt standardmäßig mit einer Reihe nützlicher Blockmuster geliefert.

Block patterns in WordPress

Beliebte WordPress-Themes bieten auch ihre eigenen 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 Website WordPress.org findest du noch mehr Muster, und du kannst sogar deine eigenen Muster erstellen und teilen.

Lassen Sie uns einen Blick darauf werfen, wie Sie Blockmuster in WordPress einfach verwenden können, um schöne Inhalte für Ihre Website zu erstellen.

So verwenden Sie Blockmuster in WordPress

Standardmäßig enthält WordPress eine Reihe nützlicher Blockmuster, die Sie auf Ihrer Website verwenden können. Ihr WordPress-Theme und einige Plugins können auch ihre eigenen 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 Post-Edit-Bildschirm auf die Schaltfläche Add Block, um den Block-Inserter zu öffnen. Wechseln Sie von hier aus zur Registerkarte Muster, um verfügbare Blockmuster anzuzeigen.

Add block pattern

Sie können nach unten scrollen, um verfügbare Blockmuster anzuzeigen.

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

Sort block patterns by category

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

Hier sehen Sie größere Vorschauen in einem Popup.

Block patterns preview

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

Edit block pattern

Danach können Sie einfach auf einen beliebigen Block innerhalb des Musters zeigen und klicken, um seinen Inhalt zu bearbeiten und an Ihre eigenen Anforderungen anzupassen.

Sie haben immer noch alle Optionen, die Sie normalerweise für jeden Block haben. Wenn es sich beispielsweise um einen Coverblock handelt, können Sie die Coverfarbe 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.

Remove cover block

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

Letztendlich helfen Ihnen Blockmuster, Zeit zu sparen, die Sie andernfalls jedes Mal für das manuelle Anordnen von Blöcken aufwenden würden, wenn Sie eine Überschrift, eine Galerie, Schaltflächen und mehr hinzufügen müssen.

Weitere Blockmuster finden, die Sie auf Ihrer Website verwenden können

Standardmäßig enthält WordPress einige häufig verwendete Blockmuster. WordPress-Themes können Ihrer Website auch ihre eigenen Muster hinzufügen.

Sie können jedoch viel mehr Blockmuster finden als die, die unter dem Blockeinfüger auf Ihrer Website verfügbar sind.

Gehen Sie einfach auf die WordPress Patterns Directory-Website, um viele weitere Blockmuster anzuzeigen.

Block pattern directory

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.

Copy block pattern

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

Klicken Sie im Nachbearbeitungsbildschirm einfach mit der rechten Maustaste und wählen Sie im Browsermenü Einfügen aus oder drücken Sie STRG+V (Befehlstaste + V auf dem Mac).

Paste block pattern

So erstellen und teilen Sie Ihre eigenen Blockmuster

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

WordPress macht es super einfach, Blockmuster zu erstellen und sie auf Ihren eigenen Websites zu verwenden oder sie mit allen WordPress-Benutzern auf der ganzen Welt zu teilen.

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

Create block pattern

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

Sobald Sie sich angemeldet haben, gelangen Sie auf die Seite des Blockmuster-Editors. Es ist identisch mit dem standardmäßigen WordPress-Blockeditor und Sie können es verwenden, um Ihr Muster zu erstellen.

Block pattern creator

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

Sie können Layoutblöcke wie Gruppe, Cover, Galerie und mehr verwenden, um Ihr Layout zu organisieren.

Editing block pattern layout

Es stehen auch lizenzfreie Bilder zur Verfügung, die Sie in Ihren Medienblöcken verwenden können. Die WordPress-Medienbibliothek ermöglicht es Ihnen, diese Bilder leicht zu finden und in Ihren Mustern zu 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, stellen Sie sicher, dass Sie die Richtlinien für das Blockmusterverzeichnis gelesen haben.

Sie können alle Ihre Blockmuster verwalten, indem Sie auf den Link „Meine Muster“ klicken. Es zeigt alle Blockmuster, die Sie geteilt haben, Entwurfsmuster und Muster, die Sie als Favoriten markiert haben.

Your patterns

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

Manuelles Erstellen von WordPress-Blockmustern

Sie können Blockmuster auch manuell erstellen und sie zu Ihrem WordPress-Theme oder Plugin für benutzerdefinierte Snippets 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.

Switch to the code editor

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

Copy raw code blocks

Öffnen Sie als Nächstes einen einfachen Texteditor wie Notepad und fügen Sie diesen Code dort ein. Sie benötigen es im nächsten Schritt.

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 Designs oder ein seitenspezifisches Plugin ein.

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 Rohblockdaten, die Sie zuvor kopiert haben, und fügen Sie sie als Wert für den Inhaltsparameter ein. Mit anderen Worten, Sie müssen den Text „Ihr Blockinhaltscode kommt hierher“ durch Ihren Blockcode ersetzen. Achten Sie darauf, die einfachen Anführungszeichen, die den Text umgeben, an Ort und Stelle zu lassen.

Vergessen Sie zuletzt nicht, den Titel und die Beschreibung in Ihre eigenen zu ändern und Ihre Änderungen zu speichern.

Sie können jetzt Ihre Website besuchen und bearbeiten und posten oder Seite. Sie können jetzt Ihr neu registriertes Blockmuster im Blockeinfüger sehen.

Add custom block pattern to your post

Entfernen Sie ein Blockmuster in WordPress

Sie können jedes Blockmuster in WordPress einfach entfernen oder die Registrierung aufheben. Angenommen, Sie möchten das Blockmuster entfernen, das Sie im obigen Beispiel erstellt haben.

Alles, was Sie tun müssen, ist, den folgenden Code in die Datei functions.php Ihres Designs oder ein seitenspezifisches Plugin zu kopieren und einzufügen.

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 alle Blockmuster abzumelden, die von Ihrem Design oder einem Plugin erstellt wurden. Alles, was Sie wissen müssen, ist der Name, der zum Registrieren des Musters verwendet wird.

Entferne Kern-WordPress-Muster

Die zentralen WordPress-Muster stehen allen WordPress-Benutzern zur Verfügung. Dies bedeutet, dass sie möglicherweise überbeansprucht sind und möglicherweise nicht einmal mit dem Rest Ihres WordPress-Themas übereinstimmen.

Wenn Sie kein Muster verwenden möchten, können Sie es einfach vermeiden, es zu Ihren Inhalten hinzuzufügen. Wenn Sie jedoch eine WordPress-Site mit mehreren Autoren betreiben, möchten Sie möglicherweise verhindern, dass alle Benutzer diese Kernmuster verwenden.

Um alle WordPress-Kernmuster zu entfernen, müssen Sie den folgenden Code zur Funktionsdatei Ihres Themes oder einem seitenspezifischen Plugin hinzufügen.

remove_theme_support( 'core-block-patterns' );

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

Blockmuster und wiederverwendbare Blöcke beabsichtigen beide, ein ähnliches Problem zu lösen: Sie bieten Benutzern Optionen zum einfachen Hinzufügen häufig verwendeter Blöcke.

Sie unterscheiden sich jedoch stark voneinander.

Beispielsweise können wiederverwendbare Blöcke direkt im Post-Editor bearbeitet und gespeichert werden, aber sie sind nicht so flexibel wie Blockmuster.

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

Reusable block in WordPress

Weitere Informationen finden Sie in unserem Tutorial zur Verwendung wiederverwendbarer Blöcke in WordPress.

Wenn Sie andererseits ein Muster einfügen und bearbeiten, gelten diese Änderungen nur für den Beitrag oder die Seite, wo Sie dieses Muster hinzugefügt haben.

Blockmuster können auch von Ihrem WordPress-Theme oder Plugins wie Block-Plugins registriert werden. Auf diese Weise können diese Entwickler Ihnen viel mehr Designoptionen zum Erstellen Ihrer Post- und Seitenlayouts anbieten.

Wir hoffen, dass dieser Leitfaden Ihnen geholfen hat, zu lernen, wie Sie WordPress-Blockmuster auf Ihrer Website verwenden. Vielleicht möchten Sie auch unseren Leitfaden zur Auswahl der besten Webdesign-Software oder unsere Expertenauswahl der besten E-Mail-Marketing-Services für kleine Unternehmen lesen.

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