feat(customizer): integrasi pengaturan font dinamis dan color scheme picker

inc/admin-menu.php

@@ -12,6 +12,9 @@ add_action( 'admin_menu', 'edukarsa_admin_menu' );
 
 function edukarsa_register_settings() {
     $options = array(
+        // Dynamic Appearance
+        'edukarsa_font_choice', 'edukarsa_primary_color', 'edukarsa_secondary_color', 'edukarsa_heading_color',
+
         // Toggle
         'edukarsa_tampil_slider', 'edukarsa_tampil_stats', 'edukarsa_tampil_about', 'edukarsa_tampil_milestone', 'edukarsa_tampil_program', 'edukarsa_tampil_video', 'edukarsa_tampil_keunggulan', 'edukarsa_tampil_cta', 'edukarsa_tampil_news',
         
@@ -43,25 +46,78 @@ add_action( 'admin_init', 'edukarsa_register_settings' );
 
 function edukarsa_welcome_page_html() {
     if ( ! current_user_can( 'manage_options' ) ) return;
-    echo '<div class="wrap" style="max-width:900px;"><h1>EduKarsa Dashboard</h1><p>Gunakan Pengaturan Utama untuk memodifikasi Halaman Depan.</p></div>';
+    echo '<div class="wrap" style="max-width:900px;"><h1>EduKarsa Dashboard</h1><p>Gunakan Pengaturan Utama untuk memodifikasi Halaman Depan, Desain Warna, dan Tipografi.</p></div>';
 }
 
 function edukarsa_settings_page_html() {
     if ( ! current_user_can( 'manage_options' ) ) return;
+    $font_current = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
     ?>
     <style>
-        .edukarsa-panel { background:#fff; padding:20px 30px; border:1px solid #ccd0d4; border-radius:4px; margin-bottom: 20px; max-width: 950px; }
+        .edukarsa-panel { background:#fff; padding:20px 30px; border:1px solid #ccd0d4; border-radius:8px; margin-bottom: 20px; max-width: 950px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
-        .edukarsa-panel h2 { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 0; color: #0b4a8e; }
+        .edukarsa-panel h2 { border-bottom: 2px solid #f1f5f9; padding-bottom: 12px; margin-top: 0; color: #0b4a8e; font-size: 18px; }
-        .toggle-row { display: flex; align-items: center; gap: 10px; font-weight: bold; background: #f0f7ff; padding: 15px; border-left: 4px solid #0b4a8e; }
+        .toggle-row { display: flex; align-items: center; gap: 10px; font-weight: bold; background: #f0f7ff; padding: 15px; border-left: 4px solid #0b4a8e; border-radius: 4px; }
         .hidden-row { display: none; }
+        .color-field-wrap { display: flex; align-items: center; gap: 12px; }
+        .color-field-wrap input[type="color"] { border: none; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; background: transparent; }
     </style>
 
     <div class="wrap">
-        <h1>Pengaturan EduKarsa Lengkap</h1>
+        <h1>Pengaturan Tema EduKarsa</h1>
         <?php settings_errors(); ?>
         <form action="options.php" method="post">
             <?php settings_fields( 'edukarsa_settings_group' ); ?>
             
+            <!-- PANEL BARU: TIPOGRAFI & SKEMA WARNA -->
+            <div class="edukarsa-panel">
+                <h2>🎨 Tipografi & Skema Warna Global</h2>
+                <table class="form-table">
+                    <tr>
+                        <th>Pilihan Font Tema</th>
+                        <td>
+                            <select name="edukarsa_font_choice" id="edukarsa_font_choice" style="min-width: 240px; padding: 5px;">
+                                <option value="plus_jakarta_sans" <?php selected( 'plus_jakarta_sans', $font_current ); ?>>Plus Jakarta Sans (Default Rekomendasi)</option>
+                                <option value="inter" <?php selected( 'inter', $font_current ); ?>>Inter (Modern & Netral)</option>
+                                <option value="poppins" <?php selected( 'poppins', $font_current ); ?>>Poppins (Geometris & Tegas)</option>
+                                <option value="roboto" <?php selected( 'roboto', $font_current ); ?>>Roboto (Klasik & Ringkas)</option>
+                                <option value="system" <?php selected( 'system', $font_current ); ?>>System Native (Super Cepat, Tanpa Font Luar)</option>
+                            </select>
+                            <p class="description">Font utama yang diterapkan ke seluruh halaman publikasi.</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>Warna Primer (Primary)</th>
+                        <td>
+                            <div class="color-field-wrap">
+                                <input type="color" name="edukarsa_primary_color" value="<?php echo esc_attr( get_option( 'edukarsa_primary_color', '#0b4a8e' ) ); ?>">
+                                <code><?php echo esc_html( get_option( 'edukarsa_primary_color', '#0b4a8e' ) ); ?></code>
+                            </div>
+                            <p class="description">Warna identitas kampus (header bar, tombol primer, latar footer, dan border utama).</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>Warna Sekunder / Aksen</th>
+                        <td>
+                            <div class="color-field-wrap">
+                                <input type="color" name="edukarsa_secondary_color" value="<?php echo esc_attr( get_option( 'edukarsa_secondary_color', '#1a73e8' ) ); ?>">
+                                <code><?php echo esc_html( get_option( 'edukarsa_secondary_color', '#1a73e8' ) ); ?></code>
+                            </div>
+                            <p class="description">Warna sorotan interaktif (hover tombol, kartu statistik, dan aksen badge).</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>Warna Teks Judul (Heading)</th>
+                        <td>
+                            <div class="color-field-wrap">
+                                <input type="color" name="edukarsa_heading_color" value="<?php echo esc_attr( get_option( 'edukarsa_heading_color', '#0f172a' ) ); ?>">
+                                <code><?php echo esc_html( get_option( 'edukarsa_heading_color', '#0f172a' ) ); ?></code>
+                            </div>
+                            <p class="description">Warna teks untuk seluruh judul seksi, judul berita, dan header halaman.</p>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
             <div class="edukarsa-panel">
                 <h2>1. Header, Logo & Slider</h2>
                 <table class="form-table">

inc/setup.php

@@ -20,22 +20,64 @@ add_action( 'after_setup_theme', 'edukarsa_setup' );
 
 // 2. MENGHUBUNGKAN ASET (CSS & JS FRONTEND)
 function edukarsa_scripts() {
-    // Memuat Google Font: Plus Jakarta Sans (Native Webfont)
+    $font_choice = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
-    wp_enqueue_style( 
+    $font_url = '';
-        'edukarsa-google-fonts', 
+    $font_family = "'Plus Jakarta Sans', system-ui, sans-serif";
-        'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap', 
-        array(), 
-        null 
-    );
 
-    // CSS Utama Tema dengan Cache Busting time()
+    switch ( $font_choice ) {
+        case 'inter':
+            $font_url = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap';
+            $font_family = "'Inter', system-ui, sans-serif";
+            break;
+        case 'poppins':
+            $font_url = 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap';
+            $font_family = "'Poppins', system-ui, sans-serif";
+            break;
+        case 'roboto':
+            $font_url = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap';
+            $font_family = "'Roboto', system-ui, sans-serif";
+            break;
+        case 'system':
+            $font_url = '';
+            $font_family = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+            break;
+        case 'plus_jakarta_sans':
+        default:
+            $font_url = 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap';
+            $font_family = "'Plus Jakarta Sans', system-ui, sans-serif";
+            break;
+    }
+
+    $deps = array();
+    if ( ! empty( $font_url ) ) {
+        wp_enqueue_style( 'edukarsa-dynamic-font', $font_url, array(), null );
+        $deps[] = 'edukarsa-dynamic-font';
+    }
+
+    // Load file style.css utama
     wp_enqueue_style( 
         'edukarsa-style', 
         get_template_directory_uri() . '/style.css', 
-        array('edukarsa-google-fonts'), 
+        $deps, 
         time(), 
         'all' 
     );
+
+    // Ambil opsi skema warna dari database
+    $primary_color   = sanitize_hex_color( get_option( 'edukarsa_primary_color', '#0b4a8e' ) );
+    $secondary_color = sanitize_hex_color( get_option( 'edukarsa_secondary_color', '#1a73e8' ) );
+    $heading_color   = sanitize_hex_color( get_option( 'edukarsa_heading_color', '#0f172a' ) );
+
+    // Injeksi CSS variables dinamis langsung ke selector :root
+    $custom_css = "
+        :root {
+            --primary-color: {$primary_color};
+            --secondary-color: {$secondary_color};
+            --heading-color: {$heading_color};
+            --font-main: {$font_family};
+        }
+    ";
+    wp_add_inline_style( 'edukarsa-style', $custom_css );
 }
 add_action( 'wp_enqueue_scripts', 'edukarsa_scripts' );