# Taschenmuschi-Kaufen.de — Lokale WordPress-Entwicklung

Premium-WordPress-Theme für taschenmuschi-kaufen.de. Lokales Dev-Setup mit MariaDB / MySQL und PHP-Built-in-Server. Keine externen CDNs — Bootstrap lokal im Theme.

---

## 1) Voraussetzungen

| Komponente | Mindestversion | Status auf diesem Rechner |
| --- | --- | --- |
| PHP CLI | 7.4+ (getestet mit 8.4) | ✓ |
| MariaDB / MySQL | 10.4+ / 8.0+ | ✓ (MariaDB läuft) |
| PHP-Erweiterungen | `mysqli`, `gd`, `mbstring`, `curl`, `zip`, `xml`, `intl` | ✓ |
| Optional | `xdg-open` (Browser-Opener) | i. d. R. vorhanden |

---

## 2) Datenbank einrichten

Die Datenbank heißt `taschenmuschi_kaufen_local`. Lege sie und einen User mit Schreibrechten an (Beispiel — als MariaDB-Root ausführen):

```sql
CREATE DATABASE IF NOT EXISTS taschenmuschi_kaufen_local
  CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- Beispieluser für lokale Entwicklung:
CREATE USER IF NOT EXISTS 'tmk'@'localhost' IDENTIFIED BY 'tmk_local_dev';
GRANT ALL PRIVILEGES ON taschenmuschi_kaufen_local.* TO 'tmk'@'localhost';
FLUSH PRIVILEGES;
```

Anschließend die Zugangsdaten in [wp-config.php](wp-config.php) eintragen:

| Konstante | Beschreibung |
| --- | --- |
| `DB_NAME` | `taschenmuschi_kaufen_local` |
| `DB_USER` | dein DB-Benutzer |
| `DB_PASSWORD` | dein DB-Passwort |
| `DB_HOST` | i. d. R. `localhost` |
| `DB_CHARSET` | `utf8mb4` |

> Diese Datei wird beim ersten Setup automatisch aus `wp-config-sample.php` generiert (siehe Abschnitt 4).

---

## 3) Projektstruktur

```
.
├── start-local.sh                  – Server-Manager (interaktives TUI)
├── install-wp.php                  – Headless-Installer für WordPress
├── README.md
├── wp-config.php                   – wird beim ersten Setup angelegt
├── (alle Standard-WP-Dateien …)
└── wp-content/
    └── themes/
        └── taschenmuschi-kaufen/   – das Theme
            ├── style.css           – Theme-Header (WP-Pflicht)
            ├── functions.php       – Theme-Bootstrap & Enqueues
            ├── index.php           – Fallback-Template
            ├── page.php            – Standard-Page-Template
            ├── header.php          – inkl. Mega-Menü-Markup
            ├── footer.php          – inkl. Newsletter
            ├── front-page.php      – Startseite
            ├── page-live-cams.php  – Live-Cams-Seite
            ├── inc/
            │   ├── menu-walker.php       – Mega-Menü Walker
            │   ├── theme-setup.php       – Pages + Menü automatisch
            │   └── template-helpers.php
            ├── template-parts/
            │   └── mega-menu.php
            └── assets/
                ├── css/style.css
                ├── js/main.js
                ├── img/                       – Platzhalter-Mockups
                └── vendor/bootstrap/           – Bootstrap 5.3.3 lokal
                    ├── css/bootstrap.min.css
                    └── js/bootstrap.bundle.min.js
```

---

## 4) Erstes Setup (Schritt für Schritt)

### 4.1 Datenbank anlegen

Siehe Abschnitt 2.

### 4.2 `wp-config.php` erzeugen

Aus dem Sample kopieren und Zugangsdaten eintragen:

```bash
cp wp-config-sample.php wp-config.php
# DB_NAME / DB_USER / DB_PASSWORD / DB_HOST anpassen
# AUTH_KEY etc. von https://api.wordpress.org/secret-key/1.1/salt/ einsetzen
```

Optional Debug aktivieren:

```php
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
define( 'WP_HOME',    'http://localhost:8090' );
define( 'WP_SITEURL', 'http://localhost:8090' );
```

### 4.3 WordPress installieren

Zwei Wege:

**A) Headless (empfohlen für CI / schnellen Start)**

```bash
php install-wp.php
```

Legt Tabellen an, erstellt den Admin-User `admin / admin1234`, aktiviert das Theme und triggert das Theme-Setup (Pages + Menü).

Login-Daten via Env überschreibbar:

```bash
WP_ADMIN_USER=nico WP_ADMIN_PASS='geheim!23' WP_ADMIN_EMAIL=du@example.com php install-wp.php
```

**B) Klassisch via Browser**

1. Server starten (siehe 4.4)
2. `http://localhost:8090/` öffnen → WordPress-Installer durchklicken
3. Im Admin-Backend unter *Design → Themes* das Theme **„Taschenmuschi-Kaufen"** aktivieren
4. Die Aktivierung erstellt automatisch Pages + Menü und setzt die statische Startseite. Bei Bedarf nochmals manuell triggern via `http://localhost:8090/wp-admin/?tmk_setup=1`.

### 4.4 Lokalen Server starten

```bash
chmod +x start-local.sh    # nur einmal nötig
./start-local.sh           # interaktives Menü
```

Oder direkt per Befehl:

```bash
./start-local.sh start         # Port 8090
./start-local.sh start 8123    # eigener Port
./start-local.sh stop
./start-local.sh status
./start-local.sh logs
./start-local.sh open          # öffnet http://localhost:8090
```

Standardadresse: <http://localhost:8090>

Die PID liegt unter `.local-server.pid`, das Log unter `.local-server.log`.

---

## 5) Was das Theme automatisch anlegt

Beim ersten Aufruf des Admin-Backends nach Theme-Aktivierung läuft `tmk_run_initial_setup()` einmalig und legt an:

**Pages**

- Startseite (wird automatisch als statische Homepage gesetzt)
- Live Cams (Template: `page-live-cams.php`)
- Magazin
- Kategorien
- Über uns
- Kontakt
- Datenschutz
- Impressum

**Menü „Hauptmenü"** (in den Slot *Primary*) mit:

- Produkte
- Kategorien   *(öffnet das Mega-Menü)*
- Magazin
- Live Cams
- Über uns

Der Kategorien-Eintrag erhält automatisch die CSS-Class `mega`. Der `TMK_Menu_Walker` rendert ihn dann als Mega-Trigger und das Panel-Markup wird in `header.php` mit ausgeliefert.

Setup nochmal triggern (z. B. nach Änderungen): als Admin auf `http://localhost:8090/wp-admin/?tmk_setup=1`.

---

## 6) Mega-Menü

- Markup liegt in [header.php](wp-content/themes/taschenmuschi-kaufen/header.php) und [template-parts/mega-menu.php](wp-content/themes/taschenmuschi-kaufen/template-parts/mega-menu.php)
- Logik (Hover-Bridge, Schließverhalten, Escape-Key) in [assets/js/main.js](wp-content/themes/taschenmuschi-kaufen/assets/js/main.js)
- Styles in [assets/css/style.css](wp-content/themes/taschenmuschi-kaufen/assets/css/style.css) (Sektion *MEGA MENU*)
- Trigger-Identifikation: jedes Menü-Item mit Slug `kategorien` ODER CSS-Class `mega`

---

## 7) Bootstrap lokal

Bootstrap 5.3.3 liegt lokal im Theme:

```
wp-content/themes/taschenmuschi-kaufen/assets/vendor/bootstrap/
├── css/bootstrap.min.css
└── js/bootstrap.bundle.min.js
```

Geladen via `wp_enqueue_style` / `wp_enqueue_script` in [functions.php](wp-content/themes/taschenmuschi-kaufen/functions.php). **Kein CDN.**

Update auf neuere Version:

```bash
THEME=wp-content/themes/taschenmuschi-kaufen
curl -sL -o "$THEME/assets/vendor/bootstrap/css/bootstrap.min.css" \
  https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css
curl -sL -o "$THEME/assets/vendor/bootstrap/js/bootstrap.bundle.min.js" \
  https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js
```

---

## 8) Bilder

`wp-content/themes/taschenmuschi-kaufen/assets/img/` enthält neutrale, weichgezeichnete Platzhalter (Produkt-Silhouetten, abstrakte Moodboards, abstrakte Cam-Thumbnails). Keine expliziten Inhalte. Generiert vom Skript `_staging/generate_images.py` (Backup-Kopie).

Originalbilder einfach unter gleichem Dateinamen ersetzen.

---

## 9) Troubleshooting

| Problem | Lösung |
| --- | --- |
| `Error establishing a database connection` | Zugangsdaten in `wp-config.php` prüfen, DB & User existieren? |
| Theme nicht in Liste sichtbar | Pfad muss `wp-content/themes/taschenmuschi-kaufen/style.css` sein. Theme-Header in `style.css` darf nicht fehlen. |
| Mega-Menü zeigt nichts | Hauptmenü unter *Design → Menüs* anlegen und Slot „Primary" zuweisen, ODER `?tmk_setup=1` aufrufen. |
| Port 8090 belegt | `./start-local.sh stop` oder anderen Port wählen. |
| Permalinks 404 | Im Admin unter *Einstellungen → Permalinks* einmal speichern (oder DBA-Wert auf `/%postname%/` setzen). |

---

## 10) Live-Cam-Sync im Hintergrund (System-Cron)

Der `vx-live-cams`-Sync zieht je Lauf bis zu 200 Cams (GraphQL-Pagination) und lädt
Avatar + bis zu 12 Sedcard-Bilder pro Cam in die Mediathek. Das kann mehrere
Minuten dauern. Wenn er per **WP-Cron** ausgelöst wird, läuft er in einem
Besucher-Request mit — und blockiert auf produktivem Hosting die PHP-FPM-Worker.
Folge: Startseite lädt ins Unendliche / Time-out.

Deshalb auf jedem Server (Staging + Prod): **WP-Cron deaktivieren und einen
echten System-Cron einrichten**.

### 10.1 WP-Cron in `wp-config.php` abschalten

`wp-config.php` ist gitignored — den Eintrag manuell auf dem Server ergänzen
(direkt vor `/* That's all, stop editing! */`):

```php
define( 'DISABLE_WP_CRON', true );
```

### 10.2 System-Cron einrichten

Als der Webserver-User (z. B. `www-data` oder der ispconfig-Web-User), via
`crontab -e`:

```cron
# WordPress-Standard-Cron — alle 5 Minuten, hält Akismet, geplante Posts etc. aktuell.
*/5 * * * * /usr/bin/php /var/www/clients/clientX/webY/web/wp-cron.php > /dev/null 2>&1

# VX-Live-Cams-Sync — alle 15 Minuten direkt via CLI-Runner (kein Umweg über WP-Cron).
# Loggt Stats nach /var/log/vxlc-sync.log; bei laufendem Sync passiert nichts (Lock).
*/15 * * * * /usr/bin/php /var/www/clients/clientX/webY/web/wp-content/plugins/vx-live-cams/tools/sync-cli.php >> /var/log/vxlc-sync.log 2>&1
```

Pfade an das echte Web-Root anpassen. Der CLI-Runner setzt einen 30-Minuten-Lock
(`vxlc_sync_running`-Transient), damit überlappende Läufe sich gegenseitig
überspringen statt zu kollidieren.

### 10.3 Manueller Sync aus dem Admin

Der Button **„Jetzt synchronisieren"** im Live-Cams-Dashboard versucht primär,
denselben CLI-Runner als detachten Prozess zu starten (über `exec` mit
`> /dev/null 2>&1 &`). Klappt das nicht (Shell-Funktionen disabled, kein
PHP-Binary auffindbar), wird ein Single-Event für den nächsten WP-Cron-Tick
geplant — das System-Cron-Skript (`wp-cron.php` alle 5 Min) führt es dann aus.

Der Admin-Request kehrt sofort zurück, niemals mehr ein 504-Timeout an dieser
Stelle.

---

## 11) Sicherheits-Hinweis

Dieses Setup ist nur für **lokale Entwicklung** gedacht. Für Produktion:

- Admin-Passwörter rotieren
- AUTH_KEYs neu generieren
- `WP_DEBUG_DISPLAY` aus, Logging über `WP_DEBUG_LOG`
- HTTPS via richtiger Webserver (Nginx/Apache) statt PHP-Built-in-Server
- `install-wp.php` löschen oder per Webserver sperren