Kapitel 1: WordPress-Grundlagen (Pflicht für Einsteiger)

1.1 WordPress-Einführung und die Rolle von Themes

Was ist WordPress?

WordPress ist ein Content-Management-System (CMS), das auf PHP und MySQL basiert. Es ermöglicht die Erstellung und Verwaltung von Websites ohne tiefgehende Programmierkenntnisse.

Warum eigene Themes erstellen?

Vorteile von benutzerdefinierten Themes:

✅ Vollständige Kontrolle: Sie bestimmen über jedes Pixel ✅ Performance: Kein unnötiger Code von Page-Buildern ✅ Sicherheit: Weniger Abhängigkeiten von Drittanbieter-Plugins ✅ Lernen: Tiefes Verständnis von WordPress-Architektur ✅ Wiederverwendbarkeit: Einmal erstellen, mehrfach nutzen

Nachteile:

❌ Zeitaufwand: Eigenes Theme dauert länger als Page-Builder ❌ Wartung: Sie sind für Updates und Sicherheit verantwortlich ❌ Lernkurve: Erfordert Verständnis von PHP, WordPress-API

Vergleich: Eigenes Theme vs. Page-Builder vs. Premium-Theme

Merkmal	Eigenes Theme	Page-Builder (Elementor)	Premium-Theme
Kosten	Kostenlos (nur Zeit)	Kostenlos/Premium	$30-100
Performance	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐
Flexibilität	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐
Lernaufwand	Hoch	Niedrig	Niedrig
Wartung	Eigenverantwortung	Plugin-Updates	Theme-Updates

1.2 Theme-Klassifizierung

1. Standard-Themes (Default Themes)

WordPress liefert standardmäßig Themes mit:

• Twenty Twenty-Four (2024)
• Twenty Twenty-Three (2023)
• Twenty Twenty-Two (2022)

Zweck: Demonstration von WordPress-Features, Full-Site-Editing (FSE)

Für Einsteiger: Gut zum Lernen, aber nicht zum Produktiveinsatz (zu komplex)

2. Benutzerdefinierte Themes (Custom Themes)

Vorteile:

• 100% Kontrolle über Code
• Kein unnötiger Code
• Perfekt auf Ihre Bedürfnisse zugeschnitten

Nachteile:

• Erfordert PHP/WordPress-Kenntnisse
• Zeitaufwendig

Für Einsteiger: ⭐ Empfohlen als Einstiegspunkt!

3. Child-Themes

Ein Child-Theme erbt alle Funktionen eines Parent-Themes (Eltern-Themes).

Vorteile:

• Sichere Updates (Änderungen gehen nicht verloren)
• Schnellerer Einstieg (basierend auf existierendem Theme)

Nachteile:

• Abhängig vom Parent-Theme
• Eingeschränkte Kontrolle

Für Einsteiger: Erst Custom Theme lernen, dann Child-Themes

Empfehlung für Einsteiger

Schritt 1: Custom Theme erstellen (um Grundlagen zu lernen)
         ↓
Schritt 2: Child-Theme erstellen (um ein Premium-Theme anzupassen)

1.3 WordPress-Kernverzeichnisstruktur

Wichtige Verzeichnisse

wordpress/
├── wp-admin/          # WordPress-Admin-Bereich (nicht bearbeiten!)
├── wp-includes/       # WordPress-Kerncode (nicht bearbeiten!)
├── wp-content/        # ⭐ HIER ARBEITEN WIR!
│   ├── themes/        # ⭐ THEMES (unser Fokus!)
│   │   ├── twentytwentyfour/
│   │   ├── twentytwentythree/
│   │   └── mein-theme/    # Unser eigenes Theme
│   ├── plugins/       # Plugins
│   ├── uploads/       # Hochgeladene Medien
│   └── languages/     # Sprachdateien
├── wp-config.php      # ⭐ WICHTIGE KONFIGURATION
├── .htaccess          # Server-Konfiguration (Apache)
└── index.php          # Einstiegspunkt

Fokus-Verzeichnis: wp-content/themes/

Dies ist der Ort, an dem wir unsere Themes erstellen!

wp-content/themes/
├── mein-theme/
│   ├── style.css          # ⭐ Pflicht (Theme-Informationen)
│   ├── index.php          # ⭐ Pflicht (Haupt-Template)
│   ├── header.php         # Optional (Header-Template)
│   ├── footer.php        # Optional (Footer-Template)
│   ├── functions.php     # Optional (Theme-Funktionen)
│   ├── single.php        # Optional (Einzelbeitrag-Template)
│   ├── page.php          # Optional (Seiten-Template)
│   └── screenshot.png    # Optional (Theme-Vorschaubild)
└── ...

1.4 Erforderliche Tools vorbereiten

1. Code-Editor: VS Code

Download: code.visualstudio.com

Empfohlene Erweiterungen:

• PHP Intelephense: PHP-Code-Vervollständigung
• WordPress Snippets: WordPress-Funktions-Snippets
• Live Server: Lokalen Server starten
• Prettier: Code-Formatierung
• ESLint: JavaScript-Linting

Installation der Erweiterungen:

1. Öffnen Sie VS Code
2. Klicken Sie auf das Erweiterungen-Symbol (links)
3. Suchen Sie nach dem Namen
4. Klicken Sie auf "Installieren"

2. Browser-Entwicklertools

Chrome DevTools (Empfohlen)

• Öffnen: F12 oder Rechtsklick → Untersuchen
• Wichtige Tabs:
  • Elements: HTML/CSS inspizieren
  • Console: JavaScript-Fehler anzeigen
  • Network: Ladezeiten analysieren
  • Sources: JavaScript-Debugging

Firefox Developer Tools

• Ähnlich wie Chrome
• Besonders gut für CSS-Grid/Flexbox-Visualisierung

3. Local Server

XAMPP (Windows/Mac/Linux)

• Download: apachefriends.org
• Beinhaltet: Apache, MySQL, PHP, phpMyAdmin

MAMP (Mac/Windows)

• Download: mamp.info
• Vorteil: Einfacher einzurichten als XAMPP

LocalWP (Früher "Local by Flywheel")

• Download: localwp.com
• Vorteil: Speziell für WordPress, sehr einfach

4. FTP-Client (für Online-Deployment)

FileZilla (Kostenlos)

• Download: filezilla-project.org
• Verwendung: Dateien auf Server hochladen

WinSCP (Windows)

• Download: winscp.net

1.5 Lokale WordPress-Umgebung einrichten

Methode 1: Mit XAMPP (Empfohlen für Einsteiger)

Schritt 1: XAMPP installieren

1. Laden Sie XAMPP von apachefriends.org herunter
2. Führen Sie den Installer aus
3. Wählen Sie mindestens: Apache, MySQL, PHP, phpMyAdmin

Schritt 2: XAMPP starten

1. Öffnen Sie den XAMPP Control Panel
2. Starten Sie "Apache" (klicken Sie auf "Start")
3. Starten Sie "MySQL" (klicken Sie auf "Start")

✅ Beide Module sollten grün hinterlegt sein.

Schritt 3: Datenbank erstellen

1. Öffnen Sie http://localhost/phpmyadmin
2. Klicken Sie auf "Datenbank erstellen"
3. Name: wordpress_db
4. Kollation: utf8mb4_unicode_ci
5. Klicken Sie auf "Erstellen"

Schritt 4: WordPress herunterladen und installieren

1. Besuchen Sie wordpress.org
2. Laden Sie die neueste deutsche Version herunter
3. Entpacken Sie die ZIP-Datei
4. Kopieren Sie den Ordner wordpress nach C:\xampp\htdocs\
5. Benennen Sie den Ordner um (z.B. mein-wordpress)

Schritt 5: WordPress konfigurieren

1. Öffnen Sie http://localhost/mein-wordpress
2. Wählen Sie "Deutsch" als Sprache
3. Klicken Sie auf "Weiter"

Datenbankverbindung konfigurieren:

Datenbankname: wordpress_db
Benutzername: root
Passwort: (leer lassen)
Datenbank-Host: localhost
Tabellen-Präfix: wp_

4. Klicken Sie auf "Senden"
5. Klicken Sie auf "Installation starten"

Website-Informationen eingeben:

Seiten-Titel: Meine WordPress-Website
Benutzername: admin (⚠️ Sichereren Benutzernamen wählen!)
Passwort: [Sicheres Passwort wählen]
E-Mail-Adresse: Ihre E-Mail
Suchmaschinen-Sichtbarkeit: [ ] (für lokale Tests)

6. Klicken Sie auf "WordPress installieren"
7. ✅ Installation abgeschlossen!

Methode 2: Mit LocalWP (Einfacher)

1. Laden Sie LocalWP von localwp.com herunter
2. Installieren und öffnen Sie die Anwendung
3. Klicken Sie auf "Create a new site"
4. Folgen Sie dem Assistenten:
   • Site Name: Meine Website
   • Environment: Preferred (neueste Version)
   • WordPress Username/Password: Ihre Zugangsdaten
5. Klicken Sie auf "Add Site"
6. ✅ Fertig! (LocalWP erledigt alles automatisch)

Login testen

URL: http://localhost/mein-wordpress/wp-admin
Benutzername: [Ihr Benutzername]
Passwort: [Ihr Passwort]

✅ Sie sollten nun das WordPress-Dashboard sehen!

📝 Übung 1: Lokale Umgebung einrichten

Ziel: Richten Sie eine lokale WordPress-Umgebung ein.

Schritte:

1. Installieren Sie XAMPP oder LocalWP
2. Erstellen Sie eine lokale WordPress-Installation
3. Loggen Sie sich in das Dashboard ein
4. Überprüfen Sie, ob Sie im Verzeichnis wp-content/themes/ Zugriff haben

Lösung:

# XAMPP
C:\xampp\htdocs\mein-wordpress\wp-content\themes\

# LocalWP
C:\Users\[IhrName]\Local Sites\[Site-Name]\app\public\wp-content\themes\

---

✅ Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Was WordPress-Themes sind und warum man sie selbst erstellt
• ✅ Den Unterschied zwischen Standard-, Custom- und Child-Themes
• ✅ Die WordPress-Verzeichnisstruktur (Fokus auf wp-content/themes/)
• ✅ Erforderliche Tools (VS Code, DevTools, XAMPP/LocalWP)
• ✅ Eine lokale WordPress-Umgebung einzurichten

Nächstes Kapitel: Wir lernen, wie Frontend-Technologien (HTML/CSS/JS) mit WordPress interagieren.

➡️ Zu Kapitel 2: Frontend & WordPress →