WordPress-Blockmuster
Veröffentlicht: 2022-06-21Seit der Einführung von Blockmustern hat das Interesse an Blockmustern innerhalb des WordPress-Ökosystems zugenommen.
Das Hinzufügen von Blockmustern zu Gutenberg war für WordPress-Benutzer sehr vorteilhaft. Dies liegt daran, dass Sie jetzt beim Entwerfen Ihrer Website vorgefertigte Designs verwenden und diese nach Ihren Wünschen anpassen können. Dies hilft wirklich, Zeit zu sparen, verglichen mit dem Entwerfen Ihrer Website-Seiten von Grund auf neu.
In diesem Artikel werden wir untersuchen, was diese Blockmuster sind, wo sie zu finden sind, wie sie verwendet werden und wie sie im Vergleich zu wiederverwendbaren Blöcken abschneiden.
Inhaltsverzeichnis
Was sind Blockmuster
Verwenden vorhandener Blockmuster
Blockmuster vs. wiederverwendbare Blöcke
So erstellen Sie Ihre eigenen Blockmuster
- Der manuelle Ansatz
- Über das Musterverzeichnis
So erstellen Sie ein benutzerdefiniertes Blockmuster-Plugin
Deregistrieren von Blockmustern
Deregistrieren von Blockmuster-Kategorien
Fazit
Was sind Blockmuster
Blockmuster sind eine Sammlung von Blöcken, die kombiniert werden, um vorgefertigte Layouts zu erstellen.
Ein WordPress-Benutzer, der zum Beispiel einen Call-to-Action einrichten möchte, kann dies tun, indem er seiner Seite eine Reihe von Blöcken hinzufügt, wie z. B. die Überschriften-, Absatz- und Button-Blöcke. Das Anordnen der Blöcke entsprechend Ihrem bevorzugten Design-Layout ist jedoch möglicherweise nicht so einfach, insbesondere für WordPress-Anfänger. Blockmuster sind in einem solchen Fall praktisch, da WordPress-Benutzer einfach das Call-to-Action-Blockmuster hinzufügen können. Anschließend können sie die Blockmuster in der gewünschten Ansicht bearbeiten.
Verwenden vorhandener Blockmuster
WordPress integriert einen Blockeditor (Gutenberg), der den klassischen Editor ersetzt. Innerhalb des Editors können Sie Ihren Seiten oder Beiträgen ganz einfach Muster hinzufügen. Zu Beginn müssen Sie zuerst auf den Blockeinfüger klicken.
Wenn Sie darauf klicken, navigieren Sie zur unten abgebildeten Registerkarte Muster:
Klicken Sie anschließend auf die Schaltfläche „Erkunden“.
Auf dem gerenderten Popup haben Sie dann eine Reihe von Mustern, die basierend auf verschiedenen Kategorien gruppiert sind.
Um ein Muster in die Seite oder den Beitrag einzufügen, müssen Sie nur darauf klicken und es sollte dann auf Ihrer Seite oder Ihrem Beitrag gerendert werden.
Sobald dies erledigt ist, können Sie die Blöcke innerhalb des Musters weiter nach Ihren Wünschen anpassen.
Weitere Muster finden Sie auch im Blockmuster-Verzeichnis von wordpress.org.
Sobald Sie ein Muster Ihrer Wahl gefunden haben, müssen Sie es nur kopieren, indem Sie auf die Schaltfläche „Kopieren“ klicken, die angezeigt wird, sobald ein Mouseover-Ereignis auf dem gewünschten Muster angezeigt wird.
Anschließend müssen Sie das Muster in Ihre Seite oder Ihren Beitrag einfügen.
Blockmuster vs. wiederverwendbare Blöcke
Ein wiederverwendbarer Block ist eine Sammlung von einem oder mehreren Blöcken, die Sie später in Ihrem Beitrag oder Ihrer Seite verwenden können.
Nach der obigen Definition scheinen wiederverwendbare Blöcke Blockmustern in dem Sinne ziemlich ähnlich zu sein, dass sie beide das Hinzufügen vorgefertigter Blöcke innerhalb eines Beitrags oder einer Seite beinhalten. Es gibt jedoch einen Unterschied zwischen diesen beiden Artikeln.
Wenn es um wiederverwendbare Blöcke geht, sind diese Blöcke im Vergleich zu Blockmustern nicht ganz flexibel. Wiederverwendbare Blöcke behalten eine einzige Instanz, egal auf welcher Seite oder in welchem Beitrag sie angewendet werden. Das bedeutet, wenn Sie mehreren Seiten einen wiederverwendbaren Block hinzufügen und sich entscheiden, den wiederverwendbaren Block auf einer der Seiten anzupassen, werden die Änderungen auf alle Instanzen des wiederverwendbaren Blocks auf allen Seiten angewendet.
Was Blockmuster andererseits betrifft, so werden die Anpassungen nicht auf die Blockmuster auf den restlichen Seiten angewendet, sobald Sie ein Blockmuster zu mehreren Seiten hinzufügen und einige Anpassungen am Blockmuster auf einer bestimmten Seite vornehmen. Blockmusterinstanzen sind daher unterschiedlich.
Im Gegensatz zu wiederverwendbaren Blöcken können Blockmuster auch in Ihrem Design- oder Plugin-Code registriert werden.
Blockmuster sind ideal, wenn Sie ein bestimmtes Layout verwenden möchten, das auf eine Reihe von Seiten oder Beiträgen angewendet wird, von wo aus sie es dann auf den einzelnen Seiten oder Beiträgen anpassen können, um es an den Kontext der jeweiligen Seiten oder Beiträge anzupassen.
Wiederverwendbare Blöcke hingegen sind ideal für Szenarien, in denen Sie den genauen Inhalt auf Ihren Seiten duplizieren und verwenden möchten. Dies könnte beispielsweise in Werbebannern der Fall sein.
So erstellen Sie Ihre eigenen Blockmuster
Es gibt verschiedene Möglichkeiten, wie Sie Ihre eigenen Blockmuster erstellen können. In diesem Artikel werden wir auf zwei dieser Methoden eingehen:
- Der manuelle Ansatz
- Über das Musterverzeichnis
Der manuelle Ansatz
Bei diesem Ansatz müssen wir zuerst die Blocksammlung innerhalb einer Seite oder eines Beitrags erstellen und sie später als Muster registrieren.
Erstellen einer Blocksammlung
Um Ihre Blocksammlung einzurichten, müssen Sie Folgendes ausführen:
i) Erstellen Sie zuerst eine neue Seite oder einen neuen Beitrag
ii) Fügen Sie Ihre gewünschten Blöcke hinzu, die das Muster oder das Layout innerhalb des Beitrags oder der Seite bilden sollen. In unserem Fall hier fügen wir einen Medien- und Textblock sowie einen Schaltflächenblock und etwas Styling hinzu.
Unten ist eine Beispielanzeige der Blöcke:
Registrieren eines Blockmusters
Um die Blocksammlung als Blockmuster zu registrieren, müssen Sie Folgendes ausführen:
i) Wechseln Sie innerhalb der Seite oder des Beitrags, auf der Sie die Blocksammlung haben, zum Code-Editor:
ii) Kopieren Sie alle gerenderten Codes und fügen Sie sie in Ihren gewünschten Texteditor wie Notepad oder Sublime Text ein:
iii) Fügen Sie als Nächstes den folgenden Code zur Datei functions.php in Ihrem Child-Theme hinzu:
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => 'Fill in your copied code here' ) ); } add_action( 'init', 'reg_block_patterns' );Sie müssen den Inhalt „Füllen Sie Ihren kopierten Code hier ein“ durch den oben in (ii) kopierten Code ersetzen.
Unten ist ein Beispiel für den endgültigen Code von unserer Seite:
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' );Sobald dies erledigt ist, können Sie Ihre Seite oder Ihren Beitrag besuchen und beim Navigieren zum Abschnitt „Muster“ sehen Sie das neue Muster im Abschnitt „Empfohlen“, wie unten dargestellt:
Registrieren einer Musterkategorie
WordPress bietet einige Standardmusterkategorien, die Sie beim Registrieren von Mustern verwenden können. Dazu gehören: Buttons, Columns, Gallery, Headers, Text, Query und Featured.
Beim Registrieren von Blockmustern wäre ein besserer Ansatz, Muster in benutzerdefinierten Kategorien zu registrieren. Um dies zu erreichen, müssen Sie zunächst eine Musterkategorie registrieren.
Um eine Musterkategorie zu registrieren, müssen Sie den folgenden Code in die Datei functions.php Ihres Child-Themes einfügen.
function register_category_pattern() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_category_pattern' );Sie können die Kategoriebezeichnung nach Ihren Wünschen ändern. Im obigen Codebeispiel verwenden wir die Kategoriebezeichnung „Benutzerdefiniert“.
Damit die benutzerdefinierte Musterkategorie auf Ihrer Seite oder Ihrem Beitrag angezeigt wird, müssen Sie sie mit einem Muster verknüpfen. In unserem Fall hier ändern wir den ursprünglichen Musterregistrierungscode, um dieser Musterkategorie Rechnung zu tragen. Suchen Sie dazu nach dieser Codezeile:
'categories' => array( 'featured' ),Sie müssen dann die vorhandene Kategorie, die „empfohlen“ ist, in „benutzerdefiniert“ ändern, sodass der Code jetzt wie folgt lautet:
'categories' => array( 'custom' ),Der endgültige Code zum Registrieren des Musters und der Musterkategorie würde in unserem Fall wie folgt lauten:
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );Sobald Sie nun auf Ihre Seite oder Ihren Beitrag zugreifen und versuchen, ein Muster hinzuzufügen, wird das Muster in unserer neu registrierten Kategorie „Benutzerdefiniert“ gerendert, wie unten zu sehen:
Über das Musterverzeichnis
In einem Fall, in dem Sie ein Muster erstellen möchten, das für alle im WordPress-Ökosystem zugänglich ist, können Sie dies jetzt über das Musterverzeichnis erreichen.
Beim Zugriff auf das Musterverzeichnis müssen Sie Folgendes ausführen:
i) Melden Sie sich beim Musterverzeichnis an.
ii) Klicken Sie auf den Link „Neues Muster erstellen“.
iii) Fügen Sie auf dem nächsten Bildschirm Ihren Mustertitel hinzu und beginnen Sie mit dem Hinzufügen der gewünschten Blöcke. Sie müssen mindestens drei Blöcke hinzufügen.
iv) Sobald Sie mit dem Hinzufügen von Blöcken fertig sind, können Sie das Muster als Entwurf speichern.
v) Überprüfen Sie als Nächstes, ob Ihr Muster nicht gegen die hier aufgeführten Richtlinien verstößt: Richtlinien für Muster. Wenn alles in Ordnung ist, können Sie das Muster einreichen.
Sie können Ihre vorhandenen Muster anzeigen, indem Sie auf den hier abgebildeten Link „Meine Muster“ klicken:
Die Muster, die im Abschnitt „Meine Muster“ gerendert werden, sind Entwürfe, Muster, die Sie eingereicht haben, und Muster, die auf Überprüfung warten.
vi) Sie können dann den neuen Block kopieren und auf Ihrer Seite oder Ihrem Beitrag einfügen.
So erstellen Sie ein benutzerdefiniertes Blockmuster-Plugin
Anstatt den Code zum Registrieren Ihres Musters und Ihrer Kategorie in Ihrer Datei functions.php zu haben, können Sie sich für ein benutzerdefiniertes Plugin entscheiden, das zum Hinzufügen von Mustern und Musterkategorien verwendet werden kann. Dazu müssen Sie Folgendes ausführen:
i) Greifen Sie über Ihr Hosting-Panel oder alternativ per FTP mit einer FTP-Software wie Filezilla auf Ihre Website-Dateien zu
ii) Navigieren Sie zum Verzeichnispfad wp-content > plugins
iii) Erstellen Sie im Plug-in-Verzeichnis einen Ordner mit dem Namen „custom-patterns“.
iv) Erstellen Sie im Ordner eine Datei namens custom-patterns.php
v) Fügen Sie den folgenden Header-Kommentar in der Datei hinzu:
<?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */Sie können den Header-Kommentar oben so anpassen, dass er mit Ihrem gewünschten Plugin-Namen übereinstimmt.
vi) Fügen Sie unter dem Header-Kommentar Ihren Code hinzu, um das Muster und die Kategorie zu registrieren. In unserem Fall hier verwenden wir den Code, den wir zuvor erstellt haben, um unser Muster und unsere benutzerdefinierte Kategorie zu registrieren. Der endgültige Code lautet daher:
<?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */ function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );vii) In Ihrer Plugin-Liste im Dashboard sollten Sie nun das Plugin aus der Plugin-Liste sehen. Klicken Sie auf den Aktivierungslink neben dem Plugin-Namen, um das Plugin zu aktivieren
viii) Nach der Aktivierung sollten Sie nun eine Ansicht des Blockmusters und der benutzerdefinierten Kategorie im Blockeditor haben, wie unten zu sehen:
Deregistrieren von Blockmustern
Es ist möglich, von Ihnen registrierte Blockmuster zu entfernen. Wenn Sie beispielsweise das Blockmuster „my-plugin/media-text-pattern“ entfernen möchten, das wir zuvor registriert hatten, müssen Sie den folgenden Code in die Datei functions.php des Child-Themes einfügen:
function deregister_my_pattern() { unregister_block_pattern( 'my-plugin/media-text-pattern' ); } add_action( 'init', 'deregister_my_pattern' );Im obigen Code müssen Sie „my-plugin/media-text-pattern“ durch den Namen des Musters ersetzen, das Sie registriert haben.
Deregistrieren von Blockmuster-Kategorien
Wenn Sie nur eine Musterkategorie abmelden und das Muster selbst beibehalten möchten, müssen Sie den folgenden Code in die Datei functions.php des untergeordneten Designs einfügen:
function deregister_pattern_category() { unregister_block_pattern_category( 'custom'); } add_action( 'init', 'deregister_pattern_category');Der obige Code löscht die zuvor hinzugefügte Kategorie „benutzerdefiniert“. Sie müssen „benutzerdefiniert“ durch die Kategorie ersetzen, die Sie registriert haben.
Fazit
In diesem Artikel haben wir untersucht, was Blockmuster sind, wie man sie verwendet und wie man Blockmuster und Kategorien registriert und deregistriert. Blockmuster sind sehr wichtig, wenn Sie Ihre Website mit dem Blockeditor gestalten. Sie machen es einfach, dynamische Seiten und Beiträge in Ihrer Website mit wenig Aufwand zu gestalten.
Wir hoffen, dass dieser Artikel relevante Einblicke in die Verwendung von Blockmustern auf Ihrer Website bietet. Sollten Sie Fragen oder Kommentare haben, können Sie diese gerne im Kommentarbereich unten einreichen.