WordPress Themes

Was ist ein Theme?

Ein Theme bestimmt das Design und Layout Ihrer WordPress-Website. Es kontrolliert:

• Farben und Schriftarten
• Seitenlayout (Header, Footer, Sidebar)
• Responsive Design (Mobilgeräte)
• Template-Struktur

Themes finden und installieren

Methode 1: WordPress Theme-Verzeichnis (Kostenlos)

1. Gehen Sie zu Design → Themes
2. Klicken Sie auf "Neu hinzufügen"
3. Durchsuchen oder filtern Sie Themes
4. Klicken Sie auf "Vorschau" für eine Vorschau
5. Klicken Sie auf "Installieren"
6. Klicken Sie auf "Aktivieren"

Empfohlene kostenlose Themes für Einsteiger

Theme	Beschreibung	Geeignet für
Astra	Leichtgewichtig, schnell	Blogs, Business-Websites
GeneratePress	SEO-optimiert, flexibel	Alle Arten von Websites
OceanWP	Viele Funktionen, E-Commerce-ready	Online-Shops
Neve	Minimalistisch, schnell	Blogs, Portfolios
Twenty Twenty-Four	WordPress-Standardtheme	Blogs, Portfolios

Methode 2: Premium-Themes (Kostenpflichtig)

Beliebte Marktplätze:

• ThemeForest (Envato Market)
• StudioPress (Genesis Framework)
• Elegant Themes (Divi)

Methode 3: Eigenes Theme hochladen

1. Kaufen und laden Sie die .zip-Datei des Themes herunter
2. Gehen Sie zu Design → Themes → Neu hinzufügen
3. Klicken Sie auf "Theme hochladen"
4. Wählen Sie die .zip-Datei aus
5. Klicken Sie auf "Jetzt installieren"
6. Klicken Sie auf "Aktivieren"

Theme anpassen (Customizer)

Zugriff auf den Customizer

1. Gehen Sie zu Design → Customizer
   • ODER -
2. Klicken Sie im Frontend (Vorschau) in der Admin-Leiste auf "Design anpassen"

Customizer-Bereiche

┌────────────────────────────────────────┐
│  Customizer                           │
├─────────────────┼────────────────────┤
│ Site-Identity   │  [Vorschau]        │
│ Colors          │                    │
│ Header          │                    │
│ Content         │                    │
│ Footer          │                    │
│ Menus           │                    │
│ Widgets         │                    │
│ Additional CSS  │                    │
└─────────────────┴────────────────────┘

Wichtige Anpassungen:

1. Website-Identität (Site Identity)

• Logo hochladen
• Website-Titel
• Untertitel (Tagline)
• Favicon (Site Icon) hochladen

2. Farben (Colors)

• Primärfarbe
• Sekundärfarbe
• Hintergrundfarbe

3. Typografie (Typography)

• Schriftart für Überschriften
• Schriftart für Fließtext
• Schriftgrößen

4. Header-Einstellungen

• Header-Bild
• Header-Layout
• Sticky Header (klebt oben)

5. Menüs (Menus)

• Hauptmenü erstellen
• Footer-Menü
• Social Media Menü

6. Widgets

• Sidebar-Widgets
• Footer-Widgets

7. Startseite-Einstellungen

• Neueste Beiträge anzeigen
• Statische Startseite

Änderungen speichern

• Klicken Sie auf "Veröffentlichen" um Änderungen zu speichern
• ODER -
• Klicken Sie auf "Geplante Veröffentlichung" um Änderungen später zu veröffentlichen

Full Site Editing (FSE)

Seit WordPress 5.9 können Sie das gesamte Theme mit dem Block-Editor anpassen.

Site Editor öffnen

1. Gehen Sie zu Design → Editor
2. Sie sehen eine Vorschau Ihrer gesamten Website

Templates bearbeiten

• Index: Standard-Template für alle Seiten
• Single: Einzelner Beitrag
• Page: Einzelne Seite
• Archive: Archivseiten (Kategorien, Tags)
• 404: Fehlerseite
• Search: Suchergebnisseite

Template-Teile (Template Parts)

• Header: Kopfbereich
• Footer: Fußbereich
• Sidebar: Seitenleiste

Theme-Editor (Code-Editor)

⚠️ Warnung: Nur für erfahrene Benutzer!

Zugriff: Design → Theme-Dateien bearbeiten

Sie können folgende Dateien bearbeiten:

• style.css (Stylesheet)
• functions.php (Funktionen)
• header.php (Header)
• footer.php (Footer)
• single.php (Einzelner Beitrag)
• page.php (Seiten)

💡 Tipp: Erstellen Sie immer ein Child-Theme, bevor Sie Theme-Dateien bearbeiten!

Child-Themes erstellen

Ein Child-Theme erlaubt Ihnen, ein bestehendes Theme zu modifizieren, ohne dass Ihre Änderungen bei einem Update überschrieben werden.

Schritt 1: Ordner erstellen

Erstellen Sie einen Ordner: wp-content/themes/mein-theme-child

Schritt 2: style.css erstellen

/*
 Theme Name:   Mein Theme Child
 Theme URI:    http://example.com/mein-theme-child/
 Description:  Child-Theme für Mein Theme
 Author:       Ihr Name
 Author URI:   http://example.com
 Template:     mein-theme
 Version:      1.0.0
*/

Schritt 3: functions.php erstellen

<?php
function mein_theme_child_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'mein_theme_child_styles');
?>

Schritt 4: Screenshot hinzufügen (optional)

Fügen Sie ein screenshot.png (1200x900px) hinzu.

Schritt 5: Theme aktivieren

1. Gehen Sie zu Design → Themes
2. Aktivieren Sie "Mein Theme Child"

Responsive Design testen

Im Customizer testen

Klicken Sie im Customizer auf die Geräte-Symbole:

• 📱 Smartphone (375px)
• 📱 Tablet (768px)
• 💻 Desktop (1024px+)

Mit Browser-Entwicklertools testen

1. Klicken Sie mit Rechtsklick → "Untersuchen" (Inspect)
2. Klicken Sie auf das Geräte-Symbol (Toggle Device Toolbar)
3. Wählen Sie verschiedene Geräte aus

Theme-Performance optimieren

Leichtgewichtige Themes wählen

Vermeiden Sie Themes mit:

• Zu vielen eingebauten Funktionen
• Schlechten Bewertungen
• Langsamen Ladenzeiten

Tests durchführen

Testen Sie Ihr Theme mit:

• Google PageSpeed Insights
• GTmetrix
• Pingdom

Häufige Probleme und Lösungen

Problem: "Weiße Seite" nach Theme-Aktivierung

Lösung:

1. Deaktivieren Sie das Theme über FTP
2. Löschen Sie den Ordner wp-content/themes/ihr-theme
3. Installieren Sie das Standard-Theme neu

Problem: Layout sieht falsch aus

Lösung:

1. Leeren Sie den Cache (Browser und Caching-Plugins)
2. Deaktivieren Sie konfliktäre Plugins
3. Setzen Sie das Theme auf Standard-Einstellungen zurück

Problem: "Syntax Error" im Theme-Editor

Lösung:

1. Zugriff per FTP
2. Bearbeiten Sie die Datei und korrigieren Sie den Fehler
3. Speichern Sie die Datei

Nächste Schritte

Jetzt können Sie Themes installieren und anpassen. Lernen wir, wie man Plugins nutzt, um WordPress zu erweitern.

➡️ Zu Plugins →