Die Verwaltung des Status einer WordPress-Anwendung – wie sie Daten verarbeitet und organisiert – kann eine Herausforderung sein. Wenn dein Projekt wächst, wird es immer schwieriger, den Überblick über den Datenfluss zu behalten und konsistente Aktualisierungen für alle Komponenten zu gewährleisten. Das WordPress-Datenpaket kann hier helfen, denn es bietet eine robuste Lösung für das Statusmanagement.
Dieser Artikel befasst sich mit dem WordPress-Datenpaket, seinen Schlüsselkonzepten, Implementierungsstrategien und Best Practices.
Einführung in das WordPress-Datenpaket
Das WordPress Data Package – offiziell @wordpress/data – ist eine JavaScript (ES2015 und höher) State Management Library, die eine vorhersehbare und zentralisierte Möglichkeit zur Verwaltung des Anwendungsstatus bietet. Die richtige Implementierung kann die Erstellung komplexer Benutzeroberflächen und die Verwaltung des Datenflusses in deiner Anwendung erleichtern.
Das WordPress-Datenpaket ist von Redux inspiriert, einer beliebten Bibliothek zur Zustandsverwaltung im React-Ökosystem.
Hier arbeitet das Datenmodul innerhalb der WordPress-Umgebung und bietet Integrationen mit WordPress-spezifischen Funktionen und APIs. Wenn du für den WordPress-Block-Editor baust – oder ihn unterstützen musst – ist das Paket entscheidend für die Verwaltung seines Zustands. Indem du dieselben Werkzeuge und Muster in deinen eigenen Plugins und Themes verwendest, kannst du eine konsistentere und vertrautere Entwicklungserfahrung schaffen.
Die Beziehung des Pakets zu Redux
Das WordPress-Datenpaket ist zwar von Redux inspiriert, aber es ist keine direkte Portierung. Es gibt viele Anpassungen an das WordPress-Ökosystem und einige wichtige Unterschiede zwischen den beiden Lösungen:
- Das Datenpaket ist so konzipiert, dass es nahtlos mit den WordPress-APIs und -Funktionen zusammenarbeitet, was bei Redux ohne diese Anpassung nicht möglich ist.
- Im Vergleich zu Redux bietet das Datenpaket eine schlankere API. Das kann den Einstieg erleichtern.
- Anders als Redux bietet das Datenpaket integrierte Unterstützung für asynchrone Aktionen. Wenn du mit der WordPress REST-API arbeitest, ist das sehr nützlich.
Das WordPress-Datenpaket hat auch einige Vergleiche mit der REST-API. Beide befassen sich zwar mit der Datenverwaltung, aber sie dienen unterschiedlichen Zwecken:
- Die WordPress REST API bietet eine Möglichkeit, mit WordPress-Daten über HTTP zu interagieren. Du verwendest sie für externe Anwendungen, Headless WordPress Setups und überall dort, wo du Daten abrufen und manipulieren musst.
- Das WordPress-Datenpaket ist ein zentraler Speicher für Daten und UI-Status. Damit kannst du den Datenfluss und die Aktualisierungen innerhalb deiner Anwendung verwalten.
In vielen Fällen wirst du beides zusammen verwenden: die REST-API, um Daten auf dem Server abzurufen und zu aktualisieren, und das WordPress-Datenpaket, um diese Daten innerhalb deiner Anwendung zu verwalten.
Schlüsselkonzepte und Terminologie für das WordPress-Datenpaket
Das WordPress-Datenpaket bietet eine intuitive Möglichkeit, den Status zu verwalten. Dies bezieht sich auf die Daten innerhalb eines Stores. Sie stellen den aktuellen Zustand deiner Anwendung dar und können sowohl den UI-Status (z. B. ob ein Modal geöffnet ist) als auch den Datenstatus (z. B. eine Liste von Beiträgen) umfassen.
In diesem Zusammenhang ist ein Store der zentrale Mittelpunkt des WordPress-Datenpakets. Er enthält den gesamten Status der Website und bietet die Methoden, um auf diesen Status zuzugreifen und ihn zu aktualisieren. In WordPress kannst du mehrere Stores haben. Jeder von ihnen ist für einen bestimmten Bereich deiner Website zuständig.
Um diese Stores zu verwalten, brauchst du ein Registry. Dieses zentrale Objekt bietet Methoden, um neue Stores zu registrieren und auf deine bestehenden zuzugreifen. In einem Registry werden Stores gespeichert, und diese Stores enthalten den Status deiner Anwendung.
Es gibt verschiedene Möglichkeiten, mit dem Status zu arbeiten:
- Aktionen beschreiben die Änderungen an einem Zustand. Sie sind einfache JavaScript-Objekte und die einzige Möglichkeit, Statusaktualisierungen auszulösen. Aktionen haben normalerweise eine
typeEigenschaft, die die Aktion beschreibt. Sie kann auch zusätzliche Daten enthalten. - Selektoren extrahieren bestimmte Teile des Status aus dem Store. Mit diesen Funktionen kannst du auf Zustandsdaten zugreifen, ohne direkt mit der Struktur des Stores interagieren zu müssen. Resolver sind verwandt und sorgen für asynchrones Abrufen von Daten. Du verwendest sie, um sicherzustellen, dass du auf die benötigten Daten in einem Store zugreifen kannst, bevor du einen Selektor ausführst.
- Reducers legen fest, wie sich der Zustand als Reaktion auf Aktionen ändern soll. Sie nehmen den aktuellen Status und eine Aktion als Argumente entgegen und geben ein neues Statusobjekt zurück. Mit Kontrollfunktionen können die Reducer komplexe asynchrone Operationen ohne Seiteneffekte durchführen.
Du musst diese grundlegenden Konzepte verstehen, da sie alle zusammen ein robustes Zustandsverwaltungssystem mit Stores als Herzstück bilden.
Stores: der zentrale Knotenpunkt des WordPress-Datenpakets
Stores sind die Container für den Zustand deiner Anwendung und bieten die Methoden, um mit ihm zu interagieren. Das WordPress-Datenpaket bündelt einige andere Pakete, die jeweils Stores für das Block-Verzeichnis, den Block-Editor, den Kern, die Post-Bearbeitung und mehr registrieren.
Jeder Speicher hat einen eigenen Namensraum, z. B. core, core/editor und core/notices. Auch Plugins von Drittanbietern registrieren Speicher, daher musst du eindeutige Namensräume wählen, um Konflikte zu vermeiden. Unabhängig davon werden die von dir registrierten Stores in den meisten Fällen in der Standardregistrierung angezeigt.
Dieses zentrale Objekt hat ein paar Aufgaben:
- Registrierung neuer Stores.
- Zugang zu bestehenden Stores gewähren.
- Verwaltung von Abonnements für Zustandsänderungen.
Auch wenn du nicht oft direkt mit Registry zu tun hast, musst du wissen, welche Rolle das Datenpaket bei der Verwaltung des Zustands in WordPress spielt.
Grundlegende Interaktion mit WordPress-Datenspeichern
Wenn du ES2015+ JavaScript verwendest und mit einem WordPress-Plugin oder -Theme arbeitest, kannst du es als Abhängigkeit einbinden:
npm install @wordpress/data --saveIn deinem Code importierst du die notwendigen Funktionen aus dem Paket am Anfang der Datei:
import { select, dispatch, subscribe } from '@wordpress/data';Wenn du mit bestehenden WordPress Stores interagieren willst, musst du einige der importierten Funktionen verwenden. Der Zugriff auf Statusdaten mit select zum Beispiel:
const posts = select('core').getPosts();Das Gleiche gilt für das Versenden von Aktionen:
dispatch('core').savePost(postData);Für das Abonnieren von Zustandsänderungen wird ein etwas anderes Format verwendet, aber das Konzept ist dasselbe:
subscribe(() => {
const newPosts = select('core').getPosts();
// Update your UI based on the new posts
});Du wirst jedoch nicht immer mit den Standard-Stores arbeiten. Oft arbeitest du mit bestehenden zusätzlichen Speichern oder registrierst deine eigenen.
So registrierst du einen WordPress-Datenspeicher
Um die Konfiguration deines Stores festzulegen und ihn im WordPress-Datenpaket zu registrieren, musst du zunächst die Funktion register importieren:
…
import { createReduxStore, register } from '@wordpress/data';
…Diese nimmt ein einziges Argument entgegen – deinen Store Descriptor. Als Nächstes solltest du einen Standardstatus für den Laden definieren, um seine Standardwerte festzulegen:
…
const DEFAULT_STATE = {
todos: [],
};
…Als Nächstes erstellst du ein actions Objekt, definierst eine reducer Funktion, um Statusaktualisierungen zu verarbeiten, und erstellst ein selectors Objekt mit Funktionen für den Zugriff auf Statusdaten:
const actions = {
addTodo: (text) => ({
type: 'ADD_TODO',
text,
}),
};
const reducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, { text: action.text, completed: false }],
};
default:
return state;
}
};
const selectors = {
getTodos: (state) => state.todos,
};Um die Konfiguration der Filiale zu erstellen, definierst du sie mit dem createReduxStore Objekt. Damit werden die Aktionen, Selektoren, Steuerelemente und andere Eigenschaften für deinen Store initialisiert:
const store = createReduxStore('my-plugin/todos', {
reducer,
actions,
selectors,
});Dieses Objekt braucht mindestens einen Reduzierer, um die Form des Zustands zu definieren und wie er sich als Reaktion auf andere Aktionen ändert. Abschließend registrierst du den Store, indem du den Store-Deskriptor aufrufst, den du mit createReduxStore definiert hast:
register(store);Jetzt kannst du mit deinem benutzerdefinierten Store wie mit anderen interagieren:
import { select, dispatch } from '@wordpress/data';
// Add a new todo
dispatch('my-plugin/todos').addTodo('Learn WordPress data package');
// Get all todos
const todos = select('my-plugin/todos').getTodos();Der Schlüssel zur Nutzung des WordPress-Datenpakets liegt darin, wie du die verschiedenen Eigenschaften und Objekte verwendest, die dir zur Verfügung stehen.
Die fünf Eigenschaften des WordPress-Datenspeichers aufschlüsseln
Die Verwendung des WordPress-Datenpakets erfolgt größtenteils „rückwärts“, d. h. du definierst die Eigenschaften des Datenspeichers auf niedriger Ebene, bevor du den eigentlichen Speicher erstellst. Das Objekt createReduxStore ist ein perfektes Beispiel dafür, denn es fasst alle Definitionen zusammen, die du für den Deskriptor machst, mit dem du einen Speicher registrierst:
import { createReduxStore } from '@wordpress/data';
const store = createReduxStore( 'demo', {
reducer: ( state = 'OK' ) => state,
selectors: {
getValue: ( state ) => state,
},
} );Diese anderen Eigenschaften müssen ebenfalls eingerichtet und konfiguriert werden.
1. Aktionen
Aktionen sind die wichtigste Methode, um Zustandsänderungen in deinem Laden auszulösen. Sie sind einfache JavaScript-Objekte, die beschreiben, was passieren soll. Es kann also sinnvoll sein, sie zuerst zu erstellen, da du dann entscheiden kannst, welche Zustände du abrufen möchtest.
const actions = {
addTodo: (text) => ({
type: 'ADD_TODO',
text,
}),
toggleTodo: (index) => ({
type: 'TOGGLE_TODO',
index,
}),
};Action Creators nehmen optionale Argumente entgegen und geben ein Objekt zurück, das sie an den von dir definierten Reducer weitergeben:
const actions = {
updateStockPrice: (symbol, newPrice) => {
return {
type: 'UPDATE_STOCK_PRICE',
symbol,
newPrice
};
},Wenn du einen Store-Deskriptor übergibst, kannst du Action-Creators losschicken und den Statuswert aktualisieren:
dispatch('my-plugin/todos').updateStockPrice('¥', '150.37');Betrachte Aktionsobjekte als Anweisungen für den Reducer, wie er Zustandsänderungen vornehmen soll. Zumindest wirst du wahrscheinlich Aktionen zum Erstellen, Aktualisieren, Lesen und Löschen (CRUD) definieren wollen. Es könnte auch sein, dass du eine eigene JavaScript-Datei für Aktionstypen hast und ein Objekt für alle diese Typen erstellst, vor allem wenn du sie als Konstanten definierst.
2. Reducer
Es lohnt sich, hier über den Reducer zu sprechen, da er neben den Aktionen eine zentrale Rolle spielt. Seine Aufgabe ist es, festzulegen, wie sich der Zustand als Reaktion auf die Anweisungen ändern soll, die er von einer Aktion erhält. Wenn du ihm die Anweisungen der Aktion und den aktuellen Zustand übergibst, kann er ein neues Zustandsobjekt zurückgeben und es in der Kette weitergeben:
const reducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, { text: action.text, completed: false }],
};
case 'TOGGLE_TODO':
return {
...state,
todos: state.todos.map((todo, index) =>
index === action.index ? { ...todo, completed: !todo.completed } : todo
),
};
default:
return state;
}
};Beachte, dass ein Reducer eine reine Funktion sein muss und den Zustand, den er annimmt, nicht verändern sollte (er sollte ihn vielmehr mit Aktualisierungen zurückgeben). Reducers und Actions stehen in vielerlei Hinsicht in einer symbiotischen Beziehung zueinander.
3. Selektoren
Um von einem registrierten Speicher auf den aktuellen Status zuzugreifen, brauchst du Selektoren. Das ist die wichtigste Methode, um den Zustand deines Stores „offenzulegen“, und sie helfen dir, deine Komponenten von der internen Struktur des Stores zu entkoppeln:
const selectors = {
getTodos: (state) => state.todos,
getTodoCount: (state) => state.todos.length,
};Du kannst diese Selektoren mit der Funktion select aufrufen:
const todoCount = select('my-plugin/todos').getTodoCount();Ein Selektor sendet diese Daten jedoch nirgendwohin: Er legt sie lediglich offen und ermöglicht den Zugriff.
Selektoren können so viele Argumente erhalten, wie du brauchst, um genau auf den Zustand zuzugreifen. Der Wert, den er zurückgibt, ist das Ergebnis dessen, was diese Argumente innerhalb des von dir definierten Selektors erreichen. Wie bei den Aktionen kannst du alle deine Selektoren in einer separaten Datei speichern, da es sehr viele davon geben kann.
4. Steuerelemente
Um den Ausführungsfluss der Funktionen deiner Website zu steuern – oder die Logik darin auszuführen – verwendest du Steuerelemente. Diese definieren das Verhalten der Ausführungsabläufe für deine Aktionen. Betrachte sie als Assistenten im WordPress-Datenpaket, da sie als Vermittler fungieren, um den Status zu sammeln und an die Resolver zu übergeben.
Controls kümmern sich auch um Nebeneffekte in deinem Store, wie API-Aufrufe oder Interaktionen mit Browser-APIs. Mit ihnen kannst du die Reducer sauber halten und trotzdem komplexe asynchrone Operationen durchführen:
const controls = {
FETCH_TODOS: async () => {
const response = await fetch('/api/todos');
return response.json();
},
};
const actions = {
fetchTodos: () => ({ type: 'FETCH_TODOS' }),
};Dieser Zyklus des Abrufens und Zurückgebens von Daten ist für den gesamten Prozess entscheidend. Aber ohne den Aufruf einer Aktion kannst du diese Daten nicht nutzen.
5. Auflöser
Selektoren legen den Zustand eines Stores offen, senden diese Daten aber nicht explizit weiter. Resolver treffen auf Selektoren (und Steuerelemente), um die Daten abzurufen. Wie Steuerelemente können sie auch asynchrone Datenabrufe durchführen.
const resolvers = {
getTodos: async () => {
const todos = await controls.FETCH_TODOS();
return actions.receiveTodos(todos);
},
};Der Resolver stellt sicher, dass die angeforderten Daten im Store verfügbar sind, bevor ein Selektor ausgeführt wird. Diese enge Verbindung zwischen dem Resolver und dem Selektor bedeutet, dass die Namen übereinstimmen müssen. So kann das WordPress-Datenpaket erkennen, welchen Resolver es aufgrund der von dir angeforderten Daten aufrufen muss.
Außerdem erhält der Resolver immer dieselben Argumente, die du an eine Selektorfunktion übergibst, und er gibt auch Aktionsobjekte zurück, liefert sie aus oder sendet sie ab.
Fehlerbehandlung bei der Verwendung des WordPress-Datenpakets
Wenn du mit dem WordPress-Datenpaket arbeitest, musst du eine angemessene Fehlerbehandlung implementieren. Wenn du dich für asynchrone Operationen entscheidest, mit Full Stack Deployments arbeitest oder API-Aufrufe machst, ist dies sogar noch wichtiger.
Wenn du zum Beispiel Aktionen mit asynchronen Vorgängen ausführst, könnte ein try-catch-Block eine gute Option sein:
const StockUpdater = () => {
// Get the dispatch function
const { updateStock, setError, clearError } = useDispatch('my-app/stocks');
const handleUpdateStock = async (stockId, newData) => {
try {
// Clear any existing errors
clearError();
// Attempt to update the stock
await updateStock(stockId, newData);
} catch (error) {
// Dispatch an error action if something goes wrong
setError(error.message);
}
};
return (
<button onClick={() => handleUpdateStock('AAPL', { price: 150 })}>
Update Stock
</button>
);
};Bei Reduzierern kannst du mit Fehleraktionen umgehen und den Status aktualisieren:
const reducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
// ... other cases
case 'FETCH_TODOS_ERROR':
return {
...state,
error: action.error,
isLoading: false,
};
default:
return state;
}
};Wenn du Selektoren verwendest, kannst du eine Fehlerprüfung einbauen, um potenzielle Probleme zu behandeln und deine Komponenten auf Fehler zu überprüfen, bevor du die Daten verwendest:
const MyComponent = () => {
// Get multiple pieces of state including error information
const { data, isLoading, error } = useSelect((select) => ({
data: select('my-app/stocks').getStockData(),
isLoading: select('my-app/stocks').isLoading(),
error: select('my-app/stocks').getError()
}));
// Handle different states
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return (
<div className="error-message">
<p>Error loading stocks: {error.message}</p>
<button onClick={retry}>Try Again</button>
</div>
);
}
return (
<div>
{/* Your normal component render */}
</div>
);
};Die Funktionen useSelect und useDispatch geben dir viele Möglichkeiten, Fehler im WordPress-Datenpaket zu behandeln. Mit beiden Funktionen kannst du eigene Fehlermeldungen als Argumente übergeben.
Es ist eine gute Praxis, den Fehlerstatus bei der Erstkonfiguration zu zentralisieren und die Fehlergrenzen auf Komponentenebene zu halten. Die Verwendung einer Fehlerbehandlung für Ladezustände trägt ebenfalls dazu bei, dass dein Code klar und konsistent bleibt.
Wie du deinen WordPress-Datenspeicher in deine Website integrierst
Das WordPress-Datenpaket kann dir bei der Verwaltung von Zuständen eine Menge helfen. Es ist auch eine praktische Überlegung, wie du das alles zusammenbringen kannst. Schauen wir uns einen Börsenticker an, der Finanzdaten in Echtzeit anzeigt und aktualisiert.
Die erste Aufgabe besteht darin, einen Speicher für deine Daten zu erstellen:
import { createReduxStore, register } from '@wordpress/data';
const DEFAULT_STATE = {
stocks: [],
isLoading: false,
error: null,
};
const actions = {
fetchStocks: () => async ({ dispatch }) => {
dispatch({ type: 'FETCH_STOCKS_START' });
try {
const response = await fetch('/api/stocks');
const stocks = await response.json();
dispatch({ type: 'RECEIVE_STOCKS', stocks });
} catch (error) {
dispatch({ type: 'FETCH_STOCKS_ERROR', error: error.message });
}
},
};
const reducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case 'FETCH_STOCKS_START':
return { ...state, isLoading: true, error: null };
case 'RECEIVE_STOCKS':
return { ...state, stocks: action.stocks, isLoading: false };
case 'FETCH_STOCKS_ERROR':
return { ...state, error: action.error, isLoading: false };
default:
return state;
}
};
const selectors = {
getStocks: (state) => state.stocks,
getStocksError: (state) => state.error,
isStocksLoading: (state) => state.isLoading,
};
const store = createReduxStore('my-investing-app/stocks', {
reducer,
actions,
selectors,
});
register(store);Dabei wird ein Standardzustand eingerichtet, der Fehler- und Ladezustände sowie deine Aktionen, Reduzierer und Selektoren enthält. Sobald du diese definiert hast, kannst du den Store registrieren.
Die Daten des Stores anzeigen
Wenn du einen Store eingerichtet hast, kannst du eine React-Komponente erstellen, um die darin enthaltenen Informationen anzuzeigen:
import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
const StockTicker = () => {
const stocks = useSelect((select) => select('my-investing-app/stocks').getStocks());
const error = useSelect((select) => select('my-investing-app/stocks').getStocksError());
const isLoading = useSelect((select) => select('my-investing-app/stocks').isStocksLoading());
const { fetchStocks } = useDispatch('my-investing-app/stocks');
useEffect(() => {
fetchStocks();
}, []);
if (isLoading) {
return <p>Loading stock data...</p>;
}
if (error) {
return <p>Error: {error}</p>;
}
return (
<div className="stock-ticker">
<h2>Stock Ticker</h2>
<ul>
{stocks.map((stock) => (
<li key={stock.symbol}>
{stock.symbol}: ${stock.price}
</li>
))}
</ul>
</div>
);
};Diese Komponente enthält die Hooks useSelect und useDispatch (und andere), um den Datenzugriff, das Dispatching von Aktionen und die Verwaltung des Lebenszyklus der Komponente zu steuern. Außerdem legt sie benutzerdefinierte Fehler- und Ladezustandsmeldungen fest und enthält Code, um den Ticker anzuzeigen. Jetzt musst du die Komponente bei WordPress registrieren.
Registrierung der Komponente bei WordPress
Ohne die Registrierung in WordPress kannst du die von dir erstellten Komponenten nicht verwenden. Das bedeutet, dass du sie als Block registrieren musst, obwohl es auch ein Widget sein könnte, wenn du für klassische Themes entwirfst. In diesem Beispiel wird ein Block verwendet.
import { registerBlockType } from '@wordpress/blocks';
import { StockTicker } from './components/StockTicker';
registerBlockType('my-investing-app/stock-ticker', {
title: 'Stock Ticker',
icon: 'chart-line',
category: 'widgets',
edit: StockTicker,
save: () => null, // This will render dynamically
});Dieser Prozess folgt dem typischen Ansatz für die Registrierung von Blöcken in WordPress und erfordert keine besondere Implementierung oder Einrichtung.
Statusaktualisierungen und Nutzerinteraktionen verwalten
Sobald du den Block registriert hast, musst du die Benutzerinteraktionen und Echtzeitaktualisierungen verwalten. Dazu brauchst du einige interaktive Steuerelemente sowie benutzerdefiniertes HTML und JavaScript:
const StockControls = () => {
const { addToWatchlist, removeFromWatchlist } = useDispatch('my-investing-app/stocks');
return (
<div className="stock-controls">
<button onClick={() => addToWatchlist('AAPL')}>
Add Apple to Watchlist
</button>
<button onClick={() => removeFromWatchlist('AAPL')}>
Remove from Watchlist
</button>
</div>
);
};Für Echtzeitaktualisierungen kannst du in der React-Komponente ein Intervall einrichten:
useEffect(() => {
const { updateStockPrice } = dispatch('my-investing-app/stocks');
const interval = setInterval(() => {
stocks.forEach(stock => {
fetchStockPrice(stock.symbol)
.then(price => updateStockPrice(stock.symbol, price));
});
}, 60000);
return () => clearInterval(interval);
}, [stocks]);Auf diese Weise bleiben die Daten deiner Komponente mit deinem Store synchron, während gleichzeitig eine klare Trennung der Bereiche beibehalten wird. Das WordPress-Datenpaket kümmert sich um alle Statusaktualisierungen und sorgt so für Konsistenz in deiner Anwendung.
Server-seitiges Rendering
Schließlich kannst du ein serverseitiges Rendering einrichten, um sicherzustellen, dass die Bestandsdaten beim Laden der Seite aktuell sind. Dafür sind einige PHP-Kenntnisse erforderlich:
function my_investing_app_render_stock_ticker($attributes, $content) {
// Fetch the latest stock data from your API
$stocks = fetch_latest_stock_data();
ob_start();
?>
<div class="stock-ticker">
<h2>Stock Ticker</h2>
<ul>
<?php foreach ($stocks as $stock) : ?>
<li><?php echo esc_html($stock['symbol']); ?>: $<?php echo esc_html($stock['price']); ?></li>
<?php endforeach; ?>
</ul>
</div>
<?php
return ob_get_clean();
}
register_block_type('my-investing-app/stock-ticker', array(
'render_callback' => 'my_investing_app_render_stock_ticker'
));Dieser Ansatz bietet eine vollständige Integration deines Datenspeichers in WordPress, die vom ersten Rendering bis zu Echtzeitaktualisierungen und Nutzerinteraktionen alles abdeckt.
Zusammenfassung
Das WordPress-Datenpaket ist ein komplexer, aber robuster Weg, um Anwendungszustände für deine Projekte zu verwalten. Hinter den Schlüsselkonzepten verbirgt sich ein Kaninchenbau aus Funktionen, Operatoren, Argumenten und vielem mehr. Vergiss aber nicht, dass nicht alle Daten in einem globalen Speicher liegen müssen – der lokale Komponentenzustand hat immer noch einen Platz in deinem Code.
Wirst du das WordPress-Datenpaket regelmäßig nutzen oder hast du eine andere Methode, um deinen Status zu verwalten? Teile uns deine Meinung in den Kommentaren unten mit.
Steve Bonisteel is Technical Editor bij Kinsta. Hij begon zijn schrijverscarrière als verslaggever en achtervolgde ambulances en brandweerwagens. Sinds eind jaren negentig schrijft hij over internetgerelateerde technologie.
Schreibe einen Kommentar