Benutzerdefinierte Felder bieten die Möglichkeit, Website-Inhalten zusätzliche Informationen zuzuweisen. Diese Informationen werden normalerweise als Metadaten bezeichnet.
Metadaten sind Informationen über Informationen. Im Fall von WordPress sind es Informationen, die mit Beiträgen, Benutzern, Kommentaren und Begriffen verbunden sind.
Da die Metadaten in WordPress in einem Verhältnis von vielen zu eins stehen, sind deine Möglichkeiten ziemlich grenzenlos. Du kannst so viele Meta-Optionen haben, wie du willst, und du kannst so ziemlich alles darin speichern.
Hier sind einige Beispiele für Metadaten, die du mit benutzerdefinierten Feldern an einen Beitrag anhängen kannst:
- Die geografischen Koordinaten eines Ortes oder einer Immobilie
- Das Datum einer Veranstaltung
- Die ISBN oder der Autor eines Buches
- Die Tageslaune des Autors des Beitrags
Und es gibt noch viele mehr.
WordPress bietet von Haus aus keine einfache Möglichkeit, benutzerdefinierte Felder hinzuzufügen und zu verwalten. Im klassischen Editor werden benutzerdefinierte Felder in einem Feld am unteren Rand der Seite, unterhalb des Beitragseditors, angezeigt.
In Gutenberg sind benutzerdefinierte Felder standardmäßig deaktiviert, aber du kannst sie anzeigen lassen, indem du das entsprechende Element in den Beitragseinstellungen auswählst.
Leider gibt es keine Möglichkeit, Metadaten auf dem Frontend anzuzeigen, ohne ein Plugin zu verwenden oder dir die Hände mit Code schmutzig zu machen.
Wenn du ein Nutzer bist, findest du mehrere hervorragende Plugins, die diese Aufgabe für dich übernehmen. 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öchtest, dann bist du hier genau richtig.
Wenn du dich also fragst, wie du die benutzerdefinierten WordPress-Felder am besten sowohl in Gutenberg als auch im klassischen Editor nutzen kannst, lautet die Antwort: „Indem du ein Plugin erstellst, das sowohl für den klassischen Editor als auch für Gutenberg funktioniert“.
Aber mach dir nicht zu viele Sorgen. Auch wenn die Erstellung eines Plugins, das benutzerdefinierte Felder in beiden Editoren verwaltet, etwas knifflig sein könnte, werden wir versuchen, den Prozess so einfach wie möglich 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.
Hinweis: Bevor du etwas tust, stelle sicher, dass du eine aktuelle Version von Node.js auf deinem Computer hast
Das war’s, hier ist unsere Übersicht:
Ein Block Plugin mit dem offiziellen create-block Tool erstellen
Der erste Schritt besteht darin, ein neues Plugin mit allen Dateien und Abhängigkeiten zu erstellen, die für die Registrierung eines neuen Blocktyps benötigt werden. Mit dem Block-Plugin kannst du ganz einfach einen benutzerdefinierten Blocktyp für die Verwaltung und Anzeige von benutzerdefinierten Metadaten erstellen.
Um einen neuen Blocktyp zu erstellen, verwenden wir das offizielle Tool create-block. Einen detaillierten Überblick über die Verwendung des Blockerstellungstools findest du in unserem vorherigen Artikel über die Entwicklung von Gutenberg-Blöcken.
Öffne dein Kommandozeilentool, navigiere in das Plugins-Verzeichnis deiner WordPress-Entwicklungswebsite und führe den folgenden Befehl aus:
npx @wordpress/create-blockWenn du dazu aufgefordert wirst, füge die folgenden Angaben hinzu:
- Die für diesen Block zu verwendende Vorlagenvariante: dynamic
- Der Slug des Blocks, der zur Identifizierung verwendet wird (auch der Name des Ausgabeordners): metadata-block
- Den internen Namensspace für den Blocknamen (etwas Eindeutiges für deine Produkte): meta-fields
- Der Anzeigetitel für deinen Block: Meta Fields
- Die Kurzbeschreibung für deinen Block (optional): Block description
- Das Dashicon, um deinen Block leichter zu identifizieren (optional): book
- Der Name der Kategorie, um den Nutzern das Durchsuchen und Entdecken deines Blocks zu erleichtern: widgets
- Willst du das WordPress-Plugin anpassen? Yes/No
Schauen wir uns diese Details kurz an und versuchen zu verstehen, wo sie verwendet werden.
- Der Block-Slug, der zur Identifizierung verwendet wird, definiert den Ordnernamen und die Textdomäne des Plugins
- Der interne Namensspace für den Blocknamen definiert den internen Namensspace des Blocks und das Funktionspräfix, das im gesamten Code des Plugins verwendet wird.
- Der Anzeigetitel für deinen Block definiert den Plugin-Namen und den Blocknamen, der in der Editoroberfläche verwendet wird.
Die Einrichtung kann ein paar Minuten dauern. Wenn der Vorgang abgeschlossen ist, erhältst du eine Liste mit den verfügbaren Befehlen.
Bevor du zum nächsten Abschnitt übergehst, navigiere in deinem Kommandozeilentool zum Ordner deines Plugins und führe die folgenden Befehle aus:
cd metadata-block
npm startDu bist bereit, deinen Code zu erstellen. Im nächsten Schritt bearbeitest du die Haupt-PHP-Datei des Plugins, um eine Metabox für den Classic Editor zu erstellen.
Bevor du mit dem nächsten Abschnitt fortfährst, installiere und aktiviere das Classic Editor-Plugin.
Dann öffnest du den Plugin-Bildschirm und aktivierst das neue Plugin Meta Fields.
Hinzufügen einer Meta-Box zum klassischen Editor
Im Zusammenhang mit dem klassischen Editor ist ein Metakasten ein Container mit Formularelementen, in die du bestimmte Informationen eingeben kannst, z. B. den Autor des Beitrags, Tags, Kategorien usw.
Zusätzlich zu den eingebauten Meta-Boxen können Plugin-Entwickler eine beliebige Anzahl von benutzerdefinierten Meta-Boxen hinzufügen, um HTML-Formularelemente (oder beliebige HTML-Inhalte) einzubinden, in die Plugin-Benutzer/innen pluginspezifische Daten eingeben können.
Die WordPress-API bietet nützliche Funktionen, mit denen du ganz einfach benutzerdefinierte Meta-Boxen registrieren kannst, die alle HTML-Elemente enthalten, die dein Plugin zum Funktionieren braucht.
Um loszulegen, füge den folgenden Code in die PHP-Datei des Plugins ein, das du gerade erstellt hast:
// register meta box
function meta_fields_add_meta_box(){
add_meta_box(
'meta_fields_meta_box',
__( 'Book details' ),
'meta_fields_build_meta_box_callback',
'post',
'side',
'default'
);
}
// build meta box
function meta_fields_build_meta_box_callback( $post ){
wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );
$title = get_post_meta( $post->ID, '_meta_fields_book_title', true );
$author = get_post_meta( $post->ID, '_meta_fields_book_author', true );
?>
<div class="inside">
<p><strong>Title</strong></p>
<p><input type="text" id="meta_fields_book_title" name="meta_fields_book_title" value="<?php echo esc_attr( $title ); ?>" /></p>
<p><strong>Author</strong></p>
<p><input type="text" id="meta_fields_book_author" name="meta_fields_book_author" value="<?php echo esc_attr( $author ); ?>" /></p>
</div>
<?php
}
add_action( 'add_meta_boxes', 'meta_fields_add_meta_box' );Die Funktion add_meta_box registriert eine neue Metabox, während die Callback-Funktion den HTML-Code erstellt, der in die Metabox eingefügt werden soll. Wir werden dieses Thema nicht weiter vertiefen, da es den Rahmen dieses Artikels sprengen würde, aber du findest alle Details, die du brauchst, hier, hier und hier.
Im nächsten Schritt erstellst du eine Funktion, die die vom Autor des Beitrags eingegebenen Daten speichert, sobald der save_post -Hook ausgelöst wird (siehe Entwicklerressourcen):
// save metadata
function meta_fields_save_meta_box_data( $post_id ) {
if ( ! isset( $_POST['meta_fields_meta_box_nonce'] ) )
return;
if ( ! wp_verify_nonce( $_POST['meta_fields_meta_box_nonce'], 'meta_fields_save_meta_box_data' ) )
return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( ! current_user_can( 'edit_post', $post_id ) )
return;
if ( ! isset( $_POST['meta_fields_book_title'] ) )
return;
if ( ! isset( $_POST['meta_fields_book_author'] ) )
return;
$title = sanitize_text_field( $_POST['meta_fields_book_title'] );
$author = sanitize_text_field( $_POST['meta_fields_book_author'] );
update_post_meta( $post_id, '_meta_fields_book_title', $title );
update_post_meta( $post_id, '_meta_fields_book_author', $author );
}
add_action( 'save_post', 'meta_fields_save_meta_box_data' );Auch hier findest du die Details in der Online-Dokumentation. Hier weisen wir nur auf den Unterstrich (_) vor dem Metaschlüssel hin. Dadurch wird WordPress angewiesen, die Schlüssel dieser benutzerdefinierten Felder aus der Liste der standardmäßig verfügbaren benutzerdefinierten Felder auszublenden und deine benutzerdefinierten Felder nur in deinem benutzerdefinierten Metafeld sichtbar zu machen.
Die folgende Abbildung zeigt, wie das benutzerdefinierte Metafeld im klassischen Editor aussieht:
Wenn du jetzt das Plugin für den klassischen Editor deaktivierst und überprüfst, was im Blockeditor passiert, wirst du sehen, dass das Metakästchen immer noch erscheint und funktioniert, aber nicht genau so, wie du es vielleicht erwartest.
Unser Ziel ist es, ein System für die Verwaltung von Metadaten zu schaffen, die an Blogbeiträge oder benutzerdefinierte Beitragstypen angehängt sind und sich nahtlos in den Block-Editor integrieren lassen. Aus diesem Grund wird der bisher gezeigte Code nur benötigt, um die Abwärtskompatibilität mit dem klassischen Editor zu gewährleisten.
Bevor wir also weitermachen, weisen wir WordPress an, die benutzerdefinierte Meta-Box aus dem Block-Editor zu entfernen, indem wir der Funktion add_meta_box das Flag __back_compat_meta_box hinzufügen (siehe auch Meta-Box-Kompatibilitätsflags und Abwärtskompatibilität).
Gehen wir zurück zu der Callback-Funktion, die die Meta-Box registriert, und ändern sie wie folgt:
// register meta box
function meta_fields_add_meta_box(){
add_meta_box(
'meta_fields_meta_box',
__( 'Book details' ),
'meta_fields_build_meta_box_callback',
'post',
'side',
'default',
// hide the meta box in Gutenberg
array('__back_compat_meta_box' => true)
);
}Speichere die Plugin-Datei und gehe zurück 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.
Hinzufügen von benutzerdefinierten Meta-Boxen zum Gutenberg-Blockeditor (drei Optionen)
In unseren früheren Artikeln über die Entwicklung von Gutenberg-Blöcken haben wir einen detaillierten Überblick über den Editor und seine Bestandteile gegeben und erklärt, wie du statische und dynamische Blöcke entwickelst.
Wie bereits erwähnt, gehen wir in diesem Artikel einen Schritt weiter und erläutern, wie du benutzerdefinierte Meta-Boxen zu Blogbeiträgen hinzufügen kannst.
Es gibt verschiedene Möglichkeiten, in Gutenberg Metadaten zu speichern und zu verwenden. Hier gehen wir auf die folgenden ein:
Einen benutzerdefinierten Block erstellen, um benutzerdefinierte Meta-Boxen zu speichern und anzuzeigen
In diesem Abschnitt zeigen wir dir, wie du benutzerdefinierte Meta-Boxen in einem dynamischen Block erstellen und verwalten kannst. Laut dem Handbuch für den Block-Editor ist ein Post-Meta-Feld „ein WordPress-Objekt, das dazu dient, zusätzliche Daten über einen Beitrag zu speichern“. Bevor wir ein neues Meta-Feld verwenden können, müssen wir es zunächst registrieren.
Benutzerdefinierte Meta-Felder registrieren
Bevor du ein benutzerdefiniertes Meta-Feld registrierst, musst du sicherstellen, dass der Beitragstyp, der es verwenden soll, benutzerdefinierte Felder unterstützt. Wenn du ein benutzerdefiniertes Meta-Feld registrierst, solltest du außerdem den Parameter show_in_rest auf true setzen.
Nun zurück zur Plugin-Datei. Füge den folgenden Code ein:
/**
* Register the custom meta fields
*/
function meta_fields_register_meta() {
$metafields = [ '_meta_fields_book_title', '_meta_fields_book_author' ];
foreach( $metafields as $metafield ){
// Pass an empty string to register the meta key across all existing post types.
register_post_meta( '', $metafield, array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'auth_callback' => function() {
return current_user_can( 'edit_posts' );
}
));
}
}
add_action( 'init', 'meta_fields_register_meta' );register_post_meta registriert einen Metaschlüssel für die angegebenen Beitragstypen. Im obigen Code haben wir zwei benutzerdefinierte Meta-Felder für alle auf deiner Website registrierten Beitragstypen registriert, die benutzerdefinierte Felder unterstützen. Weitere Informationen findest du in der Funktionsreferenz.
Öffne anschließend die Datei src/index.js deines Block-Plugins.
Registriere den Blocktyp auf dem Client
Navigiere nun zum Ordner wp-content/plugins/metadata-block/src und öffne die Datei index.js:
import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import metadata from './block.json';
registerBlockType( metadata.name, {
edit: Edit,
} );Bei statischen Blöcken würden wir auch eine save Funktion gesehen. In diesem Fall fehlt die Funktion save, weil wir einen dynamischen Block installiert haben. Der Inhalt, der im Frontend angezeigt wird, wird dynamisch über PHP generiert.
Erstelle den Blocktyp
Navigiere zum Ordner wp-content/plugins/metadata-block/src und öffne die Datei edit.js. Du solltest den folgenden Code sehen (Kommentare entfernt):
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';
export default function Edit() {
return (
<p { ...useBlockProps() }>
{ __( 'Meta Fields – hello from the editor!', 'metadata-block' ) }
</p>
);
}Hier fügst du den Code ein, um den Block zu erzeugen, der im Editor angezeigt werden soll.
Der erste Schritt besteht darin, die Komponenten und Funktionen zu importieren, die für die Erstellung des Blocks benötigt werden. Hier ist die vollständige Liste der Abhängigkeiten:
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls, RichText } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { TextControl, PanelBody, PanelRow } from '@wordpress/components';
import './editor.scss';Wenn du unsere früheren Artikel gelesen hast, solltest du mit vielen dieser import Deklarationen vertraut sein. Hier wollen wir nur auf einige von ihnen hinweisen:
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';Wenn du diese Abhängigkeiten importiert hast, kannst du useSelect und useEntityProp in der Funktion Edit() verwenden:
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );useSelectist ein benutzerdefinierter Hook zum Abrufen von Props aus registrierten Selektoren. Wir werden ihn verwenden, um den aktuellen Beitragstyp abzurufen (siehe auch @wordpress/data-Referenz und Einführung von useDispatch und useSelect)useEntityPropist ein benutzerdefinierter Hook, mit dem Blöcke Meta-Felder von Beiträgen abrufen und ändern können. Er ist definiert als ein „Hook, der den Wert und einen Setter für die angegebene Eigenschaft der nächsten angegebenen Entität des angegebenen Typs zurückgibt“. Er gibt „ein Array zurück, bei dem das erste Element der Eigenschaftswert, das zweite der Setter und das dritte das vollständige Wertobjekt aus der REST-API ist, das weitere Informationen wieraw,renderedundprotectedprops enthält“. (Siehe auch Allgemeine Block-Editor-API-Updates.)
Dieser Code liefert die aktuelle postType, ein Objekt mit Metafeldern (meta) und eine Setter-Funktion, um sie zu aktualisieren (setMeta).
Ersetze nun den aktuellen Code für die Funktion Edit() durch den folgenden:
export default function Edit() {
const blockProps = useBlockProps();
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta[ '_meta_fields_book_title' ];
const bookAuthor = meta[ '_meta_fields_book_author' ];
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, _meta_fields_book_title: newValue } );
};
const updateBookAuthorMetaValue = ( newValue ) => {
setMeta( { ...meta, _meta_fields_book_author: newValue } );
};
return ( ... );
}Nochmal:
- Wir haben
useSelectverwendet, um den aktuellen Beitragstyp zu ermitteln. useEntityPropliefert ein Array von Meta-Feldern und eine Setter-Funktion, um neue Metawerte zu setzen.updateBookTitleMetaValueundupdateBookAuthorMetaValuesind zwei Event-Handler zum Speichern von Meta-Feldwerten.
Der nächste Schritt besteht darin, den JSX (JavaScript XML)-Code zu erstellen, der von der Funktion Edit() zurückgegeben wird:
export default function Edit() {
...
return (
<>
<InspectorControls>
<PanelBody
title={ __( 'Book Details' )}
initialOpen={true}
>
<PanelRow>
<fieldset>
<TextControl
label={__( 'Book title' )}
value={ bookTitle }
onChange={ updateBookTitleMetaValue }
/>
</fieldset>
</PanelRow>
<PanelRow>
<fieldset>
<TextControl
label={ __( 'Book author' ) }
value={ bookAuthor }
onChange={ updateBookAuthorMetaValue }
/>
</fieldset>
</PanelRow>
</PanelBody>
</InspectorControls>
<div { ...blockProps }>
<RichText
tagName="h3"
onChange={ updateBookTitleMetaValue }
allowedFormats={ [ 'core/bold', 'core/italic' ] }
value={ bookTitle }
placeholder={ __( 'Write your text...' ) }
/>
<TextControl
label="Book Author"
value={ bookAuthor }
onChange={ updateBookAuthorMetaValue }
/>
</div>
</>
);
}Die Komponente RichText bietet eine inhaltsverarbeitbare Eingabe, während TextControl einfache Textfelder bereitstellt.
Außerdem haben wir ein Sidebar-Panel erstellt, das zwei Eingabefelder enthält, die anstelle der beiden Formular-Steuerelemente des Blocks verwendet werden.
Speichere die Datei und gehe zurück in den Editor. Füge den Block Meta Fields aus dem Block-Inserter hinzu und fülle den Buchtitel und den Autor ein.
Du wirst feststellen, dass sich jedes Mal, wenn du den Wert des Feldes im Block änderst, auch der Wert im entsprechenden Textfeld in der Seitenleiste ändert.
Als Nächstes müssen wir den PHP-Code erstellen, der das HTML generiert, das im Frontend angezeigt werden soll.
Anzeige des Blocks auf dem Frontend
Öffne die Haupt-PHP-Datei erneut in deinem Code-Editor und schreibe die Callback-Funktion, die die Ausgabe des Blocks erzeugt, wie folgt um:
function meta_fields_metadata_block_block_init() {
register_block_type(
__DIR__ . '/build',
array(
'render_callback' => 'meta_fields_metadata_block_render_callback',
)
);
}
add_action( 'init', 'meta_fields_metadata_block_block_init' );
function meta_fields_metadata_block_render_callback( $attributes, $content, $block ) {
$book_title = get_post_meta( get_the_ID(), '_meta_fields_book_title', true );
$book_author = get_post_meta( get_the_ID(), '_meta_fields_book_author', true );
$output = "";
if( ! empty( $book_title ) ){
$output .= '<h3>' . esc_html( $book_title ) . '</h3>';
}
if( ! empty( $book_author ) ){
$output .= '<p>' . __( 'Book author: ' ) . esc_html( $book_author ) . '</p>';
}
if( strlen( $output ) > 0 ){
return '<div ' . get_block_wrapper_attributes() . '>' . $output . '</div>';
} else {
return '<div ' . get_block_wrapper_attributes() . '>' . '<strong>' . __( 'Sorry. No fields available here!' ) . '</strong>' . '</div>';
}
}Dieser Code ist ziemlich selbsterklärend. Zuerst verwenden wir get_post_meta, um die Werte der benutzerdefinierten Meta-Felder abzurufen. Dann verwenden wir diese Werte, um den Inhalt des Blocks zu erstellen. Schließlich gibt die Callback-Funktion den HTML-Code des Blocks zurück.
Der Block kann nun verwendet werden. Wir haben den Code in diesem Beispiel absichtlich so einfach wie möglich gehalten, aber mit den nativen Komponenten von Gutenberg kannst du fortschrittlichere Blöcke erstellen und das Beste aus den benutzerdefinierten WordPress-Meta-Feldern herausholen.
In unserem Beispiel haben wir die Elemente h3 und p verwendet, um den Block für das Frontend zu erstellen.
Aber du kannst die Daten auf viele Arten anzeigen. Das folgende Bild zeigt eine einfache ungeordnete Liste von Metafeldern.
Den vollständigen Code dieses Beispiels findest du in diesem öffentlichen Gist.
Hinzufügen eines benutzerdefinierten Meta-Feldes zur Dokumenten-Seitenleiste
Die zweite Möglichkeit ist, benutzerdefinierte Meta-Felder an Beiträge anzuhängen, indem du ein Plugin benutzt, das ein Einstellungsfeld in der Dokumenten-Seitenleiste erzeugt.
Der Prozess ist dem vorherigen Beispiel sehr ähnlich, nur dass wir in diesem Fall keinen Block zur Verwaltung von Metadaten benötigen. Wir erstellen eine Komponente, die ein Panel mit einer Reihe von Steuerelementen in der Dokumenten-Seitenleiste erzeugt, indem wir die folgenden Schritte befolgen:
- Erstelle ein neues Block-Plugin mit create-block
- Registriere ein benutzerdefiniertes Meta-Feld für den Classic Editor
- Registriere die benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei mit der Funktion register_post_meta()
- Registriere ein Plugin in der Datei index.js
- Baue die Komponente mit den eingebauten Gutenberg-Komponenten
Ein neues Block-Plugin mit dem create-block Tool erstellen
Um ein neues Block-Plugin zu erstellen, befolge die Schritte im vorherigen Abschnitt. Du kannst ein neues Plugin erstellen oder die Skripte bearbeiten, die wir im vorherigen Beispiel erstellt haben.
Registrierung einer benutzerdefinierten Meta-Box für den klassischen Editor
Als Nächstes musst du eine benutzerdefinierte Meta-Box registrieren, um die Abwärtskompatibilität für WordPress-Websites sicherzustellen, die noch den klassischen Editor verwenden. Der Vorgang ist derselbe wie im vorherigen Abschnitt beschrieben.
Registrierung der benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei
Der nächste Schritt besteht darin, die benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei über die Funktion register_post_meta() zu registrieren. Auch hier kannst du dem vorherigen Beispiel folgen.
Ein Plugin in der index.js-Datei registrieren
Wenn du die vorherigen Schritte abgeschlossen hast, ist es an der Zeit, ein Plugin in der Datei index.js zu registrieren, um eine benutzerdefinierte Komponente zu rendern.
Bevor du das Plugin registrierst, erstelle einen Ordner components im Ordner src des Plugins. Im Ordner components erstellst du eine neue Datei MetaBox.js. Du kannst jeden Namen wählen, den du für deine Komponente für passend hältst. Achte nur darauf, dass du dich an die Best Practice für die Namensgebung in React hältst.
Bevor du weitermachst, installiere das Modul@wordpress/plugins über dein Kommandozeilentool.
Halte den Prozess an (mac), installiere das Modul und starte den Prozess erneut:
^C
npm install @wordpress/plugins --save
npm startÖffne anschließend die Datei index.js deines Plugins und füge den folgenden Code hinzu.
/**
* Registers a plugin for adding items to the Gutenberg Toolbar
*
* @see https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-sidebar/
*/
import { registerPlugin } from '@wordpress/plugins';
import MetaBox from './components/MetaBox';Dieser Code ist ziemlich selbsterklärend. Wir wollen uns jedoch einen Moment Zeit nehmen, um für diejenigen Leser, die keine fortgeschrittenen React-Kenntnisse haben, auf die beiden import Anweisungen einzugehen.
Mit der ersten import Anweisung haben wir den Namen der Funktion in geschweifte Klammern gesetzt. Bei der zweiten import Anweisung wird der Name der Komponente nicht in geschweifte Klammern gesetzt.
Als nächstes musst du dein Plugin registrieren:
registerPlugin( 'metadata-plugin', {
render: MetaBox
} );registerPlugin registriert einfach ein Plugin. Die Funktion nimmt zwei Parameter entgegen:
- Eine eindeutige Zeichenkette, die das Plugin identifiziert
- Ein Objekt mit Plugin-Einstellungen. Beachte, dass die Eigenschaft
renderangegeben werden muss und eine gültige Funktion sein muss.
Baue die Komponente mit Hilfe der eingebauten Gutenberg-Komponenten
Jetzt ist es an der Zeit, unsere React-Komponente zu bauen. Öffne die Datei MetaBox.js (oder wie immer du sie genannt hast) und füge die folgenden Import-Anweisungen hinzu:
import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { PanelRow, TextControl, DateTimePicker } from '@wordpress/components';- Die Funktion
composeführt eine Funktionskomposition durch, d. h. das Ergebnis einer Funktion wird an eine andere Funktion weitergegeben.composemusst du eventuell das entsprechende Modul installieren, bevor du es verwenden kannst:npm install @wordpress/compose --saveWir werden die Funktion
composegleich in Aktion sehen. withSelectundwithDispatchsind zwei Komponenten höherer Ordnung, mit denen du Daten aus einem WordPress-Speicher abrufen oder an diesen senden kannst.withSelectwird verwendet, um vom Zustand abgeleitete Requisiten über registrierte Selektoren zu injizieren,withDispatchwird verwendet, um Requisiten über registrierte Action Creators zu senden.PluginDocumentSettingPanelrendert Elemente in der Document Sidebar (siehe den Quellcode auf Github).
Als Nächstes erstellst du die Komponente, die das Metabox-Panel in der Dokumenten-Seitenleiste anzeigt. Füge in deiner MetaBox.js-Datei den folgenden Code ein:
const MetaBox = ( { postType, metaFields, setMetaFields } ) => {
if ( 'post' !== postType ) return null;
return(
<PluginDocumentSettingPanel
title={ __( 'Book details' ) }
icon="book"
initialOpen={ false }
>
<PanelRow>
<TextControl
value={ metaFields._meta_fields_book_title }
label={ __( "Title" ) }
onChange={ (value) => setMetaFields( { _meta_fields_book_title: value } ) }
/>
</PanelRow>
<PanelRow>
<TextControl
value={ metaFields._meta_fields_book_author }
label={ __( "Author" ) }
onChange={ (value) => setMetaFields( { _meta_fields_book_author: value } ) }
/>
</PanelRow>
<PanelRow>
<TextControl
value={ metaFields._meta_fields_book_publisher }
label={ __( "Publisher" ) }
onChange={ (value) => setMetaFields( { _meta_fields_book_publisher: value } ) }
/>
</PanelRow>
<PanelRow>
<DateTimePicker
currentDate={ metaFields._meta_fields_book_date }
onChange={ ( newDate ) => setMetaFields( { _meta_fields_book_date: newDate } ) }
__nextRemoveHelpButton
__nextRemoveResetButton
/>
</PanelRow>
</PluginDocumentSettingPanel>
);
}
const applyWithSelect = withSelect( ( select ) => {
return {
metaFields: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
postType: select( 'core/editor' ).getCurrentPostType()
};
} );
const applyWithDispatch = withDispatch( ( dispatch ) => {
return {
setMetaFields ( newValue ) {
dispatch('core/editor').editPost( { meta: newValue } )
}
}
} );
export default compose([
applyWithSelect,
applyWithDispatch
])(MetaBox);Lass uns diesen Code aufschlüsseln.
- Das Element
PluginDocumentSettingPanelerstellt ein neues Panel in der Dokumenten-Seitenleiste. Wir legen den Titel („Buchdetails“) und das Symbol fest und setzeninitialOpenauffalse, was bedeutet, dass das Panel zunächst geschlossen ist. - Innerhalb von
PluginDocumentSettingPanelhaben wir drei Textfelder und einDateTimePickerElement, mit dem der Nutzer das Veröffentlichungsdatum festlegen kann. withSelectermöglicht den Zugriff auf die Funktionselect, mit der wirmetaFieldsundpostTypeabrufen.withDispatchermöglicht den Zugriff auf die Funktiondispatch, mit der wir die Metadatenwerte aktualisieren können.- Die Funktion
composeschließlich ermöglicht es uns, unsere Komponente mit den übergeordneten KomponentenwithSelectundwithDispatchzusammenzustellen. Dadurch erhält die Komponente Zugriff auf die EigenschaftenmetaFieldsundpostTypesowie auf die FunktionsetMetaFields.
Speichere deine MetaBox.js-Datei, erstelle einen neuen Beitrag auf deiner WordPress-Entwicklungswebsite und wirf einen Blick auf die Document Sidebar. Du solltest das neue Buch-Detailfenster sehen.
Führe jetzt deine Tests durch. Setze die Werte für deine benutzerdefinierten Meta-Felder und speichere den Beitrag. Lade dann die Seite neu und prüfe, ob die eingegebenen Werte vorhanden sind.
Füge den Block hinzu, den wir im vorherigen Abschnitt erstellt haben, und prüfe, ob alles richtig funktioniert.
Hinzufügen einer benutzerdefinierten Seitenleiste zur Verwaltung von Beitrags-Metadaten
Wenn du viele benutzerdefinierte Meta-Felder zu deinen Beiträgen oder benutzerdefinierten Beitragstypen hinzufügen möchtest, kannst du auch eine benutzerdefinierte Einstellungs-Seitenleiste speziell für dein Plugin erstellen.
Der Prozess ist dem vorherigen Beispiel sehr ähnlich. Wenn du also die im vorherigen Abschnitt beschriebenen Schritte verstanden hast, wirst du keine Schwierigkeiten haben, eine benutzerdefinierte Seitenleiste für Gutenberg zu erstellen.
Noch einmal:
- Erstelle ein neues Block-Plugin mit create-block
- Registriere ein benutzerdefiniertes Meta-Feld für den klassischen Editor
- Registriere die benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei mit der Funktion register_post_meta()
- Registriere ein Plugin in der Datei index.js
- Baue die Komponente mit den eingebauten Gutenberg-Komponenten
Ein neues Block-Plugin mit dem create-block Tool erstellen
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.
Registrierung einer benutzerdefinierten Meta-Box für den klassischen Editor
Um die Abwärtskompatibilität für WordPress-Websites zu gewährleisten, die noch den klassischen Editor verwenden, registrierst du jetzt ein benutzerdefiniertes Meta-Feld. Der Vorgang ist derselbe wie im vorherigen Abschnitt beschrieben.
Registrierung der benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei
Registriere die benutzerdefinierten Meta-Felder in der Haupt-Plugin-Datei über die Funktion register_post_meta().
Ein Plugin in der Datei index.js registrieren
Erstelle nun eine leere Datei CustomSidebar.js in deinem Komponentenordner.
Ändere dann deine index.js-Datei wie folgt:
/**
* Registers a plugin for adding items to the Gutenberg Toolbar
*
* @see https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-sidebar/
*/
import { registerPlugin } from '@wordpress/plugins';
import CustomSidebar from './components/CustomSidebar';
// import MetaBox from './components/MetaBox';
registerPlugin( 'metadata-block', {
render: CustomSidebar
} );Mit dem obigen Code importieren wir zuerst die Komponente CustomSidebar, dann weisen wir die Funktion registerPlugin an, die neue Komponente zu rendern.
Baue die Komponente mit Hilfe der eingebauten Gutenberg-Komponenten
Als nächstes öffnest du die Datei CustomSidebar.js und fügst die folgenden Abhängigkeiten hinzu:
import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress/components';Du solltest sehen, dass wir zwei neue Komponenten importieren:
PluginSidebarfügt ein Symbol in die Gutenberg-Symbolleiste ein, das beim Anklicken eine Seitenleiste mit dem Inhalt des<PluginSidebar />-Elements anzeigt (die Komponente ist auch auf GitHub dokumentiert).PluginSidebarMoreMenuItemstellt einen Menüpunkt unter Plugins im More Menu-Dropdown dar und kann verwendet werden, um die entsprechendePluginSidebarKomponente zu aktivieren (siehe auch auf GitHub).
Jetzt kannst du deine eigene Komponente erstellen:
const CustomSidebar = ( { postType, metaFields, setMetaFields } ) => {
if ( 'post' !== postType ) return null;
return (
<>
<PluginSidebarMoreMenuItem
target="metadata-sidebar"
icon="book"
>
Metadata Sidebar
</PluginSidebarMoreMenuItem>
<PluginSidebar
name="metadata-sidebar"
icon="book"
title="My Sidebar"
>
<PanelBody title="Book details" initialOpen={ true }>
<PanelRow>
<TextControl
value={ metaFields._meta_fields_book_title }
label={ __( "Title" ) }
onChange={ (value) => setMetaFields( { _meta_fields_book_title: value } ) }
/>
</PanelRow>
<PanelRow>
<TextControl
value={ metaFields._meta_fields_book_author }
label={ __("Author", "textdomain") }
onChange={ (value) => setMetaFields( { _meta_fields_book_author: value } ) }
/>
</PanelRow>
<PanelRow>
<TextControl
value={ metaFields._meta_fields_book_publisher }
label={ __("Publisher", "textdomain") }
onChange={ (value) => setMetaFields( { _meta_fields_book_publisher: value } ) }
/>
</PanelRow>
<PanelRow>
<DateTimePicker
currentDate={ metaFields._meta_fields_book_date }
onChange={ ( newDate ) => setMetaFields( { _meta_fields_book_date: newDate } ) }
__nextRemoveHelpButton
__nextRemoveResetButton
/>
</PanelRow>
</PanelBody>
</PluginSidebar>
</>
)
}Der letzte Schritt ist die Komponentenkomposition mit den übergeordneten Komponenten withSelect und withDispatch:
const applyWithSelect = withSelect( ( select ) => {
return {
metaFields: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
postType: select( 'core/editor' ).getCurrentPostType()
};
} );
const applyWithDispatch = withDispatch( ( dispatch ) => {
return {
setMetaFields ( newValue ) {
dispatch('core/editor').editPost( { meta: newValue } )
}
}
} );
export default compose([
applyWithSelect,
applyWithDispatch
])(CustomSidebar);Speichere deine Änderungen und rufe dann die Editoroberfläche auf. Wenn du das Dropdown-Menü Optionen öffnest, siehst du unter dem Abschnitt Plugins ein neues Element Metadaten-Seitenleiste. Wenn du auf das neue Element klickst, wird deine brandneue benutzerdefinierte Seitenleiste aktiviert.
Dasselbe passiert, wenn du auf das Buchsymbol in der oberen rechten Ecke klickst.
Gehe nun zurück zu deiner Entwicklungswebsite und erstelle einen neuen Blogbeitrag. Fülle deine Meta-Felder aus und füge dann den Block in die Arbeitsfläche des Editors ein. Er sollte dieselben Metawerte enthalten, die du in deiner benutzerdefinierten Seitenleiste eingegeben hast.
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öffentlichungsdatum sehen.
Den vollständigen Code dieses Artikels findest du in diesem öffentlichen Gist.
Weitere Lektüre
In diesem Artikel haben wir viele Themen behandelt, von Selektoren bis zu Komponenten höherer Ordnung und vieles mehr. Wir haben auch die wichtigsten Quellen verlinkt, die wir im Artikel als Referenz verwendet haben.
Wenn du tiefer in diese Themen eintauchen möchtest, solltest du dir auch die folgenden zusätzlichen Ressourcen ansehen:
Gutenberg-Dokumentation und offizielle WordPress-Ressourcen
- Plugin-Handbuch / Benutzerdefinierte Meta-Boxen
- Plugin-Handbuch / Verwaltung von Beitrags-Metadaten
- How-to Guides / Meta Boxen
- How-to Guides / Plugin Sidebar
- Block Editor Handbuch / PluginSidebar
- Paket-Referenz / @wordpress/compose
- Pakete / Daten / Vergleich mit Redux
- Pakete / Daten / withDispatch
- Pakete / Daten / dispatch
- Pakete / Daten / withSelect
- Pakete / Daten / select
Weitere offizielle Ressourcen
- Komponenten höherer Ordnung in React
- Aktionsersteller in Redux
- Ableitung von Daten mit Selektoren in Redux
Zusätzliche Ressourcen aus der Community
- Fantastische Hooks und wo man sie einsetzt (von Darren Ethier)
- WordPress Data Series Überblick und Einführung (von Darren Ethier)
- Airbnb React/JSX Style Guide
- React Higher-Order Components (HOCs) (von Robin Wieruch)
- Funktionskomposition in JavaScript
- Abfrage von Daten in Gutenberg mit getEntityRecords (von Ryan Welcher)
Nützliche Lektüre auf der Kinsta-Website
- Was ist React.js? Ein Blick auf die beliebte JavaScript-Bibliothek
- React Best Practices für dein Spiel
- Bibliotheken für React UI-Komponenten
- Wie man einen effektiven WordPress-Workflow für Entwickler/innen erstellt
- WordPress-Entwickler-Gehalt: Das Durchschnittsgehalt und wie du deines erhöhen kannst
- Was ist JavaScript? Ein Blick auf die beliebteste Skriptsprache des Internets
- Der ultimative Leitfaden für den Umgang mit Fehlern in JavaScript
- Die 40 besten JavaScript-Bibliotheken und -Frameworks für 2023
Zusammenfassung
In diesem dritten Artikel unserer Serie über die Entwicklung von Gutenberg-Blöcken haben wir neue fortgeschrittene Themen behandelt, die das in den vorherigen Artikeln über die Entwicklung statischer und dynamischer Blöcke skizzierte Bild vervollständigen sollen.
Du solltest jetzt in der Lage sein, das Potenzial der benutzerdefinierten Felder in Gutenberg zu nutzen und fortschrittlichere und funktionalere WordPress-Websites zu erstellen.
Aber das ist noch nicht alles. Mit den Fähigkeiten, die du in unseren Artikeln zur Blockentwicklung erworben hast, solltest du auch eine gute Vorstellung davon haben, wie du React-Komponenten außerhalb von WordPress entwickeln kannst. Schließlich ist Gutenberg eine React-basierte SPA.
Und jetzt liegt es an dir! Hast du bereits Gutenberg-Blöcke erstellt, die benutzerdefinierte Meta-Felder verwenden? Teile deine Kreationen mit uns in den Kommentaren unten.
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.
Schreibe einen Kommentar