WordPress Tema Customizer ile Tema Ayar Paneli Oluşturmak

Bu bölümde, kullanıcıların temanızda renk seçmesi, logo yüklemesi, footer metni düzenlemesi gibi işlemleri admin panelinden kolayca yapabilmesi için bir Customizer paneli oluşturacağız.

🧩 Neden Customizer?

Canlı önizleme ile kullanıcı dostu
WordPress çekirdeği ile tam uyumlu
Kodla uğraşmadan tema ayarlarını yönetme imkanı
Tema ürünleştirmek isteyenler için olmazsa olmaz

🧪 1. Customizer Temel Yapısı

functions.php içine şunu ekleyerek başlayalım:

function benim_tema_customize_register($wp_customize) {
    // Section oluştur
    $wp_customize->add_section('benim_tema_ayarlar', array(
        'title'       => __('Tema Ayarları', 'benim_tema'),
        'description' => __('Logo, renk ve footer ayarları.', 'benim_tema'),
        'priority'    => 30,
    ));

    // Ayar: Site logosu
    $wp_customize->add_setting('benim_logo');

    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'benim_logo', array(
        'label'    => __('Site Logosu', 'benim_tema'),
        'section'  => 'benim_tema_ayarlar',
        'settings' => 'benim_logo',
    )));
}
add_action('customize_register', 'benim_tema_customize_register');

🎨 2. Renk Seçici Eklemek

$wp_customize->add_setting('ana_renk', array(
    'default' => '#3498db',
    'sanitize_callback' => 'sanitize_hex_color'
));

$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ana_renk', array(
    'label'    => __('Ana Renk', 'benim_tema'),
    'section'  => 'benim_tema_ayarlar',
    'settings' => 'ana_renk',
)));

CSS tarafında bu rengi kullanmak için inline stil ya da :root değişkeni ile entegre et:

<style>
:root {
  --ana-renk: <?php echo get_theme_mod('ana_renk', '#3498db'); ?>;
}
</style>

📝 3. Footer Yazısı Değiştirilebilir Olsun

$wp_customize->add_setting('footer_yazi', array(
    'default' => '© 2025 Tüm hakları saklıdır.',
    'sanitize_callback' => 'sanitize_text_field'
));

$wp_customize->add_control('footer_yazi', array(
    'label'    => __('Footer Yazısı', 'benim_tema'),
    'section'  => 'benim_tema_ayarlar',
    'type'     => 'text',
));

Footer dosyasında kullanmak:

<p><?php echo esc_html(get_theme_mod('footer_yazi')); ?></p>

📦 4. Bonus – Aç/Kapat Anahtarı

$wp_customize->add_setting('sidebar_goster', array(
    'default' => true,
    'sanitize_callback' => 'wp_validate_boolean',
));

$wp_customize->add_control('sidebar_goster', array(
    'label'    => __('Sidebar gösterilsin mi?', 'benim_tema'),
    'section'  => 'benim_tema_ayarlar',
    'type'     => 'checkbox',
));

Kullanımı:

<?php if (get_theme_mod('sidebar_goster', true)) : ?>
  <?php get_sidebar(); ?>
<?php endif; ?>

📱 5. Customizer Paneli Nerede Görülür?

Admin panelinde: Görünüm > Özelleştir
Kendi özel başlığınızla “Tema Ayarları” bölümü gelir

🚀 Gelişmiş Konular (İleri Seviye)

Sekmeli Customizer yapıları (panel, section, control hiyerarşisi)
ACF Pro ile özel tema paneli oluşturmak
Theme Settings API ile tamamen ayrı admin paneli (ACF alternatifi)
customize_preview.js dosyası ile canlı stil değiştirme

🔚 Sonuç: Temanız Artık Hazır!

🎉 Artık temanız sadece frontend değil, backend tarafında da yönetilebilir oldu.
Bu adımla temanız profesyonel WordPress temalarla yarışabilecek seviyeye geldi.