Kapitel 12: Customizer API (Theme-Einstellungen)

12.1 Was ist der Customizer?

Der WordPress Customizer erlaubt Benutzern, Theme-Einstellungen visuell anzupassen.

Vorteile

• ✅ Echtzeit-Vorschau
• ✅ Kein Code-Wissen erforderlich
• ✅ Sicherer als Theme-Editor
• ✅ Standard-WordPress-Funktion

12.2 Customizer-Optionen hinzufügen

Schritt 1: Customizer registrieren

Fügen Sie in functions.php hinzu:

function mein_theme_customize_register($wp_customize) {
    // Hier kommen alle Customizer-Einstellungen hin
}
add_action('customize_register', 'mein_theme_customize_register');

12.3 Logo, Farben, Banner-Bild hinzufügen

1. Logo hinzufügen

function mein_theme_customize_register($wp_customize) {
    // Logo
    $wp_customize->add_section('mein_theme_header', array(
        'title'    => __('Header-Einstellungen', 'mein-theme'),
        'priority' => 30,
    ));

    $wp_customize->add_setting('mein_theme_logo', array(
        'default'           => '',
        'sanitize_callback' => 'absint',
    ));

    $wp_customize->add_control(new WP_Customize_Cropped_Image_Control($wp_customize, 'mein_theme_logo', array(
        'label'    => __('Logo hochladen', 'mein-theme'),
        'section'  => 'mein_theme_header',
        'width'    => 200,
        'height'   => 60,
        'flex-width'  => true,
        'flex-height' => true,
    )));
}
add_action('customize_register', 'mein_theme_customize_register');

In header.php anzeigen:

<?php
$logo_id = get_theme_mod('mein_theme_logo');
if ($logo_id) {
    echo wp_get_attachment_image($logo_id, 'full', false, array('class' => 'custom-logo'));
}
?>

2. Farben ändern

$wp_customize->add_setting('mein_theme_primary_color', array(
    'default'           => '#1a73e8',
    'sanitize_callback' => 'sanitize_hex_color',
));

$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'mein_theme_primary_color', array(
    'label'   => __('Primärfarbe', 'mein-theme'),
    'section' => 'mein_theme_colors',
)));

In header.php (CSS dynamisch generieren):

<style>
    .site-header {
        background-color: <?php echo get_theme_mod('mein_theme_primary_color', '#1a73e8'); ?>;
    }
</style>

3. Banner-Bild hinzufügen

$wp_customize->add_setting('mein_theme_banner', array(
    'default'           => '',
    'sanitize_callback' => 'absint',
));

$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'mein_theme_banner', array(
    'label'    => __('Banner-Bild', 'mein-theme'),
    'section'  => 'mein_theme_header',
)));

12.4 Copyright-Text anpassbar machen

$wp_customize->add_setting('mein_theme_copyright', array(
    'default'           => 'Alle Rechte vorbehalten.',
    'sanitize_callback' => 'sanitize_text_field',
));

$wp_customize->add_control('mein_theme_copyright', array(
    'label'   => __('Copyright-Text', 'mein-theme'),
    'section' => 'mein_theme_footer',
    'type'    => 'text',
));

In footer.php anzeigen:

<p>© <?php echo date('Y'); ?> <?php echo get_theme_mod('mein_theme_copyright', 'Alle Rechte vorbehalten.'); ?></p>

12.5 Social Media Links hinzufügen

$social_platforms = array('facebook', 'twitter', 'instagram', 'linkedin');

foreach ($social_platforms as $platform) {
    $wp_customize->add_setting('mein_theme_social_' . $platform, array(
        'default'           => '',
        'sanitize_callback' => 'esc_url_raw',
    ));

    $wp_customize->add_control('mein_theme_social_' . $platform, array(
        'label'   => ucfirst($platform) . ' URL',
        'section' => 'mein_theme_social',
        'type'    => 'url',
    ));
}

In footer.php anzeigen:

<div class="social-links">
    <?php
    $platforms = array('facebook', 'twitter', 'instagram', 'linkedin');
    foreach ($platforms as $platform) {
        $url = get_theme_mod('mein_theme_social_' . $platform);
        if ($url) {
            echo '<a href="' . esc_url($url) . '" target="_blank">' . ucfirst($platform) . '</a>';
        }
    }
    ?>
</div>

12.6 Einstellungen im Template verwenden

get_theme_mod() verwenden

<?php
$primary_color = get_theme_mod('mein_theme_primary_color', '#1a73e8');
$copyright     = get_theme_mod('mein_theme_copyright', 'Alle Rechte vorbehalten.');
$logo_id       = get_theme_mod('mein_theme_logo');
?>

12.7 Customizer-Einstellungen speichern

WordPress speichert Customizer-Einstellungen automatisch in der Datenbank (wp_options Tabelle).

Abrufen:

$value = get_theme_mod('setting_name');

Löschen:

remove_theme_mod('setting_name');

📝 Übung 12: Customizer-Einstellungen hinzufügen

Ziel: Machen Sie Ihr Theme über den Customizer anpassbar.

Schritte:

1. Registrieren Sie Customizer-Einstellungen in functions.php
2. Fügen Sie Logo, Primärfarbe, Banner-Bild hinzu
3. Machen Sie den Copyright-Text anpassbar
4. Testen Sie im Customizer (Design → Anpassen)

---

✅ Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Den Customizer zu verwenden
• ✅ Logo, Farben, Banner-Bild hinzuzufügen
• ✅ Copyright-Text anpassbar zu machen
• ✅ Social Media Links hinzuzufügen
• ✅ Einstellungen im Template anzuzeigen

Nächstes Kapitel: Wir lernen Internationalisierung (Übersetzungen).

➡️ Zu Kapitel 13: Internationalisierung →