PhantomWP

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:

Astro Cheat Sheet

Astro ist ein Web-Framework für content-driven websites, also vor allem:

Astro ist besonders bekannt für:

Kurz gesagt:

Wenn du eine Website willst, die viel Content anzeigt, schnell lädt und standardmäßig performant ist, ist Astro dafür gemacht.

2. Warum Astro?

Die Docs nennen als Grundideen:

  1. Content-driven
    Astro wurde gebaut, um Inhalte schnell zum Leser zu bringen.

  2. Server-first
    HTML wird bevorzugt auf dem Server gerendert.

  3. Fast by default
    Es soll möglichst schwer sein, mit Astro eine langsame Website zu bauen.

  4. Easy to use
    Wenn du HTML kannst, kannst du schon sehr viel mit Astro.

  5. Developer-focused
    Gute CLI, VS Code Support, TypeScript, Community, Doku.

3. Die wichtigsten Features auf einen Blick

Kern-Features

4. Astro mental model: So musst du Astro denken

Wenn du Astro schnell lernen willst, merke dir dieses Modell:

Astro ist standardmäßig:

Das heißt:

5. Astro vs typische SPA-Frameworks

Astro grenzt sich von klassischen SPA-Ansätzen ab.

SPA-Ansatz

Frameworks wie:

wurden laut Docs stark aus Richtung client-side rendering gedacht.

Astro-Ansatz

Astro setzt stärker auf:

Das bedeutet in der Praxis:

6. Islands Architecture verstehen

Das ist eines der wichtigsten Konzepte in Astro.

Grundidee

Die meisten Teile der Seite werden als statisches HTML gerendert.

Nur kleine interaktive Bereiche werden als Islands geladen.

Beispiel:

Vorteile

7. Was ist eine Island?

In Astro ist eine Island eine verbesserte UI-Komponente auf einer sonst statischen HTML-Seite.

Es gibt zwei Arten:

7.1 Client Island

Eine interaktive Komponente, die im Browser hydratisiert wird.

7.2 Server Island

Eine Komponente, deren serverseitige Berechnung separat und verzögert passiert.

8. Client Islands

Standardmäßig rendert Astro UI-Komponenten nur zu:

und entfernt Client-JS automatisch.

Interaktiv machen

Nutze eine client:* Direktive:

<MyReactComponent client:load />

Wichtige Client-Direktiven

Merksatz

Nur Komponenten mit client:* laufen im Browser.

9. Server Islands

Mit server:defer kannst du teure oder langsame serverseitige Komponenten aus dem Haupt-Renderprozess auslagern.

Beispiel:

---
import Avatar from "../components/Avatar.astro";
---
<Avatar server:defer />

Typische Anwendungsfälle

Vorteile

Fallback-Inhalt

Du kannst Fallback-Inhalte mit Slot "fallback" angeben:

<Avatar server:defer>
  <GenericAvatar slot="fallback" />
</Avatar>

10. Installation

Voraussetzungen

Schnellstart per CLI

npm create astro@latest

Danach:

cd dein-projekt
npm install
npm run dev

Mit Integrationen direkt beim Erstellen

npm create astro@latest -- --add react --add partytown

Mit Template

npm create astro@latest -- --template <example-name>

oder

npm create astro@latest -- --template <github-user>/<repo>

11. Manuelle Installation

1. Projektordner erstellen

mkdir my-astro-project
cd my-astro-project

2. package.json anlegen

npm init --yes

3. Astro installieren

npm install astro

4. Scripts in package.json

{
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}

5. Erste Seite erstellen

Pfad:

src/pages/index.astro

Beispiel:

---
console.log('This runs in your terminal, not the browser!');
---

<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

<style>
  h1 {
    color: orange;
  }
</style>

6. public/robots.txt

User-agent: *
Allow: /

7. astro.config.mjs

import { defineConfig } from "astro/config";
export default defineConfig({});

8. tsconfig.json

{
  "extends": "astro/tsconfigs/base"
}

12. Projektstruktur

Empfohlene Struktur:

src/
public/
package.json
astro.config.mjs
tsconfig.json

Wichtige Ordner

src/

Hier liegt dein Quellcode:

src/pages/

Pflichtordner.
Hier entstehen deine Routen.

src/components/

Wiederverwendbare Komponenten.

src/layouts/

Layouts für Seitenstrukturen.

src/styles/

CSS / Sass etc.

public/

Unverarbeitete Assets:

Wichtig:

Dateien in public/ werden nicht von Astro optimiert oder gebundelt.

13. Entwickeln und Build

Dev-Server starten

npm run dev

Standardmäßig unter:

http://localhost:4321/

Build

npm run build

Output standardmäßig in:

dist/

Preview des Builds

npm run preview

14. Astro-Komponenten

Astro-Komponenten sind die Grundbausteine.

Aufbau einer Astro-Komponente

---
// Component Script
---

<!-- Component Template -->

Component Script

Im Frontmatter (---) kannst du:

Beispiel:

---
import SomeAstroComponent from '../components/SomeAstroComponent.astro';
import SomeReactComponent from '../components/SomeReactComponent.jsx';
import someData from '../data/pokemon.json';

const { title } = Astro.props;
const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
---

Component Template

Darunter kommt dein HTML + Astro-Syntax.

15. Props in Astro-Komponenten

Beispiel:

---
const { greeting, name } = Astro.props;
---
<h2>{greeting}, {name}!</h2>

Verwendung:

<GreetingHeadline greeting="Hi" name="Astro" />

Mit TypeScript

---
interface Props {
  name: string;
  greeting?: string;
}

const { greeting = "Hello", name } = Astro.props;
---
<h2>{greeting}, {name}!</h2>

16. Slots

Slots sind Platzhalter für Kind-Inhalte.

Default Slot

Wrapper.astro

<div>
  <slot />
</div>

Verwendung:

<Wrapper>
  <p>Inhalt</p>
</Wrapper>

Named Slots

Komponente:

<div>
  <slot name="after-header" />
  <slot />
  <slot name="after-footer" />
</div>

Verwendung:

<Wrapper>
  <img slot="after-header" src="/header.jpg" />
  <p>Hauptinhalt</p>
  <p slot="after-footer">Footer-Text</p>
</Wrapper>

Fallback Content

<slot>
  <p>Fallback, wenn kein Inhalt übergeben wurde</p>
</slot>

17. Layouts

Layouts sind normale Astro-Komponenten für gemeinsame Seitenstruktur.

Typischer Inhalt:

Beispiel:

---
const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{title}</title>
  </head>
  <body>
    <nav>...</nav>
    <main>
      <slot />
    </main>
  </body>
</html>

Nutzung:

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout title="Home Page">
  <p>Mein Inhalt</p>
</MySiteLayout>

18. Routing

Astro verwendet file-based routing.

Beispiele

src/pages/index.astro        -> /
src/pages/about.astro        -> /about
src/pages/about/index.astro  -> /about
src/pages/about/me.astro     -> /about/me
src/pages/posts/1.md         -> /posts/1

Linking

Du nutzt normale HTML-Links:

<a href="/about/">About</a>

19. Dynamische Routen

Beispiel:

src/pages/dogs/[dog].astro

Dann brauchst du in statischem Modus getStaticPaths():

---
export function getStaticPaths() {
  return [
    { params: { dog: "clifford" } },
    { params: { dog: "rover" } },
    { params: { dog: "spot" } },
  ];
}

const { dog } = Astro.params;
---
<div>Good dog, {dog}!</div>

Mehrere Parameter

src/pages/[lang]-[version]/info.astro

Rest-Parameter

src/pages/sequences/[...path].astro

Beispiel:

---
export function getStaticPaths() {
  return [
    { params: { path: "one/two/three" } },
    { params: { path: "four" } },
    { params: { path: undefined } }
  ]
}
const { path } = Astro.params;
---

20. Redirects und Rewrites

Config-Redirects

In astro.config.mjs:

import { defineConfig } from "astro/config";

export default defineConfig({
  redirects: {
    "/old-page": "/new-page",
    "/blog": "https://example.com/blog"
  }
});

Mit Statuscode:

redirects: {
  "/old-page": {
    status: 302,
    destination: "/new-page"
  }
}

Dynamische Redirects

---
if (!isLoggedIn(cookie)) {
  return Astro.redirect("/login");
}
---

Rewrites

Mit Rewrite bleibt URL sichtbar, aber anderer Inhalt wird gezeigt.

---
return Astro.rewrite("/es/articles/introduction");
---

21. Page Partials

Partials sind Seiten in src/pages/, die keine vollständige HTML-Seite rendern.

Wichtig:

---
export const partial = true;
---
<li>I'm a partial!</li>

Geeignet für Libraries wie:

22. Pagination

Astro hat eingebaute Pagination.

Beispiel:

---
export function getStaticPaths({ paginate }) {
  const astronautPages = [
    { astronaut: "Neil Armstrong" },
    { astronaut: "Buzz Aldrin" },
    { astronaut: "Sally Ride" },
    { astronaut: "John Glenn" },
  ];

  return paginate(astronautPages, { pageSize: 2 });
}

const { page } = Astro.props;
---
<h1>Page {page.currentPage}</h1>
<ul>
  {page.data.map(({ astronaut }) => <li>{astronaut}</li>)}
</ul>

Wichtige page-Properties

23. Endpoints / API-Routen

Dateien in src/pages/ mit .js oder .ts können Endpoints sein.

Beispiel:

src/pages/builtwith.json.ts

export function GET() {
  return new Response(
    JSON.stringify({
      name: "Astro",
      url: "https://astro.build/",
    }),
  );
}

Dynamische Endpoints

src/pages/api/[id].json.ts

import type { APIRoute } from "astro";

const usernames = ["Sarah", "Chris", "Yan", "Elian"];

export const GET = (({ params }) => {
  const id = params.id;
  return new Response(JSON.stringify({
    name: usernames[id],
  }));
}) satisfies APIRoute;

HTTP-Methoden

Unterstützt:

24. Middleware

Mit Middleware kannst du Requests/Responses abfangen.

Datei:

src/middleware.ts

Beispiel:

export function onRequest(context, next) {
  context.locals.title = "New title";
  context.locals.property = "information";
  return next();
}

In Astro-Komponente:

---
const data = Astro.locals;
---
<h1>{data.title}</h1>
<p>{data.property}</p>

locals

context.locals dient zum Weitergeben request-spezifischer Daten.

Typische Verwendung:

Middleware typisieren

import { defineMiddleware } from "astro:middleware";

export const onRequest = defineMiddleware((context, next) => {
  return next();
});

Middleware chainen

import { sequence } from "astro:middleware";

export const onRequest = sequence(validation, auth, greeting);

25. Pages

Unterstützte Dateitypen in src/pages/:

404-Seite

src/pages/404.astro

500-Seite

src/pages/500.astro

500.astro erhält automatisch ein error-Prop.

26. HTML-Komponenten

.html-Dateien können importiert und benutzt werden.

Einschränkungen:

27. Styling in Astro

Astro macht CSS sehr einfach.

Lokale Styles

<style>
  h1 { color: red; }
</style>

Scoped Styles

Standardmäßig sind Styles gescoped.

Das bedeutet:

Globale Styles

<style is:global>
  h1 { color: red; }
</style>

Gemischt mit :global()

<style>
  h1 { color: red; }
  article :global(h1) {
    color: blue;
  }
</style>

28. class:list

Dynamische Klassen in Astro:

---
const { isRed } = Astro.props;
---
<div class:list={['box', { red: isRed }]}>
  <slot />
</div>

29. CSS-Variablen mit define:vars

---
const foregroundColor = "rgb(221 243 228)";
const backgroundColor = "rgb(24 121 78)";
---
<style define:vars={{ foregroundColor, backgroundColor }}>
  h1 {
    background-color: var(--backgroundColor);
    color: var(--foregroundColor);
  }
</style>

30. CSS importieren

Lokales Stylesheet

---
import '../styles/utils.css';
---

Aus npm

---
import 'package-name/styles.css';
---

Wenn keine Dateiendung verwendet wird, ggf. vite.ssr.noExternal setzen.

31. Tailwind mit Astro

Tailwind 4 hinzufügen

npx astro add tailwind

Dann in z. B. src/styles/global.css:

@import "tailwindcss";

Und in Layout/Page importieren:

---
import "../styles/global.css";
---

Legacy Tailwind 3

Für Tailwind 3 braucht man:

32. TypeScript in Astro

Astro hat eingebauten TypeScript-Support.

Wichtige Empfehlung

Verwende in tsconfig.json möglichst:

Typ-Checken

Der Dev-Server prüft Typen nicht vollständig.

Dafür:

astro check

oder im Build-Script:

{
  "scripts": {
    "build": "astro check && astro build"
  }
}

33. Props typisieren

---
interface Props {
  name: string;
  greeting?: string;
}
const { greeting = "Hello", name } = Astro.props;
---
<h2>{greeting}, {name}!</h2>

34. Nützliche Typ-Utilities

HTMLAttributes

Für HTML-Prop-Typen:

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"a">;
---

ComponentProps

Props einer anderen Komponente referenzieren:

---
import type { ComponentProps } from "astro/types";
import Button from "./Button.astro";

type ButtonProps = ComponentProps<typeof Button>;
---

Polymorphic

Für polymorphe Komponenten.

35. Environment Variables

Astro nutzt import.meta.env.

Beispiel .env

SECRET_PASSWORD=password123
PUBLIC_ANYBODY=there

Zugriff

import.meta.env.PUBLIC_ANYBODY
import.meta.env.SECRET_PASSWORD

Wichtiger Hinweis

.env-Dateien werden nicht in astro.config.mjs geladen.

Dort ggf. process.env oder loadEnv verwenden.

36. Type-safe env mit astro:env

Im Config-File:

import { defineConfig, envField } from "astro/config";

export default defineConfig({
  env: {
    schema: {
      API_URL: envField.string({
        context: "client",
        access: "public",
        optional: true
      }),
      PORT: envField.number({
        context: "server",
        access: "public",
        default: 4321
      }),
      API_SECRET: envField.string({
        context: "server",
        access: "secret"
      }),
    }
  }
});

Verwendung:

import { API_URL } from "astro:env/client";
import { API_SECRET } from "astro:env/server";

37. Integrationen

Integrationen erweitern Astro.

Offizielle Integrationen

Frameworks

Adapter

Weitere

Integration automatisch hinzufügen

npx astro add react

Mehrere:

npx astro add react sitemap partytown

Manuelle Konfiguration

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  integrations: [sitemap()]
});

38. Frontend-Frameworks mit Astro

Du kannst React, Vue, Svelte etc. direkt verwenden.

Statisches Rendering

---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<MyReactComponent />

Standardmäßig rendert Astro das als statisches HTML.

Interaktiv machen

<MyReactComponent client:load />

Mehrere Frameworks mischen

---
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

Wichtig:

Nur .astro-Dateien dürfen mehrere Frameworks mischen.

39. Props und Children an Framework-Komponenten

Props übergeben:

<TodoList initialTodos={["learn Astro", "review PRs"]} />

Unterstützte serialisierbare Prop-Typen

Nicht unterstützt für Hydration:

Children übergeben

<MyReactSidebar>
  <p>Sidebar Content</p>
</MyReactSidebar>

Named Slots an Framework-Komponenten

Geht ebenfalls.

40. Scripts in Astro

Client-Script in Astro-Komponente

<button data-confetti-button>Celebrate!</button>

<script>
  import confetti from 'canvas-confetti';

  const buttons = document.querySelectorAll('[data-confetti-button]');
  buttons.forEach((button) => {
    button.addEventListener('click', () => confetti());
  });
</script>

Was Astro mit <script> macht

Standardmäßig, wenn keine zusätzlichen Attribute vorhanden sind:

Unprocessed Script

Wenn du ein Attribut hinzufügst oder is:inline setzt, dann wird Astro das Script nicht verarbeiten:

<script is:inline>
  console.log("raw script");
</script>

41. Typische Script-Muster

Event Handling

In Astro kein React-onClick={}.

Stattdessen:

<button class="alert">Click me!</button>
<script>
  const buttons = document.querySelectorAll('button.alert');
  buttons.forEach((button) => {
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  });
</script>

Frontmatter-Werte an Script übergeben

Über data-* Attribute:

---
const { message = 'Welcome, world!' } = Astro.props;
---
<astro-greet data-message={message}>
  <button>Say hi!</button>
</astro-greet>

42. Markdown

Astro unterstützt Markdown nativ.

.md in src/pages/

wird automatisch zu einer Seite.

Markdown-Layout über Frontmatter

---
layout: ../layouts/BlogPostLayout.astro
title: My Markdown page
---
# Title
This is my page, written in **Markdown.**

Wichtig

Wenn du ein Layout nutzt, musst du in diesem Layout selbst setzen:

<meta charset="utf-8">

43. Content Collections

Für strukturierte Inhalte ist das eine der wichtigsten Astro-Funktionen.

Ideal für:

Vorteile

44. Content Collections definieren

Datei:

src/content.config.ts

Beispiel:

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const blog = defineCollection({
  loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
  }),
});

export const collections = { blog };

45. Collections abfragen

Ganze Collection

---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
---

Einzelnen Entry

---
import { getEntry } from 'astro:content';
const post = await getEntry('blog', 'post-1');
---

Sortieren

---
const posts = (await getCollection('blog')).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
---

Filtern

---
const publishedBlogEntries = await getCollection('blog', ({ data }) => {
  return data.draft !== true;
});
---

46. Content rendern

Nach dem Query:

---
import { getEntry, render } from "astro:content";

const entry = await getEntry("blog", "post-1");
if (!entry) throw new Error("Entry not found");

const { Content } = await render(entry);
---
<h1>{entry.data.title}</h1>
<Content />

47. Referenzen in Collections

Beispiel: Blogpost referenziert Autor.

import { defineCollection, reference } from "astro:content";
import { z } from "astro/zod";

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    author: reference("authors"),
    relatedPosts: z.array(reference("blog")),
  }),
});

48. Dynamische Seiten aus Collections generieren

Static Build mit getStaticPaths()

---
import { getCollection, render } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { id: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---
<h1>{post.data.title}</h1>
<Content />

49. Daten fetchen

Direkt in Astro

---
const response = await fetch("https://randomuser.me/api/");
const data = await response.json();
const randomUser = data.results[0];
---
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

In Framework-Komponenten

Geht auch, aber beachte Server/Client-Kontext.

GraphQL

Auch via fetch().

50. On-demand Rendering / SSR

Standardmäßig baut Astro statische Seiten.

Wenn du SSR brauchst:

  1. Adapter installieren
  2. bei einzelner Route:
---
export const prerender = false;
---

Dann wird die Route on demand gerendert.

Komplettes Projekt server-first

In Config:

output: "server"

Dann sind standardmäßig alle Seiten SSR.

Einzelne Seiten kannst du statisch machen mit:

---
export const prerender = true;
---

51. Cookies, Request, Response im SSR

Cookies

---
let counter = 0
if (Astro.cookies.has('counter')) {
  const cookie = Astro.cookies.get('counter')
  const value = cookie?.number()
  if (value !== undefined && !isNaN(value)) counter = value + 1
}
Astro.cookies.set('counter', String(counter))
---
<h1>Counter = {counter}</h1>

Response

---
Astro.response.status = 404;
Astro.response.statusText = 'Not found';
---

Headers setzen

---
Astro.response.headers.set('Cache-Control', 'public, max-age=3600');
---

Request auslesen

---
const cookie = Astro.request.headers.get('cookie');
console.log(Astro.request.method);
---

52. Sessions

Sessions sind für serverseitig gespeicherten Request-/User-State.

Typische Use-Cases:

Beispiel

---
const cart = await Astro.session?.get('cart');
---
<a href="/checkout">🛒 {cart?.length ?? 0} items</a>

Session setzen in API oder Middleware

Geht über context.session.

53. Actions

Actions sind type-safe Backend-Funktionen für Client-Server-Kommunikation.

Sie reduzieren Boilerplate gegenüber klassischen API-Routes.

Definieren

Datei:

src/actions/index.ts

Beispiel:

import { defineAction } from 'astro:actions';
import { z } from 'astro/zod';

export const server = {
  getGreeting: defineAction({
    input: z.object({
      name: z.string(),
    }),
    handler: async (input) => {
      return `Hello, ${input.name}!`
    }
  })
}

Aufrufen

<script>
  import { actions } from 'astro:actions';

  async function run() {
    const { data, error } = await actions.getGreeting({ name: "Houston" });
    if (!error) alert(data);
  }
</script>

Form-Daten akzeptieren

comment: defineAction({
  accept: 'form',
  input: z.object({...}),
  handler: async (input) => { ... }
})

Fehlerbehandlung mit ActionError

import { ActionError } from "astro:actions";

throw new ActionError({
  code: "UNAUTHORIZED",
  message: "User must be logged in."
});

54. Prefetch

Astro kann Seiten vorladen.

Aktivieren

import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: true
});

<a href="/about" data-astro-prefetch>About</a>

Strategien

Beispiel:

<a href="/about" data-astro-prefetch="tap">About</a>

prefetch: {
  prefetchAll: true
}

Opt-out pro Link:

<a href="/about" data-astro-prefetch="false">About</a>

55. View Transitions

Mit Astro kannst du Übergänge zwischen Seiten animieren.

Aktivieren

---
import { ClientRouter } from "astro:transitions";
---
<ClientRouter />

Meist in einem gemeinsamen Layout/Head.

Wichtige Direktiven

Built-in Animationen

Beispiel:

<main transition:animate="slide">
  ...
</main>

Persistente Elemente

<video controls muted autoplay transition:persist>

oder für Island:

<Counter client:load transition:persist initialCount={5} />

56. i18n Routing

Astro hat eingebaute i18n-Routing-Funktionen.

Grundkonfiguration

import { defineConfig } from "astro/config"

export default defineConfig({
  i18n: {
    locales: ["es", "en", "pt-br"],
    defaultLocale: "en",
  }
})

Lokalisierte Ordner

src/pages/es/about.astro
src/pages/en/about.astro

prefixDefaultLocale

57. Bilder

Astro bietet starke Bildunterstützung.

Empfohlen: Bilder in src/

Dann kann Astro sie optimieren.

Image-Komponente

---
import { Image } from 'astro:assets';
import myImage from '../assets/my_image.png';
---
<Image src={myImage} alt="Beschreibung" />

Picture-Komponente

---
import { Picture } from 'astro:assets';
import myImage from '../assets/my_image.png';
---
<Picture src={myImage} formats={['avif', 'webp']} alt="Beschreibung" />

HTML-img

Auch möglich, aber ohne Optimierung:

<img src="/images/public-cat.jpg" alt="A sleeping cat.">

Remote Images authorisieren

export default defineConfig({
  image: {
    domains: ["astro.build"],
  }
});

oder:

export default defineConfig({
  image: {
    remotePatterns: [{ protocol: "https" }],
  }
});

58. SVGs

SVG-Dateien können als Astro-Komponenten importiert werden.

---
import Logo from './path/to/svg/file.svg';
---
<Logo />

Mit Props:

<Logo width={64} height={64} fill="currentColor" />

59. Syntax Highlighting

Astro unterstützt standardmäßig:

Markdown-Codeblöcke

Standardmäßig mit Shiki und Theme github-dark.

Theme setzen

import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: 'dracula',
    },
  },
});

Light/Dark Themes

export default defineConfig({
  markdown: {
    shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark',
      },
    },
  },
});

<Code />

---
import { Code } from 'astro:components';
---
<Code code={`const foo = 'bar';`} lang="js" />

<Prism />

Erfordert Installation:

npm install @astrojs/prism

Dann:

---
import { Prism } from '@astrojs/prism';
---
<Prism lang="js" code={`const foo = 'bar';`} />

60. Dev Toolbar

Astro hat eine eingebaute Dev Toolbar im Browser.

Built-in Apps

Deaktivieren pro Projekt

import { defineConfig } from "astro/config";

export default defineConfig({
  devToolbar: {
    enabled: false
  }
});

61. Editor-Setup

Empfohlen: VS Code

Offizielle Astro VS Code Extension mit:

Weitere unterstützte Editoren laut Docs:

62. Nützliche Tools

ESLint

Community Plugin.

Stylelint

Community-Konfiguration.

Biome

Experimenteller Support für .astro.

Prettier

Mit Astro Plugin:

npm install --save-dev --save-exact prettier prettier-plugin-astro

.prettierrc:

{
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

Formatieren:

npx prettier . --write

63. Häufige Fehler / Gotchas

„document/window is not defined“

Du greifst serverseitig auf Browser-APIs zu.

Lösung:

Komponente rendert nicht

Check:

Komponente ist nicht interaktiv

Wahrscheinlich fehlt client:*.

<head> in Komponenten

Astro verschiebt <head> nicht automatisch nach oben.
Am besten nur ein zentrales <head> im Layout.

64. Wichtige Best Practices

1. Denke zuerst in HTML

Astro ist HTML-first. Nutze diese Stärke.

2. So wenig Client-JS wie möglich

Füge client:* nur dort hinzu, wo wirklich Interaktivität nötig ist.

3. Nutze Layouts

Zentrale Struktur in Layouts halten.

4. Nutze Content Collections für strukturierte Inhalte

Für Blogs, Docs, Produkte etc. fast immer sinnvoll.

5. Nutze src/ für Bilder

Damit Astro optimieren kann.

6. Halte globale Styles minimal

Scoped Styles bevorzugen.

7. Bleib erstmal im static-Modus

Nur auf output: "server" wechseln, wenn wirklich viele SSR-Seiten nötig sind.

8. Nutze astro add

Integrationen lieber mit CLI hinzufügen statt manuell.

9. TypeScript auch dann nutzen, wenn du „kein TS magst“

Schon allein für:

10. Performance zuerst

Astros größter Vorteil ist Performance. Verspiel ihn nicht mit unnötigen Client-Bundles.

65. Schnellstart-Workflow für echte Projekte

Wenn du morgen ein Astro-Projekt bauen willst, arbeite am besten so:

Für Blog / Doku / Content-Seite

  1. Projekt erstellen

    npm create astro@latest

  2. Dev-Server starten

    npm run dev

  3. Layout anlegen

    • src/layouts/Layout.astro

  4. Seiten anlegen

    • src/pages/index.astro
    • src/pages/about.astro

  5. Styles global + scoped kombinieren

    • src/styles/global.css
    • pro Komponente <style>

  6. Content Collection einrichten

    • src/content.config.ts
    • src/content/blog/*.md

  7. Blog-Liste mit getCollection()

  8. Blog-Detailseiten per dynamischer Route

  9. Bilder mit <Image />

  10. Nur notwendige interaktive Komponenten per client:*

Für Marketing-Website

  1. Astro installieren
  2. Layout + Sections als Komponenten
  3. Bilder optimieren
  4. wenn nötig:
    • React/Svelte-Komponente für Slider, Modal, Formular
  5. prefetch aktivieren
  6. bei Bedarf View Transitions aktivieren

Für E-Commerce / dynamischere Seite

  1. Astro + Adapter
  2. statische Teile prerendern
  3. personalisierte Teile als server:defer
  4. API-Routes / Actions für Warenkorb / Checkout
  5. Sessions für Cart/User-State
  6. SSR nur dort, wo wirklich nötig

66. Die wichtigsten Astro-Dateien im Alltag

Fast immer relevant

Oft relevant

67. Mini-Referenz: Was verwende ich wofür?

Ich will eine Seite erstellen

→ src/pages/*.astro

Ich will gemeinsame Struktur

→ src/layouts/*.astro

Ich will Wiederverwendung

→ src/components/*.astro

Ich will Markdown-Blogposts

→ Content Collections + src/content/

Ich will React-Komponente einbauen

→ @astrojs/react + Import in .astro

Ich will Interaktivität

→ client:*

Ich will SSR

→ Adapter + export const prerender = false

Ich will serverseitig dynamische Teilbereiche

→ server:defer

Ich will API-Routen

→ src/pages/api/*.ts

Ich will Form-Handling modern und type-safe

→ Actions

Ich will User-State serverseitig

→ Sessions

Ich will Auth / Request-Kontext

→ Middleware + locals

Ich will Bilder optimieren

→ <Image /> / <Picture />

68. Die 20 wichtigsten Dinge, die du dir merken solltest

  1. Astro ist für content-driven websites gebaut.
  2. Standardmäßig ist Astro server-first.
  3. Standardmäßig sendet Astro kein unnötiges Client-JS.
  4. Interaktive Komponenten brauchen client:*.
  5. Kleine dynamische Server-Bereiche gehen mit server:defer.
  6. Routing ist dateibasiert.
  7. src/pages/ ist Pflicht.
  8. Astro-Komponenten sind .astro.
  9. Props kommen aus Astro.props.
  10. Kind-Inhalte kommen über <slot />.
  11. Styles sind standardmäßig scoped.
  12. Content Collections sind der Standard für strukturierte Inhalte.
  13. Bilder möglichst in src/ lagern.
  14. Optimierte Bilder mit <Image /> oder <Picture />.
  15. Für SSR brauchst du einen Adapter.
  16. Für Cookies/Headers/Request musst du SSR oder on-demand nutzen.
  17. Actions sind oft besser als klassische API-Routen für Form- und Client-Server-Calls.
  18. TypeScript bringt dir in Astro sehr viel, auch wenn du wenig TS schreibst.
  19. Markdown kann direkt Seiten erzeugen oder über Collections geladen werden.
  20. Astro ist am stärksten, wenn du so wenig JS wie möglich in den Browser schickst.

PhantomWP im Detail: Was du damit machen kannst, ob dynamische Websites möglich sind, und wie es sich im Vergleich zu Bricks Builder und Divi verhält

Wenn du bisher mit Bricks Builder oder Divi arbeitest und dir PhantomWP anschaust, dann ist die wichtigste Erkenntnis gleich am Anfang:

PhantomWP ist kein klassischer WordPress Page Builder.
Es ist eher eine Headless-/Static-Site-Plattform auf Basis von Astro, die WordPress als Content-Backend nutzen kann.

Das bedeutet: Du bewegst dich bei PhantomWP in einer anderen Architekturklasse als bei Bricks oder Divi.

Bricks und Divi sind in erster Linie Werkzeuge, mit denen du direkt im WordPress-Frontend bzw. innerhalb des WordPress-Themes Seiten baust.
PhantomWP trennt dagegen stärker:

Dadurch entstehen andere Stärken, andere Grenzen und auch ein anderer Workflow.

1. Was ist PhantomWP überhaupt?

PhantomWP ist laut Doku ein System, mit dem du Websites auf Basis von Astro bauen kannst, während du WordPress als CMS weiterverwendest.

Die Grundidee ist:

Im Kern ist PhantomWP also interessant für alle, die:

2. Was kann man mit PhantomWP alles machen?

Die kurze Antwort ist:

Du kannst damit sehr viele moderne Websites bauen — vor allem schnelle Content-, Marketing- und Headless-Websites — und je nach Setup auch dynamische Funktionen integrieren.

Damit das greifbar wird, schauen wir uns das nach Kategorien an.

2.1 Klassische Unternehmenswebsites

PhantomWP ist sehr gut geeignet für:

Typische Inhalte:

Warum das gut passt:

Genau dort spielt PhantomWP seine Stärken aus.

2.2 Landingpages und Marketing-Seiten

Das ist wahrscheinlich einer der stärksten Anwendungsfälle.

Du kannst damit bauen:

Vorteile dabei:

Wenn du Performance und saubere Auslieferung priorisierst, ist PhantomWP hier oft deutlich attraktiver als ein schweres Page-Builder-Setup in WordPress.

2.3 Blogs und Magazine

Mit WordPress als Backend und PhantomWP als Frontend kannst du sehr gut bauen:

Typische Features:

Da WordPress in der Redaktion weiterhin vertraut bleibt, ist das für viele Teams attraktiv:

2.4 Dokumentation, Resource Center, Wissensseiten

Wenn Inhalte strukturiert sind, eignet sich PhantomWP ebenfalls gut für:

Hier kannst du WordPress als redaktionelle Quelle einsetzen oder Inhalte direkt im Projekt strukturieren.

2.5 Portfolios und Showcase-Websites

Sehr gut geeignet für:

Gerade hier hilft die Kombination aus:

2.6 Headless WordPress-Websites

Das ist eigentlich die Kernidee.

PhantomWP kann WordPress anbinden und Inhalte per REST API nutzen, z. B.:

Das bedeutet:

Das ist besonders spannend, wenn du WordPress magst, aber Theme-/Plugin-/Template-Chaos reduzieren willst.

2.7 WooCommerce-Headless-Shops

Ja, laut Doku geht auch das — mit der wichtigen Einschränkung:

Die WooCommerce-Integration ist vorhanden, aber als alpha beschrieben.

Möglich sind laut Doku u. a.:

Das ist also deutlich mehr als „nur statische Produktseiten“.

Aber: Für einen produktiven, umsatzkritischen Shop würde ich aktuell sehr genau prüfen:

Für experimentelle oder frühe Headless-Woo-Projekte kann das sehr spannend sein. Für hochkritische, komplexe Commerce-Projekte würde ich konservativer evaluieren.

3. Kann man mit PhantomWP auch dynamische Websites bauen?

Kurze Antwort

Ja — aber nicht im selben Sinn wie bei klassischem WordPress mit PHP-Templates und Plugins auf jeder Anfrage.

PhantomWP ist nicht nur für komplett starre Webseiten da.
Du kannst damit dynamische Funktionen bauen, aber die Dynamik wird anders erzeugt.

3.1 Was „dynamisch“ überhaupt bedeuten kann

Der Begriff ist unscharf. „Dynamische Website“ kann heißen:

  1. Inhalte kommen aus einem CMS
  2. Seiten werden serverseitig generiert
  3. Nutzer können sich einloggen
  4. Formulare senden Daten
  5. Warenkörbe und Checkouts existieren
  6. Inhalte sind personalisiert
  7. Suche, Filter, Live-Interaktionen laufen im Browser
  8. Daten ändern sich häufig

PhantomWP kann viele dieser Dinge abdecken, aber die Mechanik ist moderner und entkoppelter.

3.2 Arten von Dynamik, die mit PhantomWP gut funktionieren

A) CMS-getriebene Dynamik

Sehr gut geeignet.

Beispiele:

Das ist eine typische Headless-Dynamik.

B) Clientseitige Interaktivität

Auch möglich.

Beispiele:

Da PhantomWP auf Astro basiert, kannst du interaktive Komponenten gezielt einbauen, statt die ganze Website unnötig mit JS zu beladen.

C) Serverseitige / API-basierte Dynamik

Ebenfalls möglich, je nach Setup.

Beispiele:

Die Doku zeigt z. B.:

D) Personaliserte Inhalte

Teilweise möglich.

Beispiele:

Hier wird es aber schnell komplexer als bei „einfacher statischer Website“. Das ist machbar, aber nicht der primäre No-Code-Komfort-Anwendungsfall.

3.3 Wo PhantomWP dynamisch ist — aber anders als WordPress

Klassisches WordPress:

PhantomWP:

Das ist architektonisch meist sauberer und schneller, aber weniger „einfach mal irgendein Plugin aktivieren und es läuft im Theme-Kontext“.

3.4 Was mit PhantomWP schwieriger sein kann

PhantomWP ist nicht automatisch die beste Wahl, wenn du stark pluginabhängige, hochdynamische WordPress-Seiten baust, etwa:

Nicht unmöglich — aber dann verlässt du das Feld, in dem PhantomWP maximal elegant ist.

4. Für welche Arten von dynamischen Websites ist PhantomWP sinnvoll?

Hier eine praktische Einordnung.

4.1 Sehr sinnvoll

4.2 Sinnvoll, aber genauer prüfen

4.3 Eher mit Vorsicht

5. Wie ist PhantomWP im Vergleich zu Bricks Builder?

Jetzt zur wahrscheinlich wichtigsten Praxisfrage für dich.

Grundunterschied

Bricks Builder ist ein visueller Builder innerhalb von WordPress.
PhantomWP ist eine separate moderne Frontend-/Build-Umgebung, die WordPress als CMS nutzen kann.

Bricks = WordPress-native visuelle Seitenerstellung
PhantomWP = Headless-/Astro-basierte Site-Entwicklung

Das ist kein kleiner Unterschied, sondern ein fundamentaler.

5.1 Bricks: Wofür es stark ist

Bricks ist stark, wenn du willst:

Bricks ist aus Entwicklersicht oft „sauberer“ und performanter als viele ältere Builder und wird deshalb von vielen Profis bevorzugt.

5.2 PhantomWP gegenüber Bricks: Stärken

PhantomWP ist stärker, wenn du Wert legst auf:

Performance

Astro-/Static-/Headless-Ansatz ist häufig leichter und schneller auszuliefern als ein WordPress-Builder-Frontend.

Sicherheit

Kein klassisches öffentliches WordPress-Frontend nötig. Teilweise kann WordPress sogar stärker abgeschirmt werden.

Trennung von Content und Frontend

WordPress bleibt CMS, Frontend wird separat sauber entwickelt.

Moderne Entwicklungsprozesse

Geringere Frontend-Abhängigkeit von WP-Themes/Plugins

Du baust das Frontend nicht „im Theme“, sondern eigenständiger.

5.3 Wo Bricks für viele praktischer bleibt

Bricks ist oft praktischer, wenn:

Bricks hat hier eine niedrigere Reibung.

5.4 PhantomWP vs Bricks in einem Satz

Bricks ist meist besser für klassische professionelle WordPress-Websites mit visuellem Builder-Workflow.
PhantomWP ist meist besser für moderne, headless, performanceorientierte Websites mit sauber getrenntem Frontend.

6. Wie ist PhantomWP im Vergleich zu Divi?

Divi ist nochmal etwas anders als Bricks.

Kurz gesagt:

6.1 Divi: Wofür es stark ist

Divi ist stark, wenn du willst:

Für viele kleine bis mittlere Business-Seiten ist Divi „bequem genug“, solange die Performanceanforderungen nicht extrem sind.

6.2 PhantomWP gegenüber Divi: Vorteile

PhantomWP hat gegenüber Divi oft Vorteile bei:

Performance

Divi kann schwer werden. PhantomWP/Astro ist strukturell auf hohe Geschwindigkeit ausgelegt.

Technische Sauberkeit

Weniger Builder-Overhead, weniger Theme-Abhängigkeit.

Moderne Deployment-Workflows

Git, branchbasierte Deployments, Hosting auf modernen Plattformen.

Sicherheit

Kein klassisches öffentliches WordPress-Rendering.

Headless-Flexibilität

Besser geeignet, wenn WordPress nur Content-Backend sein soll.

6.3 Wo Divi für viele einfacher bleibt

Divi bleibt einfacher, wenn du willst:

Wenn dein Hauptziel ist: „eine Website schnell in WordPress zusammenbauen und dort komplett verwalten“, ist Divi oft einfacher zugänglich als PhantomWP.

7. PhantomWP vs Bricks vs Divi – der ehrliche Praxisvergleich

Hier die Unterschiede nicht theoretisch, sondern aus echter Projektlogik betrachtet.

7.1 Wenn du schnelle Marketingseiten willst

Beste Optionen:

Warum?

Entscheidung:

7.2 Wenn du klassische Kundenwebsites baust

Beste Optionen:

Entscheidung:

7.3 Wenn du Blog + SEO + Performance willst

Sehr stark:

Schwächer im Vergleich:

PhantomWP ist hier besonders spannend, weil die Kombination aus:

7.4 Wenn du WooCommerce willst

Am konservativsten / praktikabelsten heute meist:

Interessant, aber mit mehr Prüfbedarf:

Warum?

WooCommerce ist im klassischen WP-Setup nativ zuhause.
Sobald du headless gehst, wird vieles flexibler — aber auch anspruchsvoller.

Wenn du Standard-Shopflows möglichst unkompliziert willst, bist du mit klassischem WP/Woo oft schneller.
Wenn du maximale Frontend-Kontrolle willst und Headless bewusst suchst, kann PhantomWP spannend sein.

7.5 Wenn du maximale visuelle Freiheit ohne viel Code willst

PhantomWP hat zwar visuelle Hilfen, Component Libraries, Theme Studio usw.
Aber es fühlt sich nicht wie ein klassischer Drag-and-Drop-Builder im selben Sinn wie Divi oder Bricks an.

Das ist wichtig für die Erwartung.

8. Ist PhantomWP ein Ersatz für Bricks oder Divi?

Ja — für manche Projekte.

Nein — für andere.

Die ehrlichste Antwort ist:

PhantomWP ersetzt Bricks oder Divi nicht 1:1, sondern verfolgt ein anderes Modell.

PhantomWP kann ein Ersatz sein, wenn:

PhantomWP ist eher kein direkter Ersatz, wenn:

9. Was sind die größten Vorteile von PhantomWP?

Hier die wichtigsten Punkte in klarer Form.

9.1 Sehr gute Performance-Basis

Wenn Seiten statisch oder sehr schlank ausgeliefert werden, ist das oft deutlich schneller als klassische Builder-Seiten.

9.2 Bessere Sicherheit

Wenn WordPress nicht mehr das öffentliche Frontend ist, sinkt die Angriffsfläche deutlich.

9.3 WordPress kann als Redaktion bleiben

Das ist ein riesiger Vorteil für Teams, die WordPress als CMS schätzen.

9.4 Moderne Frontend-Architektur

Du bewegst dich in Richtung:

9.5 Gute Eignung für SEO- und Content-Projekte

Gerade bei Blogs, Magazinen, Unternehmensseiten und Landingpages ist das sehr attraktiv.

9.6 Bessere Hosting-Optionen

Static/modern-deployed Sites können oft günstiger, robuster und einfacher betrieben werden.

10. Was sind die größten Nachteile oder Hürden?

Genauso wichtig.

10.1 Anderes Denken als bei klassischen Page Buildern

Wenn du von Divi oder Bricks kommst, musst du umdenken.

PhantomWP ist kein „Theme Builder in WordPress“, sondern eine andere Ebene.

10.2 Mehr technische Struktur

Auch wenn es visuelle Tools gibt, ist das System stärker entwicklungsorientiert:

10.3 Nicht jedes WP-Plugin-Modell passt gut

Je mehr deine Website direkt vom klassischen WP-Rendering und WP-Plugin-Ausgabemodell lebt, desto schwieriger kann die Migration werden.

10.4 WooCommerce und komplexe Dynamik brauchen genauere Planung

Einfach nur „geht irgendwie“ reicht bei Shops und Member-Bereichen nicht. Da muss sauber geprüft werden.

10.5 Kundenerwartungen können anders sein

Wenn ein Kunde gewohnt ist, in WordPress visuell Seiten zusammenzuschieben, ist PhantomWP u. U. nicht das passende Modell.

11. Für wen ist PhantomWP ideal?

PhantomWP ist besonders sinnvoll für:

Agenturen und Freelancer, die:

Entwicklernahe Teams, die:

Content-getriebene Projekte, die:

12. Für wen sind Bricks oder Divi wahrscheinlich die bessere Wahl?

Bricks eher dann, wenn:

Divi eher dann, wenn:

13. Meine klare Einordnung für deinen Fall als Bricks-/Divi-Nutzer

Wenn du bereits Bricks Builder und Divi nutzt, dann würde ich PhantomWP so einordnen:

PhantomWP ist spannend für dich, wenn du:

PhantomWP ist eher nichts für dich, wenn du:

14. Praktische Entscheidungshilfe

Hier eine einfache Matrix.

Nimm eher PhantomWP, wenn …

Nimm eher Bricks, wenn …

Nimm eher Divi, wenn …

15. Schlussfazit

PhantomWP ist kein besseres Divi und auch kein Bricks-Klon.
Es ist eher eine moderne Alternative zum klassischen WordPress-Frontend.

Du kannst damit sehr viel machen:

Ja, dynamische Websites sind möglich, aber anders umgesetzt als im klassischen WordPress-Modell.
PhantomWP ist am stärksten, wenn du Content, Performance, SEO und moderne Frontend-Architektur kombinieren willst.

Wenn du dagegen einen klassischen visuellen WordPress-Builder suchst, bei dem du komplett innerhalb von WordPress bleibst, dann sind Bricks oder Divi oft die naheliegendere Wahl.

Die einfachste ehrliche Zusammenfassung ist: