Verwalten von WordPress -Metadaten in Gutenberg mit einem Sidebar -Plugin

In diesem Artikel wird die Verwaltung von WordPress -Metadaten innerhalb des Gutenberg -Editors unter Verwendung eines Sidebar -Plugins untersucht. Gutenberg, Blockeditor von WordPress, repräsentiert Beiträge als Sammlung von Blöcken. Während Metadaten mithilfe von Blöcken verwaltet werden können, konzentriert sich dieser Artikel auf das Sidebar -Management für seine häufige Verwendung. Das Tutorial setzt die Vertrautheit mit ReactJs und Redux aus, da Gutenberg diese Technologien stark nutzt.

Gutenbergs Kern ist eine React -Anwendung. Alle Editorelemente - post -Titel, Inhaltsbereich, Symbolleiste und Seitenleiste - sind Reaktionskomponenten. Der Anwendungsstatus wird in zentralisierten JavaScript -Objekten ("Stores") gespeichert, die vom Datenmodul von WordPress verwaltet werden, das Ähnlichkeiten mit Redux teilt. Diese Stores enthalten Postdaten (Inhalte, Titel, Kategorien) und globale Website -Informationen (Kategorien, Tags, Beiträge). Ändern dieser Speicher aktualisiert die Gutenberg -Benutzeroberfläche und aktualisiert beim Speichern der WordPress -REST -API die Datenbank.

Gutenberg verwaltet jedoch standardmäßig keine Metadaten über diese globalen Geschäfte. Während Legacy -PHP -Metaboxe noch funktionieren, empfiehlt WordPress, sie in einen JavaScript -Ansatz zu migrieren, indem sie globale Speicher und Reagieren von Komponenten für eine einheitliche Erfahrung unter Verwendung eines einheitlichen Erlebnisses reagieren.

Zugriff auf und verändert Gutenbergs Redux-ähnliche Geschäfte

Um auf diese Geschäfte zuzugreifen, öffnen Sie die Konsole Ihres Browsers im Gutenberg -Editor und verwenden Sie wp.data . Zum Beispiel wp.data.select('core/editor').getBlocks() ruft die Blöcke im aktuellen Beitrag ab. wp.data.select('core/editor').getEditedPostAttribute('title') ruft den Post -Titel ab. Verwenden Sie zum Ändern von Daten wp.data.dispatch() . Beispielsweise aktualisiert wp.data.dispatch('core/editor').editPost({title: 'My new title'}) den Beitragstitel. Weitere relevante Geschäfte umfassen core (globale Website-Informationen) und core/edit-post (Editor UI-Status).

Erstellen eines WordPress -Plugins für eine Gutenberg -Seitenleiste

Erstellen Sie ein WordPress -Plugin, um eine React -Sidebar -Komponente hinzuzufügen. This involves setting up a plugin folder (eg, gutenberg-sidebar ), creating a plugin.php file (the plugin's entry point), and using npm to manage JavaScript dependencies ( @wordpress/scripts , @wordpress/edit-post , @wordpress/plugins , @wordpress/i18n , @wordpress/components , @wordpress/data ). Das plugin.php befasst sich mit dem von npm run build erstellten JavaScript -Bundle.

Registrieren eines Gutenberg -Plugins und einer Seitenleiste

Der JavaScript -Code (in src/index.js ) verwendet registerPlugin von @wordpress/plugins , um ein Plugin zu registrieren. PluginSidebar und PluginSidebarMoreMenuItem von @wordpress/edit-post erstellen Sie die Seitenleiste und ein Menüelement, um es umzuschalten.

Umgang mit Metadaten im klassischen Herausgeber

Das Tutorial zeigt, dass die Verwaltung von Metadaten im klassischen Editor unter Verwendung von PHP -Metaboxen und -funktionen wie add_meta_box , get_post_meta , update_post_meta und wp_verify_nonce zeigt. Die Option __back_compat_meta_box verbirgt das Metabox, wenn Gutenberg aktiv ist.

Verwalten von Metadaten mit JavaScript

Um benutzerdefinierte Felder (z. B. _myprefix_text_metafield ) in Gutenberg mit JavaScript zu verwalten, registrieren Sie das Feld mit register_meta mit show_in_rest: true , einem sanitize_callback und einem auth_callback , um Rest -API -Updates zu ermöglichen. Verwenden Sie wp.data.select('core/editor').getEditedPostAttribute('meta') wp.data.dispatch('core/editor').editPost({meta: {_myprefix_text_metafield: 'new value'}}) ).

Erstellen einer React -Komponente

Eine React -Komponente ( PluginMetaFields ) wird mit PanelBody und TextControl von @wordpress/components erstellt. withSelect und withDispatch von @wordpress/data verbinden die Komponente mit dem Redux-ähnlichen Speicher und aktivieren Sie das Abrufen von Daten und Aktualisierungen. Das onChange -Event sendet Updates in den Laden. Schließlich wird eine ColorPicker -Komponente hinzugefügt, um die Verwendung anderer Komponenten von @wordpress/components zu demonstrieren. Der komplette Code ist auf GitHub verfügbar.

Das obige ist der detaillierte Inhalt vonVerwalten von WordPress -Metadaten in Gutenberg mit einem Sidebar -Plugin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!