Blockchain trifft Naturschutz in WordPress

Die Herausforderung

Sylvester Rewilding ist ein deutscher gemeinnütziger Verein, der kollektiv verwaltete Wildtierreservate in ganz Europa aufbaut. Das Finanzierungsmodell ist ungewöhnlich: WildTokens, also NFTs, die eine Patenschaft über echtes Rewilding-Land abbilden. Wer kauft, spendet nicht nur, sondern erhält Mitspracherecht darüber, wie das Land renaturiert wird.

Die Rahmenbedingung: Sylvesters Team besteht aus Ökologen und Community-Organisatoren, nicht aus Blockchain-Entwicklern. Die Website läuft auf WordPress, und ein großer Teil der Zielgruppe hat noch nie ein Krypto-Wallet benutzt. Gleichzeitig steht und fällt das Finanzierungsmodell damit, dass sich ein Token-Kauf so selbstverständlich anfühlt wie jede andere Online-Bestellung.

Der Auftrag war entsprechend klar: ein WordPress-Plugin, über das jeder Blockchain-Token kaufen kann: die Unterstützerin mit Kreditkarte und der Krypto-erfahrene Käufer mit ETH, im selben Ablauf, mit demselben Ergebnis.

Der Ansatz

Blockchain-Technologie ist leistungsfähig, schreckt aber die meisten Menschen ab. WordPress ist das Gegenteil: allgemein vertraut, aber nie dafür gebaut, mit Smart Contracts zu kommunizieren. Das Plugin musste genau diese Lücke schließen.

Drei Prinzipien haben den Entwurf geleitet:

• Ein normales WordPress-Plugin: Installation wie bei jedem anderen Plugin. Einstellungsseite, Shortcodes, fertig. Keine Server-Konfiguration, keine Container, keine Kommandozeile.
• Kein Krypto-Wissen erforderlich: Social Logins, In-App-Wallets und klassische Kreditkartenzahlung sorgen dafür, dass Unterstützer nie mit Gas Fees oder Seed Phrases in Berührung kommen. Die Blockchain-Ebene bleibt im Hintergrund.
• Sylvester betreibt es eigenständig: Chain ID, Contract-Adresse und Token-Darstellung sind vollständig über wp-admin konfigurierbar. Das Team kann das Netzwerk wechseln, ohne einen Entwickler einzubinden.

Technische Umsetzung

React in WordPress

React in WordPress zu betreiben ist technisch möglich, aber notorisch fehleranfällig. Die Lösung: Vite kompiliert drei unabhängige React-Apps in ein einzelnes IIFE-Bundle, WordPress-Shortcodes liefern die Mounting Points:

• [rewilding_buy]: der Kaufprozess
• [rewilding_member]: das persönliche Dashboard
• [rewilding_connect]: ein eigenständiger Wallet-Button

Jede App prüft ihre Umgebung, bevor sie rendert: HTTPS, Contract-Konfiguration, Netzwerk-Erreichbarkeit. Stimmt etwas nicht, sehen Nutzer eine verständliche Erklärung statt einer leeren Komponente.

Das Styling läuft über Tailwind mit rw--Prefix und ist damit vollständig vom aktiven WordPress-Theme isoliert.

Thirdweb SDK als Web3-Schicht

Wallet-Management, Zahlungsabwicklung und Contract-Interaktionen von Grund auf zu entwickeln hätte Monate gedauert. Stattdessen setzt das Plugin auf thirdwebs SDK v5, das diese Ebenen zuverlässig abdeckt.

Fünf Wallet-Strategien laufen gleichzeitig über den ConnectButton:

• In-App-Wallets mit Social Login: Google, Apple, Facebook, E-Mail, Telefon
• MetaMask
• Coinbase Wallet
• WalletConnect
• MEW Wallet

Der Social-Login-Pfad ist der entscheidende für Nutzer ohne Krypto-Erfahrung. Jemand klickt auf „Mit Google anmelden”, und thirdweb legt im Hintergrund ein Wallet an. Die Person sieht nie eine Seed Phrase und installiert keine Browser-Erweiterung. Sie muss nicht einmal wissen, dass sie ein Wallet besitzt.

Fiat- und Krypto-Zahlungen

Das war das Feature, an dem alles hing. Thirdwebs PayEmbed-Komponente deckt beide Seiten ab:

• Kreditkarte: Währung auswählen, wie gewohnt bezahlen. Der Zahlungsanbieter übernimmt die Fiat-zu-Krypto-Konvertierung und mintet den Token on-chain.
• Krypto: direkt aus dem verbundenen Wallet zahlen.

Beide Wege führen zum selben Ergebnis: ein ERC-721 im Wallet des Käufers. Das Kauf-Widget zeigt den nächsten verfügbaren Token (Name, Bild und Attribute aus den On-Chain-Metadaten) und lässt Käufer die Menge wählen, bevor es zur Kasse geht.

Beide Optionen waren unverzichtbar, denn Sylvesters Community ist zweigeteilt: Krypto-erfahrene Unterstützer auf der einen Seite, auf der anderen Menschen, denen Naturschutz wichtig ist, die aber nie mit Ethereum in Berührung gekommen sind. Eine der beiden Hälften auszuschließen hätte das Modell zum Scheitern gebracht.

Der Mitgliederbereich

Nach dem Kauf wird der Mitgliederbereich zur zentralen Anlaufstelle. Er lädt alle NFTs des verbundenen Wallets und zeigt sie in einem Raster, jede Karte mit Token-Bild, Name und ID.

Übertragungen sind eingebaut: Ein Dialog validiert die Empfängeradresse und führt den ERC-721-transferFrom-Call mit sauberen Lade- und Fehlerzuständen aus.

Der Mitgliederbereich ist mehr als Portfolio-Verwaltung. Ein WildToken ist die Mitgliedskarte für Sylvesters Governance-Community, und das Dashboard macht das greifbar: was man hält, wofür es steht, und dass man Teil des Projekts ist.

Multi-Chain-Support

Das Plugin ist nicht an eine Chain gebunden. Die WordPress-Einstellungen bieten Ethereum, Base, Polygon, Arbitrum, Optimism, BNB Chain, Avalanche und mehrere Testnets an. Sylvester läuft aktuell auf Base wegen der niedrigen Transaktionsgebühren. Ein Umzug bedeutet, ein Dropdown zu ändern.

Unter der Haube lädt thirdwebs Wrapper Chain-Clients und Contracts lazy. Base und Polygon bringen statische Konfigurationen für schnelle Ladezeiten mit, alles andere wird dynamisch aufgelöst. Ein Chain-Wechsel erfordert weder Rebuild noch Redeployment.

WordPress-Admin-Integration

Das Plugin fügt eine „Rewilding Token”-Seite ins wp-admin ein, aufgeteilt in zwei Bereiche:

Thirdweb-Konfiguration: Client ID, aktive Chain und Contract-Adresse, ergänzt um eine Schritt-für-Schritt-Checkliste für das Anlegen eines thirdweb-Projekts, das Aktivieren von In-App-Wallets und das Whitelisten von Domains.

Token-Darstellung: Fallback-Name, Beschreibung und Bild-URL für den Fall, dass die On-Chain-Metadaten noch nicht geladen sind. So wirkt das Kauf-Widget bereits während der Ersteinrichtung fertig.

Alles baut auf WordPress’ nativer Settings API auf, mit sauberer Sanitization und Validierung. Die Shortcodes prüfen ihre Konfiguration im Hintergrund und zeigen Warnungen nur Admins an. Besucher sehen nie halbfertige Zustände.

Ergebnisse

Was eine ausufernde Web3-Individualentwicklung hätte werden können, läuft jetzt auf jeder WordPress-Installation:

• Karte und Krypto nebeneinander: kein Unterstützer wird durch seine bevorzugte Zahlungsart ausgeschlossen
• Kein Blockchain-Wissen nötig: Social Login und Kreditkarte räumen jede technische Hürde aus dem Weg
• Reines WordPress: installieren, im Admin konfigurieren, Shortcodes platzieren
• Chain-flexibel: das Netzwerk ist eine Einstellung, keine Architektur-Entscheidung
• Token frei übertragbar: Mitglieder können WildTokens weitergeben

In der Praxis: Eine Unterstützerin im ländlichen Galicien kauft einen WildToken mit Kreditkarte und Google-Account, während jemand in Berlin mit ETH aus MetaMask bezahlt. Beide landen in derselben Community und verwalten gemeinsam dasselbe Stück Rewilding-Land. Genau darum geht es in diesem Projekt.

Technischer Stack

• Plugin Runtime: WordPress (PHP) + React 18 (TypeScript)
• Build: Vite 6 (IIFE-Bundle)
• Web3: thirdweb SDK v5 (ERC-721, PayEmbed, In-App Wallets)
• Styling: Tailwind CSS 3 (prefixed, isoliert)
• Blockchain: Base (EVM-kompatibel, konfigurierbar)
• Zahlungen: Fiat über thirdweb Pay, Krypto über verbundene Wallets

Jede Entscheidung war bewusst, und bewusst langweilig, wo sie langweilig sein sollte. WordPress, weil Sylvester dort bereits zu Hause ist. React, weil thirdwebs SDK es voraussetzt. Vite, weil es ein einziges autarkes Bundle erzeugt, das WordPress wie jedes andere Script einbindet: keine Build-Server, keine CDN-Abhängigkeit, keine externe Runtime, die gepflegt werden muss.

Blockchain-Tooling in WordPress klingt nach einem Widerspruch. Genau dieser Widerspruch ist die These: Die beste Infrastruktur ist unsichtbar. Sylvesters Unterstützer „benutzen keine dApp”. Sie besuchen eine WordPress-Seite, die im Hintergrund NFTs mintet. So findet Blockchain ihren Platz im Naturschutz: indem sie sich aus dem Weg räumt.

Sie überlegen, ob Web3 zu Ihrem Produkt passt? Wir geben Ihnen eine klare Antwort. Sprechen Sie uns an.