{"id":65509,"date":"2023-09-04T15:11:57","date_gmt":"2023-09-04T14:11:57","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=65509&preview=true&preview_id=65509"},"modified":"2023-09-11T08:33:44","modified_gmt":"2023-09-11T07:33:44","slug":"wordpress-block-vorlagen","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-vorlagen\/","title":{"rendered":"Wie man WordPress-Blockvorlagen erstellt"},"content":{"rendered":"

In der Gutenberg<\/a>-\u00c4ra ist der Gestaltungsprozess nicht mehr strikt an WordPress-Themes<\/a> gebunden. Das CMS bietet den Nutzern von Haus aus alle Designwerkzeuge, die sie brauchen, um ein gro\u00dfartiges Website-Layout zu erstellen, und das Theme zielt darauf ab, noch mehr Bau- und Designwerkzeuge hinzuzuf\u00fcgen.<\/p>\n

Blockvorlagen sind eine Funktion, die noch mehr M\u00f6glichkeiten f\u00fcr den Aufbau von Websites er\u00f6ffnet. Laut dem Block Editor Handbook<\/a>:<\/p>\n

Eine Blockvorlage ist definiert als eine Liste von Blockelementen. Solche Bl\u00f6cke k\u00f6nnen vordefinierte Attribute und Platzhalterinhalte haben und statisch oder dynamisch sein. Blockvorlagen erm\u00f6glichen es, einen Standard-Ausgangszustand f\u00fcr eine Editor-Sitzung festzulegen.<\/em><\/p><\/blockquote>\n

Mit anderen Worten: Blockvorlagen sind vorgefertigte Sammlungen von Bl\u00f6cken, die dazu dienen, einen Standardzustand dynamisch auf dem Client festzulegen.<\/p>\n

\ud83d\udc49 Blockvorlagen unterscheiden sich von Vorlagendateien.<\/strong><\/p>\n

Vorlagendateien sind PHP-Dateien wie index.php<\/strong>, page.php<\/strong> und single.php<\/strong> und funktionieren in der WordPress-Vorlagenhierarchie<\/a> sowohl bei klassischen als auch bei Blockvorlagen auf die gleiche Weise. Bei klassischen Themes sind diese Dateien in PHP und HTML geschrieben. In Block-Themes bestehen sie vollst\u00e4ndig aus Bl\u00f6cken.<\/p>\n

\ud83d\udc49 Blockvorlagen unterscheiden sich von Blockmustern.<\/strong><\/p>\n

Blockmuster<\/a> m\u00fcssen manuell zu deinen Seiten hinzugef\u00fcgt werden, w\u00e4hrend Blockvorlagen automatisch das anf\u00e4ngliche Layout und die Standardeinstellungen bereitstellen, wenn du oder deine Teammitglieder einen neuen Beitrag erstellen.<\/p>\n

Du kannst auch bestimmte Blockvorlagen an deine benutzerdefinierten Beitragstypen binden und einige Bl\u00f6cke oder Funktionen sperren, um die Benutzer\/innen zu zwingen, deine Standardeinstellungen zu verwenden oder Fehler zu vermeiden.<\/p>\n

Du hast mehrere M\u00f6glichkeiten, Blockvorlagen zu erstellen. Du kannst die Block-API verwenden<\/a>, um eine Reihe von Blocktypen per PHP zu deklarieren, oder du kannst einen benutzerdefinierten Blocktyp mit der Komponente InnerBlocks<\/code> erstellen.<\/p>\n

Lass uns eintauchen!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Wie man eine Blockvorlage mit PHP erstellt<\/h2>\n

Wenn du ein Entwickler der alten Schule bist, kannst du eine benutzerdefinierte Blockvorlage mithilfe eines Plugins oder der functions.php<\/a> deines Themes erstellen. Wenn du dich f\u00fcr ein Plugin entscheidest, \u00f6ffne deinen bevorzugten Code-Editor<\/a>, erstelle eine neue PHP-Datei und f\u00fcge den folgenden Code ein:<\/p>\n

<?php\n\/*\n * Plugin Name:       My Block Templates\n * Plugin URI:        https:\/\/example.com\/\n * Description:       An example plugin\n * Version:           1.0\n * Requires at least: 5.5\n * Requires PHP:      8.0\n * Author:            Your name\n * Author URI:        https:\/\/author.example.com\/\n * License:           GPL v2 or later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Update URI:        https:\/\/example.com\/my-plugin\/\n *\/\n\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
In den obigen Code, get_post_type_object<\/code><\/a> wird ein Beitragstyp nach seinem Namen abgefragt.<\/p>\n
Speichere deine Datei im Ordner wp-content\/plugins<\/strong>, rufe den Bildschirm Plugins in deinem WordPress-Dashboard<\/a> auf und aktiviere das Plugin My Block Templates<\/strong>.<\/p>\n
Wenn du jetzt einen neuen Beitrag erstellst, startet der Editor automatisch deine Blockvorlage mit einem Bildblock, einer \u00dcberschrift und einem Absatz.<\/p>\n
\"Eine
Eine automatisch im Beitragseditor geladene Blockvorlage<\/figcaption><\/figure>\n
Du kannst auch ein Array von Einstellungen f\u00fcr jeden Block hinzuf\u00fcgen und auch verschachtelte Strukturen von Bl\u00f6cken erstellen. Die folgende Funktion erstellt eine erweiterte Blockvorlage mit inneren Bl\u00f6cken und Einstellungen:<\/p>\n
function myplugin_register_my_block_template() {\n\n\t$block_template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading', array(\n\t\t\t'placeholder'\t=> 'Add H2...',\n\t\t\t'level'\t\t\t=> 2\n\t\t) ),\n\t\tarray( 'core\/paragraph', array(\n\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\n\t\t) ),\n\t\tarray( 'core\/columns', \n\t\t\tarray(), \n\t\t\tarray( \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t)\n\t\t\t\t), \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t) ),\n\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t) )\n\t\t\t\t\t) \n\t\t\t\t)\n\t\t\t) \n\t\t)\n\t);\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = $block_template;\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Die Ausgabe des obigen Codes siehst du in der folgenden Abbildung:<\/p>\n
\"Eine
Eine erweiterte Blockvorlage<\/figcaption><\/figure>\n
Bis jetzt haben wir nur die Kernbl\u00f6cke verwendet. Du kannst aber auch benutzerdefinierte Bl\u00f6cke<\/a> oder Blockmuster<\/a> in deine Blockvorlagen einf\u00fcgen, wie im folgenden Beispiel gezeigt:<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'page' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/pattern', array(\n\t\t\t'slug' => 'my-plugin\/my-block-pattern'\n\t\t) ) \n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Es gibt keinen gro\u00dfen Unterschied, wenn du eine Standard-Blockvorlage f\u00fcr einen bereits registrierten benutzerdefinierten Beitragstyp erstellen m\u00f6chtest. \u00c4ndere einfach den Beitragstyp von get_post_type_object<\/code> in den Namen deines benutzerdefinierten Beitragstyps, wie im folgenden Beispiel gezeigt:<\/p>\n
<?php\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'book' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Jetzt, wo du wei\u00dft, wie du Blockvorlagen erstellst, k\u00f6nnen wir weitermachen und weitere Anwendungsf\u00e4lle erkunden. Lass uns ein bisschen tiefer eintauchen.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Blockvorlagen mit benutzerdefinierten Beitragstypen<\/h3>\n
Wie wir bereits erw\u00e4hnt haben, kannst du eine Blockvorlage an einen benutzerdefinierten Beitragstyp anh\u00e4ngen. Du kannst dies tun, nachdem dein benutzerdefinierter Beitragstyp bereits registriert wurde, aber du kannst es auch vorziehen, eine Blockvorlage bei der Registrierung des benutzerdefinierten Beitragstyps<\/a> zu definieren.<\/p>\n
In diesem Fall kannst du die Argumente template<\/code> und template_lock<\/code> der register_post_type<\/code><\/a> Funktion verwenden:<\/p>\n
function myplugin_register_book_post_type() {\n\t$args = array(\n\t\t'label' => esc_html__( 'Books' ),\n\t\t'labels' => array(\n\t\t\t'name' => esc_html__( 'Books' ),\n\t\t\t'singular_name' => esc_html__( 'Book' ),\n\t\t),\n\t\t'public' => true,\n\t\t'publicly_queryable' => true,\n\t\t'show_ui' => true,\n\t\t'show_in_rest' => true,\n\t\t'rest_namespace' => 'wp\/v2',\n\t\t'has_archive' => true,\n\t\t'show_in_menu' => true,\n\t\t'show_in_nav_menus' => true,\n\t\t'supports' => array( 'title', 'editor', 'thumbnail' ),\n\t\t'template' => array(\n\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t) ),\n\t\t\tarray( 'core\/columns', \n\t\t\t\tarray(), \n\t\t\t\tarray( \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t\t)\n\t\t\t\t\t), \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t\t) ),\n\t\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t)\n\t);\n\tregister_post_type( 'book', $args );\n}\nadd_action( 'init', 'myplugin_register_book_post_type' );<\/code><\/pre>\n
Und das war’s. Die Abbildung unten zeigt die Blockvorlage in der Benutzeroberfl\u00e4che des Editors f\u00fcr den benutzerdefinierten Beitragstyp Buch.<\/p>\n
\"Eine
Eine Blockvorlage f\u00fcr einen benutzerdefinierten Beitragstyp<\/figcaption><\/figure>\n
Wenn du mit dem Layout fertig bist, kannst du mit den Blockeinstellungen herumspielen, um das Verhalten und das Aussehen deiner Blockvorlage fein abzustimmen.<\/p>\n
Feinabstimmung der Blockvorlage mit Blockattributen<\/h3>\n
Wir haben eine Blockvorlage als eine Liste von Bl\u00f6cken definiert. Jedes Element in der Liste sollte ein Array sein, das den Blocknamen und ein Array mit optionalen Attributen enth\u00e4lt. Bei verschachtelten Arrays m\u00f6chtest du vielleicht ein drittes Array f\u00fcr untergeordnete Bl\u00f6cke hinzuf\u00fcgen.<\/p>\n
Eine Vorlage mit einem Spaltenblock kann wie folgt dargestellt werden:<\/p>\n
$template = array( 'core\/columns', \n\t\/\/ attributes\n\tarray(), \n\t\/\/ nested blocks\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
Wie oben erw\u00e4hnt, ist das zweite Array in der Liste ein optionales Array mit Blockattributen. Mit diesen Attributen kannst du das Aussehen deiner Vorlage anpassen, damit du oder deine Nutzer sich auf den Inhalt des Beitrags konzentrieren k\u00f6nnen, ohne sich um das Seitenlayout und das Design zu k\u00fcmmern.<\/p>\n
Zu Beginn kannst du mit dem Block-Editor eine Struktur von Bl\u00f6cken erstellen, die du als Referenz f\u00fcr deine Vorlage verwenden kannst.<\/p>\n
\"Ein
Ein Blocklayout im Blockeditor<\/figcaption><\/figure>\n
F\u00fcge deine Bl\u00f6cke hinzu, passe das Layout und die Stile an und wechsle dann in den Code-Editor, um die Blockbegrenzer zu finden.<\/p>\n
\"Das
Das Blockbegrenzungszeichen eines Columns-Blocks<\/figcaption><\/figure>\n
Blockbegrenzer speichern Blockeinstellungen und Stile in Schl\u00fcssel\/Wert-Paaren. Du kannst die Schl\u00fcssel und Werte einfach aus dem Blockmarkup kopieren und einf\u00fcgen, um dein Attributfeld aufzuf\u00fcllen:<\/p>\n
$template = array( 'core\/columns', \n\tarray(\n\t\t'verticalAlignment'\t=> 'center',\n\t\t'align'\t\t\t\t=> 'wide',\n\t\t'style'\t\t\t\t=> array( \n\t\t\t'border'\t=> array(\n\t\t\t\t'width'\t=> '2px',\n\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t)\n\t\t\t)\n\t\t),\n\t\t'backgroundColor' => 'tertiary'\n\t),\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
Wiederhole den Vorgang f\u00fcr jeden Block in der Vorlage und du bist fertig.<\/p>\n
$template = array(\n\tarray( 'core\/paragraph', array(\n\t\t'placeholder'\t=> 'Add paragraph...'\n\t) ),\n\tarray( 'core\/columns', \n\t\tarray(\n\t\t\t'verticalAlignment'\t=> 'center',\n\t\t\t'align'\t\t\t\t=> 'wide',\n\t\t\t'style'\t\t\t\t=> array( \n\t\t\t\t'border'\t=> array(\n\t\t\t\t\t'width'\t\t=> '2px',\n\t\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t),\n\t\t\t'backgroundColor' => 'tertiary',\n\t\t\t'lock' => array(\n\t\t\t\t'remove'\t=> true,\n\t\t\t\t'move'\t\t=> true\n\t\t\t)\n\t\t), \n\t\tarray( \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/image', \n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\t'style'\t=> array( 'border' => array( 'radius' => '8px' ) ) \n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t), \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t) ),\n\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t) )\n\t\t\t\t) \n\t\t\t)\n\t\t)\n\t)\n);<\/code><\/pre>\n
Bl\u00f6cke sperren<\/h3>\n
Du kannst bestimmte Bl\u00f6cke oder alle Bl\u00f6cke in deiner Vorlage sperren, indem du die Eigenschaft template_lock<\/code> der $post_type_object<\/code> verwendest.<\/p>\n
Das Sperren von Vorlagen kann sehr n\u00fctzlich sein, wenn du einen Blog mit mehreren Autoren hast und verhindern willst, dass alle oder bestimmte Nutzer das Layout deiner Blockvorlage \u00e4ndern.<\/p>\n
Im folgenden Beispiel sperren wir alle Bl\u00f6cke in der Blockvorlage:<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n\t$post_type_object->template_lock = 'all';\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Gesperrte Bl\u00f6cke werden in der Blocksymbolleiste und in der Listenansicht mit einem Schlosssymbol angezeigt:<\/p>\n
\"Ein
Ein gesperrter \u00dcberschriftenblock<\/figcaption><\/figure>\n
Du kannst die Blocksperre \u00fcber das Men\u00fc Optionen in der Blocksymbolleiste aufheben.<\/p>\n
\"Entsperren
Entsperren eines Blocks<\/figcaption><\/figure>\n
Wenn du auf Entsperren<\/strong> klickst, erscheint ein modales Popup, in dem du die Bewegung aktivieren\/deaktivieren, das Entfernen verhindern oder beides kannst:<\/p>\n
\"Optionen
Optionen zum Sperren<\/figcaption><\/figure>\n
template_lock<\/code> kann einen der folgenden Werte<\/a> annehmen:<\/p>\n