{"id":58223,"date":"2023-01-25T12:10:14","date_gmt":"2023-01-25T11:10:14","guid":{"rendered":"https:\/\/kinqsta.com\/de\/?p=58223&#038;preview=true&#038;preview_id=58223"},"modified":"2023-09-14T09:41:52","modified_gmt":"2023-09-14T08:41:52","slug":"wordpress-meta-box-zu-beitraegen-hinzufuegen","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/","title":{"rendered":"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu"},"content":{"rendered":"<p><a href=\"https:\/\/kinqsta.com\/de\/blog\/advanced-custom-fields\/#what\">Benutzerdefinierte Felder<\/a> bieten die M\u00f6glichkeit, Website-Inhalten zus\u00e4tzliche Informationen zuzuweisen. Diese Informationen werden normalerweise als <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">Metadaten<\/a> bezeichnet.<\/p>\n<blockquote><p>Metadaten sind Informationen \u00fcber Informationen. Im Fall von WordPress sind es Informationen, die mit Beitr\u00e4gen, Benutzern, Kommentaren und Begriffen verbunden sind.<\/p>\n<p>Da die Metadaten in WordPress in einem Verh\u00e4ltnis von vielen zu eins stehen, sind deine M\u00f6glichkeiten ziemlich grenzenlos. Du kannst so viele Meta-Optionen haben, wie du willst, und du kannst so ziemlich alles darin speichern.<\/p>\n<p><em>\u2013<a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">Plugin Handbuch<\/a><\/em><\/p><\/blockquote>\n<p>Hier sind einige Beispiele f\u00fcr Metadaten, die du mit benutzerdefinierten Feldern an einen Beitrag anh\u00e4ngen kannst:<\/p>\n<ul>\n<li>Die geografischen Koordinaten eines Ortes oder einer Immobilie<\/li>\n<li>Das Datum einer Veranstaltung<\/li>\n<li>Die ISBN oder der Autor eines Buches<\/li>\n<li>Die Tageslaune des Autors des Beitrags<\/li>\n<\/ul>\n<p>Und es gibt noch viele mehr.<\/p>\n<p>WordPress bietet von Haus aus keine einfache M\u00f6glichkeit, benutzerdefinierte Felder hinzuzuf\u00fcgen und zu verwalten. Im klassischen Editor werden benutzerdefinierte Felder in einem Feld am unteren Rand der Seite, unterhalb des Beitragseditors, angezeigt.<\/p>\n<figure id=\"attachment_142717\" aria-describedby=\"caption-attachment-142717\" style=\"width: 2555px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142717 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/custom-fields-classic-editor.jpg\" alt=\"Benutzerdefinierte Felder im klassischen Editor\" width=\"2555\" height=\"1832\"><figcaption id=\"caption-attachment-142717\" class=\"wp-caption-text\">Benutzerdefinierte Felder im klassischen Editor<\/figcaption><\/figure>\n<p>In Gutenberg sind benutzerdefinierte Felder standardm\u00e4\u00dfig deaktiviert, aber du kannst sie anzeigen lassen, indem du das entsprechende Element in den Beitragseinstellungen ausw\u00e4hlst.<\/p>\n<figure id=\"attachment_142718\" aria-describedby=\"caption-attachment-142718\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142718 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/adding-custom-fields-to-the-block-editor.jpg\" alt=\"Hinzuf\u00fcgen des Feldes f\u00fcr benutzerdefinierte Felder zum Block-Editor\" width=\"1500\" height=\"964\"><figcaption id=\"caption-attachment-142718\" class=\"wp-caption-text\">Hinzuf\u00fcgen des Feldes f\u00fcr benutzerdefinierte Felder zum Block-Editor<\/figcaption><\/figure>\n<p>Leider gibt es keine M\u00f6glichkeit, Metadaten auf dem Frontend anzuzeigen, ohne ein Plugin zu verwenden oder dir die H\u00e4nde mit Code schmutzig zu machen.<br \/>\n<\/p>\n<p>Wenn du ein Nutzer bist, findest du mehrere <a href=\"https:\/\/wordpress.org\/plugins\/search\/custom+fields\/\">hervorragende Plugins<\/a>, die diese Aufgabe f\u00fcr dich \u00fcbernehmen. Wenn du aber ein Entwickler bist und mehr aus den benutzerdefinierten Feldern von WordPress herausholen, sie nahtlos in den Block-Editor integrieren und sie im Frontend deiner WordPress-Website mithilfe eines benutzerdefinierten Gutenberg-Blocks anzeigen m\u00f6chtest, dann bist du hier genau richtig.<\/p>\n<p>Wenn du dich also fragst, wie du die benutzerdefinierten WordPress-Felder am besten sowohl in <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Gutenberg<\/a> als auch im <a href=\"https:\/\/kinqsta.com\/blog\/wordpress-tinymce-editor\/\">klassischen Editor<\/a> nutzen kannst, lautet die Antwort: &#8222;Indem du ein Plugin erstellst, das sowohl f\u00fcr den klassischen Editor als auch f\u00fcr Gutenberg funktioniert&#8220;.<\/p>\n<p>Aber mach dir nicht zu viele Sorgen. Auch wenn die Erstellung eines Plugins, das benutzerdefinierte Felder in beiden Editoren verwaltet, etwas knifflig sein k\u00f6nnte, werden wir versuchen, den Prozess so einfach wie m\u00f6glich zu gestalten. Wenn du die Konzepte, die wir in diesem Artikel besprechen, erst einmal verstanden hast, kannst du benutzerdefinierte Metafelder in Gutenberg verwalten und alle Arten von Websites erstellen.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Dieser Artikel setzt voraus, dass du mit Technologien wie <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-node-js\/\">Node.js<\/a> &#038; <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-npm\/\">npm<\/a>, <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a> und <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript<\/a> vertraut bist. Grundkenntnisse in der WordPress-Entwicklung sind ebenfalls erforderlich.<\/p>\n<p>Wenn du neu in der Entwicklung von Gutenberg-Bl\u00f6cken bist, solltest du dir unsere fr\u00fcheren Anleitungen ansehen, bevor du diesen Artikel liest:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-blocke\/\">Benutzerdefinierte Gutenberg-Bl\u00f6cke erstellen<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/dynamische-bloecke\/\">Wie man dynamische Bl\u00f6cke f\u00fcr Gutenberg erstellt<\/a><\/li>\n<\/ul>\n<p>Wenn du Videoinhalte bevorzugst, schau dir unseren kostenlosen Videokurs <a href=\"https:\/\/kinqsta.com\/courses\/course\/gutenberg-block-development\/\">zur Entwicklung benutzerdefinierter Gutenberg-Bl\u00f6cke<\/a> an.<\/p>\n<\/aside>\n\n<p><strong>Hinweis: Bevor du etwas tust, stelle sicher, dass du eine <a href=\"https:\/\/kinqsta.com\/de\/blog\/so-installierst-du-node-js\/\">aktuelle Version von Node.js<\/a> auf deinem Computer hast<\/strong><\/p>\n<p>Das war&#8217;s, hier ist unsere \u00dcbersicht:<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Ein Block Plugin mit dem offiziellen create-block Tool erstellen<\/h2>\n<p>Der erste Schritt besteht darin, ein neues Plugin mit allen Dateien und Abh\u00e4ngigkeiten zu erstellen, die f\u00fcr die Registrierung eines neuen Blocktyps ben\u00f6tigt werden. Mit dem Block-Plugin kannst du ganz einfach einen benutzerdefinierten Blocktyp f\u00fcr die Verwaltung und Anzeige von benutzerdefinierten Metadaten erstellen.<\/p>\n<p>Um einen neuen Blocktyp zu erstellen, verwenden wir das offizielle Tool <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">create-block<\/a>. Einen detaillierten \u00dcberblick \u00fcber die Verwendung des Blockerstellungstools findest du in unserem <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-blocke\/#create-block\">vorherigen Artikel<\/a> \u00fcber die Entwicklung von Gutenberg-Bl\u00f6cken.<\/p>\n<p>\u00d6ffne dein Kommandozeilentool, navigiere in das <strong>Plugins-Verzeichnis<\/strong> deiner <a href=\"https:\/\/kinqsta.com\/de\/wordpress-hosting\/staging\/\">WordPress-Entwicklungswebsite<\/a> und f\u00fchre den folgenden Befehl aus:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Wenn du dazu aufgefordert wirst, f\u00fcge die folgenden Angaben hinzu:<\/p>\n<ul>\n<li><strong>Die f\u00fcr diesen Block zu verwendende Vorlagenvariante:<\/strong> dynamic<\/li>\n<li><strong>Der Slug des Blocks, der zur Identifizierung verwendet wird (auch der Name des Ausgabeordners):<\/strong> metadata-block<\/li>\n<li><strong>Den internen Namensspace f\u00fcr den Blocknamen (etwas Eindeutiges f\u00fcr deine Produkte):<\/strong> meta-fields<\/li>\n<li><strong>Der Anzeigetitel f\u00fcr deinen Block:<\/strong> Meta Fields<\/li>\n<li><strong>Die Kurzbeschreibung f\u00fcr deinen Block (optional):<\/strong> Block description<\/li>\n<li><strong>Das Dashicon, um deinen Block leichter zu identifizieren (optional):<\/strong> book<\/li>\n<li><strong>Der Name der Kategorie, um den Nutzern das Durchsuchen und Entdecken deines Blocks zu erleichtern:<\/strong> widgets<\/li>\n<li><strong>Willst du das WordPress-Plugin anpassen?<\/strong> Yes\/No<\/li>\n<\/ul>\n<p>Schauen wir uns diese Details kurz an und versuchen zu verstehen, wo sie verwendet werden.<\/p>\n<ul>\n<li><strong>Der Block-Slug, der zur Identifizierung verwendet wird<\/strong>, definiert den <strong>Ordnernamen<\/strong> und die <strong>Textdom\u00e4ne<\/strong> des Plugins<\/li>\n<li><strong>Der interne Namensspace f\u00fcr den Blocknamen<\/strong> definiert den <strong>internen Namensspace <\/strong>des Blocks und das <strong>Funktionspr\u00e4fix<\/strong>, das im gesamten Code des Plugins verwendet wird.<\/li>\n<li><strong>Der Anzeigetitel f\u00fcr deinen Block<\/strong> definiert den <strong>Plugin-Namen<\/strong> und den <strong>Blocknamen<\/strong>, der in der Editoroberfl\u00e4che verwendet wird.<\/li>\n<\/ul>\n<p>Die Einrichtung kann ein paar Minuten dauern. Wenn der Vorgang abgeschlossen ist, erh\u00e4ltst du eine Liste mit den verf\u00fcgbaren Befehlen.<\/p>\n<figure id=\"attachment_142731\" aria-describedby=\"caption-attachment-142731\" style=\"width: 1136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142731 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/plugin-bootstrapped.jpg\" alt=\"Das Block-Plugin wurde erfolgreich installiert\" width=\"1136\" height=\"991\"><figcaption id=\"caption-attachment-142731\" class=\"wp-caption-text\">Das Block-Plugin wurde erfolgreich installiert<\/figcaption><\/figure>\n<p>Bevor du zum n\u00e4chsten Abschnitt \u00fcbergehst, navigiere in deinem <a href=\"https:\/\/kinqsta.com\/de\/blog\/linux-befehle\/\">Kommandozeilentool<\/a> zum Ordner deines Plugins und f\u00fchre die folgenden Befehle aus:<\/p>\n<pre><code class=\"language-bash\">cd metadata-block\nnpm start<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Achte darauf, dass du den Befehl <code>npm start<\/code> jedes Mal ausf\u00fchrst, wenn du deine Gutenberg-Entwicklungsumgebung startest.<\/p>\n<p>Wenn du <code>npm start<\/code> ausf\u00fchrst, wird ein Watcher im Terminal gestartet, der die JS- und CSS-Dateien nach jeder \u00c4nderung neu erstellt (<a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/javascript\/js-build-setup\/#development-mode\">mehr dazu<\/a>).<\/p>\n<\/aside>\n\n<p>Du bist bereit, deinen Code zu erstellen. Im n\u00e4chsten Schritt bearbeitest du die Haupt-PHP-Datei des Plugins, um eine Metabox f\u00fcr den Classic Editor zu erstellen.<\/p>\n<p>Bevor du mit dem n\u00e4chsten Abschnitt fortf\u00e4hrst, <strong>installiere und aktiviere das <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\">Classic Editor-Plugin<\/a><\/strong>.<\/p>\n<p>Dann \u00f6ffnest du den Plugin-Bildschirm und aktivierst das neue Plugin <strong>Meta Fields<\/strong>.<\/p>\n<figure id=\"attachment_143199\" aria-describedby=\"caption-attachment-143199\" style=\"width: 1726px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143199 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/activate-plugins.jpg\" alt=\"Aktiviere die Plugins\" width=\"1726\" height=\"878\"><figcaption id=\"caption-attachment-143199\" class=\"wp-caption-text\">Aktiviere die Plugins<\/figcaption><\/figure>\n<h2>Hinzuf\u00fcgen einer Meta-Box zum klassischen Editor<\/h2>\n<p>Im Zusammenhang mit dem <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-wordpress-editor-deaktivieren\/\">klassischen Editor<\/a> ist ein Metakasten ein Container mit Formularelementen, in die du bestimmte Informationen eingeben kannst, z. B. den Autor des Beitrags, Tags, Kategorien usw.<\/p>\n<p>Zus\u00e4tzlich zu den eingebauten Meta-Boxen k\u00f6nnen Plugin-Entwickler eine beliebige Anzahl von <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">benutzerdefinierten Meta-Boxen<\/a> hinzuf\u00fcgen, um HTML-Formularelemente (oder beliebige <a href=\"https:\/\/kinqsta.com\/de\/blog\/html-lernen\/\">HTML-Inhalte<\/a>) einzubinden, in die Plugin-Benutzer\/innen pluginspezifische Daten eingeben k\u00f6nnen.<\/p>\n<p>Die WordPress-API bietet n\u00fctzliche Funktionen, mit denen du ganz einfach benutzerdefinierte Meta-Boxen registrieren kannst, die alle HTML-Elemente enthalten, die dein Plugin zum Funktionieren braucht.<\/p>\n<p>Um loszulegen, f\u00fcge den folgenden Code in die PHP-Datei des Plugins ein, das du gerade erstellt hast:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post',\n\t\t'side',\n\t\t'default'\n\t );\n}\n\n\/\/ build meta box\nfunction meta_fields_build_meta_box_callback( $post ){\n\t  wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );\n\t  $title = get_post_meta( $post-&gt;ID, '_meta_fields_book_title', true );\n\t  $author = get_post_meta( $post-&gt;ID, '_meta_fields_book_author', true );\n\t  ?&gt;\n\t  &lt;div class=\"inside\"&gt;\n\t  \t  &lt;p&gt;&lt;strong&gt;Title&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_title\" name=\"meta_fields_book_title\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;\t\n\t\t  &lt;p&gt;&lt;strong&gt;Author&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_author\" name=\"meta_fields_book_author\" value=\"&lt;?php echo esc_attr( $author ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\t  &lt;\/div&gt;\n\t  &lt;?php\n}\nadd_action( 'add_meta_boxes', 'meta_fields_add_meta_box' );<\/code><\/pre>\n<p>Die Funktion <code>add_meta_box<\/code> registriert eine neue Metabox, w\u00e4hrend die Callback-Funktion den HTML-Code erstellt, der in die Metabox eingef\u00fcgt werden soll. Wir werden dieses Thema nicht weiter vertiefen, da es den Rahmen dieses Artikels sprengen w\u00fcrde, aber du findest alle Details, die du brauchst, <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/add_meta_boxes\/\">hier<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\">hier<\/a> und <a href=\"https:\/\/www.smashingmagazine.com\/2011\/10\/create-custom-post-meta-boxes-wordpress\/\">hier<\/a>.<\/p>\n<p>Im n\u00e4chsten Schritt erstellst du eine Funktion, die die vom Autor des Beitrags eingegebenen Daten speichert, sobald der <code>save_post<\/code> <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-hooks\/\">-Hook<\/a> ausgel\u00f6st wird (siehe <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/save_post\/\">Entwicklerressourcen<\/a>):<\/p>\n<pre><code class=\"language-php\">\/\/ save metadata\nfunction meta_fields_save_meta_box_data( $post_id ) {\n\tif ( ! isset( $_POST['meta_fields_meta_box_nonce'] ) )\n\t\treturn;\n\tif ( ! wp_verify_nonce( $_POST['meta_fields_meta_box_nonce'], 'meta_fields_save_meta_box_data' ) )\n\t\treturn;\n\tif ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )\n\t\treturn;\n\tif ( ! current_user_can( 'edit_post', $post_id ) )\n\t\treturn;\n\n\tif ( ! isset( $_POST['meta_fields_book_title'] ) )\n\t\treturn;\n\tif ( ! isset( $_POST['meta_fields_book_author'] ) )\n\t\treturn;\n\n\t$title = sanitize_text_field( $_POST['meta_fields_book_title'] );\n\t$author = sanitize_text_field( $_POST['meta_fields_book_author'] );\n\n\tupdate_post_meta( $post_id, '_meta_fields_book_title', $title );\n\tupdate_post_meta( $post_id, '_meta_fields_book_author', $author );\n}\nadd_action( 'save_post', 'meta_fields_save_meta_box_data' );<\/code><\/pre>\n<p>Auch hier findest du die Details in der Online-Dokumentation. Hier weisen wir nur auf den Unterstrich (<code>_<\/code>) vor dem Metaschl\u00fcssel hin. Dadurch wird WordPress angewiesen, die Schl\u00fcssel dieser benutzerdefinierten Felder aus der Liste der standardm\u00e4\u00dfig verf\u00fcgbaren benutzerdefinierten Felder auszublenden und deine benutzerdefinierten Felder nur in deinem benutzerdefinierten Metafeld sichtbar zu machen.<\/p>\n<p>Die folgende Abbildung zeigt, wie das benutzerdefinierte Metafeld im klassischen Editor aussieht:<\/p>\n<figure id=\"attachment_142726\" aria-describedby=\"caption-attachment-142726\" style=\"width: 2154px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142726 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/custom-meta-box.jpg\" alt=\"Eine benutzerdefinierte Meta-Box im klassischen Editor\" width=\"2154\" height=\"1040\"><figcaption id=\"caption-attachment-142726\" class=\"wp-caption-text\">Eine benutzerdefinierte Meta-Box im klassischen Editor<\/figcaption><\/figure>\n<p>Wenn du jetzt das Plugin f\u00fcr den klassischen Editor deaktivierst und \u00fcberpr\u00fcfst, was im <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Blockeditor<\/a> passiert, wirst du sehen, dass das Metak\u00e4stchen immer noch erscheint und funktioniert, aber nicht genau so, wie du es vielleicht erwartest.<\/p>\n<p>Unser Ziel ist es, ein System f\u00fcr die Verwaltung von Metadaten zu schaffen, die an Blogbeitr\u00e4ge oder <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-benutzerdefinierte-beitragstypen\/\">benutzerdefinierte Beitragstypen<\/a> angeh\u00e4ngt sind und sich nahtlos in den Block-Editor integrieren lassen. Aus diesem Grund wird der bisher gezeigte Code nur ben\u00f6tigt, um die Abw\u00e4rtskompatibilit\u00e4t mit dem klassischen Editor zu gew\u00e4hrleisten.<\/p>\n<p>Bevor wir also weitermachen, weisen wir WordPress an, die benutzerdefinierte Meta-Box aus dem Block-Editor zu entfernen, indem wir der Funktion <code>add_meta_box<\/code> das Flag <code>__back_compat_meta_box<\/code> hinzuf\u00fcgen (siehe auch <a href=\"https:\/\/make.wordpress.org\/core\/2018\/11\/07\/meta-box-compatibility-flags\/\">Meta-Box-Kompatibilit\u00e4tsflags<\/a> und <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#backward-compatibility\">Abw\u00e4rtskompatibilit\u00e4t<\/a>).<\/p>\n<p>Gehen wir zur\u00fcck zu der Callback-Funktion, die die Meta-Box registriert, und \u00e4ndern sie wie folgt:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post', \n\t\t'side',\n\t\t'default',\n\t\t\/\/ hide the meta box in Gutenberg\n\t\tarray('__back_compat_meta_box' =&gt; true)\n\t );\n}<\/code><\/pre>\n<p>Speichere die Plugin-Datei und gehe zur\u00fcck in deinen WordPress-Admin. Jetzt solltest du das benutzerdefinierte Meta-Box im Block-Editor nicht mehr sehen. Wenn du stattdessen den klassischen Editor wieder aktivierst, wird deine benutzerdefinierte Meta-Box wieder angezeigt.<\/p>\n<h2>Hinzuf\u00fcgen von benutzerdefinierten Meta-Boxen zum Gutenberg-Blockeditor (drei Optionen)<\/h2>\n<p>In unseren fr\u00fcheren Artikeln \u00fcber die Entwicklung von Gutenberg-Bl\u00f6cken haben wir einen detaillierten \u00dcberblick \u00fcber den Editor und seine Bestandteile gegeben und erkl\u00e4rt, wie du <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-blocke\/\">statische<\/a> und <a href=\"https:\/\/kinqsta.com\/de\/blog\/dynamische-bloecke\/\">dynamische Bl\u00f6cke<\/a> entwickelst.<\/p>\n<p>Wie bereits erw\u00e4hnt, gehen wir in diesem Artikel einen Schritt weiter und erl\u00e4utern, wie du benutzerdefinierte Meta-Boxen zu Blogbeitr\u00e4gen hinzuf\u00fcgen kannst.<\/p>\n<p>Es gibt verschiedene M\u00f6glichkeiten, in Gutenberg Metadaten zu speichern und zu verwenden. Hier gehen wir auf die folgenden ein:<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>Einen benutzerdefinierten Block erstellen, um benutzerdefinierte Meta-Boxen zu speichern und anzuzeigen<\/h3>\n<p>In diesem Abschnitt zeigen wir dir, wie du benutzerdefinierte Meta-Boxen in einem <strong>dynamischen Block<\/strong> erstellen und verwalten kannst. Laut dem Handbuch f\u00fcr den Block-Editor ist ein <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#step-1-register-meta-field\">Post-Meta-Feld<\/a> &#8222;ein WordPress-Objekt, das dazu dient, zus\u00e4tzliche Daten \u00fcber einen Beitrag zu speichern&#8220;. Bevor wir ein neues Meta-Feld verwenden k\u00f6nnen, m\u00fcssen wir es zun\u00e4chst registrieren.<\/p>\n<h4>Benutzerdefinierte Meta-Felder registrieren<\/h4>\n<p>Bevor du ein benutzerdefiniertes Meta-Feld registrierst, musst du sicherstellen, dass der <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-benutzerdefinierte-beitragstypen\/\">Beitragstyp<\/a>, der es verwenden soll, benutzerdefinierte Felder unterst\u00fctzt. Wenn du ein benutzerdefiniertes Meta-Feld registrierst, solltest du au\u00dferdem den Parameter <code>show_in_rest<\/code> auf <code>true<\/code> setzen.<\/p>\n<p>Nun zur\u00fcck zur Plugin-Datei. F\u00fcge den folgenden Code ein:<\/p>\n<pre><code class=\"language-php\">\/**\n * Register the custom meta fields\n *\/\nfunction meta_fields_register_meta() {\n\n    $metafields = [ '_meta_fields_book_title', '_meta_fields_book_author' ];\n\n    foreach( $metafields as $metafield ){\n        \/\/ Pass an empty string to register the meta key across all existing post types.\n        register_post_meta( '', $metafield, array(\n            'show_in_rest' =&gt; true,\n            'type' =&gt; 'string',\n            'single' =&gt; true,\n            'sanitize_callback' =&gt; 'sanitize_text_field',\n            'auth_callback' =&gt; function() { \n                return current_user_can( 'edit_posts' );\n            }\n        ));\n    }  \n}\nadd_action( 'init', 'meta_fields_register_meta' );<\/code><\/pre>\n<p><code>register_post_meta<\/code> registriert einen Metaschl\u00fcssel f\u00fcr die angegebenen Beitragstypen. Im obigen Code haben wir zwei benutzerdefinierte Meta-Felder f\u00fcr alle auf deiner Website registrierten Beitragstypen registriert, die benutzerdefinierte Felder unterst\u00fctzen. Weitere Informationen findest du in der <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\">Funktionsreferenz<\/a>.<\/p>\n<p>\u00d6ffne anschlie\u00dfend die Datei <strong>src\/index.js<\/strong> deines Block-Plugins.<\/p>\n<h4>Registriere den Blocktyp auf dem Client<\/h4>\n<p>Navigiere nun zum Ordner <strong>wp-content\/plugins\/metadata-block\/src<\/strong> und \u00f6ffne die Datei <strong>index.js<\/strong>:<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\nimport '.\/style.scss';\nimport Edit from '.\/edit';\nimport metadata from '.\/block.json';\n\nregisterBlockType( metadata.name, {\n\tedit: Edit,\n} );<\/code><\/pre>\n<p>Bei statischen Bl\u00f6cken w\u00fcrden wir auch eine <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-blocke\/#indexjs\"><code>save<\/code> Funktion<\/a> gesehen. In diesem Fall fehlt die Funktion <code>save<\/code>, weil wir einen dynamischen Block installiert haben. Der Inhalt, der im Frontend angezeigt wird, wird dynamisch \u00fcber PHP generiert.<\/p>\n<h4>Erstelle den Blocktyp<\/h4>\n<p>Navigiere zum Ordner <strong>wp-content\/plugins\/metadata-block\/src<\/strong> und \u00f6ffne die Datei <strong>edit.js<\/strong>. Du solltest den folgenden Code sehen (Kommentare entfernt):<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p { ...useBlockProps() }&gt;\n\t\t\t{ __( 'Meta Fields \u2013 hello from the editor!', 'metadata-block' ) }\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p>Hier f\u00fcgst du den Code ein, um den Block zu erzeugen, der im Editor angezeigt werden soll.<\/p>\n<p>Der erste Schritt besteht darin, die Komponenten und Funktionen zu importieren, die f\u00fcr die Erstellung des Blocks ben\u00f6tigt werden. Hier ist die vollst\u00e4ndige Liste der Abh\u00e4ngigkeiten:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps, InspectorControls, RichText } from '@wordpress\/block-editor';\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';\nimport { TextControl, PanelBody, PanelRow } from '@wordpress\/components';\nimport '.\/editor.scss';<\/code><\/pre>\n<p>Wenn du unsere fr\u00fcheren Artikel gelesen hast, solltest du mit vielen dieser <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\"><code>import<\/code> Deklarationen<\/a> vertraut sein. Hier wollen wir nur auf einige von ihnen hinweisen:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>Wenn du diese Abh\u00e4ngigkeiten importiert hast, kannst du <code>useSelect<\/code> und <code>useEntityProp<\/code> in der Funktion <code>Edit()<\/code> verwenden:<\/p>\n<pre><code class=\"language-js\">const postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\nconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );<\/code><\/pre>\n<ul>\n<li><code>useSelect<\/code> ist ein benutzerdefinierter Hook zum <a href=\"https:\/\/kinqsta.com\/de\/blog\/dynamische-bloecke\/#build-the-block-to-be-rendered-in-the-editor\">Abrufen von Props aus registrierten Selektoren<\/a>. Wir werden ihn verwenden, um den aktuellen Beitragstyp abzurufen (siehe auch <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\">@wordpress\/data-Referenz<\/a> und <a href=\"https:\/\/make.wordpress.org\/core\/2019\/06\/10\/introducing-usedispatch-and-useselect\/\">Einf\u00fchrung von useDispatch und useSelect<\/a>)<\/li>\n<li><code>useEntityProp<\/code> ist ein benutzerdefinierter Hook, mit dem Bl\u00f6cke Meta-Felder von Beitr\u00e4gen abrufen und \u00e4ndern k\u00f6nnen. <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/33d84b036592a5bf31af05b7710f3b2b14163dc4\/packages\/core-data\/src\/entity-provider.js#L85\">Er ist definiert<\/a> als ein &#8222;Hook, der den Wert und einen Setter f\u00fcr die angegebene Eigenschaft der n\u00e4chsten angegebenen Entit\u00e4t des angegebenen Typs zur\u00fcckgibt&#8220;. Er gibt &#8222;ein Array zur\u00fcck, bei dem das erste Element der Eigenschaftswert, das zweite der Setter und das dritte das vollst\u00e4ndige Wertobjekt aus der REST-API ist, das weitere Informationen wie <code>raw<\/code>, <code>rendered<\/code> und <code>protected<\/code> props enth\u00e4lt&#8220;. (Siehe auch <a href=\"https:\/\/make.wordpress.org\/core\/2020\/03\/02\/general-block-editor-api-updates\/\">Allgemeine Block-Editor-API-Updates<\/a>.)<\/li>\n<\/ul>\n<p>Dieser Code liefert die aktuelle <code>postType<\/code>, ein Objekt mit Metafeldern (<code>meta<\/code>) und eine Setter-Funktion, um sie zu aktualisieren (<code>setMeta<\/code>).<\/p>\n<p>Ersetze nun den aktuellen Code f\u00fcr die Funktion <code>Edit()<\/code> durch den folgenden:<\/p>\n<pre><code class=\"language-js\">export default function Edit() {\n\tconst blockProps = useBlockProps();\n\tconst postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\n\tconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );\n\tconst bookTitle = meta[ '_meta_fields_book_title' ];\n\tconst bookAuthor = meta[ '_meta_fields_book_author' ];\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_title: newValue } );\n    };\n\tconst updateBookAuthorMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_author: newValue } );\n\t};\nreturn ( ... );\n}<\/code><\/pre>\n<p>Nochmal:<\/p>\n<ul>\n<li>Wir haben <code>useSelect<\/code> verwendet, um den aktuellen Beitragstyp zu ermitteln.<\/li>\n<li><code>useEntityProp<\/code> liefert ein Array von Meta-Feldern und eine Setter-Funktion, um neue Metawerte zu setzen.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> und <code>updateBookAuthorMetaValue<\/code> sind zwei Event-Handler zum Speichern von Meta-Feldwerten.<\/li>\n<\/ul>\n<p>Der n\u00e4chste Schritt besteht darin, den JSX (JavaScript XML)-Code zu erstellen, der von der Funktion <code>Edit()<\/code> zur\u00fcckgegeben wird:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit() {\n\t...\n\treturn (\n\t\t&lt;&gt;\n\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t&lt;PanelBody \n\t\t\t\t\ttitle={ __( 'Book Details' )}\n\t\t\t\t\tinitialOpen={true}\n\t\t\t\t&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={__( 'Book title' )}\n\t\t\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Book author' ) }\n\t\t\t\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t&lt;div { ...blockProps }&gt;\n\t\t\t\t&lt;RichText \n\t\t\t\t\ttagName=\"h3\"\n\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\tallowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\tplaceholder={ __( 'Write your text...' ) }\n\t\t\t\t\/&gt;\n\t\t\t\t&lt;TextControl\n\t\t\t\t\tlabel=\"Book Author\"\n\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/&gt;\n\t);\n}<\/code><\/pre>\n<p>Die Komponente <code>RichText<\/code> bietet eine <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/contenteditable\">inhaltsverarbeitbare<\/a> Eingabe, w\u00e4hrend <code>TextControl<\/code> einfache Textfelder bereitstellt.<\/p>\n<p>Au\u00dferdem haben wir ein Sidebar-Panel erstellt, das zwei Eingabefelder enth\u00e4lt, die anstelle der beiden Formular-Steuerelemente des Blocks verwendet werden.<\/p>\n<p>Speichere die Datei und gehe zur\u00fcck in den Editor. F\u00fcge den Block <strong>Meta Fields<\/strong> aus dem Block-Inserter hinzu und f\u00fclle den Buchtitel und den Autor ein.<\/p>\n<figure id=\"attachment_142769\" aria-describedby=\"caption-attachment-142769\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142769 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-2-meta-fields.jpg\" alt=\"Ein benutzerdefinierter Block mit zwei benutzerdefinierten Meta-Feldern\" width=\"1796\" height=\"880\"><figcaption id=\"caption-attachment-142769\" class=\"wp-caption-text\">Ein benutzerdefinierter Block mit zwei benutzerdefinierten Meta-Feldern<\/figcaption><\/figure>\n<p>Du wirst feststellen, dass sich jedes Mal, wenn du den Wert des Feldes im Block \u00e4nderst, auch der Wert im entsprechenden Textfeld in der Seitenleiste \u00e4ndert.<\/p>\n<p>Als N\u00e4chstes m\u00fcssen wir den PHP-Code erstellen, der das HTML generiert, das im Frontend angezeigt werden soll.<\/p>\n<h4>Anzeige des Blocks auf dem Frontend<\/h4>\n<p>\u00d6ffne die Haupt-PHP-Datei erneut in deinem Code-Editor und schreibe die Callback-Funktion, die die Ausgabe des Blocks erzeugt, wie folgt um:<\/p>\n<pre><code class=\"language-php\">function meta_fields_metadata_block_block_init() {\n\tregister_block_type(\n\t\t__DIR__ . '\/build',\n\t\tarray(\n\t\t\t'render_callback' =&gt; 'meta_fields_metadata_block_render_callback',\n\t\t)\n\t);\n}\nadd_action( 'init', 'meta_fields_metadata_block_block_init' );\n\nfunction meta_fields_metadata_block_render_callback( $attributes, $content, $block ) {\n\t\n\t$book_title = get_post_meta( get_the_ID(), '_meta_fields_book_title', true );\n\t$book_author = get_post_meta( get_the_ID(), '_meta_fields_book_author', true );\n    \n\t$output = \"\";\n\n\tif( ! empty( $book_title ) ){\n\t\t$output .= '&lt;h3&gt;' . esc_html( $book_title ) . '&lt;\/h3&gt;';\n\t}\n\tif( ! empty( $book_author ) ){\n\t\t$output .= '&lt;p&gt;' . __( 'Book author: ' ) . esc_html( $book_author ) . '&lt;\/p&gt;';\n\t}\n\tif( strlen( $output ) &gt; 0 ){\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . $output . '&lt;\/div&gt;';\n\t} else {\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . '&lt;strong&gt;' . __( 'Sorry. No fields available here!' ) . '&lt;\/strong&gt;' . '&lt;\/div&gt;';\n\t}\n}<\/code><\/pre>\n<p>Dieser Code ist ziemlich selbsterkl\u00e4rend. Zuerst verwenden wir <code>get_post_meta<\/code>, um die Werte der benutzerdefinierten Meta-Felder abzurufen. Dann verwenden wir diese Werte, um den Inhalt des Blocks zu erstellen. Schlie\u00dflich gibt die Callback-Funktion den HTML-Code des Blocks zur\u00fcck.<\/p>\n<p>Der Block kann nun verwendet werden. Wir haben den Code in diesem Beispiel absichtlich so einfach wie m\u00f6glich gehalten, aber mit den nativen Komponenten von Gutenberg kannst du fortschrittlichere Bl\u00f6cke erstellen und das Beste aus den benutzerdefinierten WordPress-Meta-Feldern herausholen.<\/p>\n<figure id=\"attachment_142768\" aria-describedby=\"caption-attachment-142768\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142768 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-custom-meta-fields.jpg\" alt=\"Ein benutzerdefinierter Block mit mehreren Meta-Feldern\" width=\"1796\" height=\"1260\"><figcaption id=\"caption-attachment-142768\" class=\"wp-caption-text\">Ein benutzerdefinierter Block mit mehreren Meta-Feldern<\/figcaption><\/figure>\n<p>In unserem Beispiel haben wir die Elemente <code>h3<\/code> und <code>p<\/code> verwendet, um den Block f\u00fcr das Frontend zu erstellen.<\/p>\n<p>Aber du kannst die Daten auf viele Arten anzeigen. Das folgende Bild zeigt eine einfache ungeordnete Liste von Metafeldern.<\/p>\n<figure id=\"attachment_142770\" aria-describedby=\"caption-attachment-142770\" style=\"width: 1794px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142770 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/custom-block-on-the-front-end.jpg\" alt=\"Ein Beispielblock f\u00fcr das Frontend\" width=\"1794\" height=\"1132\"><figcaption id=\"caption-attachment-142770\" class=\"wp-caption-text\">Ein Beispielblock f\u00fcr das Frontend<\/figcaption><\/figure>\n<p>Den vollst\u00e4ndigen Code dieses Beispiels findest du in <a href=\"https:\/\/gist.github.com\/carlodaniele\/d44ca1d76457fa6553f44ed863ecdbcd\">diesem \u00f6ffentlichen Gist<\/a>.<\/p>\n<h3>Hinzuf\u00fcgen eines benutzerdefinierten Meta-Feldes zur Dokumenten-Seitenleiste<\/h3>\n<p>Die zweite M\u00f6glichkeit ist, benutzerdefinierte Meta-Felder an Beitr\u00e4ge anzuh\u00e4ngen, indem du ein Plugin benutzt, das ein Einstellungsfeld in der Dokumenten-Seitenleiste erzeugt.<\/p>\n<p>Der Prozess ist dem vorherigen Beispiel sehr \u00e4hnlich, nur dass wir in diesem Fall keinen Block zur Verwaltung von Metadaten ben\u00f6tigen. Wir erstellen eine Komponente, die ein Panel mit einer Reihe von Steuerelementen in der Dokumenten-Seitenleiste erzeugt, indem wir die folgenden Schritte befolgen:<\/p>\n<ol>\n<li><a href=\"#option-2-create-new-block\">Erstelle ein neues Block-Plugin mit create-block<\/a><\/li>\n<li><a href=\"#option-2-register-custom-meta-box\">Registriere ein benutzerdefiniertes Meta-Feld f\u00fcr den Classic Editor<\/a><\/li>\n<li><a href=\"#option-2-register-custom-fields\">Registriere die benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei mit der Funktion register_post_meta()<\/a><\/li>\n<li><a href=\"#option-2-register-plugin\">Registriere ein Plugin in der Datei index.js<\/a><\/li>\n<li><a href=\"#option-2-build-component\">Baue die Komponente mit den eingebauten Gutenberg-Komponenten<\/a><\/li>\n<\/ol>\n<h4 id=\"option-2-create-new-block\">Ein neues Block-Plugin mit dem create-block Tool erstellen<\/h4>\n<p>Um ein neues Block-Plugin zu erstellen, befolge die Schritte im <a href=\"#create-a-custom-block-to-store-and-display-custom-meta-fields\">vorherigen Abschnitt<\/a>. Du kannst ein neues Plugin erstellen oder die Skripte bearbeiten, die wir im vorherigen Beispiel erstellt haben.<\/p>\n<h4 id=\"option-2-register-custom-meta-box\">Registrierung einer benutzerdefinierten Meta-Box f\u00fcr den klassischen Editor<\/h4>\n<p>Als N\u00e4chstes musst du eine benutzerdefinierte Meta-Box registrieren, um die Abw\u00e4rtskompatibilit\u00e4t f\u00fcr WordPress-Websites sicherzustellen, die noch den klassischen Editor verwenden. Der Vorgang ist derselbe wie im <a href=\"#add-a-meta-box-to-the-classic-editor\">vorherigen Abschnitt<\/a> beschrieben.<\/p>\n<h4 id=\"option-2-register-custom-fields\">Registrierung der benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei<\/h4>\n<p>Der n\u00e4chste Schritt besteht darin, die benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei \u00fcber die Funktion <code>register_post_meta()<\/code> zu registrieren. Auch hier kannst du dem <a href=\"#register-custom-meta-fields\">vorherigen Beispiel<\/a> folgen.<\/p>\n<h4 id=\"option-2-register-plugin\">Ein Plugin in der index.js-Datei registrieren<\/h4>\n<p>Wenn du die vorherigen Schritte abgeschlossen hast, ist es an der Zeit, ein Plugin in der Datei <strong>index.js<\/strong> zu registrieren, um eine benutzerdefinierte Komponente zu rendern.<\/p>\n<p>Bevor du das Plugin registrierst, erstelle einen Ordner <strong>components<\/strong>\u00a0im Ordner <strong>src<\/strong>\u00a0des Plugins. Im Ordner <strong>components<\/strong> erstellst du eine neue Datei <strong>MetaBox.js<\/strong>. Du kannst jeden Namen w\u00e4hlen, den du f\u00fcr deine Komponente f\u00fcr passend h\u00e4ltst. Achte nur darauf, dass du dich an die <a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react#naming\">Best Practice f\u00fcr die Namensgebung<\/a> in React h\u00e4ltst.<\/p>\n<p>Bevor du weitermachst, installiere das <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">Modul<code>@wordpress\/plugins<\/code><\/a> \u00fcber dein Kommandozeilentool.<\/p>\n<p>Halte den Prozess an (mac), installiere das Modul und starte den Prozess erneut:<\/p>\n<pre><code class=\"language-bash\">^C\nnpm install @wordpress\/plugins --save\nnpm start<\/code><\/pre>\n<p>\u00d6ffne anschlie\u00dfend die Datei <strong>index.js<\/strong> deines Plugins und f\u00fcge den folgenden Code hinzu.<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport MetaBox from '.\/components\/MetaBox';<\/code><\/pre>\n<p>Dieser Code ist ziemlich selbsterkl\u00e4rend. Wir wollen uns jedoch einen Moment Zeit nehmen, um f\u00fcr diejenigen Leser, die keine fortgeschrittenen React-Kenntnisse haben, auf die beiden <code>import<\/code> Anweisungen einzugehen.<\/p>\n<p>Mit der ersten <code>import<\/code> Anweisung haben wir den Namen der Funktion in geschweifte Klammern gesetzt. Bei der zweiten <code>import<\/code> Anweisung wird der Name der Komponente nicht in geschweifte Klammern gesetzt.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Eine <code>import<\/code> Anweisung ohne geschweifte Klammern wird verwendet, um <strong>den Standard-Export zu importieren<\/strong>. Eine <code>import<\/code> Anweisung mit geschweiften Klammern wird verwendet, um <strong>einen benannten Export zu importieren<\/strong>. Weitere Informationen findest du in den folgenden Ressourcen:<\/p>\n<ul>\n<li><a href=\"https:\/\/beta.reactjs.org\/learn\/importing-and-exporting-components\">Importieren und Exportieren von Komponenten<\/a><\/li>\n<li><a href=\"https:\/\/create-react-app.dev\/docs\/importing-a-component\/\">Importieren einer Komponente<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281#36796281\">Wann sollte ich geschweifte Klammern f\u00fcr den ES6-Import verwenden?<\/a><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>Als n\u00e4chstes musst du dein Plugin registrieren:<\/p>\n<pre><code class=\"language-js\">registerPlugin( 'metadata-plugin', {\n\trender: MetaBox\n} );<\/code><\/pre>\n<p><code>registerPlugin<\/code> registriert einfach ein Plugin. Die Funktion nimmt zwei Parameter entgegen:<\/p>\n<ul>\n<li>Eine eindeutige Zeichenkette, die das Plugin identifiziert<\/li>\n<li>Ein Objekt mit Plugin-Einstellungen. Beachte, dass die Eigenschaft <code>render<\/code> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b37b3bc71e2c6f200781a53e11fddec4bc0b935\/packages\/plugins\/src\/api\/index.js#L138\">angegeben werden muss<\/a> und eine g\u00fcltige Funktion sein muss.<\/li>\n<\/ul>\n<h4 id=\"option-2-build-component\">Baue die Komponente mit Hilfe der eingebauten Gutenberg-Komponenten<\/h4>\n<p>Jetzt ist es an der Zeit, unsere React-Komponente zu bauen. \u00d6ffne die Datei <strong>MetaBox.js<\/strong> (oder wie immer du sie genannt hast) und f\u00fcge die folgenden Import-Anweisungen hinzu:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li>Die Funktion <code>compose<\/code> f\u00fchrt eine <strong>Funktionskomposition<\/strong> durch, d. h. das Ergebnis einer Funktion wird an eine andere Funktion weitergegeben. <code>compose<\/code> musst du eventuell das entsprechende Modul installieren, bevor du es verwenden kannst:\n<pre><code class=\"language-bash\">npm install @wordpress\/compose --save<\/code><\/pre>\n<p>Wir werden die Funktion <code>compose<\/code> gleich in Aktion sehen.<\/li>\n<li><code>withSelect<\/code> und <code>withDispatch<\/code> sind zwei <strong>Komponenten h\u00f6herer Ordnung<\/strong>, mit denen du Daten aus einem WordPress-Speicher abrufen oder an diesen senden kannst. <code>withSelect<\/code> wird verwendet, um vom Zustand abgeleitete Requisiten \u00fcber registrierte <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#selectors\">Selektoren<\/a> zu injizieren, <code>withDispatch<\/code> wird verwendet, um Requisiten \u00fcber registrierte <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#actions\">Action Creators<\/a> zu senden.<\/li>\n<li><code>PluginDocumentSettingPanel<\/code> rendert Elemente in der Document Sidebar (siehe den Quellcode <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">auf Github<\/a>).<\/li>\n<\/ul>\n<p>Als N\u00e4chstes erstellst du die Komponente, die das Metabox-Panel in der Dokumenten-Seitenleiste anzeigt. F\u00fcge in deiner <strong>MetaBox.js-Datei<\/strong> den folgenden Code ein:<\/p>\n<pre><code class=\"language-jsx\">const MetaBox = ( { postType, metaFields, setMetaFields } ) =&gt; {\n\n\tif ( 'post' !== postType ) return null;\n\n\treturn(\n\t\t&lt;PluginDocumentSettingPanel \n\t\t\ttitle={ __( 'Book details' ) } \n\t\t\ticon=\"book\"\n\t\t\tinitialOpen={ false }\n\t\t&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_title }\n\t\t\t\t\tlabel={ __( \"Title\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_author }\n\t\t\t\t\tlabel={ __( \"Author\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_publisher }\n\t\t\t\t\tlabel={ __( \"Publisher\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;DateTimePicker\n\t\t\t\t\tcurrentDate={ metaFields._meta_fields_book_date }\n\t\t\t\t\tonChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n\t\t\t\t\t__nextRemoveHelpButton\n\t\t\t\t\t__nextRemoveResetButton\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t&lt;\/PluginDocumentSettingPanel&gt;\n\t);\n}\n\nconst applyWithSelect = withSelect( ( select ) =&gt; {\n\treturn {\n\t\tmetaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n\t\tpostType: select( 'core\/editor' ).getCurrentPostType()\n\t};\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n\treturn {\n\t\tsetMetaFields ( newValue ) {\n\t\t\tdispatch('core\/editor').editPost( { meta: newValue } )\n\t\t}\n\t}\n} );\n\nexport default compose([\n\tapplyWithSelect,\n\tapplyWithDispatch\n])(MetaBox);<\/code><\/pre>\n<p>Lass uns diesen Code aufschl\u00fcsseln.<\/p>\n<ul>\n<li>Das <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/\">Element<code>PluginDocumentSettingPanel<\/code><\/a> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">erstellt ein neues Panel<\/a> in der Dokumenten-Seitenleiste. Wir legen den Titel (&#8222;Buchdetails&#8220;) und das Symbol fest und setzen <code>initialOpen<\/code> auf <code>false<\/code>, was bedeutet, dass das Panel zun\u00e4chst geschlossen ist.<\/li>\n<li>Innerhalb von <code>PluginDocumentSettingPanel<\/code> haben wir drei Textfelder und ein <code>DateTimePicker<\/code> Element, mit dem der Nutzer das Ver\u00f6ffentlichungsdatum festlegen kann.<\/li>\n<li><code>withSelect<\/code> erm\u00f6glicht den Zugriff auf die Funktion <code>select<\/code>, mit der wir <code>metaFields<\/code> und <code>postType<\/code> abrufen. <code>withDispatch<\/code> erm\u00f6glicht den Zugriff auf die Funktion <code>dispatch<\/code>, mit der wir die Metadatenwerte aktualisieren k\u00f6nnen.<\/li>\n<li>Die Funktion <code>compose<\/code> schlie\u00dflich erm\u00f6glicht es uns, unsere Komponente mit den \u00fcbergeordneten Komponenten <code>withSelect<\/code> und <code>withDispatch<\/code> zusammenzustellen. Dadurch erh\u00e4lt die Komponente Zugriff auf die Eigenschaften <code>metaFields<\/code> und <code>postType<\/code> sowie auf die Funktion <code>setMetaFields<\/code>.<\/li>\n<\/ul>\n<p>Speichere deine <strong>MetaBox.js-Datei<\/strong>, erstelle einen neuen Beitrag auf deiner WordPress-Entwicklungswebsite und wirf einen Blick auf die Document Sidebar. Du solltest das neue <strong>Buch-Detailfenster<\/strong> sehen.<\/p>\n<figure id=\"attachment_142918\" aria-describedby=\"caption-attachment-142918\" style=\"width: 1851px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142918 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/book-details-panel.jpg\" alt=\"Ein benutzerdefiniertes Meta-Box-Panel in Gutenberg\" width=\"1851\" height=\"1617\"><figcaption id=\"caption-attachment-142918\" class=\"wp-caption-text\">Ein benutzerdefiniertes Meta-Box-Panel in Gutenberg<\/figcaption><\/figure>\n<p>F\u00fchre jetzt deine Tests durch. Setze die Werte f\u00fcr deine benutzerdefinierten Meta-Felder und speichere den Beitrag. Lade dann die Seite neu und pr\u00fcfe, ob die eingegebenen Werte vorhanden sind.<\/p>\n<p>F\u00fcge den Block hinzu, den wir im vorherigen Abschnitt erstellt haben, und pr\u00fcfe, ob alles richtig funktioniert.<\/p>\n<h3>Hinzuf\u00fcgen einer benutzerdefinierten Seitenleiste zur Verwaltung von Beitrags-Metadaten<\/h3>\n<p>Wenn du viele benutzerdefinierte Meta-Felder zu deinen Beitr\u00e4gen oder benutzerdefinierten Beitragstypen hinzuf\u00fcgen m\u00f6chtest, kannst du auch eine benutzerdefinierte Einstellungs-Seitenleiste speziell f\u00fcr dein Plugin erstellen.<\/p>\n<p>Der Prozess ist dem vorherigen Beispiel sehr \u00e4hnlich. Wenn du also die im vorherigen Abschnitt beschriebenen Schritte verstanden hast, wirst du keine Schwierigkeiten haben, eine benutzerdefinierte Seitenleiste f\u00fcr Gutenberg zu erstellen.<\/p>\n<p>Noch einmal:<\/p>\n<ol>\n<li><a href=\"#option-3-create-new-block\">Erstelle ein neues Block-Plugin mit create-block<\/a><\/li>\n<li><a href=\"#option-3-register-custom-meta-box\">Registriere ein benutzerdefiniertes Meta-Feld f\u00fcr den klassischen Editor<\/a><\/li>\n<li><a href=\"#option-3-register-custom-fields\">Registriere die benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei mit der Funktion register_post_meta()<\/a><\/li>\n<li><a href=\"#option-3-register-plugin\">Registriere ein Plugin in der Datei index.js<\/a><\/li>\n<li><a href=\"#option-3-build-component\">Baue die Komponente mit den eingebauten Gutenberg-Komponenten<\/a><\/li>\n<\/ol>\n<h4 id=\"#option-3-create-new-block\">Ein neues Block-Plugin mit dem create-block Tool erstellen<\/h4>\n<p>Um ein neues Block-Plugin zu erstellen, befolgst du wieder die oben beschriebenen Schritte. Du kannst ein neues Plugin erstellen oder die in den vorherigen Beispielen erstellten Skripte bearbeiten.<\/p>\n<h4 id=\"#option-3-register-custom-meta-box\">Registrierung einer benutzerdefinierten Meta-Box f\u00fcr den klassischen Editor<\/h4>\n<p>Um die Abw\u00e4rtskompatibilit\u00e4t f\u00fcr WordPress-Websites zu gew\u00e4hrleisten, die noch den klassischen Editor verwenden, registrierst du jetzt ein benutzerdefiniertes Meta-Feld. Der Vorgang ist derselbe wie im vorherigen Abschnitt beschrieben.<\/p>\n<h4 id=\"#option-3-register-custom-fields\">Registrierung der benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei<\/h4>\n<p>Registriere die benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei \u00fcber die Funktion <code>register_post_meta()<\/code>.<\/p>\n<h4 id=\"#option-3-register-plugin\">Ein Plugin in der Datei index.js registrieren<\/h4>\n<p>Erstelle nun eine leere Datei <strong>CustomSidebar.js<\/strong> in deinem <strong>Komponentenordner<\/strong>.<\/p>\n<p>\u00c4ndere dann deine <strong>index.js-Datei<\/strong> wie folgt:<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport CustomSidebar from '.\/components\/CustomSidebar';\n\/\/ import MetaBox from '.\/components\/MetaBox';\n\nregisterPlugin( 'metadata-block', {\n    render: CustomSidebar\n} );<\/code><\/pre>\n<p>Mit dem obigen Code importieren wir zuerst die Komponente <code>CustomSidebar<\/code>, dann weisen wir die Funktion <code>registerPlugin<\/code> an, die neue Komponente zu rendern.<\/p>\n<h4 id=\"#option-3-build-component\">Baue die Komponente mit Hilfe der eingebauten Gutenberg-Komponenten<\/h4>\n<p>Als n\u00e4chstes \u00f6ffnest du die Datei <strong>CustomSidebar.js<\/strong> und f\u00fcgst die folgenden Abh\u00e4ngigkeiten hinzu:<\/p>\n<pre><code class=\"language-php\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\nimport { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<p>Du solltest sehen, dass wir zwei neue Komponenten importieren:<\/p>\n<ul>\n<li><code>PluginSidebar<\/code> f\u00fcgt ein Symbol in die Gutenberg-Symbolleiste ein, das beim Anklicken eine Seitenleiste mit dem Inhalt des <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\"><code>&lt;PluginSidebar \/&gt;<\/code> -Elements<\/a> anzeigt (die Komponente ist auch <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/569241a3e1b7d0cc0567fccb92b1b57eb1b5b9c5\/packages\/edit-site\/src\/components\/sidebar-edit-mode\/plugin-sidebar\/index.js\">auf GitHub<\/a> dokumentiert).<\/li>\n<li><code>PluginSidebarMoreMenuItem<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar-more-menu-item\/\">stellt einen Men\u00fcpunkt<\/a> unter Plugins im <strong>More Menu-Dropdown<\/strong> dar und kann verwendet werden, um die entsprechende <code>PluginSidebar<\/code> Komponente zu aktivieren (siehe auch <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a7e2895829c16ecd77a5ba22d84f1dee1cfb0977\/packages\/edit-post\/src\/components\/header\/plugin-sidebar-more-menu-item\/index.js\">auf GitHub<\/a>).<\/li>\n<\/ul>\n<p>Jetzt kannst du deine eigene Komponente erstellen:<\/p>\n<pre><code class=\"language-jsx\">const CustomSidebar = ( { postType, metaFields, setMetaFields } ) =&gt; {\n        \n    if ( 'post' !== postType ) return null;\n\n    return (\n        &lt;&gt;\n            &lt;PluginSidebarMoreMenuItem \n                target=\"metadata-sidebar\" \n                icon=\"book\"\n            &gt;\n                Metadata Sidebar\n            &lt;\/PluginSidebarMoreMenuItem&gt;\n            &lt;PluginSidebar \n                name=\"metadata-sidebar\" \n                icon=\"book\" \n                title=\"My Sidebar\"\n            &gt;\n                &lt;PanelBody title=\"Book details\" initialOpen={ true }&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_title }\n                            label={ __( \"Title\" ) }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_author }\n                            label={ __(\"Author\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_publisher }\n                            label={ __(\"Publisher\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;DateTimePicker\n                            currentDate={ metaFields._meta_fields_book_date }\n                            onChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n                            __nextRemoveHelpButton\n                            __nextRemoveResetButton\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/PluginSidebar&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<p>Der letzte Schritt ist die Komponentenkomposition mit den \u00fcbergeordneten Komponenten <code>withSelect<\/code> und <code>withDispatch<\/code>:<\/p>\n<pre><code class=\"language-js\">const applyWithSelect = withSelect( ( select ) =&gt; {\n    return {\n        metaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n        postType: select( 'core\/editor' ).getCurrentPostType()\n    };\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n    return {\n        setMetaFields ( newValue ) {\n            dispatch('core\/editor').editPost( { meta: newValue } )\n        }\n    }\n} );\n\nexport default compose([\n    applyWithSelect,\n    applyWithDispatch\n])(CustomSidebar);<\/code><\/pre>\n<p>Speichere deine \u00c4nderungen und rufe dann die Editoroberfl\u00e4che auf. Wenn du das Dropdown-Men\u00fc <strong>Optionen<\/strong> \u00f6ffnest, siehst du unter dem Abschnitt <strong>Plugins<\/strong> ein neues Element <strong>Metadaten-Seitenleiste<\/strong>. Wenn du auf das neue Element klickst, wird deine brandneue benutzerdefinierte Seitenleiste aktiviert.<\/p>\n<figure id=\"attachment_143176\" aria-describedby=\"caption-attachment-143176\" style=\"width: 1858px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143176 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/plugin-sidebar-more-menu-item.jpg\" alt=\"Die Komponente PluginSidebarMoreMenuItem f\u00fcgt einen Men\u00fcpunkt unter Optionen - Plugins hinzu\" width=\"1858\" height=\"1096\"><figcaption id=\"caption-attachment-143176\" class=\"wp-caption-text\">Die Komponente PluginSidebarMoreMenuItem f\u00fcgt einen Men\u00fcpunkt unter Optionen &#8211; Plugins hinzu<\/figcaption><\/figure>\n<p>Dasselbe passiert, wenn du auf das Buchsymbol in der oberen rechten Ecke klickst.<\/p>\n<figure id=\"attachment_143175\" aria-describedby=\"caption-attachment-143175\" style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143175 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/custom-sidebar-open.jpg\" alt=\"Die Plugin Settings Sidebar\" width=\"1860\" height=\"1198\"><figcaption id=\"caption-attachment-143175\" class=\"wp-caption-text\">Die Plugin Settings Sidebar<\/figcaption><\/figure>\n<p>Gehe nun zur\u00fcck zu deiner Entwicklungswebsite und erstelle einen neuen Blogbeitrag. F\u00fclle deine Meta-Felder aus und f\u00fcge dann den Block in die Arbeitsfl\u00e4che des Editors ein. Er sollte dieselben Metawerte enthalten, die du in deiner benutzerdefinierten Seitenleiste eingegeben hast.<\/p>\n<p>Speichere den Beitrag und zeige die Seite in der Vorschau im Frontend an. Du solltest deine Karte mit dem Buchtitel, dem Autor, dem Verlag und dem Ver\u00f6ffentlichungsdatum sehen.<\/p>\n<p>Den vollst\u00e4ndigen Code dieses Artikels findest du in diesem <a href=\"https:\/\/gist.github.com\/carlodaniele\/05d4e8b6d982a4ef30840015fbdfb35f\">\u00f6ffentlichen Gist<\/a>.<br \/>\n<\/p>\n<h2>Weitere Lekt\u00fcre<\/h2>\n<p>In diesem Artikel haben wir viele Themen behandelt, von Selektoren bis zu Komponenten h\u00f6herer Ordnung und vieles mehr. Wir haben auch die wichtigsten Quellen verlinkt, die wir im Artikel als Referenz verwendet haben.<\/p>\n<p>Wenn du tiefer in diese Themen eintauchen m\u00f6chtest, solltest du dir auch die folgenden zus\u00e4tzlichen Ressourcen ansehen:<\/p>\n<h3>Gutenberg-Dokumentation und offizielle WordPress-Ressourcen<\/h3>\n<ul>\n<li>Plugin-Handbuch \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">Benutzerdefinierte Meta-Boxen<\/a><\/li>\n<li>Plugin-Handbuch \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/managing-post-metadata\/\">Verwaltung von Beitrags-Metadaten<\/a><\/li>\n<li>How-to Guides \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/\">Meta Boxen<\/a><\/li>\n<li>How-to Guides \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/plugin-sidebar-0\/\">Plugin Sidebar<\/a><\/li>\n<li>Block Editor Handbuch \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">PluginSidebar<\/a><\/li>\n<li>Paket-Referenz \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/\">@wordpress\/compose<\/a><\/li>\n<li>Pakete \/ Daten \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#comparison-with-redux\">Vergleich mit Redux<\/a><\/li>\n<li>Pakete \/ Daten \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withdispatch\">withDispatch<\/a><\/li>\n<li>Pakete \/ Daten \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#dispatch\">dispatch<\/a><\/li>\n<li>Pakete \/ Daten \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withselect\">withSelect<\/a><\/li>\n<li>Pakete \/ Daten \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#select\">select<\/a><\/li>\n<\/ul>\n<h3>Weitere offizielle Ressourcen<\/h3>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\">Komponenten h\u00f6herer Ordnung<\/a> in React<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-7-standard-patterns#action-creators\">Aktionsersteller<\/a> in Redux<\/li>\n<li><a href=\"https:\/\/redux.js.org\/usage\/deriving-data-selectors\">Ableitung von Daten mit Selektoren<\/a> in Redux<\/li>\n<\/ul>\n<h3>Zus\u00e4tzliche Ressourcen aus der Community<\/h3>\n<ul>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2019\/fantastic-hooks-and-where-to-use-them\">Fantastische Hooks und wo man sie einsetzt<\/a>\u00a0(von Darren Ethier)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\">WordPress Data Series \u00dcberblick und Einf\u00fchrung<\/a> (von Darren Ethier)<\/li>\n<li><a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react\">Airbnb React\/JSX Style Guide<\/a><\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/react-higher-order-components\/\">React Higher-Order Components (HOCs)<\/a> (von Robin Wieruch)<\/li>\n<li><a href=\"https:\/\/www.educative.io\/answers\/function-composition-in-javascript\">Funktionskomposition in JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Abfrage von Daten in Gutenberg mit getEntityRecords<\/a> (von Ryan Welcher)<\/li>\n<\/ul>\n<h3>N\u00fctzliche Lekt\u00fcre auf der Kinsta-Website<\/h3>\n<ul>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-react-js\/\">Was ist React.js? Ein Blick auf die beliebte JavaScript-Bibliothek<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/react-best-practices\/\">React Best Practices f\u00fcr dein Spiel<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/react-komponenten-bibliotheken\/\">Bibliotheken f\u00fcr React UI-Komponenten<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-workflow\/\">Wie man einen effektiven WordPress-Workflow f\u00fcr Entwickler\/innen erstellt<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-entwicklergehalt\/\">WordPress-Entwickler-Gehalt: Das Durchschnittsgehalt und wie du deines erh\u00f6hen kannst<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-javascript\/\">Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/fehlern-in-javascript\/\">Der ultimative Leitfaden f\u00fcr den Umgang mit Fehlern in JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/javascript-bibliotheken\/\">Die 40 besten JavaScript-Bibliotheken und -Frameworks f\u00fcr 2023<\/a><\/li>\n<\/ul>\n<h2>Zusammenfassung<\/h2>\n<p>In diesem dritten Artikel unserer Serie \u00fcber die Entwicklung von Gutenberg-Bl\u00f6cken haben wir neue fortgeschrittene Themen behandelt, die das in den vorherigen Artikeln \u00fcber die <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-blocke\/\">Entwicklung statischer<\/a> und <a href=\"https:\/\/kinqsta.com\/de\/blog\/dynamische-bloecke\/\">dynamischer Bl\u00f6cke<\/a> skizzierte Bild vervollst\u00e4ndigen sollen.<\/p>\n<p>Du solltest jetzt in der Lage sein, das Potenzial der benutzerdefinierten Felder in Gutenberg zu nutzen und fortschrittlichere und funktionalere WordPress-Websites zu erstellen.<\/p>\n<p>Aber das ist noch nicht alles. Mit den F\u00e4higkeiten, die du in unseren Artikeln zur Blockentwicklung erworben hast, solltest du auch eine gute Vorstellung davon haben, wie du React-Komponenten au\u00dferhalb von WordPress entwickeln kannst. Schlie\u00dflich ist Gutenberg eine React-basierte SPA.<\/p>\n<p>Und jetzt liegt es an dir! Hast du bereits Gutenberg-Bl\u00f6cke erstellt, die benutzerdefinierte Meta-Felder verwenden? Teile deine Kreationen mit uns in den Kommentaren unten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Benutzerdefinierte Felder bieten die M\u00f6glichkeit, Website-Inhalten zus\u00e4tzliche Informationen zuzuweisen. Diese Informationen werden normalerweise als Metadaten bezeichnet. Metadaten sind Informationen \u00fcber Informationen. Im Fall von WordPress sind &#8230;<\/p>\n","protected":false},"author":36,"featured_media":58481,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[999,1010],"class_list":["post-58223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-entwicklung","topic-wordpress-tipps"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu<\/title>\n<meta name=\"description\" content=\"Gutenberg \u00e4ndert die Art und Weise, wie wir Meta-Boxen und benutzerdefinierte Felder in WordPress verwenden. In diesem Artikel lernst du, wie du Metadaten im Block-Editor wie ein Profi verwalten kannst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu\" \/>\n<meta property=\"og:description\" content=\"Gutenberg \u00e4ndert die Art und Weise, wie wir Meta-Boxen und benutzerdefinierte Felder in WordPress verwenden. In diesem Artikel lernst du, wie du Metadaten im Block-Editor wie ein Profi verwalten kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-25T11:10:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-14T08:41:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Gutenberg \u00e4ndert die Art und Weise, wie wir Meta-Boxen und benutzerdefinierte Felder in WordPress verwenden. In diesem Artikel lernst du, wie du Metadaten im Block-Editor wie ein Profi verwalten kannst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"24\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu\",\"datePublished\":\"2023-01-25T11:10:14+00:00\",\"dateModified\":\"2023-09-14T08:41:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/\"},\"wordCount\":4168,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/\",\"name\":\"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg\",\"datePublished\":\"2023-01-25T11:10:14+00:00\",\"dateModified\":\"2023-09-14T08:41:52+00:00\",\"description\":\"Gutenberg \u00e4ndert die Art und Weise, wie wir Meta-Boxen und benutzerdefinierte Felder in WordPress verwenden. In diesem Artikel lernst du, wie du Metadaten im Block-Editor wie ein Profi verwalten kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Entwicklung\",\"item\":\"https:\/\/kinqsta.com\/de\/thema\/wordpress-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/de\/#website\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinqsta.com\/de\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu","description":"Gutenberg \u00e4ndert die Art und Weise, wie wir Meta-Boxen und benutzerdefinierte Felder in WordPress verwenden. In diesem Artikel lernst du, wie du Metadaten im Block-Editor wie ein Profi verwalten kannst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/","og_locale":"de_DE","og_type":"article","og_title":"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu","og_description":"Gutenberg \u00e4ndert die Art und Weise, wie wir Meta-Boxen und benutzerdefinierte Felder in WordPress verwenden. In diesem Artikel lernst du, wie du Metadaten im Block-Editor wie ein Profi verwalten kannst.","og_url":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-01-25T11:10:14+00:00","article_modified_time":"2023-09-14T08:41:52+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Gutenberg \u00e4ndert die Art und Weise, wie wir Meta-Boxen und benutzerdefinierte Felder in WordPress verwenden. In diesem Artikel lernst du, wie du Metadaten im Block-Editor wie ein Profi verwalten kannst.","twitter_image":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Carlo Daniele","Gesch\u00e4tzte Lesezeit":"24\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu","datePublished":"2023-01-25T11:10:14+00:00","dateModified":"2023-09-14T08:41:52+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/"},"wordCount":4168,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/","url":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/","name":"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg","datePublished":"2023-01-25T11:10:14+00:00","dateModified":"2023-09-14T08:41:52+00:00","description":"Gutenberg \u00e4ndert die Art und Weise, wie wir Meta-Boxen und benutzerdefinierte Felder in WordPress verwenden. In diesem Artikel lernst du, wie du Metadaten im Block-Editor wie ein Profi verwalten kannst.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#primaryimage","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/wordpress-meta-box-zu-beitraegen-hinzufuegen.jpeg","width":1460,"height":730,"caption":"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-meta-box-zu-beitraegen-hinzufuegen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Entwicklung","item":"https:\/\/kinqsta.com\/de\/thema\/wordpress-entwicklung\/"},{"@type":"ListItem","position":3,"name":"So f\u00fcgst du Meta-Boxen und benutzerdefinierte Felder zu Beitr\u00e4gen in Gutenberg hinzu"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/de\/#website","url":"https:\/\/kinqsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinqsta.com\/de\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/58223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/comments?post=58223"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/58223\/revisions"}],"predecessor-version":[{"id":58496,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/58223\/revisions\/58496"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58223\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58223\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58223\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58223\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58223\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58223\/translations\/dk"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58223\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58223\/translations\/se"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58223\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58223\/translations\/fr"},{"href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58223\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media\/58481"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media?parent=58223"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/tags?post=58223"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/topic?post=58223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}