PhantomWP Cheat Sheet

Dieses Cheat Sheet basiert auf den bereitgestellten Docs aus Docs_small.pdf und ist so aufgebaut, dass du möglichst schnell produktiv mit PhantomWP arbeiten kannst.

1. Was ist PhantomWP?

PhantomWP ist ein headless Site Builder, der deine WordPress-Seite in eine schnelle statische Astro-Seite verwandelt.

Du behältst:

Du bekommst zusätzlich:

Kurz gesagt

WordPress bleibt dein CMS.
PhantomWP baut daraus eine moderne statische Website.

2. Warum PhantomWP statt klassischem WordPress-Frontend?

Die Probleme von normalem WordPress

Laut Doku bringt klassisches WordPress oft diese Nachteile:

Was PhantomWP dagegen macht

PhantomWP generiert statische HTML-Dateien aus deinen WordPress-Inhalten.

Vorteile:

3. Für wen ist PhantomWP gedacht?

PhantomWP ist laut Doku ideal für:

4. Das Grundprinzip / der Workflow

Der Kern-Workflow ist extrem einfach:

  1. Content in WordPress schreiben
  2. Design und Frontend in PhantomWP/Astro bauen
  3. statisch deployen

Formel:

WordPress (Content) → PhantomWP (Build) → Astro Site (Deploy)

5. Was du in PhantomWP bekommst

5.1 Flexible Development Environments

Du kannst Projekte in drei Modi laufen lassen:

GitHub Codespaces

Docker Local Development

Fly.io Remote Containers

Wichtig

Alle drei Modi teilen sich laut Doku:

5.2 Web-Based IDE

Die IDE enthält:

5.3 WordPress Integration

Du kannst dein bestehendes WordPress nutzen zum:

5.4 Pre-Built Components

Component Library mit fertigen Sektionen, z. B.:

5.5 One-Click Deployment

Deployment auf Vercel mit:

6. Schnellstart in 5 Minuten

Voraussetzungen

Du brauchst nur:

Schritt 1: Account erstellen

  1. Zu PhantomWP gehen
  2. Get Started klicken
  3. Mit E-Mail registrieren
  4. Mail bestätigen

Schritt 2: GitHub verbinden

  1. Im Dashboard Connect GitHub Account
  2. GitHub-Zugriff autorisieren
  3. Zurück ins Dashboard

Wichtig

PhantomWP braucht GitHub-Zugriff, um:

Schritt 3: Erstes Projekt erstellen

  1. Create New Project
  2. Repo-Name eingeben, z. B. my-astro-site
  3. Public oder Private wählen
  4. Laufzeit wählen:
    • GitHub Codespace
    • Docker
    • Fly.io
  5. Starten:
    • Create & Launch Codespace
    • oder lokal / Fly.io

PhantomWP macht dann automatisch:

Dauer: ca. 3–4 Minuten

Schritt 4: IDE verstehen

Die wichtigsten Bereiche:

Bereich Zweck
File Tree (links) Dateien durchsuchen/verwalten
Code Editor (Mitte) Code bearbeiten
Live Preview (rechts) Änderungen sofort sehen
Header Bar (oben) Tools und Einstellungen

Schritt 5: Erste Änderung

  1. src/pages/index.astro öffnen
  2. <h1> suchen
  3. Text ändern
  4. Cmd/Ctrl + S

Die Preview aktualisiert sich sofort.

Schritt 6: Komponente einfügen

  1. Sections-Icon im Header klicken
  2. Sektion auswählen
  3. Vorschau ansehen
  4. Insert

Schritt 7: Deployen

Änderungen committen

  1. Git-Icon klicken
  2. Änderungen prüfen
  3. Commit-Message schreiben
  4. Commit & Push

Vercel einrichten

  1. Im Dashboard Projekt finden
  2. Setup Deployment
  3. Vercel-Token eingeben
  4. Repo verbinden

Danach wird jeder Push automatisch deployed.

7. Das Wichtigste zuerst: dein praktischer Minimal-Workflow

Wenn du sofort loslegen willst, dann arbeite erstmal nur so:

Workflow A: Neue Marketing-Seite bauen

  1. Projekt erstellen
  2. src/pages/index.astro anpassen
  3. Component Library öffnen
  4. Hero + Features + CTA einfügen
  5. Theme Studio öffnen
  6. Farben + Fonts setzen
  7. Git committen
  8. Vercel deployen

Workflow B: WordPress-Content headless nutzen

  1. WordPress verbinden
  2. Content-Typen auswählen
  3. Generate Pages
  4. src/lib/wordpress.ts nutzen
  5. Blog-Listing + Detailseiten bauen
  6. Media runterladen
  7. Deployen

8. IDE Cheat Sheet

8.1 Header Bar – was ist wo?

Die Toolbar ist laut Doku in Bereiche gegliedert:

Context & Status

Layout Panels

Design Tools

Git & Deploy

Navigation

8.2 File Tree – wichtigste Ordner

Ordner Zweck
src/pages/ Seiten / Routen
src/content/ Content / Blog-Inhalte
src/components/ wiederverwendbare Komponenten
src/layouts/ Layouts
public/ statische Assets
src/media/ optimierte Bilder

8.3 Editor-Funktionen

Der Editor bietet:

8.4 Wichtige Shortcuts

Speichern / Suchen / Formatieren

Aktion Mac Windows
Save Cmd+S Ctrl+S
Find Cmd+F Ctrl+F
Replace Cmd+H Ctrl+H
Go to Line Cmd+G Ctrl+G
Toggle Comment Cmd+/ Ctrl+/
Format Document Shift+Option+F Shift+Alt+F

Weitere wichtige

Aktion Mac Windows
Quick Open Cmd+P Ctrl+P
New File Cmd+N Ctrl+N
Save All Cmd+Option+S Ctrl+Alt+S
Close Tab Cmd+W Ctrl+W
Go to Symbol Cmd+Shift+O Ctrl+Shift+O

8.5 Preview

Die Preview:

9. Working with Files – Seiten, Komponenten, Blogposts, Layouts

9.1 Seiten erstellen

Wege

Templates

Formate

Layouts

9.2 URL-Mapping verstehen

Dateipfad URL
src/pages/index.astro /
src/pages/about.astro /about
src/pages/services/design.astro /services/design
src/pages/blog/my-post.mdx /blog/my-post

9.3 Komponenten erstellen

Ort: src/components/

Wege

Templates

Props-Beispiel

---
interface Props {
  title: string;
  description?: string;
}
const { title, description } = Astro.props;
---
<div class="card">
  <h3>{title}</h3>
  {description && <p>{description}</p>}
</div>

Verwendung

---
import Card from '../components/Card.astro';
---
<Card title="My Card" description="Card content here" />

9.4 Komponenten extrahieren

Im HTML Tree View:

  1. Element auswählen
  2. Rechtsklick
  3. Extract Component
  4. Namen eingeben

PhantomWP macht automatisch:

9.5 Blogposts erstellen

Ort: src/pages/blog/

Format: MDX

Frontmatter-Beispiel

---
title: "My Blog Post"
description: "A short description"
pubDate: 2024-01-15
author: "Your Name"
tags: ["tutorial", "astro"]
---
# Introduction
Write your content in Markdown...

Typische Frontmatter-Felder

Feld Zweck
title Titel
description SEO-Text
pubDate Veröffentlichungsdatum
author Autor
tags Tags
image Featured Image
draft true, um Post zu verstecken

9.6 Layouts erstellen

Ort: src/layouts

Beispiel

---
interface Props {
  title: string;
  description?: string;
}
const { title, description } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>{title}</title>
  <meta name="description" content={description} />
</head>
<body>
  <header></header>
  <slot />
  <footer></footer>
</body>
</html>

Nutzung

---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="My Page">
  <main>
    <!-- content -->
  </main>
</BaseLayout>

9.7 Dateien verwalten

Umbenennen

Doppeln

Verschieben

Löschen

Ordner anlegen

Suchen

10. Visual Editor / HTML Tree View

Der Visual Editor ist extrem nützlich, wenn du nicht alles direkt im Code suchen willst.

10.1 Öffnen

10.2 Was du dort siehst

Die Baumansicht zeigt:

10.3 Drei-Wege-Sync

Wenn du ein Element im Tree auswählst:

  1. Element wird in der Preview hervorgehoben
  2. Editor springt zur Code-Stelle
  3. Properties Panel zeigt bearbeitbare Eigenschaften

Das ist super zum Debuggen.

10.4 Eigenschaften bearbeiten

Classes

ID

Component Props

10.5 Drag & Drop

Du kannst HTML-Elemente und Komponenten umsortieren.

Nicht verschiebbar:

Beim Drop siehst du Indikatoren:

10.6 Context Menu im Tree

Mögliche Aktionen:

10.7 Beste Anwendung

Nutze den Tree besonders für:

11. Menu Builder

Mit dem Menu Builder erzeugst du wiederverwendbare Astro-Menü-Komponenten.

11.1 Öffnen

11.2 Layout des Builders

Bereich Zweck
links Menüliste + WordPress-Import
Mitte Quellen für Menüpunkte
rechts Menüstruktur + Einstellungen

11.3 Neues Menü erstellen

  1. New Menu
  2. Namen eingeben, z. B. Main

Dann entsteht z. B.:

11.4 Zwei Betriebsmodi

Auto-sync Mode

Empfohlen.

Manual Mode

11.5 Menüpunkte hinzufügen

Aus lokalen Seiten

Aus WordPress

11.6 Dropdowns bauen

Im Manual Mode:

  1. Parent-Item anlegen
  2. Child-Items darunter
  3. mit Indent einrücken

11.7 Menüstile

Optional:

11.8 WordPress-Menüs importieren

Wenn WordPress verbunden ist und dort Menüs definiert sind:

11.9 Speichern und nutzen

Beim Speichern passiert:

Nutzung im Layout

---
import MainMenu from '../components/menus/MainMenu.astro';
---
<header>
  <MainMenu />
</header>

12. Component Library

Die Component Library ist dein Beschleuniger für schnelles Bauen.

12.1 Öffnen

12.2 Tabs

Tab Zweck
Sections einzelne Sektionen nach Kategorie
Quick Start fertige Bundles für Seitentypen

12.3 Kategorien

12.4 Vorschau

Du kannst Sektionen ansehen mit:

Verfügbare Theme-Farben:

12.5 Einfügen

Einzelne Sektion

  1. auswählen
  2. previewen
  3. Insert Component

Mehrere Sektionen

  1. Checkboxen aktivieren
  2. Page View anschauen
  3. Insert All

Einfüge-Reihenfolge = Auswahl-Reihenfolge.

12.6 Quick Start Templates

Vorgefertigte Seiten-Bundles, z. B.:

Perfekt, wenn du in Minuten eine komplette Startseite brauchst.

12.7 Nach dem Einfügen anpassen

Typische Anpassungen:

12.8 AI dafür nutzen

Beispielprompts:

13. Media Manager

Bilder werden in PhantomWP sehr komfortabel verwaltet.

13.1 Zwei Wege

Media Library

Visuelle Galerie

File Tree

Dateibasierte Verwaltung

13.2 Optimierte und statische Medien

Pfad Zweck
src/media/ optimierte Bilder via Astro
public/ statische Dateien ohne Optimierung

src/media/ – empfohlen für Bilder

Vorteile:

public/

für z. B.:

13.3 Unterstützte Formate

13.4 Bilder einfügen

Hover auf Bild → Aktionen:

Eingefügter Code

---
import { Image } from 'astro:assets';
import heroImage from '../media/hero.jpg';
---
<Image src={heroImage} alt="hero" />

13.5 Drag & Drop in den Editor

Du kannst Bilder aus src/media/ direkt in den Code ziehen.
PhantomWP fügt dann Import + Image-Komponente automatisch ein.

13.6 Best Practices für Medien

Dateinamen

Gut:

Schlecht:

Ordnerstruktur

z. B.

Bildgrößen

Alt-Texte

14. Font Manager

Mit dem Font Manager installierst du Schriften aus Fontsource.

14.1 Öffnen

14.2 Kategorien

14.3 Features

14.4 Gewichte

Standardmäßig ausgewählt:

14.5 Installation

Add to Project installiert:

Wichtig:

14.6 Aktivierung

Nach Installation musst du die Schrift in Theme Studio auswählen:

  1. Theme Studio öffnen
  2. Typography-Bereich
  3. Font auswählen
  4. Apply Theme

PhantomWP macht dann automatisch:

14.7 Direkte Nutzung

<h1 class="font-heading text-4xl">Welcome</h1>
<p class="font-sans">Body text uses the sans font.</p>

14.8 Best Practices

15. Theme Studio

Hier definierst du das visuelle System deiner Seite.

15.1 Öffnen

15.2 Zweck

Theme Studio erstellt ein Tailwind-v4-theme.css mit Tokens für:

15.3 Aufbau

15.4 AI Theme Generation

Du kannst ein Theme mit Prompt erzeugen, z. B.:

AI erzeugt dann:

Wenn kein API-Key da ist, gibt es einen Fallback.

15.5 Presets

Es gibt 18 Preset-Themes, darunter:

Dark

Light

15.6 Farbgruppen

Token-Gruppen:

Jede Farbe hat zugehörige Tailwind-Utilities wie:

15.7 Light / Dark Mode

Jede Mode hat eigenes Token-Set.

Dark-Mode-Strategien

15.8 Typography

Verfügbare Font-Token:

Installierte Fonts erscheinen oben in den Dropdowns.

Standardfonts u. a.:

15.9 Spacing & Radius

Werden hauptsächlich als Referenz angezeigt.
Du nutzt im Code normale Tailwind-Klassen wie:

15.10 Gespeicherte Themes / Import / Export

Du kannst:

Wichtig:

15.11 Apply Theme

Beim Klick auf Apply Theme passiert:

  1. src/styles/theme.css wird geschrieben
  2. Font-Imports in BaseLayout.astro werden aktualisiert

15.12 Beispiel für Token-Nutzung

<section class="bg-surface p-8">
  <h2 class="font-heading text-3xl text-content">Welcome</h2>
  <p class="font-sans text-content-light">Body text with lighter color.</p>
  <button class="bg-primary text-white rounded-lg px-4 py-2 cursor-pointer hover:bg-primary-dark">
    Get Started
  </button>
</section>

16. Icon Manager

Für Lucide-Icons direkt in Astro-Komponenten.

16.1 Öffnen

16.2 Vorteile

16.3 Kategorien

z. B.:

16.4 Größen

Größe Klassen Pixel
Small w-4 h-4 16x16
Medium w-6 h-6 24x24
Large w-8 h-8 32x32

16.5 Farben

Optionen z. B.:

16.6 Import + Verwendung

Import

import ArrowRight from '@lucide/astro/icons/arrow-right';

Verwendung

<ArrowRight class="w-6 h-6" />

16.7 Beispiele

Basic

---
import Mail from '@lucide/astro/icons/mail';
---
<Mail class="w-5 h-5" />

Mit Farbe

<Check class="w-4 h-4 text-green-500" />

Icon Button

<button class="p-2 hover:bg-gray-100 rounded-lg cursor-pointer">
  <Settings class="w-5 h-5 text-gray-600" />
</button>

16.8 Accessibility

Bei Icon-only Buttons:

<button aria-label="Close menu" class="cursor-pointer">
  <X class="w-5 h-5" />
</button>

17. AI Assistant

Eines der stärksten Features in PhantomWP.

17.1 Zwei Modi

AI Chat Panel

für Gespräche, große Aufgaben, Projektänderungen

Inline AI

für schnelle lokale Code-Edits direkt im Editor

17.2 Modelle

Laut Doku u. a.:

Wichtig

Du musst eigene API-Keys hinterlegen für:

17.3 Extended Thinking

Für komplexe Aufgaben: Brain-Icon aktivieren.

17.4 Was die AI tun kann

Tools:

Approval

Diese brauchen Freigabe:

Optional:

17.5 Gute Beispielprompts

17.6 Eigene AI-Instruktionen

Datei:
docs/ai-instructions.md

Beispiel:

# AI Instructions
## Preferences
- Use TypeScript for all new files
- Follow the existing component patterns
- Use Tailwind CSS for styling
- Keep components small and focused

## Project Context
- This is a marketing site for a SaaS product
- The main colors are blue-600 and gray-900
- We use the Inter font family

17.7 Inline AI

AI Modify

Ausgewählten Code ändern

Shortcut:

AI Generate

Neuen Code am Cursor erzeugen

Shortcut:

Submit

Close

17.8 Tipps für bessere Resultate

Sei präzise

Schlecht:

Besser:

Kontext geben

Schlecht:

Besser:

Fehlertext mitgeben

z. B. vollständige Fehlermeldung kopieren

18. Claude Code CLI

Wenn du lieber im Terminal mit Claude arbeitest.

18.1 Vorteile

18.2 Terminal öffnen

18.3 Installation

Wenn nicht installiert:

18.4 Starten

claude

18.5 Typische Nutzungen

Code verstehen

Änderungen

Commands

18.6 Wichtige Commands

Command Zweck
/help Hilfe
/clear Verlauf leeren
/compact Gespräch komprimieren
/cost Token-Kosten
/plugin Plugins verwalten
/quit beenden

18.7 Ohne Permission Prompts

claude --dangerously-skip-permissions

Nur nutzen, wenn du wirklich bewusst volle Freigabe geben willst.

19. WordPress verbinden

Einer der wichtigsten Bereiche.

19.1 Öffnen

19.2 Verbindung herstellen

  1. WordPress-URL eingeben, z. B. https://yoursite.com
  2. Fetch
  3. PhantomWP erkennt /wp-json automatisch

19.3 Was danach sichtbar wird

19.4 Unterstützte Content-Typen

19.5 Search Index

Optional:

19.6 Media Download

Du kannst WordPress-Medien herunterladen nach:

Vorteile:

19.7 Generate Pages

Beim Klick auf Generate Pages entstehen u. a.:

Typ Generierte Dateien
Posts src/pages/blog/[slug].astro, src/pages/blog/index.astro
Pages src/pages/[slug].astro
Categories src/pages/category/[slug].astro, src/pages/category/index.astro
Tags src/pages/tag/[slug].astro, src/pages/tag/index.astro
Authors src/pages/author/[slug].astro, src/pages/author/index.astro
CPTs src/pages/{type}/[slug].astro, src/pages/{type}/index.astro

Zusätzlich:

20. WordPress Data Browser

Sehr hilfreich zum schnellen Arbeiten mit WP-Daten.

20.1 Öffnen

20.2 Tabs

20.3 Was du tun kannst

20.4 Typische Snippets

Feld Snippet
ID {post.id}
Title {post.title.rendered}
Slug {post.slug}
Content <div set:html={post.content.rendered} />
Excerpt {post.excerpt.rendered}
Date {new Date(post.date).toLocaleDateString()}
Link {post.link}
Featured Image {getFeaturedImageUrl(post)}
Author {getAuthor(post)?.name}

20.5 Code Examples

Es gibt komplette Beispiele für:

21. WordPress Content in Astro fetchen

21.1 Grundidee

WordPress bleibt das CMS.
Astro zieht Inhalte via REST API.

21.2 Der Client

PhantomWP generiert:
src/lib/wordpress.ts

Typische Funktionen:

const posts = await getPosts();
const post = await getPost('my-post-slug');
const pages = await getPages();
const categories = await getCategories();

21.3 Blog-Index-Beispiel

---
import { getPosts } from '../lib/wordpress';
import Layout from '../layouts/Layout.astro';
const posts = await getPosts({ perPage: 10 });
---
<Layout title="Blog">
  <h1>Latest Posts</h1>
  <ul>
    {posts.map(post => (
      <li>
        <a href={`/blog/${post.slug}`}>
          {post.title.rendered}
        </a>
      </li>
    ))}
  </ul>
</Layout>

21.4 Single-Post-Beispiel

---
import { getPost, getAllPosts } from '../lib/wordpress';
import Layout from '../layouts/Layout.astro';

export async function getStaticPaths() {
  const posts = await getAllPosts();
  return posts.map(post => ({
    params: { slug: post.slug },
  }));
}

const { slug } = Astro.params;
const post = await getPost(slug);
---
<Layout title={post.title.rendered}>
  <article>
    <h1 set:html={post.title.rendered} />
    <div set:html={post.content.rendered} />
  </article>
</Layout>

21.5 REST API liefert u. a.

Posts

Pages

Media

Taxonomies

Custom Post Types

wenn show_in_rest: true

Mit _embed verfügbar.

Beispiel:

const featuredImage = post._embedded?.['wp:featuredmedia']?.[0];

Helper:

import { getFeaturedImageUrl } from '../lib/wordpress';
const imageUrl = getFeaturedImageUrl(post, 'large');

21.7 SEO-Daten

Wenn WordPress Yoast oder Rank Math nutzt:

Yoast

const seoData = post.yoast_head_json;

Rank Math

const title = post.rank_math_title;
const description = post.rank_math_description;

21.8 Build-Time vs Runtime

Static Generation

empfohlen

---
const posts = await getPosts();
---

SSR

für sehr häufig aktualisierte Inhalte

---
// astro.config.mjs: output: 'server'
const posts = await getPosts();
---

21.9 Performance-Tipps

  1. _fields nutzen
  2. große Collections paginieren
  3. Responses cachen
  4. _embed nutzen

Beispiel:

const posts = await getPosts({
  perPage: 10,
  fields: ['id', 'slug', 'title', 'excerpt', 'date'],
  embed: true,
});

22. Bild-Optimierung für WordPress-Medien

PhantomWP hat einen zweistufigen Bild-Workflow.

22.1 Stage 1: IDE Download

Wenn du in den WP-Settings auf Download Media klickst:

  1. Bilder werden aus WordPress geladen
  2. Originale landen in src/media/cms/
  3. WebP-Versionen landen in public/media/cms/
  4. URL-Mapping wird aktualisiert

Das gibt dir sofort lauffähige Bilder in der Dev Preview.

22.2 Stage 2: Build-Time Sync

Vor jedem Production-Build läuft sync-media.

Er macht:

  1. Posts und Pages fetchen
  2. alle genutzten Bilder finden
  3. neue/geänderte Bilder laden
  4. responsive WebP-Varianten erzeugen
  5. Blur Placeholders erzeugen
  6. Mappings updaten

22.3 Responsive Größen

Typische Varianten:

22.4 Blur Placeholders

Für Featured Images werden kleine, unscharfe Vorschaubilder erzeugt.

Vorteil

Nicht für

22.5 Wichtige Dateien

22.6 Manuell ausführen

node scripts/sync-media.mjs

23. CDN Mode

Wenn WordPress bereits Bilder über CDN ausliefert.

Verwenden wenn:

Local Mode behalten wenn:

24. PhantomWP Connect Plugin

Sehr wichtig, wenn du mehr als read-only willst.

24.1 Wann brauchst du das Plugin?

Nicht zwingend, wenn du nur lesen willst.

Ja, wenn du willst:

24.2 Was das Plugin bringt

24.3 Installation

Empfohlen: aus der PhantomWP IDE

  1. WordPress-Icon
  2. Site-URL eingeben
  3. Install PhantomWP Connect plugin
  4. ZIP herunterladen
  5. in WP hochladen
  6. aktivieren
  7. einmal WP-Admin besuchen

Beim ersten Admin-Aufruf paart sich das Plugin automatisch.

24.4 Woran erkennst du, dass es klappt?

In WordPress Admin

In PhantomWP IDE

24.5 Was Full Access freischaltet

AI kann WordPress direkt ändern

Beispiele:

Visitor JWT Authentication

für Frontend-Routen wie:

Signed Writes

Jede schreibende Anfrage ist signiert.

24.6 Wichtige Endpunkte

Unter:
/wp-json/phantomwp/v1/

Auth

Scaffolding

Pairing

25. WooCommerce Setup

Die WooCommerce-Integration ist laut Doku alpha, aber funktional.

25.1 Voraussetzungen

25.2 Verbindung testen

Token-Endpunkt:

curl -X POST https://yoursite.com/wp-json/phantomwp/v1/auth/token \
  -H "Content-Type: application/json" \
  -d '{"username": "your-wp-username", "password": "your-wp-password"}'

Erwartet wird ein JSON mit:

25.3 In PhantomWP verbinden

Beim Erstellen:

Dann:

Danach

25.4 Produkte und Bilder synchronisieren

Sync Products & Images macht:

  1. Produktdaten downloaden
  2. Produktbilder lokal speichern
  3. Media Map erzeugen

Dateien:

25.5 Payments

Stripe

PayPal

Ohne Stripe/PayPal testen

In WooCommerce:

Dann kannst du den kompletten Checkout testen, ohne externe Zahlungsanbieter.

25.6 Relevante Env-Variablen

Automatisch in .env:

26. WooCommerce Store Features

Generierte Seiten

Architektur

Produktseiten

Cart

Checkout / Orders / Auth

Wichtige Daten-Dateien

Wichtige Helper

Produktdaten

WooCommerce Utilities

Cart

Auth

27. Docker Local Development

Wenn du lokal statt in Codespaces arbeiten willst.

27.1 Vorteile

27.2 Architektur

Im Browser läuft weiter phantomwp.com,
aber lokal laufen im Container:

27.3 Voraussetzungen

27.4 Erster Start

Im Dashboard:

Dann bekommst du einen docker run Befehl.

Beispiel:

docker run --name phantomwp-my-site \
  -p 14321:4321 \
  -p 14322:8080 \
  -v phantomwp-my-site:/app \
  -e PHANTOMWP_TOKEN=<your-token> \
  ghcr.io/phantomwp/local-dev:<release-tag>

27.5 Was der Container dann macht

27.6 Danach

Im Browser:

Die IDE verbindet sich auf:

27.7 Nützliche Docker-Kommandos

Start

docker start phantomwp-my-site

Stop

docker stop phantomwp-my-site

Logs

docker logs -f phantomwp-my-site

Kompletter Reset

docker stop phantomwp-my-site
docker rm phantomwp-my-site
docker volume rm phantomwp-my-site

27.8 Mit lokalem Ordner statt Volume

Optional kannst du /app auf einen echten lokalen Ordner mounten, damit du mit anderen Tools direkt auf Dateien zugreifen kannst.

27.9 Healthcheck

curl http://localhost:14322/health

28. Deployment zu Vercel

Der empfohlene Standard-Host.

28.1 Vorteile

28.2 Vercel verbinden

Token holen

  1. bei Vercel einloggen
  2. Settings
  3. Tokens
  4. Create Token
  5. kopieren

In PhantomWP

  1. Dashboard
  2. Projekt finden
  3. Setup Deployment
  4. Token einfügen
  5. Connect

28.3 Importieren

  1. GitHub-Repo wählen
  2. Team oder Personal Account
  3. Einstellungen prüfen
  4. Deploy

28.4 Standard Build Settings

28.5 Deploy auslösen

Wichtig:
Deployment passiert nicht automatisch beim Editieren.

Du musst:

  1. Änderungen machen
  2. Git-Icon
  3. Commit-Message
  4. Commit & Push

Dann baut Vercel automatisch.

28.6 Custom Domain

In Vercel:

DNS:

SSL:

28.7 Rollback

In Vercel Dashboard:

29. Deployment zu Cloudflare Workers

Alternative zu Vercel, besonders für server-mode Astro / API-Routes.

29.1 Voraussetzungen

Cloudflare API Token mit:

29.2 Ablauf

  1. Token erstellen
  2. Dashboard öffnen
  3. Cloudflare verbinden
  4. ggf. Account ID eintragen
  5. Projekt deployen

PhantomWP konfiguriert dabei:

29.3 Domains

Custom Domain aktuell über Cloudflare Dashboard verwalten.

30. WordPress Security / WordPress „offline“ nehmen

Extrem starkes Sicherheitsfeature.

30.1 Idee

Du blockierst öffentliche Zugriffe auf WordPress komplett,
erlaubst aber Requests mit dem Header:

X-PhantomWP-Secret

Dann kann:

30.2 Ablauf

Schritt 1

Secret Key in PhantomWP holen

Schritt 2

ModHeader im Browser installieren

Header setzen:

Schritt 3

Auf Server Requests ohne Header blockieren

30.3 Optionen

Cloudflare Worker

empfohlen

Cloudflare Access

nginx

Apache .htaccess

30.4 Testen

Ohne Header:

curl -I https://your-wordpress-site.com

Erwartet:

Mit Header:

curl -I -H "X-PhantomWP-Secret: YOUR_SECRET_KEY" https://your-wordpress-site.com

Erwartet:

30.5 Best Practices

31. Updating to RC.6

Falls du ein älteres PhantomWP-Projekt hast.

31.1 Wann relevant?

Nur für bestehende Projekte auf älteren Runtime-/Workspace-Versionen.

31.2 Codespace-Projekt updaten

  1. Projekt öffnen
  2. warten bis Codespace verbunden ist
  3. Toolbar: More → Infrastructure
  4. Update
  5. warten
  6. Tab reloaden

31.3 Docker-Projekt updaten

  1. Projekt öffnen
  2. Local run/start Dialog öffnen
  3. generierten Update-Command kopieren
  4. im Terminal ausführen
  5. Container neu starten lassen
  6. Editor neu öffnen

Wichtig:

31.4 Wenn altes Projekt instabil ist

Empfehlung:

Nicht kopieren:

32. Troubleshooting – ultrakompakt

32.1 Codespace startet nicht

32.2 Preview bleibt leer

32.3 Änderungen speichern nicht

32.4 WordPress verbindet nicht

32.5 AI funktioniert nicht

32.6 Media Upload schlägt fehl

32.7 Menü erscheint nicht

32.8 Component Library insert funktioniert nicht

32.9 Vercel Deploy-Problem: „Login Connection“

Wenn Vercel meldet, dass eine GitHub Login Connection fehlt:

32.10 Docker lokal wird nicht erkannt

33. Die 10 wichtigsten Tastenkombinationen / Sofort-Merker

  1. Save → Cmd/Ctrl + S
  2. Quick Open → Cmd/Ctrl + P
  3. Find → Cmd/Ctrl + F
  4. Replace → Cmd/Ctrl + H
  5. Go to Line → Cmd/Ctrl + G
  6. Format Document → Shift+Option+F / Shift+Alt+F
  7. AI Modify → Cmd/Ctrl + Shift + M
  8. AI Generate → Cmd/Ctrl + Shift + G
  9. Inline AI Submit → Cmd/Ctrl + Enter
  10. File Tree Search → /

34. Die 15 wichtigsten Dateien/Ordner, die du kennen solltest

Pfad Zweck
src/pages/ alle Seiten / Routen
src/pages/index.astro Startseite
src/pages/blog/ Blogposts
src/components/ wiederverwendbare Komponenten
src/components/menus/ Menüs
src/layouts/ Layouts
src/media/ optimierte Bilder
src/media/cms/ heruntergeladene WordPress-Bilder
public/ statische Dateien
src/lib/wordpress.ts WordPress-Client
src/styles/theme.css Theme Studio Output
src/config/menus.json Menü-Konfiguration
src/data/products.json WooCommerce Produktdaten
.env Verbindungs-/Secret-Konfiguration
astro.config.mjs Astro-Konfiguration

35. Meine empfohlene Lernreihenfolge für PhantomWP

Wenn du schnell fit werden willst, arbeite in dieser Reihenfolge:

Phase 1: Grundlagen

  1. Quick Start
  2. IDE Overview
  3. Working with Files
  4. Component Library
  5. Deploying to Vercel

Phase 2: Design-Workflow

  1. Visual Editor
  2. Media Manager
  3. Theme Studio
  4. Font Manager
  5. Icon Manager
  6. Menu Builder

Phase 3: AI-gestütztes Arbeiten

  1. AI Assistant
  2. Claude Code CLI

Phase 4: WordPress-Headless

  1. Connecting WordPress
  2. Browsing WordPress Data
  3. Fetching Content
  4. Image Optimization
  5. WordPress Security

Phase 5: E-Commerce / Advanced

  1. PhantomWP Connect Plugin
  2. WooCommerce Setup
  3. Store Features
  4. Docker Local Development
  5. Cloudflare Deployment

36. Mein empfohlenes „Sofort produktiv“-Setup

Wenn du heute damit starten willst, würde ich dir diesen Weg empfehlen:

Für einfache Unternehmens- oder Marketing-Site

  1. GitHub verbinden
  2. Projekt via Codespace erstellen
  3. index.astro öffnen
  4. Quick Start Template aus Component Library einfügen
  5. Theme Studio anwenden
  6. Menü im Menu Builder bauen
  7. Bilder via Media Manager hochladen
  8. Texte anpassen
  9. Commit & Push
  10. Vercel deployen

Für bestehende WordPress-Seite

  1. WordPress verbinden
  2. Content-Typen auswählen
  3. Generate Pages
  4. Media downloaden
  5. Blog-/Page-Templates prüfen
  6. Theme Studio anwenden
  7. Navigation bauen
  8. Deployen
  9. optional: WordPress Security aktivieren

Für WooCommerce-Shop

  1. WooCommerce Store Template wählen
  2. PhantomWP Connect Plugin installieren
  3. Pairing prüfen
  4. WooCommerce verbinden
  5. Produkte + Bilder syncen
  6. BACS aktivieren für Tests
  7. Cart/Checkout prüfen
  8. Deployen
  9. später Stripe/PayPal ergänzen

37. Ultrakurze „Merke dir das“-Zusammenfassung

Wenn du dir nur das Wichtigste merken willst:

Revision #2
Created 2026-06-29 11:31:37 UTC by art10m
Updated 2026-06-29 12:01:46 UTC by art10m