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 <?php
function edukarsa_admin_menu() { function edukarsa_admin_menu() {
add_menu_page( 'EduKarsa', 'EduKarsa', 'manage_options', 'edukarsa_main_menu', 'edukarsa_welcome_page_html', 'dashicons-welcome-learn-more', 2 ); 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', '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', '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 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 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 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_submenu_page( 'edukarsa_main_menu', 'Semua Milestone', '🏆 Milestone', 'manage_options', 'edit.php?post_type=milestone' );
} }
add_action( 'admin_menu', 'edukarsa_admin_menu' ); add_action( 'admin_menu', 'edukarsa_admin_menu' );
function edukarsa_register_settings() { function edukarsa_register_settings() {
$options = array( $options = array(
// Toggle // Dynamic Appearance
'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', 'edukarsa_font_choice', 'edukarsa_primary_color', 'edukarsa_secondary_color', 'edukarsa_heading_color',
// Logo // Toggle
'edukarsa_header_logo', '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',
// Custom Teks (Keunggulan & News) // Logo
'edukarsa_keunggulan_subtitle', 'edukarsa_keunggulan_title', 'edukarsa_news_title', 'edukarsa_header_logo',
// Stats Fields // Custom Teks (Keunggulan & News)
'edukarsa_stat1_angka', 'edukarsa_stat1_label', 'edukarsa_stat1_desc', 'edukarsa_stat1_icon', 'edukarsa_keunggulan_subtitle', 'edukarsa_keunggulan_title', 'edukarsa_news_title',
'edukarsa_stat2_angka', 'edukarsa_stat2_label', 'edukarsa_stat2_desc', 'edukarsa_stat2_icon',
'edukarsa_stat3_angka', 'edukarsa_stat3_label', 'edukarsa_stat3_desc', 'edukarsa_stat3_icon', // Stats Fields
'edukarsa_stat1_angka', 'edukarsa_stat1_label', 'edukarsa_stat1_desc', 'edukarsa_stat1_icon',
// About & Video 'edukarsa_stat2_angka', 'edukarsa_stat2_label', 'edukarsa_stat2_desc', 'edukarsa_stat2_icon',
'edukarsa_foto_kepsek', 'edukarsa_nama_kepsek', 'edukarsa_subtitle_about', 'edukarsa_teks_sambutan', 'edukarsa_link_about', 'edukarsa_stat3_angka', 'edukarsa_stat3_label', 'edukarsa_stat3_desc', 'edukarsa_stat3_icon',
'edukarsa_video1_thumb', 'edukarsa_video1_url', 'edukarsa_video2_thumb', 'edukarsa_video2_url',
// About & Video
// Mid Section Parallax 'edukarsa_foto_kepsek', 'edukarsa_nama_kepsek', 'edukarsa_subtitle_about', 'edukarsa_teks_sambutan', 'edukarsa_link_about',
'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color', 'edukarsa_video1_thumb', 'edukarsa_video1_url', 'edukarsa_video2_thumb', 'edukarsa_video2_url',
// CTA & Footer // Mid Section Parallax
'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url', 'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
'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'
); // CTA & Footer
foreach ( $options as $opt ) { register_setting( 'edukarsa_settings_group', $opt ); } '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'
add_action( 'admin_init', 'edukarsa_register_settings' ); );
foreach ( $options as $opt ) { register_setting( 'edukarsa_settings_group', $opt ); }
function edukarsa_welcome_page_html() { }
if ( ! current_user_can( 'manage_options' ) ) return; add_action( 'admin_init', 'edukarsa_register_settings' );
echo '<div class="wrap" style="max-width:900px;"><h1>EduKarsa Dashboard</h1><p>Gunakan Pengaturan Utama untuk memodifikasi Halaman Depan.</p></div>';
} function edukarsa_welcome_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return;
function edukarsa_settings_page_html() { 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>';
if ( ! current_user_can( 'manage_options' ) ) return; }
?>
<style> function edukarsa_settings_page_html() {
.edukarsa-panel { background:#fff; padding:20px 30px; border:1px solid #ccd0d4; border-radius:4px; margin-bottom: 20px; max-width: 950px; } if ( ! current_user_can( 'manage_options' ) ) return;
.edukarsa-panel h2 { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 0; color: #0b4a8e; } $font_current = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
.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>
</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; }
<div class="wrap"> .toggle-row { display: flex; align-items: center; gap: 10px; font-weight: bold; background: #f0f7ff; padding: 15px; border-left: 4px solid #0b4a8e; border-radius: 4px; }
<h1>Pengaturan EduKarsa Lengkap</h1> .hidden-row { display: none; }
<?php settings_errors(); ?> .color-field-wrap { display: flex; align-items: center; gap: 12px; }
<form action="options.php" method="post"> .color-field-wrap input[type="color"] { border: none; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; background: transparent; }
<?php settings_fields( 'edukarsa_settings_group' ); ?> </style>
<div class="edukarsa-panel"> <div class="wrap">
<h2>1. Header, Logo & Slider</h2> <h1>Pengaturan Tema EduKarsa</h1>
<table class="form-table"> <?php settings_errors(); ?>
<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> <form action="options.php" method="post">
</table> <?php settings_fields( 'edukarsa_settings_group' ); ?>
<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> <!-- PANEL BARU: TIPOGRAFI & SKEMA WARNA -->
<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> <div class="edukarsa-panel">
<table class="form-table row-stats hidden-row"> <h2>🎨 Tipografi & Skema Warna Global</h2>
<?php for($i=1; $i<=3; $i++) : ?> <table class="form-table">
<tr> <tr>
<th>Statistik <?php echo $i; ?></th> <th>Pilihan Font Tema</th>
<td> <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> <select name="edukarsa_font_choice" id="edukarsa_font_choice" style="min-width: 240px; padding: 5px;">
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> <option value="plus_jakarta_sans" <?php selected( 'plus_jakarta_sans', $font_current ); ?>>Plus Jakarta Sans (Default Rekomendasi)</option>
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> <option value="inter" <?php selected( 'inter', $font_current ); ?>>Inter (Modern & Netral)</option>
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"> <option value="poppins" <?php selected( 'poppins', $font_current ); ?>>Poppins (Geometris & Tegas)</option>
</td> <option value="roboto" <?php selected( 'roboto', $font_current ); ?>>Roboto (Klasik & Ringkas)</option>
</tr> <option value="system" <?php selected( 'system', $font_current ); ?>>System Native (Super Cepat, Tanpa Font Luar)</option>
<?php endfor; ?> </select>
</table> <p class="description">Font utama yang diterapkan ke seluruh halaman publikasi.</p>
</div> </td>
</tr>
<div class="edukarsa-panel"> <tr>
<h2>2. Tentang Kami</h2> <th>Warna Primer (Primary)</th>
<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> <td>
<table class="form-table row-about hidden-row"> <div class="color-field-wrap">
<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> <input type="color" name="edukarsa_primary_color" value="<?php echo esc_attr( get_option( 'edukarsa_primary_color', '#0b4a8e' ) ); ?>">
<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> <code><?php echo esc_html( get_option( 'edukarsa_primary_color', '#0b4a8e' ) ); ?></code>
<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> </div>
<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> <p class="description">Warna identitas kampus (header bar, tombol primer, latar footer, dan border utama).</p>
<tr><th>Link</th><td><input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>"></td></tr> </td>
</table> </tr>
</div> <tr>
<th>Warna Sekunder / Aksen</th>
<div class="edukarsa-panel"> <td>
<h2>3. Program, Milestones, & Keunggulan</h2> <div class="color-field-wrap">
<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> <input type="color" name="edukarsa_secondary_color" value="<?php echo esc_attr( get_option( 'edukarsa_secondary_color', '#1a73e8' ) ); ?>">
<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> <code><?php echo esc_html( get_option( 'edukarsa_secondary_color', '#1a73e8' ) ); ?></code>
<hr> </div>
<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> <p class="description">Warna sorotan interaktif (hover tombol, kartu statistik, dan aksen badge).</p>
<table class="form-table"> </td>
<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>
<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> <tr>
</table> <th>Warna Teks Judul (Heading)</th>
</div> <td>
<div class="color-field-wrap">
<div class="edukarsa-panel"> <input type="color" name="edukarsa_heading_color" value="<?php echo esc_attr( get_option( 'edukarsa_heading_color', '#0f172a' ) ); ?>">
<h2>4. Video & Latar Parallax (Area Biru Tengah)</h2> <code><?php echo esc_html( get_option( 'edukarsa_heading_color', '#0f172a' ) ); ?></code>
<table class="form-table"> </div>
<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> <p class="description">Warna teks untuk seluruh judul seksi, judul berita, dan header halaman.</p>
<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> </td>
</table> </tr>
<hr> </table>
<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> </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> <div class="edukarsa-panel">
<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> <h2>1. Header, Logo & Slider</h2>
</table> <table class="form-table">
</div> <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>
<div class="edukarsa-panel"> <hr>
<h2>5. CTA, Berita, Footer & Sosial Media</h2> <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"><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> <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-cta hidden-row"> <table class="form-table row-stats 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> <?php for($i=1; $i<=3; $i++) : ?>
<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>
<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> <th>Statistik <?php echo $i; ?></th>
</table> <td>
<hr> 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>
<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> 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>
<table class="form-table"> 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>
<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> 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">
</table> </td>
</tr>
<h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Footer</h3> <?php endfor; ?>
<table class="form-table"> </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> </div>
<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> <div class="edukarsa-panel">
<tr><th>Copyright</th><td><input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright')); ?>"></td></tr> <h2>2. Tentang Kami</h2>
</table> <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">
<h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Sosial Media</h3> <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>
<table class="form-table"> <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>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>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>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>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>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> <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> </table>
</div> </div>
<p class="submit"><?php submit_button( 'Simpan Pengaturan', 'primary', 'submit', false ); ?></p> <div class="edukarsa-panel">
</form> <h2>3. Program, Milestones, & Keunggulan</h2>
</div> <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>
<script> <hr>
jQuery(document).ready(function($){ <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>
function handleToggles() { $('.section-toggle').each(function(){ var t = $(this).data('target'); if($(this).is(':checked')){ $(t).fadeIn(200); } else { $(t).hide(); } }); } <table class="form-table">
$('.section-toggle').change(handleToggles); handleToggles(); <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>
var mediaUploader; <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>
$('.btn-upload').click(function(e) { </table>
e.preventDefault(); var target = $(this).data('target'); </div>
if (mediaUploader) { mediaUploader.targetInput = target; mediaUploader.open(); return; }
mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Pilih Gambar', button: { text: 'Pilih' }, multiple: false }); <div class="edukarsa-panel">
mediaUploader.targetInput = target; <h2>4. Video & Latar Parallax (Area Biru Tengah)</h2>
mediaUploader.on('select', function() { $(mediaUploader.targetInput).val(mediaUploader.state().get('selection').first().toJSON().url); }); <table class="form-table">
mediaUploader.open(); <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>
</script> <hr>
<?php <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) // 2. MENGHUBUNGKAN ASET (CSS & JS FRONTEND)
function edukarsa_scripts() { 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( wp_enqueue_style(
'edukarsa-style', 'edukarsa-style',
get_template_directory_uri() . '/style.css', get_template_directory_uri() . '/style.css',
array('edukarsa-google-fonts'), $deps,
time(), time(),
'all' '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' ); add_action( 'wp_enqueue_scripts', 'edukarsa_scripts' );