Appearance
Kapitel 17: Ressourcen (Hilfsmittel)
17.1 Offizielle WordPress-Dokumentation
WordPress Codex (Veraltet, aber nützlich)
URL: https://codex.wordpress.org/
Inhalt:
- Alte, aber grundlegende Dokumentation
- Template-Tags Referenz
- Funktionen-Referenz
WordPress Developer Resources (Aktuell)
URL: https://developer.wordpress.org/
Unterteile:
- Code Reference: https://developer.wordpress.org/reference/
- Alle WordPress-Funktionen, Hooks, Klassen
- Theme Handbook: https://developer.wordpress.org/themes/
- Offizieller Leitfaden für Theme-Entwicklung
- Plugin Handbook: https://developer.wordpress.org/plugins/
- REST API Handbook: https://developer.wordpress.org/rest-api/
WordPress Code Reference verwenden
Beispiel: the_title() nachschlagen
- Gehen Sie zu https://developer.wordpress.org/reference/
- Suchen Sie nach
the_title - Sehen Sie Parameter, Rückgabewerte, Beispiele
17.2 Frontend-Ressourcen
CSS-Frameworks in WordPress verwenden
1. Bootstrap
URL: https://getbootstrap.com/
Einbinden in WordPress:
php
function mein_theme_scripts() {
// Bootstrap CSS
wp_enqueue_style('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
// Bootstrap JS
wp_enqueue_script('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', array('jquery'), '5.3.0', true);
}
add_action('wp_enqueue_scripts', 'mein_theme_scripts');2. Tailwind CSS
Einbinden:
php
function mein_theme_scripts() {
wp_enqueue_style('tailwind', 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');
}
add_action('wp_enqueue_scripts', 'mein_theme_scripts');3. Bulma
URL: https://bulma.io/
Einbinden:
php
function mein_theme_scripts() {
wp_enqueue_style('bulma', 'https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css');
}
add_action('wp_enqueue_scripts', 'mein_theme_scripts');JavaScript-Bibliotheken
1. jQuery (bereits in WordPress enthalten)
php
function mein_theme_scripts() {
wp_enqueue_script('jquery'); // WordPress enthält jQuery bereits
wp_enqueue_script('mein-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'mein_theme_scripts');2. React (für fortgeschrittene Themes)
URL: https://reactjs.org/
WordPress verwendet bereits React für den Block-Editor (Gutenberg).
17.3 Tools für Theme-Entwicklung
1. VS Code Erweiterungen
| Erweiterung | Zweck |
|---|---|
| PHP Intelephense | PHP-Code-Vervollständigung |
| WordPress Snippets | WordPress-Funktions-Snippets |
| Live Server | Lokalen Server starten |
| Prettier | Code-Formatierung |
| ESLint | JavaScript-Linting |
| Stylelint | CSS-Linting |
2. Theme-Debugging-Tools
Query Monitor
URL: https://wordpress.org/plugins/query-monitor/
Funktionen:
- Zeigt Datenbankabfragen an
- Zeigt Hooks und Filter an
- Zeigt PHP-Fehler an
- Zeigt HTTP-Anfragen an
Verwendung:
- Installieren und aktivieren Sie das Plugin
- Öffnen Sie Ihre Website
- Klicken Sie auf die "Query Monitor"-Leiste oben
What The File
URL: https://wordpress.org/plugins/what-the-file/
Zeigt an, welche Template-Dateien geladen werden.
Theme Check
URL: https://wordpress.org/plugins/theme-check/
Prüft Ihr Theme auf WordPress.org-Richtlinien.
3. Code-Optimierung-Tools
CSS/JS minimieren
- CSSNano: https://cssnano.co/
- UglifyJS: https://uglifyjs.com/
Bilder komprimieren
- TinyPNG: https://tinypng.com/
- ImageOptim: https://imageoptim.com/ (Mac)
- RIOT: http://riothome.com/ (Windows)
17.4 Community-Ressourcen
1. WordPress Deutschland Forum
Deutschsprachiges Forum für WordPress-Fragen.
2. Stack Overflow
URL: https://stackoverflow.com/questions/tagged/wordpress
Stellen Sie Fragen mit dem Tag wordpress.
3. WordPress Stack Exchange
URL: https://wordpress.stackexchange.com/
Spezialisierte Community für WordPress-Entwickler.
4. Reddit
URL: https://www.reddit.com/r/Wordpress/
Diskussionen, News, Hilfe.
17.5 Tutorials und Kurse
Kostenlose Tutorials
- WordPress.org Codex/Tutorials: https://codex.wordpress.org/Main_Page
- WPBeginner: https://www.wpbeginner.com/ (Englisch, sehr gut für Einsteiger)
- WordPress.tv: https://wordpress.tv/ (Videos)
Kostenpflichtige Kurse
- Udemy: Suchen Sie nach "WordPress Theme Development"
- LinkedIn Learning: WordPress-Kurse
- Pluralsight: WordPress-Entwicklung
17.6 Bücher
Empfohlene Bücher (Deutsch)
- "WordPress: Das Handbuch" von Ralf Hesse
- "WordPress Theme Development" von various authors
Englische Bücher
- "Professional WordPress" von Hal Stern
- "WordPress Theme Development Beginner's Guide" von Rachel McCollin
17.7 GitHub-Repositories
Beliebte Themes zum Lernen
- Underscores: https://github.com/automattic/underscores
- Starter-Theme von Automattic
- Twenty Twenty-Four: https://github.com/WordPress/twentytwentyfour
- Offizielles Standard-Theme
Nützliche Repositories
- WordPress Core: https://github.com/WordPress/WordPress
- WordPress Coding Standards: https://github.com/WordPress/WordPress-Coding-Standards
17.8 Lokale Entwicklungsumgebungen
1. Local WP (Früher "Local by Flywheel")
URL: https://localwp.com/
Vorteile:
- Einfach zu bedienen
- Speziell für WordPress
- Schnelle Einrichtung
2. XAMPP
URL: https://www.apachefriends.org/
Vorteile:
- Kostenlos
- Cross-Platform
- Beinhaltet Apache, MySQL, PHP
3. Docker (Für Fortgeschrittene)
Vorteile:
- Isolierte Umgebungen
- Reproduzierbar
- Professionell
17.9 WordPress-CLI
WP-CLI installieren
URL: https://wp-cli.org/
Befehle:
bash
# Theme aktivieren
wp theme activate mein-theme
# Plugin installieren
wp plugin install contact-form-7 --activate
# WordPress aktualisieren
wp core update
# Sitemap generieren
wp sitemap📝 Übung 17: Ressourcen erforschen
Ziel: Erforschen Sie nützliche Ressourcen für WordPress-Theme-Entwicklung.
Schritte:
- Besuchen Sie die WordPress Code Reference
- Lesen Sie das Theme Handbook
- Installieren Sie Query Monitor
- Erstellen Sie ein Theme mit Underscores als Basis
✅ Zusammenfassung
In diesem Kapitel haben Sie gelernt:
- ✅ Offizielle WordPress-Dokumentation zu verwenden
- ✅ Frontend-Frameworks in WordPress zu nutzen
- ✅ Tools für Theme-Entwicklung zu verwenden
- ✅ Community-Ressourcen zu nutzen
- ✅ WP-CLI für Kommandozeilen-Befehle zu verwenden
Nächstes Kapitel: Wir machen eine Zusammenfassung des Tutorials.