Zum Inhalt springen
themeforge
DE
EnglishDeutschEspañolFrançaisУкраїнськаРусский
Kostenlos starten
Menü
Kostenlos starten So funktioniert’s QuellenHTML Jede statische WebsiteClaude Websites von ClaudeChatGPT Websites von ChatGPTCursor Projekte aus CursorWebflow Webflow-WebsitesAlle Quellen → FunktionenWooCommerce-Shop Katalog, Produkt, Warenkorb, KasseMehrsprachige Website Polylang und WPMLFormulare und Einträge Einträge im Adminbereich gespeichert ThemeForge Doku Preise Anmelden
Attribut-Referenz KI-Generierung Erste Schritte Zugriff Quelle auf deiner Website Theme Reference

Erste Schritte

Diese Anleitung führt dich durch den gesamten Prozess: vom Erstellen eines Projekts in ThemeForge bis zu einer funktionierenden WordPress-Website mit bearbeitbaren Inhalten im Admin-Panel.

1. Projekt erstellen

  1. Melde dich bei ThemeForge an und geh zu Projekte
  2. Klick auf „Neues Projekt“ und gib die Quelladresse ein. Ist die Website nur ein Ordner oder ein Archiv (zum Beispiel von einer KI erzeugt), aktiviere stattdessen „Die Quelle wird auf der Website hochgeladen“ — siehe „Quelle auf deiner Website“.
  3. Konfiguriere die Projekteinstellungen: Theme-Name, Slug, einzuschließende Seiten
  4. Klick auf „Generieren" — ThemeForge erstellt eine ZIP-Datei mit deinem WordPress-Theme

Unterstützte Quellen

  • Webflow — füg deine .webflow.io- oder .webflow.com-URL ein. ThemeForge lädt alle Seiten und Assets automatisch herunter
  • Generisches HTML — jede statische Website mit HTML/CSS/JS/Bildern. Als ZIP hochladen oder URL angeben
  • KI-generiertes HTML — Websites, die aus Figma oder von KI-Assistenten mit bereits platzierten ThemeForge-Attributen generiert wurden

2. Theme installieren

  1. Lade die generierte ZIP-Datei von deiner Projektseite herunter
  2. Geh im WordPress-Admin zu Design → Themes → Neu hinzufügen → Theme hochladen
  3. Wähl die ZIP-Datei und klick auf Jetzt installieren
  4. Klick auf Aktivieren — dein Theme ist jetzt live

Wichtig: Dein Projekt muss eine Startseite (/) enthalten. Sie ist erforderlich für die Theme-Generierung.

Das Theme enthält automatisch eine 404-Fehlerseite und eine Suchergebnisseite — kein zusätzliches Setup nötig.

Was nach der Aktivierung passiert

  • Alle Seiten aus deinem Design werden als WordPress-Seiten erstellt
  • Benutzerdefinierte Felder erscheinen im Admin-Panel für jede Seite (nach Sektionen organisiert)
  • Das Theme-Einstellungs-Panel ist unter Design → Theme-Einstellungen verfügbar
  • CSS, JS, Bilder und Schriftarten aus deinem Design sind im Theme enthalten

Remote-Update (Alternative)

Statt eine ZIP herunterzuladen, kannst du die URL deiner WordPress-Website in den Projekteinstellungen eingeben. ThemeForge sendet das Theme direkt an deine WordPress-Installation.

3. Inhalte importieren

Nach der Theme-Installation musst du den Inhalt (Text, Bilder) aus deinem Design in WordPress importieren. ThemeForge speichert alle Inhalte aus deinem HTML in einer pages.json-Datei im Theme.

Import-Reihenfolge

Importiere immer in dieser Reihenfolge, damit Bilder verfügbar sind, wenn Textfelder sie referenzieren:

  1. Zuerst Bilder — lädt alle Bilder aus dem images/-Ordner des Themes in die WordPress-Mediathek hoch
  2. Dann Daten — füllt alle Textfelder, Links und Bildreferenzen für jede Seite
  3. Dann Menüs — erstellt WordPress-Navigationsmenüs mit allen Links aus deinem Design

Alles auf einmal importieren

Die Import-Buttons findest du im WordPress-Admin: Design → Theme-Einstellungen → Tab Admin-Panel. Dort sind zwei Buttons:

  1. „Medien laden" — lädt alle Bilder aus dem images/-Ordner des Themes in die WordPress-Mediathek hoch
  2. „Daten laden" — füllt alle Textfelder, Links und Bildreferenzen für alle Seiten auf einmal
  3. Für Menüs verwende die Import-Buttons auf der Seite Design → Menüs (siehe „Menüs importieren" unten)

Einzelne Seiten importieren

Jede Seite hat eigene Import-Buttons. Öffne eine Seite zur Bearbeitung in WordPress — in der Seitenleiste erscheint die Metabox „ThemeForge Import" (klicken zum Aufklappen). Zwei Buttons: „Daten laden" und „Medien laden". Der Import einer Seite beeinflusst keine anderen.

Besonders nützlich, wenn du eine einzelne Seite im Design aktualisiert hast und nur diese neu importieren möchtest.

Seitenweite Optionen importieren

Globale Einstellungen (Telefon, E-Mail, Logo) haben einen eigenen Import. Geh zu Design → Theme-Einstellungen → Optionen-Tab — die „ThemeForge Import"-Box erscheint in der Seitenleiste.

Menüs importieren

Geh zu Design → Menüs — dort erscheint „ThemeForge — Menüs aus HTML importieren". Einzeln oder alle auf einmal.

Import & Übersetzung für mehrere Sprachen

Bei Polylang hat jede Sprache eine eigene „Ebene" von Feldern. Beim Klick auf „Daten laden" auf einer übersetzten Seite wird der Originalinhalt aus dem Design in die Sprachfelder importiert. Dann kannst du mit dem integrierten Übersetzungshelfer übersetzen — „Übersetzen" neben jedem Feld oder „Alle übersetzen" für die ganze Seite. Alles direkt im WordPress-Admin.

Wie Webflow-Locales: Jede Sprache ist eine separate Ebene. Basisinhalt importieren, dann vor Ort übersetzen — Sprachfelder sind unabhängig.

4. Inhalte im Theme-Panel bearbeiten

Nach dem Import sind Inhalte über das Admin-Panel bearbeitbar. Das Theme generiert Felder für Elemente mit ThemeForge-Attributen. Wichtig: Nur Elemente innerhalb einer wp-fields-group-Sektion erhalten Admin-Felder — Elemente ohne wp-fields-group werden in PHP konvertiert, haben aber keine editierbaren Felder.

Wo du deine Inhalte findest

  • Seitenspezifische Felder — bearbeite eine Seite in WordPress, scroll unter den Editor. Felder sind nach Sektionen gruppiert
  • Seitenweite Optionen (Telefon, E-Mail, Logo) — Design → Theme-Einstellungen → Optionen-Tab
  • Theme-Konfiguration (Backend-Umschalter, Sicherheit, Erweiterungen) — Design → Theme-Einstellungen

Secure Custom Fields vs ACF Pro

Standardmäßig nutzt das Theme Secure Custom Fields — ein kostenloses WordPress.org-Plugin, das alle ACF-PRO-Feldtypen ohne Lizenz bietet. Du bevorzugst dein eigenes ACF PRO? Installiere es, das Theme verwendet es automatisch. Die Felddaten bleiben in beiden Fällen erhalten — kein Inhaltsverlust.

5. Mehrsprachigkeit (Optional)

Mehrsprachigkeit ist optional — dein Theme funktioniert perfekt ohne sie. Installiere bei Bedarf Polylang (kostenlos) oder WPML. Das Theme erkennt das Plugin automatisch.

Polylang einrichten

  1. Installiere und aktiviere Polylang unter WordPress → Plugins → Installieren
  2. Geh zu Sprachen → Einstellungen und füg deine Sprachen hinzu
  3. Das Theme erkennt Polylang automatisch und zeigt einen Sprachumschalter in den Theme-Einstellungen
  4. Öffne eine übersetzte Seite in WordPress, klick „Daten laden" im ThemeForge Import-Metabox, dann verwende die „Übersetzen"-Buttons für die Zielsprache

Integrierter Übersetzungshelfer

Das Theme enthält eine Ein-Klick-Übersetzungstaste im Admin-Panel. Wechsle die Sprache, klick „Übersetzen" — Google Translate erstellt einen Entwurf. Es gibt auch „Alle übersetzen".

6. Kompatible Plugins

ThemeForge generiert Standard-WordPress-Themes, die mit den meisten Plugins funktionieren.

Getestet und kompatibel

  • Yoast SEO / Rank Math — volle Kompatibilität
  • Cache-Plugins (WP Super Cache, W3 Total Cache, LiteSpeed Cache) — voll kompatibel
  • Polylang — tiefe Integration: Felder pro Sprache, Übersetzungshelfer, sprachbewusster Import
  • WPML — unterstützt: automatisch erkannt, Sprachfelder funktionieren korrekt
  • WooCommerce — volle Unterstützung: Produktseiten, Warenkorb, Kasse, Filter, variable Produkte
  • ACF Pro — native Unterstützung als alternatives Backend
  • Jedes andere WordPress-Plugin — das Theme ist ein Standard-WP-Theme, daher funktioniert jedes WordPress-Plugin damit

Integrierte Formulare

ThemeForge-Themes enthalten ein vollständiges Formularsystem — keine Drittanbieter-Plugins nötig. Features: SMTP-Versand, Telegram-Benachrichtigungen, reCAPTCHA v3, Anti-Spam, Auto-Antwort, clientseitige Validierung (JustValidate). Alle Einreichungen in WordPress gespeichert mit CSV-Export. Einstellungen: Theme-Einstellungen → Tab Erweiterungen.

7. Eigener Code & Geschützte Dateien

Möchtest du eigene PHP-Funktionen, CSS oder JavaScript hinzufügen? Es gibt zwei Möglichkeiten:

Code Snippets Plugin (empfohlen)

Installiere das Code Snippets Plugin — damit kannst du PHP, CSS und JS direkt aus dem WordPress-Admin hinzufügen. Snippets werden in der Datenbank gespeichert und überleben jedes Theme-Update.

Theme-Benutzerdateien

Das Theme enthält geschützte Dateien, die bei Updates nie überschrieben werden:

  • user-functions.php — eigene PHP-Funktionen
  • css/user.css — eigene CSS-Stile (nach Theme-CSS geladen)
  • js/user.js — eigenes JavaScript

Du kannst auch beliebige Dateien als geschützt markieren, indem du das wp_include-Attribut in deinem HTML verwendest. Diese werden in themeforge_protected.json gespeichert.

CSS-Ladereihenfolge: main.css (dein Design) → themeforge.css (generierte Überschreibungen) → user.css (deine Anpassungen). user.css gewinnt immer.

Diese Dateien bleiben bei normalen Updates erhalten. Bei vollständiger Neuinstallation (statt Update) können sie verloren gehen. Für kritische Anpassungen ist Code Snippets sicherer.

8. Backups

Regelmäßige Backups einrichten und vor kritischen Operationen eines erstellen: Massenimport, Backend-Wechsel, größere Theme-Updates.

Hosting-Backups

Die meisten Hosting-Anbieter bieten automatische tägliche Backups. Prüf dein Hosting-Panel (cPanel, Plesk, HestiaCP). Das ist deine erste Verteidigungslinie.

Backup-Plugins

  • UpdraftPlus — geplante Backups in die Cloud (Google Drive, Dropbox, S3)
  • Duplicator — vollständige Seiten-Snapshots, ideal für Migration
  • All-in-One WP Migration — einfacher Ein-Klick-Export/Import der gesamten Seite

Tipp: Richte automatische periodische Backups ein (täglich oder wöchentlich) und erstelle ein manuelles vor kritischen Operationen. Bei Problemen kannst du in Minuten wiederherstellen.