Kapitel 14: Sicherheit & Performance

14.1 Theme-Sicherheit (Vermeiden von Sicherheitslücken)

1. Cross-Site Scripting (XSS) vermeiden

XSS tritt auf, wenn bösartige Skripte in Ihre Website eingeschleust werden.

Unsichere Praktiken (❌):

// Unsicher!
echo $_GET['name'];

Sichere Praktiken (✅):

// Sicher!
echo esc_html($_GET['name']);

2. SQL-Injection vermeiden

SQL-Injection tritt auf, wenn SQL-Befehle eingeschleust werden.

Unsicher (❌):

$query = "SELECT * FROM wp_posts WHERE ID = " . $_GET['id'];
$result = $wpdb->get_results($query);

Sicher (✅):

$query = $wpdb->prepare("SELECT * FROM wp_posts WHERE ID = %d", $_GET['id']);
$result = $wpdb->get_results($query);

3. Nonce (Number Used Once) verwenden

Nonces schützen vor CSRF (Cross-Site Request Forgery).

Nonce erstellen:

$nonce = wp_create_nonce('mein_action');

Nonce prüfen:

if (!wp_verify_nonce($_POST['_wpnonce'], 'mein_action')) {
    wp_die('Sicherheitsfehler');
}

4. Datei-Uploads einschränken

Beschränken Sie, welche Dateitypen hochgeladen werden dürfen.

function mein_theme_mime_types($mimes) {
    unset($mimes['php']);  // PHP-Dateien blockieren
    return $mimes;
}
add_filter('upload_mimes', 'mein_theme_mime_types');

5. wp_nonce_field() in Formularen

<form method="post">
    <?php wp_nonce_field('mein_form_action'); ?>
    <input type="text" name="name">
    <input type="submit" value="Absenden">
</form>

Prüfen:

if (!wp_verify_nonce($_POST['_wpnonce'], 'mein_form_action')) {
    wp_die('Ungültiges Nonce');
}

14.2 Performance-Optimierung

1. Caching aktivieren

Browser-Caching (.htaccess):

# Browser Caching
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
</IfModule>

WordPress-Caching (Plugins):

• WP Rocket (Premium)
• W3 Total Cache (Kostenlos)
• WP Super Cache (Kostenlos)

2. CSS/JS minimieren

CSS minimieren:

Vorher:

/* Navigation */
.main-nav {
    background: #1a73e8;
    padding: 20px;
}

Nachher:

.main-nav{background:#1a73e8;padding:20px}

JS minimieren:

Vorher:

function toggleMenu() {
    var menu = document.querySelector('.nav');
    menu.classList.toggle('active');
}

Nachher:

function toggleMenu(){var menu=document.querySelector('.nav');menu.classList.toggle('active')}

3. Bilder optimieren

Vor dem Upload:

• TinyPNG (https://tinypng.com)
• ImageOptim (Mac)
• RIOT (Windows)

Nach dem Upload (Plugins):

• Smush
• ShortPixel
• Imagify

4. Lazy Loading aktivieren

WordPress 5.5+ hat natives Lazy Loading:

// In functions.php
add_theme_support('lazy-loading-images');

Oder im Template:

<img src="bild.jpg" loading="lazy" alt="Beschreibung">

5. CDN verwenden

Cloudflare (Kostenlos/Premium):

1. Registrieren Sie sich bei cloudflare.com
2. Ändern Sie Ihre Nameserver auf Cloudflare-Nameserver
3. Aktivieren Sie "Orange Cloud" für Ihre Domain

6. Datenbank optimieren

Post-Revisionen begrenzen:

In wp-config.php:

define('WP_POST_REVISIONS', 5);  // Max. 5 Revisionen

Autoload-Daten bereinigen:

DELETE FROM wp_options WHERE autoload = 'yes' AND option_name NOT LIKE '%important%';

Mit Plugin: WP-Optimize

14.3 Theme-Review-Richtlinien (für WordPress.org)

Wenn Sie Ihr Theme bei WordPress.org einreichen möchten, müssen Sie diese Richtlinien befolgen:

1. Sicherheit

• ✅ Alle Daten müssen validiert und bereinigt werden
• ✅ Nonces müssen verwendet werden
• ✅ Datei-Uploads müssen sicher sein

2. Code-Qualität

• ✅ PHP-Code muss PHP-Coding-Standards folgen
• ✅ HTML/CSS muss semantisch korrekt sein
• ✅ JavaScript muss Best Practices folgen

3. Dokumentation

• ✅ readme.txt muss vorhanden sein
• ✅ Alle Funktionen müssen kommentiert sein
• ✅ style.css muss Theme-Informationen enthalten

4. Lizenz

• ✅ Theme muss GPL v2 (oder später) lizenziert sein
• ✅ Alle Ressourcen müssen kompatible Lizenzen haben

14.4 readme.txt erstellen

Für WordPress.org ist eine readme.txt erforderlich.

Beispiel:

=== Modern Blog ===
Contributors: ihrname
Tags: blog, two-columns, right-sidebar
Requires at least: WordPress 5.9
Tested up to: WordPress 6.4
Requires PHP: 7.4
Stable tag: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

== Beschreibung ==

Modern Blog ist ein responsives WordPress-Theme für Blogger.

== Installation ==

1. Laden Sie das Theme herunter
2. Gehen Sie zu Design → Themes → Neu hinzufügen
3. Laden Sie das Theme hoch
4. Aktivieren Sie es

== Frequently Asked Questions ==

= Wie ändere ich die Farben? =

Gehen Sie zu Design → Anpassen → Farben.

== Changelog ==

= 1.0.0 =
* Initial release

14.5 theme-check Plugin verwenden

Theme Check ist ein Plugin, das Ihr Theme auf WordPress.org-Richtlinien prüft.

Installation:

1. Gehen Sie zu Plugins → Neu hinzufügen
2. Suchen Sie nach "Theme Check"
3. Installieren und aktivieren Sie es

Verwendung:

1. Gehen Sie zu Design → Theme Check
2. Wählen Sie Ihr Theme aus
3. Klicken Sie auf "Check it!"
4. Korrigieren Sie alle Fehler

📝 Übung 14: Theme härten

Ziel: Machen Sie Ihr Theme sicherer und schneller.

Schritte:

1. Überprüfen Sie Ihren Code auf XSS-Lücken
2. Verwenden Sie esc_html(), esc_url(), etc.
3. Aktivieren Sie Lazy Loading
4. Minimize CSS und JS
5. Testen Sie Ihr Theme mit Theme Check

---

✅ Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ XSS und SQL-Injection zu vermeiden
• ✅ Nonces zu verwenden
• ✅ Caching und CDN zu nutzen
• ✅ Bilder zu optimieren
• ✅ WordPress.org-Richtlinien zu befolgen

Nächstes Kapitel: Wir lernen Child-Themes kennen.

➡️ Zu Kapitel 15: Child-Themes →