masbudikusuma/edukarsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 21:13:09 +07:00
parent bbdce3157d
commit ffda373293
2 changed files with 283 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inc/admin-menu.php
+232 -176
View File
@@ -1,176 +1,232 @@
<?php
function edukarsa_admin_menu() {
add_menu_page( 'EduKarsa', 'EduKarsa', 'manage_options', 'edukarsa_main_menu', 'edukarsa_welcome_page_html', 'dashicons-welcome-learn-more', 2 );
add_submenu_page( 'edukarsa_main_menu', 'Tentang Tema', 'Tentang Tema', 'manage_options', 'edukarsa_main_menu', 'edukarsa_welcome_page_html' );
add_submenu_page( 'edukarsa_main_menu', 'Pengaturan Utama', 'Pengaturan Utama', 'manage_options', 'edukarsa_settings', 'edukarsa_settings_page_html' );
add_submenu_page( 'edukarsa_main_menu', 'Semua Slider', '🌟 Slider Banner', 'manage_options', 'edit.php?post_type=slider' );
add_submenu_page( 'edukarsa_main_menu', 'Semua Program', '📚 Program Kami', 'manage_options', 'edit.php?post_type=program' );
add_submenu_page( 'edukarsa_main_menu', 'Semua Keunggulan', '⭐ Keunggulan', 'manage_options', 'edit.php?post_type=keunggulan' );
add_submenu_page( 'edukarsa_main_menu', 'Semua Milestone', '🏆 Milestone', 'manage_options', 'edit.php?post_type=milestone' );
}
add_action( 'admin_menu', 'edukarsa_admin_menu' );
function edukarsa_register_settings() {
$options = array(
// 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',
// Logo
'edukarsa_header_logo',
// Custom Teks (Keunggulan & News)
'edukarsa_keunggulan_subtitle', 'edukarsa_keunggulan_title', 'edukarsa_news_title',
// Stats Fields
'edukarsa_stat1_angka', 'edukarsa_stat1_label', 'edukarsa_stat1_desc', 'edukarsa_stat1_icon',
'edukarsa_stat2_angka', 'edukarsa_stat2_label', 'edukarsa_stat2_desc', 'edukarsa_stat2_icon',
'edukarsa_stat3_angka', 'edukarsa_stat3_label', 'edukarsa_stat3_desc', 'edukarsa_stat3_icon',
// About & Video
'edukarsa_foto_kepsek', 'edukarsa_nama_kepsek', 'edukarsa_subtitle_about', 'edukarsa_teks_sambutan', 'edukarsa_link_about',
'edukarsa_video1_thumb', 'edukarsa_video1_url', 'edukarsa_video2_thumb', 'edukarsa_video2_url',
// Mid Section Parallax
'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
// CTA & Footer
'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_footer_copyright', 'edukarsa_custom_css'
);
foreach ( $options as $opt ) { register_setting( 'edukarsa_settings_group', $opt ); }
}
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>';
}
function edukarsa_settings_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return;
?>
<style>
.edukarsa-panel { background:#fff; padding:20px 30px; border:1px solid #ccd0d4; border-radius:4px; margin-bottom: 20px; max-width: 950px; }
.edukarsa-panel h2 { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 0; color: #0b4a8e; }
.toggle-row { display: flex; align-items: center; gap: 10px; font-weight: bold; background: #f0f7ff; padding: 15px; border-left: 4px solid #0b4a8e; }
.hidden-row { display: none; }
</style>
<div class="wrap">
<h1>Pengaturan EduKarsa Lengkap</h1>
<?php settings_errors(); ?>
<form action="options.php" method="post">
<?php settings_fields( 'edukarsa_settings_group' ); ?>
<div class="edukarsa-panel">
<h2>1. Header, Logo & Slider</h2>
<table class="form-table">
<tr><th>Logo Website</th><td><input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#edukarsa_header_logo" value="Upload Logo" /></td></tr>
</table>
<hr>
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?> /> <label>Tampilkan Slider Atas</label></div>
<div class="toggle-row" style="margin-top:10px;"><input type="checkbox" class="section-toggle" data-target=".row-stats" name="edukarsa_tampil_stats" value="1" <?php checked(1, get_option('edukarsa_tampil_stats', 1)); ?> /> <label>Tampilkan 3 Kotak Statistik</label></div>
<table class="form-table row-stats hidden-row">
<?php for($i=1; $i<=3; $i++) : ?>
<tr>
<th>Statistik <?php echo $i; ?></th>
<td>
Ikon: <input type="text" id="stat<?php echo $i; ?>_icon" name="edukarsa_stat<?php echo $i; ?>_icon" value="<?php echo esc_url(get_option('edukarsa_stat'.$i.'_icon')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#stat<?php echo $i; ?>_icon" value="Upload" /><br>
Angka: <input type="text" name="edukarsa_stat<?php echo $i; ?>_angka" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_angka')); ?>" class="regular-text"><br>
Judul: <input type="text" name="edukarsa_stat<?php echo $i; ?>_label" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_label')); ?>" class="regular-text"><br>
Subteks: <input type="text" name="edukarsa_stat<?php echo $i; ?>_desc" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_desc')); ?>" class="regular-text">
</td>
</tr>
<?php endfor; ?>
</table>
</div>
<div class="edukarsa-panel">
<h2>2. Tentang Kami</h2>
<div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-about" name="edukarsa_tampil_about" value="1" <?php checked(1, get_option('edukarsa_tampil_about', 1)); ?> /> <label>Tampilkan Seksi About</label></div>
<table class="form-table row-about hidden-row">
<tr><th>Foto</th><td><input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>"><input type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek" value="Upload" /></td></tr>
<tr><th>Nama</th><td><input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>" class="large-text" /></td></tr>
<tr><th>Sub-Judul</th><td><input type="text" name="edukarsa_subtitle_about" value="<?php echo esc_attr(get_option('edukarsa_subtitle_about')); ?>" class="large-text" /></td></tr>
<tr><th>Teks</th><td><textarea name="edukarsa_teks_sambutan" rows="4" class="large-text"><?php echo esc_textarea(get_option('edukarsa_teks_sambutan')); ?></textarea></td></tr>
<tr><th>Link</th><td><input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>"></td></tr>
</table>
</div>
<div class="edukarsa-panel">
<h2>3. Program, Milestones, & Keunggulan</h2>
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?> /> <label>Tampilkan 4 Milestone</label></div>
<div class="toggle-row" style="margin-top:10px;"><input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?> /> <label>Tampilkan Program (3 Grid)</label></div>
<hr>
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?> /> <label>Tampilkan Keunggulan (9 Grid)</label></div>
<table class="form-table">
<tr><th>Subtitle (Contoh: WHY CHOOSE US)</th><td><input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>" class="regular-text"></td></tr>
<tr><th>Judul (Contoh: Keunggulan Program)</th><td><input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>" class="regular-text"></td></tr>
</table>
</div>
<div class="edukarsa-panel">
<h2>4. Video & Latar Parallax (Area Biru Tengah)</h2>
<table class="form-table">
<tr><th>Gambar Parallax</th><td><input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>"><input type="button" class="button btn-upload" data-target="#mid_bg_image" value="Upload" /></td></tr>
<tr><th>Warna Overlay Parallax</th><td><input type="color" name="edukarsa_mid_bg_color" value="<?php echo esc_attr(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?>"></td></tr>
</table>
<hr>
<div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-video" name="edukarsa_tampil_video" value="1" <?php checked(1, get_option('edukarsa_tampil_video', 1)); ?> /> <label>Tampilkan Video</label></div>
<table class="form-table row-video hidden-row">
<tr><th>Video 1</th><td>Thumb: <input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid1_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>"></td></tr>
<tr><th>Video 2</th><td>Thumb: <input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid2_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>"></td></tr>
</table>
</div>
<div class="edukarsa-panel">
<h2>5. CTA, Berita, Footer & Sosial Media</h2>
<div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-cta" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?> /> <label>Tampilkan CTA PPDB</label></div>
<table class="form-table row-cta hidden-row">
<tr><th>Gambar Bg</th><td><input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>"><input type="button" class="button btn-upload" data-target="#cta_bg" value="Up" /></td></tr>
<tr><th>Judul</th><td><input type="text" name="edukarsa_cta_title" value="<?php echo esc_attr(get_option('edukarsa_cta_title')); ?>" class="large-text"></td></tr>
<tr><th>Tombol</th><td>Teks: <input type="text" name="edukarsa_cta_btn_teks" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_teks')); ?>"><br>URL: <input type="text" name="edukarsa_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_url')); ?>"></td></tr>
</table>
<hr>
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?> /> <label>Tampilkan Berita</label></div>
<table class="form-table">
<tr><th>Judul Seksi Berita</th><td><input type="text" name="edukarsa_news_title" value="<?php echo esc_attr(get_option('edukarsa_news_title', 'News & Update')); ?>" class="regular-text"></td></tr>
</table>
<h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Footer</h3>
<table class="form-table">
<tr><th>Alamat</th><td><textarea name="edukarsa_footer_alamat" rows="2" class="large-text"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea></td></tr>
<tr><th>Telepon</th><td><input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>"></td></tr>
<tr><th>Email</th><td><input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>"></td></tr>
<tr><th>Copyright</th><td><input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright')); ?>"></td></tr>
</table>
<h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Sosial Media</h3>
<table class="form-table">
<tr><th>Facebook</th><td><input type="checkbox" name="edukarsa_tampil_fb" value="1" <?php checked(1, get_option('edukarsa_tampil_fb', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_fb" value="<?php echo esc_attr(get_option('edukarsa_footer_fb')); ?>"></td></tr>
<tr><th>Instagram</th><td><input type="checkbox" name="edukarsa_tampil_ig" value="1" <?php checked(1, get_option('edukarsa_tampil_ig', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_ig" value="<?php echo esc_attr(get_option('edukarsa_footer_ig')); ?>"></td></tr>
<tr><th>YouTube</th><td><input type="checkbox" name="edukarsa_tampil_yt" value="1" <?php checked(1, get_option('edukarsa_tampil_yt', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_yt" value="<?php echo esc_attr(get_option('edukarsa_footer_yt')); ?>"></td></tr>
</table>
</div>
<p class="submit"><?php submit_button( 'Simpan Pengaturan', 'primary', 'submit', false ); ?></p>
</form>
</div>
<script>
jQuery(document).ready(function($){
function handleToggles() { $('.section-toggle').each(function(){ var t = $(this).data('target'); if($(this).is(':checked')){ $(t).fadeIn(200); } else { $(t).hide(); } }); }
$('.section-toggle').change(handleToggles); handleToggles();
var mediaUploader;
$('.btn-upload').click(function(e) {
e.preventDefault(); var target = $(this).data('target');
if (mediaUploader) { mediaUploader.targetInput = target; mediaUploader.open(); return; }
mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Pilih Gambar', button: { text: 'Pilih' }, multiple: false });
mediaUploader.targetInput = target;
mediaUploader.on('select', function() { $(mediaUploader.targetInput).val(mediaUploader.state().get('selection').first().toJSON().url); });
mediaUploader.open();
});
});
</script>
<?php
}
<?php
function edukarsa_admin_menu() {
add_menu_page( 'EduKarsa', 'EduKarsa', 'manage_options', 'edukarsa_main_menu', 'edukarsa_welcome_page_html', 'dashicons-welcome-learn-more', 2 );
add_submenu_page( 'edukarsa_main_menu', 'Tentang Tema', 'Tentang Tema', 'manage_options', 'edukarsa_main_menu', 'edukarsa_welcome_page_html' );
add_submenu_page( 'edukarsa_main_menu', 'Pengaturan Utama', 'Pengaturan Utama', 'manage_options', 'edukarsa_settings', 'edukarsa_settings_page_html' );
add_submenu_page( 'edukarsa_main_menu', 'Semua Slider', '🌟 Slider Banner', 'manage_options', 'edit.php?post_type=slider' );
add_submenu_page( 'edukarsa_main_menu', 'Semua Program', '📚 Program Kami', 'manage_options', 'edit.php?post_type=program' );
add_submenu_page( 'edukarsa_main_menu', 'Semua Keunggulan', '⭐ Keunggulan', 'manage_options', 'edit.php?post_type=keunggulan' );
add_submenu_page( 'edukarsa_main_menu', 'Semua Milestone', '🏆 Milestone', 'manage_options', 'edit.php?post_type=milestone' );
}
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',
// Logo
'edukarsa_header_logo',
// Custom Teks (Keunggulan & News)
'edukarsa_keunggulan_subtitle', 'edukarsa_keunggulan_title', 'edukarsa_news_title',
// Stats Fields
'edukarsa_stat1_angka', 'edukarsa_stat1_label', 'edukarsa_stat1_desc', 'edukarsa_stat1_icon',
'edukarsa_stat2_angka', 'edukarsa_stat2_label', 'edukarsa_stat2_desc', 'edukarsa_stat2_icon',
'edukarsa_stat3_angka', 'edukarsa_stat3_label', 'edukarsa_stat3_desc', 'edukarsa_stat3_icon',
// About & Video
'edukarsa_foto_kepsek', 'edukarsa_nama_kepsek', 'edukarsa_subtitle_about', 'edukarsa_teks_sambutan', 'edukarsa_link_about',
'edukarsa_video1_thumb', 'edukarsa_video1_url', 'edukarsa_video2_thumb', 'edukarsa_video2_url',
// Mid Section Parallax
'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
// CTA & Footer
'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_footer_copyright', 'edukarsa_custom_css'
);
foreach ( $options as $opt ) { register_setting( 'edukarsa_settings_group', $opt ); }
}
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, 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:8px; margin-bottom: 20px; max-width: 950px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.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; 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 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">
<tr><th>Logo Website</th><td><input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#edukarsa_header_logo" value="Upload Logo" /></td></tr>
</table>
<hr>
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?> /> <label>Tampilkan Slider Atas</label></div>
<div class="toggle-row" style="margin-top:10px;"><input type="checkbox" class="section-toggle" data-target=".row-stats" name="edukarsa_tampil_stats" value="1" <?php checked(1, get_option('edukarsa_tampil_stats', 1)); ?> /> <label>Tampilkan 3 Kotak Statistik</label></div>
<table class="form-table row-stats hidden-row">
<?php for($i=1; $i<=3; $i++) : ?>
<tr>
<th>Statistik <?php echo $i; ?></th>
<td>
Ikon: <input type="text" id="stat<?php echo $i; ?>_icon" name="edukarsa_stat<?php echo $i; ?>_icon" value="<?php echo esc_url(get_option('edukarsa_stat'.$i.'_icon')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#stat<?php echo $i; ?>_icon" value="Upload" /><br>
Angka: <input type="text" name="edukarsa_stat<?php echo $i; ?>_angka" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_angka')); ?>" class="regular-text"><br>
Judul: <input type="text" name="edukarsa_stat<?php echo $i; ?>_label" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_label')); ?>" class="regular-text"><br>
Subteks: <input type="text" name="edukarsa_stat<?php echo $i; ?>_desc" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_desc')); ?>" class="regular-text">
</td>
</tr>
<?php endfor; ?>
</table>
</div>
<div class="edukarsa-panel">
<h2>2. Tentang Kami</h2>
<div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-about" name="edukarsa_tampil_about" value="1" <?php checked(1, get_option('edukarsa_tampil_about', 1)); ?> /> <label>Tampilkan Seksi About</label></div>
<table class="form-table row-about hidden-row">
<tr><th>Foto</th><td><input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>"><input type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek" value="Upload" /></td></tr>
<tr><th>Nama</th><td><input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>" class="large-text" /></td></tr>
<tr><th>Sub-Judul</th><td><input type="text" name="edukarsa_subtitle_about" value="<?php echo esc_attr(get_option('edukarsa_subtitle_about')); ?>" class="large-text" /></td></tr>
<tr><th>Teks</th><td><textarea name="edukarsa_teks_sambutan" rows="4" class="large-text"><?php echo esc_textarea(get_option('edukarsa_teks_sambutan')); ?></textarea></td></tr>
<tr><th>Link</th><td><input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>"></td></tr>
</table>
</div>
<div class="edukarsa-panel">
<h2>3. Program, Milestones, & Keunggulan</h2>
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?> /> <label>Tampilkan 4 Milestone</label></div>
<div class="toggle-row" style="margin-top:10px;"><input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?> /> <label>Tampilkan Program (3 Grid)</label></div>
<hr>
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?> /> <label>Tampilkan Keunggulan (9 Grid)</label></div>
<table class="form-table">
<tr><th>Subtitle (Contoh: WHY CHOOSE US)</th><td><input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>" class="regular-text"></td></tr>
<tr><th>Judul (Contoh: Keunggulan Program)</th><td><input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>" class="regular-text"></td></tr>
</table>
</div>
<div class="edukarsa-panel">
<h2>4. Video & Latar Parallax (Area Biru Tengah)</h2>
<table class="form-table">
<tr><th>Gambar Parallax</th><td><input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>"><input type="button" class="button btn-upload" data-target="#mid_bg_image" value="Upload" /></td></tr>
<tr><th>Warna Overlay Parallax</th><td><input type="color" name="edukarsa_mid_bg_color" value="<?php echo esc_attr(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?>"></td></tr>
</table>
<hr>
<div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-video" name="edukarsa_tampil_video" value="1" <?php checked(1, get_option('edukarsa_tampil_video', 1)); ?> /> <label>Tampilkan Video</label></div>
<table class="form-table row-video hidden-row">
<tr><th>Video 1</th><td>Thumb: <input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid1_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>"></td></tr>
<tr><th>Video 2</th><td>Thumb: <input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid2_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>"></td></tr>
</table>
</div>
<div class="edukarsa-panel">
<h2>5. CTA, Berita, Footer & Sosial Media</h2>
<div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-cta" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?> /> <label>Tampilkan CTA PPDB</label></div>
<table class="form-table row-cta hidden-row">
<tr><th>Gambar Bg</th><td><input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>"><input type="button" class="button btn-upload" data-target="#cta_bg" value="Up" /></td></tr>
<tr><th>Judul</th><td><input type="text" name="edukarsa_cta_title" value="<?php echo esc_attr(get_option('edukarsa_cta_title')); ?>" class="large-text"></td></tr>
<tr><th>Tombol</th><td>Teks: <input type="text" name="edukarsa_cta_btn_teks" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_teks')); ?>"><br>URL: <input type="text" name="edukarsa_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_url')); ?>"></td></tr>
</table>
<hr>
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?> /> <label>Tampilkan Berita</label></div>
<table class="form-table">
<tr><th>Judul Seksi Berita</th><td><input type="text" name="edukarsa_news_title" value="<?php echo esc_attr(get_option('edukarsa_news_title', 'News & Update')); ?>" class="regular-text"></td></tr>
</table>
<h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Footer</h3>
<table class="form-table">
<tr><th>Alamat</th><td><textarea name="edukarsa_footer_alamat" rows="2" class="large-text"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea></td></tr>
<tr><th>Telepon</th><td><input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>"></td></tr>
<tr><th>Email</th><td><input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>"></td></tr>
<tr><th>Copyright</th><td><input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright')); ?>"></td></tr>
</table>
<h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Sosial Media</h3>
<table class="form-table">
<tr><th>Facebook</th><td><input type="checkbox" name="edukarsa_tampil_fb" value="1" <?php checked(1, get_option('edukarsa_tampil_fb', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_fb" value="<?php echo esc_attr(get_option('edukarsa_footer_fb')); ?>"></td></tr>
<tr><th>Instagram</th><td><input type="checkbox" name="edukarsa_tampil_ig" value="1" <?php checked(1, get_option('edukarsa_tampil_ig', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_ig" value="<?php echo esc_attr(get_option('edukarsa_footer_ig')); ?>"></td></tr>
<tr><th>YouTube</th><td><input type="checkbox" name="edukarsa_tampil_yt" value="1" <?php checked(1, get_option('edukarsa_tampil_yt', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_yt" value="<?php echo esc_attr(get_option('edukarsa_footer_yt')); ?>"></td></tr>
</table>
</div>
<p class="submit"><?php submit_button( 'Simpan Pengaturan', 'primary', 'submit', false ); ?></p>
</form>
</div>
<script>
jQuery(document).ready(function($){
function handleToggles() { $('.section-toggle').each(function(){ var t = $(this).data('target'); if($(this).is(':checked')){ $(t).fadeIn(200); } else { $(t).hide(); } }); }
$('.section-toggle').change(handleToggles); handleToggles();
var mediaUploader;
$('.btn-upload').click(function(e) {
e.preventDefault(); var target = $(this).data('target');
if (mediaUploader) { mediaUploader.targetInput = target; mediaUploader.open(); return; }
mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Pilih Gambar', button: { text: 'Pilih' }, multiple: false });
mediaUploader.targetInput = target;
mediaUploader.on('select', function() { $(mediaUploader.targetInput).val(mediaUploader.state().get('selection').first().toJSON().url); });
mediaUploader.open();
});
});
</script>
<?php
}
inc/setup.php
+51 -9
View File
@@ -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)
wp_enqueue_style(
'edukarsa-google-fonts',
'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap',
array(),
null
);
$font_choice = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
$font_url = '';
$font_family = "'Plus Jakarta Sans', system-ui, sans-serif";
// 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' );