WordPress ist ein leistungsstarkes Online-Publishing-Tool, mit dem jeder ganz einfach Text- und/oder Multimedia-Inhalte erstellen und weitergeben kann. Darüber hinaus ist es aber auch ein großartiges professionelles Werkzeug für Designer/innen, Marketer/innen und Entwickler/innen, unabhängig von ihrem Hintergrund und ihren Fähigkeiten.
Kurz gesagt: WordPress kann dein wertvollster Arbeitskollege sein und dir in einer Vielzahl von Berufen zum Erfolg verhelfen.
In diesem Sinne haben wir in diesem Blog eine Reihe von Artikeln veröffentlicht, die dir helfen sollen, die notwendigen Fähigkeiten für die Arbeit als WordPress-Entwickler/in zu erwerben:
- Wie man benutzerdefinierte Gutenberg-Blöcke erstellt
- Wie man dynamische Blöcke für Gutenberg erstellt
- Wie man Meta-Boxen und benutzerdefinierte Felder zu Beiträgen in Gutenberg hinzufügt
Und für diejenigen, die Videoinhalte bevorzugen, haben wir auch einen kostenlosen Videokurs: Entwicklung von benutzerdefinierten Gutenberg-Blöcken.
Und ja, du kannst deine Karriereerwartungen mit Gutenberg-Entwicklungskenntnissen steigern, aber du musst nicht unbedingt ein Entwickler sein, um fortschrittliche Layouts für deine WordPress-Website zu erstellen.
WordPress-Nutzerinnen und -Nutzer können von leistungsstarken Funktionen profitieren, mit denen sie mühelos fortgeschrittene Block-Layouts erstellen können. In diesem Beitrag widmen wir uns den Blockmustern.
Block Muster vs. Wiederverwendbare Blöcke vs. Vorlagenteile
Blockmuster wurden erstmals mit WordPress 5.5 eingeführt, damit WordPress-Nutzer/innen mit wenigen Klicks komplexe, gebrauchsfertige Strukturen aus verschachtelten Blöcken in ihre Inhalte einbauen können.
WordPress bietet von Haus aus ein paar eingebaute Blockmuster, aus denen du bei der Erstellung deiner Inhalte wählen kannst. Darüber hinaus bieten Block-Themes in der Regel weitere Blockmuster, die du direkt über den Block-Inserter in deinen Inhalt einfügen kannst.
Das aktuelle Standard-Theme Twenty Twenty-Three bietet zum Beispiel die folgenden Blockmuster:
- Call to action
- Standard-Footer
- Hidden 404
- Ausgeblendete Kommentare
- Ausgeblendeter Inhalt ohne Ergebnisse
- Beitrag Meta
Und du bist nicht auf die von WordPress oder deinem Theme bereitgestellten Muster beschränkt, denn im Verzeichnis Patterns findest du jede Menge gebrauchsfertige Blockmuster.
Aber Blockmuster sind nicht die einzige Funktion, die du nutzen kannst, um Blocklayouts auf deiner WordPress-Website zu erstellen. Der neue Gutenberg-Blockeditor bietet dir zusätzliche Werkzeuge, aus denen du wählen kannst, um dein Inhaltslayout zu erstellen, darunter wiederverwendbare Blöcke und Vorlagenteile. Wie unterscheiden sich diese Funktionen voneinander? Und wann ist eine der beiden Funktionen besser als die andere? Lass uns eintauchen.
Blockmuster
Blockmuster sind vordefinierte Gruppen von Blöcken, die du zu deinem Inhalt hinzufügen und mit denselben Designwerkzeugen anpassen kannst, die auch für die enthaltenen Blöcke zur Verfügung stehen. Änderungen, die du an einem Blockmuster vornimmst, wirken sich nur auf die Instanz aus, die du gerade bearbeitest, und werden nicht auf andere Instanzen übertragen, die du möglicherweise zu anderen Beiträgen oder Seiten deiner Website hinzugefügt hast.
Du kannst Blockmuster verwenden, um vorgefertigte Layouts einzubinden, die du an Ort und Stelle anpassen musst, indem du Bilder, Text und Stile änderst oder Elemente hinzufügst oder entfernst.
Blockmuster sind wiederverwendbar, d. h., wenn du dein eigenes Blockmuster erstellt hast, kannst du es überall auf deiner Website einfügen und mit wenigen Klicks über die integrierten Steuerelemente des Editors anpassen.
Du kannst Blockmuster auf der Registerkarte Muster im Block-Inserter des Editors durchsuchen und einfügen oder die im Verzeichnis Muster verfügbaren Muster über den Muster-Explorer erkunden, der erscheint, wenn du im Block-Inserter auf die Schaltfläche Alle Muster erkunden klickst.
Auf der Registerkarte „Muster“ im Block-Inserter findest du eine Vielzahl von Mustern. Du kannst aber auch direkt von der Benutzeroberfläche des Editors aus die Block-Muster-Bibliothek erkunden. Du kannst auch die Block-Muster-Website besuchen, ein Muster auswählen und auf Kopieren klicken.
Sobald du ein Muster kopiert hast, fügst du es in deinen Inhalt ein und bist fertig.
Jetzt kannst du die Gruppe von Blöcken, die in dem Muster enthalten sind, anpassen, ohne das registrierte Muster oder eine zusätzliche Instanz davon auf deiner Website zu beeinflussen.
Wiederverwendbare Blöcke
Ein wiederverwendbarer Block ist ein vorgefertigter Block oder eine Gruppe von Blöcken, die du zu jedem Beitrag oder jeder Seite deiner Website hinzufügen kannst. Du kannst wiederverwendbare Blöcke auch auf andere Websites exportieren.
Wiederverwendbare Blöcke sind besonders nützlich, um Elemente zu erstellen, die du auf mehreren Seiten deiner Website und/oder auf verschiedenen Websites einsetzen möchtest. Denk an Calls to Action, Werbebanner, Preistabellen und so weiter.
In dem folgenden Beispiel erstellen wir einen wiederverwendbaren Block aus einem Spaltenblock, einem Bild, einem Absatz und einer Schaltfläche.
Sobald du einen wiederverwendbaren Block erstellt hast, kannst du ihn über den Block-Inserter auf jeder Seite deiner Website einfügen.
WordPress betrachtet wiederverwendbare Blöcke als wp_block Beitragstyp und speichert sie als solche in der Tabelle wp_posts.
Sobald du deine wiederverwendbaren Blöcke erstellt hast, kannst du sie über die Verwaltungsseite für wiederverwendbare Blöcke verwalten. Du hast mehrere Möglichkeiten, auf diese Seite zuzugreifen:
- Du fügst /wp-admin/edit.php?post_type=wp_block in die WordPress-URL deiner Website ein.
- Du klickst auf die Schaltfläche Wiederverwendbare Blöcke verwalten im Block-Inserter.
- Klicke auf die Schaltfläche Wiederverwendbare Blöcke verwalten im Dropdown-Menü Blockeinstellungen.
Dort kannst du
- deinen Block bearbeiten, überarbeiten oder als JSON exportieren,
- wiederverwendbare Blöcke aus JSON importieren,
- neue wiederverwendbare Blöcke erstellen.
Alle Änderungen an einem wiederverwendbaren Block werden auf jedes Vorkommen dieses Blocks auf deiner gesamten Website angewendet, unabhängig von der Verwaltungsseite, auf der die Änderungen vorgenommen werden.
Wenn du wiederverwendbare Blöcke intensiv nutzt, solltest du dir dieses tolle Plugin von J. B. Audras nicht entgehen lassen.
Vorlagenteile
Vor der Gutenberg-Ära wurden WordPress-Themes und Templates hauptsächlich in PHP erstellt. Solide Kenntnisse über Child-Themes, die Template-Hierarchie und die wichtigsten Frontend-Entwicklungssprachen waren Grundvoraussetzung für die Erstellung oder Anpassung von Templates. Doch mit der Einführung von Block-Themes änderte sich das.
In Block-Themes und klassischen Themes, die sich für diese Funktion entschieden haben, kannst du ganz einfach eine Vorlage oder einen Vorlagenteil in der Oberfläche des Site Editors erstellen oder anpassen. Es sind keine Entwicklungskenntnisse erforderlich, es sei denn, du entscheidest dich, ein Theme-Entwickler zu werden.
Eine Blockvorlage ist eine Liste von Blockelementen. Beispiele für Blockelemente sind der Seitentitel, das Logo und die Navigation.
Vorlagenteile sind bestimmte Abschnitte einer Seite, die an verschiedenen Stellen dargestellt werden können, wie z. B. eine Kopf- und eine Fußzeile, und die auf jeder Seite deiner WordPress-Website angezeigt werden können.
Du kannst Vorlagenteile über die Oberfläche des Website-Editors erstellen und bearbeiten, wo du alle für Blöcke verfügbaren Bearbeitungswerkzeuge nutzen kannst.
Im Gegensatz zu Blockmustern und wiederverwendbaren Blöcken sind Vorlagenteile jedoch für Bereiche der Website gedacht, die sich nicht häufig ändern.
Unterschiede zwischen Blockmustern, wiederverwendbaren Blöcken und Vorlagenteilen
Hier sind die wichtigsten Unterschiede zwischen den drei Varianten:
Blockmuster
- Blockmuster sind vordefinierte Block-Layouts, die du zu deinem Inhalt hinzufügen und mit denselben Werkzeugen wie die enthaltenen Blöcke anpassen kannst. Änderungen, die du an einem Blockmuster vornimmst, wirken sich nur auf diese eine Instanz des Blockmusters aus.
- Du kannst Blockmuster aus dem Verzeichnis „Muster“ kopieren und einfügen.
- Du kannst neue Muster erstellen und sie im Musterverzeichnis veröffentlichen.
Wiederverwendbare Blöcke
- Wiederverwendbare Blöcke sind Gruppen von Blöcken, die du in jedem Beitrag oder auf jeder Seite deiner Website verwenden kannst. Alle Änderungen, die du an einem wiederverwendbaren Block vornimmst, werden auf jedes Vorkommen dieses Blocks auf deiner gesamten Website angewendet, unabhängig von der Verwaltungsseite, auf der die Änderungen vorgenommen werden.
- Wiederverwendbare Blöcke werden in der Tabelle
wp_postsalswp_blockpost type gespeichert. - Du kannst wiederverwendbare Blöcke von und zu anderen Websites importieren und exportieren.
Vorlagenteile
- Vorlagenteile sind bestimmte Bereiche einer Seite, die an verschiedenen Stellen angezeigt werden können, z. B. in der Kopfzeile, der Fußzeile und der Seitenleiste, und die auf mehreren Seiten deiner WordPress-Website wiederkehren.
- Du kannst Vorlagenteile über die Oberfläche des Website-Editors erstellen und bearbeiten.
- Vorlagenteile sind für Bereiche der Website gedacht, die sich nicht häufig ändern.
Wie man Blockvorlagen erstellt
Zusammen mit der Funktion der Blockmuster hat WordPress 5.5 eine neue API eingeführt, mit der Entwickler „vorgefertigte Inhaltsblöcke erstellen können, die einfach in Beiträge, Seiten, benutzerdefinierte Beitragstypen und Vorlagen eingefügt werden können“. Die neue API bietet die Funktionen register_block_pattern und register_block_pattern_category, um Blockmuster und Musterkategorien zu registrieren.
Ab WordPress 6.0 kannst du Blockmuster auch mit einer PHP-Datei registrieren.
Zum Zeitpunkt der Erstellung dieses Artikels hast du also zwei Möglichkeiten, ein Blockmuster zu erstellen.
- Mit der Hilfsfunktion
register_block_pattern, - Du fügst eine PHP-Datei zu deinem Theme in einem Patterns-Ordner hinzu.
Ein Blockmuster mit einem Plugin erstellen
Die erste Methode richtet sich vor allem an WordPress-Entwickler, ist aber einfach genug, um auch von nicht-erfahrenen Entwicklern verwendet zu werden.
Wenn du dich für die erste Methode entscheidest, kannst du ein Blockmuster mithilfe der beiden neuen Funktionen register_block_pattern und register_block_pattern_category in der PHP-Datei eines Plugins oder in der functions.php deines Themas erstellen.
Wähle oder registriere eine Musterkategorie
Zunächst solltest du eine Kategorie für dein Muster auswählen. Mit WordPress 6.2 wurden neue Musterkategorien hinzugefügt und einige bestehende Kategorien wurden geändert. Zum Zeitpunkt der Erstellung dieses Artikels kannst du die folgenden eingebauten Kategorien verwenden:
- Featured (
featured) - Beiträge (
posts) - Text (
text) - Galerie (
gallery) - Aufruf zum Handeln (
call-to-action) - Banner (
banner) - Kopfzeilen (
header) - Fußzeilen (
footer) - Team (
team) - Zeugnisse (
testimonials) - Dienstleistungen (
services) - Portfolio (
portfolio) - Medien (
media)
Wenn dein Blockmuster in keine der Standardkategorien fällt, kannst du mit der Funktionregister_block_pattern_category auch eine neue Kategorie anlegen.
Diese Funktion nimmt zwei Argumente entgegen:
$category_name: Name der Musterkategorie einschließlich Namespace.$category_properties: Ein Array mit den Eigenschaften der Kategorie.
Ein Beispiel hilft dir, besser zu verstehen, wie du eine neue Musterkategorie registrierst:
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_plugin_register_pattern_category() {
register_block_pattern_category(
'my-pattern-category',
array(
'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
)
);
}
add_action( 'init', 'my_plugin_register_pattern_category' );
}Registrierung eines Blockmusters
Sobald die Musterkategorie registriert wurde, ist der nächste Schritt die Registrierung des Blockmusters selbst. Du registrierst das Blockmuster mit der Hilfsfunktionregister_block_pattern wie folgt:
function my_plugin_register_block_pattern() {
register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );Diese Funktion benötigt zwei Argumente:
$pattern_name: Einen maschinenlesbaren Namen in Form vonnamespace/pattern-name.$pattern_properties: Ein Array mit Eigenschaften für das Muster.
Hier ist eine Liste der derzeit verfügbaren Eigenschaften des Musters:
title(erforderlich): Ein von Menschen lesbarer Titel für das Muster.content(erforderlich): Die HTML-Auszeichnung für das Muster.description: Ein Text, der das Muster im Inserter beschreibt. Die Beschreibung ist optional, wird aber empfohlen, da sie den Benutzern hilft, das Muster zu finden.categories: Ein Array mit einer oder mehreren registrierten Musterkategorien. Du musst eine Kategorie registrieren, bevor du sie hier verwenden kannst (siehe den vorherigen Abschnitt).keywords: Ein Array mit Schlüsselwörtern, die den Nutzern helfen, das Muster zu finden.viewportWidth: Eine ganze Zahl, die die Breite des Musters in der Vorschau angibt.blockTypes: Ein optionales Array mit den Blocktypen, die mit dem Muster verwendet werden sollen.postTypes: Ein Array mit den Beitragstypen, die das Muster verwenden dürfen.templateTypes: Ein Array mit Vorlagentypen, für die das Muster sinnvoll ist (verfügbar seit WordPress 6.2).inserter: Ein Boolescher Wert, der bestimmt, ob das Muster im Block-Inserter sichtbar sein soll. Setze den Wert auffalse, um das Muster auszublenden. In der Standardeinstellung werden alle Muster im Block-Inserter angezeigt.
Hier ist ein Beispiel für die Verwendung von register_block_pattern:
if ( function_exists( 'register_block_pattern' ) ) {
function my_plugin_register_block_pattern() {
register_block_pattern(
'my-plugin/my-block-pattern',
array(
'title' => _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
'categories' => array( 'my-pattern-category' ),
'postTypes' => array( 'post' ),
'content' => '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
)
);
}
add_action( 'init', 'my_plugin_register_block_pattern' );
}In diesem Code haben wir die Eigenschaft postTypes verwendet, um das Muster nur für reguläre Blogposts verfügbar zu machen. Du kannst auch einen anderen Wert für postTypes festlegen, um es für verschiedene Beitragstypen verfügbar zu machen. Wenn du einen product Beitragstyp hast und das Muster nur für diesen Beitragstyp verfügbar machen willst, schreibst du:
'postTypes' => array( 'product' ),Erstelle nun einen neuen Beitrag (oder einen benutzerdefinierten Beitragstyp), öffne den Block-Inserter und klicke auf das Etikett Muster. Du solltest eine neue Musterkategorie (Meine Musterkategorie) mit deinem eigenen Blockmuster finden. Du kannst mit den Mustereigenschaften herumspielen, um deine Blockmuster anzupassen.
Jetzt wollen wir ein bisschen tiefer eintauchen und versuchen, ein echtes Blockmuster zu erstellen.
Ein reales Beispiel für ein Blockmuster
Angenommen, du möchtest ein Blockmuster erstellen, das eine Überschrift, ein Bild, einen Absatz und eine Schaltfläche enthält.
Erstelle im Editor das Layout für dein Blockmuster, wechsle dann in den Code-Editor und kopiere das Markup.
In unserem Beispiel haben wir den folgenden Code:
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->Du kannst diesen Code nun optimieren. Wenn du das Blockmuster mit einem Plugin registrierst, musst du die Bild-URL wie folgt ändern:
esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )Auf diese Weise sucht WordPress nicht in den Uploads nach dem Bild, sondern im Bilderordner deines Plugins.
Du kannst dann die Eigenschaft viewportWidth verwenden, um eine bessere Vorschau des Musters im Block-Inserter zu erhalten:
'viewportWidth' => 800,
Du kannst auch eine Reihe von Schlüsselwörtern einfügen, die den Nutzern helfen, dein Blockmuster zu finden:
'keywords' => array( 'cta', 'demo', 'kinsta' ),
Eine weitere Möglichkeit, den Block bei der Suche zu finden, ist das Hinzufügen einer Reihe von Blocktypen:
'blockTypes' => array( 'core/button' ),Auf diese Weise wird das Blockmuster in den Vorschlägen angezeigt, wenn ein Nutzer nach einem der angegebenen Blöcke sucht.
Die Eigenschaft postTypes ermöglicht es dir, das Blockmuster nur für bestimmte Beitragstypen verfügbar zu machen. Du könntest das Muster zum Beispiel nur für den Beitragstyp product sichtbar machen:
'postTypes' => array( 'product' ),Schließlich kannst du dem Wrapper deines Blockmusters eine CSS-Klasse hinzufügen.
Dazu musst du eine neue Gruppe mit dem Attribut className erstellen:
<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
<!-- Your blocks -->
</div>
<!-- /wp:group -->Beachte, dass du denselben Klassennamen auch dem folgenden div Element hinzufügen musst.
Einen genaueren Blick auf Blockmuster und weitere Codebeispiele findest du im WordPress.org Theme Handbook unter Blockmuster.
Erstellen eines Blockmusters mit einer Datei
Wie bereits erwähnt, wurde mit WordPress 6.0 eine neue und einfachere Möglichkeit eingeführt, Blockmuster zu deinen WordPress-Themes hinzuzufügen. Du kannst Blockmuster jetzt implizit registrieren, indem du sie als PHP-Dateien in einem Ordner /patterns im Stammverzeichnis deines Themes deklarierst.
Angenommen, du möchtest das gleiche Blockmuster, das du im vorherigen Abschnitt erstellt hast, implizit in deinem Block-Theme registrieren. In diesem Beispiel verwenden wir das Theme Twenty Twenty-Three.
Du kannst die gleichen Parameter wie bei der vorherigen Methode setzen, sie aber in einem Kommentar in den Dateikopf einfügen. Außerdem trennst du die Wörter mit einem Leerzeichen, anstatt die Parameternamen in Kleinbuchstaben zu schreiben, und statt Arrays verwendest du kommagetrennte Listenelemente.
Deaktiviere zunächst das Plugin, mit dem du das Muster im vorherigen Beispiel registriert hast. Erstelle dann eine neue Datei my-block-pattern.php und füge den folgenden Header ein:
<?php
/**
* Title: My awesome pattern
* Slug: twentytwentythree/my-block-pattern
* Post Types: post
* Categories: featured, banner
* Viewport Width: 800
* Keywords: Call to action, kinsta
* Block Types: core/buttons
*/
?>Als Nächstes fügst du den Inhalt zu deinem Blockmuster hinzu. Du kannst das gleiche Markup wie in unserem vorherigen Beispiel verwenden, aber zuerst musst du es ein wenig abändern:
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->Das Markup ist im Wesentlichen unverändert aus dem vorherigen Beispiel. Wir haben nur zwei Änderungen vorgenommen.
Die URL des Platzhalterbildes wird jetzt von der Funktionget_theme_file_uri generiert:
<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>Natürlich solltest du das Bild placeholder.jpg vorher in den Ordner /assets/images deines Themes gelegt haben.
Die folgende Anweisung erzeugt den Text, den du übersetzen möchtest.
<?php echo __( 'View plans', 'text-domain' ); ?>Speichere nun deine Datei und erstelle einen neuen Beitrag. Dein Blockmuster sollte in den Kategorien „Featured“ und „Banner“ erscheinen.
Entfernen der Unterstützung, Aufheben der Registrierung und Ausblenden von Blockmustern
In einigen Fällen möchtest du vielleicht spezielle Aktionen für Blockmuster durchführen. Zum Beispiel kannst du ein zentrales Blockmuster durch ein eigenes Blockmuster ersetzen oder eine Kategorie unter bestimmten Bedingungen abmelden. Hier sind die Aktionen, die du durchführen kannst.
1. Unterstützung für alle Core Block Patterns entfernen
Zunächst können Themenentwickler die Unterstützung für die Kernblockmuster entfernen und ihre eigenen Muster bereitstellen. Um die Unterstützung für Kernmuster zu entfernen, kannst du die Funktionremove_theme_support wie folgt verwenden
remove_theme_support( 'core-block-patterns' );Es wird empfohlen, die Funktion remove_theme_support mit dem Hookafter_setup_theme zu verbinden.
2. Aufheben der Registrierung eines einzelnen Blockmusters
Du kannst auch ein bestimmtes Blockmuster abmelden, wenn du eine benutzerdefinierte Alternative anbieten möchtest oder nicht willst, dass es in deinem Theme verwendet wird.
Die Patterns API bietet dafür die Funktionunregister_block_pattern:
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );Wenn du auch ein Core-Blockmuster abmelden kannst, verwendest du die folgende Funktion:
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );Du verwendest unregister_block_pattern mit dem init Haken.
3. Aufhebung einer Blockmusterkategorie
Du kannst auch eine Musterkategorie abmelden, indem du die unregister_block_pattern_category funktion in den init -Hook einbindet:
function my_theme_unregister_block_pattern_categories() {
unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );Erstellen und Teilen von Blockmustern mit dem Pattern Creator
Du kannst deine Muster auch mit einem kostenlosen Online-Tool erstellen und sie mit der Community teilen: Pattern Creator.
Wenn du ein WordPress.org-Konto hast, kannst du den Pattern Creator über das Pattern-Verzeichnis aufrufen.
Dort klickst du auf Neues Muster erstellen. Dadurch wird eine musterspezifische Version des Block-Editors gestartet, mit der du deine Blockmuster erstellen kannst.
Du kannst auch kostenlose Bilder verwenden, die von der Openverse-Bibliothek gehostet werden.
Wenn du mit deinen Änderungen zufrieden bist, kannst du den Entwurf speichern oder das Muster zur Überarbeitung einreichen.
Du kannst dann zum Verzeichnis Muster zurückgehen und Meine Muster auswählen. Dort findest du alle deine Muster auf drei Registerkarten: Alle, Entwürfe und Zur Überprüfung anstehend.
Wenn du mit deinen Änderungen fertig bist, kannst du dein Muster mit der Community teilen. Klicke einfach auf die Schaltfläche Einreichen in der oberen rechten Ecke des Editors, um das Schnittmuster zur Überarbeitung einzureichen (achte darauf, dass du die Richtlinien für Schnittmuster beachtest, bevor du dein Schnittmuster einreichst).
Zusammenfassung
WordPress ist 20 Jahre alt geworden und die Statistiken zeigen, dass es mit 63,3 % Marktanteil im Mai 2023 immer noch das meistgenutzte CMS der Welt ist.
Diese Zahlen belegen, dass WordPress ein hervorragendes Publishing-Tool ist, das von Tausenden von Fachleuten, Entwicklern und einfachen Bloggern auf der ganzen Welt genutzt wird.
Wenn du Zeit und Ressourcen darauf verwendest, dir neue Fähigkeiten in der WordPress-Entwicklung anzueignen und dich mit fortgeschrittenen Funktionen wie benutzerdefinierten Blöcken, wiederverwendbaren Blöcken und Blockmustern vertraut zu machen, könnte das eine hervorragende Investition für deine Karriere als Marketer, Webdesigner oder Publisher sein.
Und jetzt bist du dran. Hast du bereits Blockmuster erstellt? Hast du welche mit der Community geteilt? Wir würden uns freuen, deine Kreationen zu sehen. Hinterlasse einen Kommentar mit einem Link oder deinen Gedanken zu Blockmustern.
Carlo Daniele
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for over 10 years, also in collaboration with Italian and European universities and educational institutions. He has written dozens of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find Carlo on Twitter and LinkedIn.
Schreibe einen Kommentar