730 lines
44 KiB
PHP
730 lines
44 KiB
PHP
<?php
|
|
/**
|
|
* Modul Pengaturan Menu Admin dan Toolbar EduKarsa
|
|
*/
|
|
|
|
// 1. REGISTRASI MENU ADMIN SIDEBAR
|
|
function edukarsa_admin_menu() {
|
|
add_menu_page(
|
|
'EduKarsa',
|
|
'EduKarsa',
|
|
'manage_options',
|
|
'edukarsa_settings',
|
|
'edukarsa_settings_page_html',
|
|
'dashicons-welcome-learn-more',
|
|
2
|
|
);
|
|
|
|
add_submenu_page(
|
|
'edukarsa_settings',
|
|
'Pengaturan Utama',
|
|
'⚙️ Pengaturan Utama',
|
|
'manage_options',
|
|
'edukarsa_settings',
|
|
'edukarsa_settings_page_html'
|
|
);
|
|
|
|
add_submenu_page(
|
|
'edukarsa_settings',
|
|
'Semua Slider',
|
|
'🌟 Slider Banner',
|
|
'manage_options',
|
|
'edit.php?post_type=slider'
|
|
);
|
|
|
|
add_submenu_page(
|
|
'edukarsa_settings',
|
|
'Semua Program',
|
|
'📚 Program Kami',
|
|
'manage_options',
|
|
'edit.php?post_type=program'
|
|
);
|
|
|
|
add_submenu_page(
|
|
'edukarsa_settings',
|
|
'Semua Keunggulan',
|
|
'⭐ Keunggulan',
|
|
'manage_options',
|
|
'edit.php?post_type=keunggulan'
|
|
);
|
|
|
|
add_submenu_page(
|
|
'edukarsa_settings',
|
|
'Semua Milestone',
|
|
'🏆 Milestone',
|
|
'manage_options',
|
|
'edit.php?post_type=milestone'
|
|
);
|
|
}
|
|
add_action( 'admin_menu', 'edukarsa_admin_menu' );
|
|
|
|
// 2. SHORTCUT MENU DI TOPBAR (ADMIN BAR)
|
|
function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
|
|
if ( ! current_user_can( 'manage_options' ) ) return;
|
|
|
|
$wp_admin_bar->add_node( array(
|
|
'id' => 'edukarsa-topbar-menu',
|
|
'title' => '<span class="ab-icon dashicons dashicons-welcome-learn-more" style="top:2px;"></span><span class="ab-label">EduKarsa</span>',
|
|
'href' => admin_url( 'admin.php?page=edukarsa_settings' ),
|
|
) );
|
|
|
|
$wp_admin_bar->add_node( array(
|
|
'id' => 'edukarsa-sub-settings',
|
|
'parent' => 'edukarsa-topbar-menu',
|
|
'title' => '⚙️ Pengaturan Utama',
|
|
'href' => admin_url( 'admin.php?page=edukarsa_settings' ),
|
|
) );
|
|
|
|
$wp_admin_bar->add_node( array(
|
|
'id' => 'edukarsa-sub-slider',
|
|
'parent' => 'edukarsa-topbar-menu',
|
|
'title' => '🌟 Slider Banner',
|
|
'href' => admin_url( 'edit.php?post_type=slider' ),
|
|
) );
|
|
|
|
$wp_admin_bar->add_node( array(
|
|
'id' => 'edukarsa-sub-program',
|
|
'parent' => 'edukarsa-topbar-menu',
|
|
'title' => '📚 Program Kami',
|
|
'href' => admin_url( 'edit.php?post_type=program' ),
|
|
) );
|
|
|
|
$wp_admin_bar->add_node( array(
|
|
'id' => 'edukarsa-sub-keunggulan',
|
|
'parent' => 'edukarsa-topbar-menu',
|
|
'title' => '⭐ Keunggulan',
|
|
'href' => admin_url( 'edit.php?post_type=keunggulan' ),
|
|
) );
|
|
|
|
$wp_admin_bar->add_node( array(
|
|
'id' => 'edukarsa-sub-milestone',
|
|
'parent' => 'edukarsa-topbar-menu',
|
|
'title' => '🏆 Milestone',
|
|
'href' => admin_url( 'edit.php?post_type=milestone' ),
|
|
) );
|
|
}
|
|
add_action( 'admin_bar_menu', 'edukarsa_admin_bar_shortcut', 80 );
|
|
|
|
// 3. REGISTRASI SELURUH PENGATURAN TEMA
|
|
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
|
|
'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' );
|
|
|
|
// 4. HALAMAN PENGATURAN DENGAN DESAIN MODERN 2-KOLOM
|
|
function edukarsa_settings_page_html() {
|
|
if ( ! current_user_can( 'manage_options' ) ) return;
|
|
$font_current = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
|
|
$primary_color = get_option( 'edukarsa_primary_color', '#0b4a8e' );
|
|
$secondary_color = get_option( 'edukarsa_secondary_color', '#1a73e8' );
|
|
$heading_color = get_option( 'edukarsa_heading_color', '#0f172a' );
|
|
?>
|
|
<style>
|
|
.edukarsa-admin-wrap { margin-top: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; }
|
|
.edukarsa-admin-layout { display: grid; grid-template-columns: 1fr 320px; gap: 25px; align-items: start; }
|
|
|
|
/* Kartu & Panel */
|
|
.edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; overflow: hidden; }
|
|
.edukarsa-card-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; }
|
|
.edukarsa-card-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; }
|
|
.edukarsa-card-body { padding: 24px; }
|
|
|
|
/* Toggle Switch Ringkas Modern */
|
|
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; }
|
|
.switch-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 15px; }
|
|
.switch-label { font-weight: 600; font-size: 13px; color: #334155; }
|
|
.edukarsa-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; }
|
|
.edukarsa-switch input { opacity: 0; width: 0; height: 0; }
|
|
.slider-round { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .25s; border-radius: 22px; }
|
|
.slider-round:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .25s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
|
|
input:checked + .slider-round { background-color: #0b4a8e; }
|
|
input:checked + .slider-round:before { transform: translateX(20px); }
|
|
|
|
/* Form Controls */
|
|
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
|
|
.form-field-group { margin-bottom: 15px; }
|
|
.form-field-group label { display: block; font-weight: 600; font-size: 13px; color: #475569; margin-bottom: 6px; }
|
|
.form-field-group input[type="text"], .form-field-group textarea, .form-field-group select { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; font-size: 13px; box-sizing: border-box; }
|
|
.input-with-button { display: flex; gap: 8px; }
|
|
.input-with-button input { flex-grow: 1; }
|
|
|
|
/* Mini Grid Statistik */
|
|
.stats-config-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
|
|
.stat-config-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; }
|
|
.stat-config-box h4 { margin: 0 0 12px; font-size: 13px; color: #0b4a8e; font-weight: 700; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; }
|
|
|
|
/* Presets Warna */
|
|
.preset-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
|
|
.preset-pill { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; transition: all .2s; }
|
|
.preset-pill:hover { border-color: #0b4a8e; transform: translateX(3px); }
|
|
.swatch-group { display: flex; border-radius: 20px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1); }
|
|
.swatch-item { width: 18px; height: 18px; }
|
|
.preset-name { font-size: 12px; font-weight: 600; color: #334155; }
|
|
|
|
/* Sidebar Kanan Sticky */
|
|
.edukarsa-admin-sidebar { position: sticky; top: 45px; }
|
|
.color-picker-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
|
.color-picker-row input[type="color"] { border: none; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; background: transparent; }
|
|
|
|
@media (max-width: 1100px) {
|
|
.edukarsa-admin-layout { grid-template-columns: 1fr; }
|
|
.edukarsa-admin-sidebar { position: static; }
|
|
.stats-config-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
|
|
<div class="wrap edukarsa-admin-wrap">
|
|
<h1 style="font-weight: 800; font-size: 24px; margin-bottom: 20px;">Pengaturan Tema EduKarsa</h1>
|
|
<?php settings_errors(); ?>
|
|
|
|
<form action="options.php" method="post">
|
|
<?php settings_fields( 'edukarsa_settings_group' ); ?>
|
|
|
|
<div class="edukarsa-admin-layout">
|
|
|
|
<!-- KOLOM KIRI (PENGATURAN UTAMA) -->
|
|
<div class="edukarsa-admin-main">
|
|
|
|
<!-- 1. Header, Logo & Slider -->
|
|
<div class="edukarsa-card">
|
|
<div class="edukarsa-card-header">
|
|
<h2>🏛️ 1. Header, Logo & Slider</h2>
|
|
</div>
|
|
<div class="edukarsa-card-body">
|
|
<div class="form-field-group">
|
|
<label>Logo Website (Header)</label>
|
|
<div class="input-with-button">
|
|
<input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" placeholder="https://...">
|
|
<button type="button" class="button btn-upload" data-target="#edukarsa_header_logo">Pilih Logo</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="switch-row-inline" style="margin-top: 20px;">
|
|
<div class="switch-row">
|
|
<span class="switch-label">Tampilkan Slider Atas</span>
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
<div class="switch-row">
|
|
<span class="switch-label">Tampilkan 3 Kotak Statistik</span>
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" class="section-toggle" data-target="#stats-settings-box" name="edukarsa_tampil_stats" value="1" <?php checked(1, get_option('edukarsa_tampil_stats', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3 Mini Card Statistik yang Rapi -->
|
|
<div id="stats-settings-box">
|
|
<div class="stats-config-grid">
|
|
<?php for($i=1; $i<=3; $i++) : ?>
|
|
<div class="stat-config-box">
|
|
<h4>Statistik <?php echo $i; ?></h4>
|
|
<div class="form-field-group">
|
|
<label>Ikon / Gambar</label>
|
|
<div class="input-with-button">
|
|
<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')); ?>" placeholder="URL Ikon">
|
|
<button type="button" class="button btn-upload" data-target="#stat<?php echo $i; ?>_icon">Up</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-field-group">
|
|
<label>Angka / Capaian</label>
|
|
<input type="text" name="edukarsa_stat<?php echo $i; ?>_angka" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_angka')); ?>" placeholder="cth: 98%">
|
|
</div>
|
|
<div class="form-field-group">
|
|
<label>Judul Statistik</label>
|
|
<input type="text" name="edukarsa_stat<?php echo $i; ?>_label" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_label')); ?>" placeholder="cth: Akreditasi A">
|
|
</div>
|
|
<div class="form-field-group" style="margin-bottom:0;">
|
|
<label>Deskripsi Ringkas</label>
|
|
<textarea name="edukarsa_stat<?php echo $i; ?>_desc" rows="2"><?php echo esc_textarea(get_option('edukarsa_stat'.$i.'_desc')); ?></textarea>
|
|
</div>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Tentang Kami -->
|
|
<div class="edukarsa-card">
|
|
<div class="edukarsa-card-header">
|
|
<h2>👤 2. Sambutan & Profil Pimpinan</h2>
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" class="section-toggle" data-target="#about-settings-box" name="edukarsa_tampil_about" value="1" <?php checked(1, get_option('edukarsa_tampil_about', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
<div class="edukarsa-card-body" id="about-settings-box">
|
|
<div class="form-grid-2">
|
|
<div class="form-field-group">
|
|
<label>Foto Pimpinan (Portrait 3:4)</label>
|
|
<div class="input-with-button">
|
|
<input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>">
|
|
<button type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek">Pilih</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-field-group">
|
|
<label>Nama Lengkap & Gelar</label>
|
|
<input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>">
|
|
</div>
|
|
</div>
|
|
<div class="form-grid-2">
|
|
<div class="form-field-group">
|
|
<label>Sub-Judul (cth: Rektor / Kepala Sekolah)</label>
|
|
<input type="text" name="edukarsa_subtitle_about" value="<?php echo esc_attr(get_option('edukarsa_subtitle_about')); ?>">
|
|
</div>
|
|
<div class="form-field-group">
|
|
<label>Tautan Detail (URL Profil)</label>
|
|
<input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>">
|
|
</div>
|
|
</div>
|
|
<div class="form-field-group" style="margin-bottom:0;">
|
|
<label>Teks Sambutan</label>
|
|
<textarea name="edukarsa_teks_sambutan" rows="4"><?php echo esc_textarea(get_option('edukarsa_teks_sambutan')); ?></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. Program, Milestone & Keunggulan -->
|
|
<div class="edukarsa-card">
|
|
<div class="edukarsa-card-header">
|
|
<h2>⭐ 3. Program, Milestones, & Keunggulan</h2>
|
|
</div>
|
|
<div class="edukarsa-card-body">
|
|
<div class="switch-row-inline">
|
|
<div class="switch-row">
|
|
<span class="switch-label">Tampilkan 4 Milestone</span>
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
<div class="switch-row">
|
|
<span class="switch-label">Tampilkan Program (3 Grid)</span>
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
<div class="switch-row">
|
|
<span class="switch-label">Tampilkan Keunggulan (9 Grid)</span>
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-grid-2" style="margin-top: 15px;">
|
|
<div class="form-field-group">
|
|
<label>Subtitle Keunggulan</label>
|
|
<input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>">
|
|
</div>
|
|
<div class="form-field-group">
|
|
<label>Judul Seksi Keunggulan</label>
|
|
<input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. Video & Parallax Area -->
|
|
<div class="edukarsa-card">
|
|
<div class="edukarsa-card-header">
|
|
<h2>🎬 4. Video & Parallax (Area Tengah)</h2>
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" class="section-toggle" data-target="#video-settings-box" name="edukarsa_tampil_video" value="1" <?php checked(1, get_option('edukarsa_tampil_video', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
<div class="edukarsa-card-body" id="video-settings-box">
|
|
<div class="form-grid-2">
|
|
<div class="form-field-group">
|
|
<label>Gambar Latar Parallax</label>
|
|
<div class="input-with-button">
|
|
<input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>">
|
|
<button type="button" class="button btn-upload" data-target="#mid_bg_image">Pilih</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-field-group">
|
|
<label>Warna Overlay Parallax</label>
|
|
<div style="display:flex; align-items:center; gap:10px;">
|
|
<input type="color" name="edukarsa_mid_bg_color" value="<?php echo esc_attr(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?>">
|
|
<code><?php echo esc_html(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?></code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-grid-2">
|
|
<div class="stat-config-box">
|
|
<h4>Video 1</h4>
|
|
<div class="form-field-group">
|
|
<label>Thumbnail Video 1</label>
|
|
<div class="input-with-button">
|
|
<input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>">
|
|
<button type="button" class="button btn-upload" data-target="#vid1_thumb">Up</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-field-group" style="margin-bottom:0;">
|
|
<label>URL Video 1 (YouTube/Embed)</label>
|
|
<input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>" placeholder="https://youtube.com/watch?v=...">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-config-box">
|
|
<h4>Video 2</h4>
|
|
<div class="form-field-group">
|
|
<label>Thumbnail Video 2</label>
|
|
<div class="input-with-button">
|
|
<input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>">
|
|
<button type="button" class="button btn-upload" data-target="#vid2_thumb">Up</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-field-group" style="margin-bottom:0;">
|
|
<label>URL Video 2 (YouTube/Embed)</label>
|
|
<input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>" placeholder="https://youtube.com/watch?v=...">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 5. CTA & Berita -->
|
|
<div class="edukarsa-card">
|
|
<div class="edukarsa-card-header">
|
|
<h2>📢 5. CTA Pendaftaran & Berita</h2>
|
|
</div>
|
|
<div class="edukarsa-card-body">
|
|
<div class="switch-row-inline">
|
|
<div class="switch-row">
|
|
<span class="switch-label">Tampilkan CTA Banner</span>
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" class="section-toggle" data-target="#cta-settings-box" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
<div class="switch-row">
|
|
<span class="switch-label">Tampilkan Berita Kampus</span>
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="cta-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
|
|
<h4>Konfigurasi CTA PPDB / PMB</h4>
|
|
<div class="form-grid-2">
|
|
<div class="form-field-group">
|
|
<label>Gambar Latar CTA</label>
|
|
<div class="input-with-button">
|
|
<input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>">
|
|
<button type="button" class="button btn-upload" data-target="#cta_bg">Up</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-field-group">
|
|
<label>Teks Tombol CTA</label>
|
|
<input type="text" name="edukarsa_cta_btn_teks" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang')); ?>">
|
|
</div>
|
|
</div>
|
|
<div class="form-grid-2">
|
|
<div class="form-field-group" style="margin-bottom:0;">
|
|
<label>Judul Ajakan CTA</label>
|
|
<input type="text" name="edukarsa_cta_title" value="<?php echo esc_attr(get_option('edukarsa_cta_title')); ?>">
|
|
</div>
|
|
<div class="form-field-group" style="margin-bottom:0;">
|
|
<label>Tautan Tombol CTA</label>
|
|
<input type="text" name="edukarsa_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_url')); ?>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-field-group" style="margin-bottom:0;">
|
|
<label>Judul Seksi Berita</label>
|
|
<input type="text" name="edukarsa_news_title" value="<?php echo esc_attr(get_option('edukarsa_news_title', 'News & Update')); ?>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 6. Footer & Kontak -->
|
|
<div class="edukarsa-card">
|
|
<div class="edukarsa-card-header">
|
|
<h2>📞 6. Informasi Kontak Footer & Media Sosial</h2>
|
|
</div>
|
|
<div class="edukarsa-card-body">
|
|
<div class="form-field-group">
|
|
<label>Alamat Lengkap Institusi</label>
|
|
<textarea name="edukarsa_footer_alamat" rows="2"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea>
|
|
</div>
|
|
<div class="form-grid-2">
|
|
<div class="form-field-group">
|
|
<label>Nomor Telepon / WhatsApp</label>
|
|
<input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>">
|
|
</div>
|
|
<div class="form-field-group">
|
|
<label>Alamat Email Resmi</label>
|
|
<input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>">
|
|
</div>
|
|
</div>
|
|
<div class="form-field-group">
|
|
<label>Teks Hak Cipta (Copyright)</label>
|
|
<input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright')); ?>">
|
|
</div>
|
|
|
|
<h4 style="margin: 20px 0 10px; font-size:13px; color:#0b4a8e;">Akun Media Sosial</h4>
|
|
<div class="switch-row">
|
|
<span class="switch-label">Facebook</span>
|
|
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
|
<input type="text" name="edukarsa_footer_fb" value="<?php echo esc_attr(get_option('edukarsa_footer_fb')); ?>" placeholder="https://facebook.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" name="edukarsa_tampil_fb" value="1" <?php checked(1, get_option('edukarsa_tampil_fb', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="switch-row">
|
|
<span class="switch-label">Instagram</span>
|
|
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
|
<input type="text" name="edukarsa_footer_ig" value="<?php echo esc_attr(get_option('edukarsa_footer_ig')); ?>" placeholder="https://instagram.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" name="edukarsa_tampil_ig" value="1" <?php checked(1, get_option('edukarsa_tampil_ig', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="switch-row">
|
|
<span class="switch-label">YouTube</span>
|
|
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
|
<input type="text" name="edukarsa_footer_yt" value="<?php echo esc_attr(get_option('edukarsa_footer_yt')); ?>" placeholder="https://youtube.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
|
|
<label class="edukarsa-switch">
|
|
<input type="checkbox" name="edukarsa_tampil_yt" value="1" <?php checked(1, get_option('edukarsa_tampil_yt', 1)); ?>>
|
|
<span class="slider-round"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- KOLOM KANAN (SIDEBAR COMMAND PANEL) -->
|
|
<div class="edukarsa-admin-sidebar">
|
|
|
|
<!-- Box Aksi Simpan -->
|
|
<div class="edukarsa-card">
|
|
<div class="edukarsa-card-header">
|
|
<h2>💾 Publikasi</h2>
|
|
</div>
|
|
<div class="edukarsa-card-body text-center" style="padding:18px;">
|
|
<p style="font-size:12px; color:#64748b; margin-top:0; margin-bottom:15px;">Simpan seluruh konfigurasi desain dan seksi halaman EduKarsa.</p>
|
|
<?php submit_button( 'Simpan Pengaturan', 'primary large', 'submit', false, array('style'=>'width:100%; border-radius:6px; font-weight:700; padding:10px;') ); ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Box Tipografi -->
|
|
<div class="edukarsa-card">
|
|
<div class="edukarsa-card-header">
|
|
<h2>🔤 Tipografi Font</h2>
|
|
</div>
|
|
<div class="edukarsa-card-body">
|
|
<div class="form-field-group" style="margin-bottom:0;">
|
|
<label>Pilihan Font Utama</label>
|
|
<select name="edukarsa_font_choice" id="edukarsa_font_choice" style="width:100%; padding:8px; border-radius:6px;">
|
|
<option value="plus_jakarta_sans" <?php selected( 'plus_jakarta_sans', $font_current ); ?>>Plus Jakarta Sans (Rekomendasi)</option>
|
|
<option value="inter" <?php selected( 'inter', $font_current ); ?>>Inter (Modern UI)</option>
|
|
<option value="poppins" <?php selected( 'poppins', $font_current ); ?>>Poppins (Geometris)</option>
|
|
<option value="roboto" <?php selected( 'roboto', $font_current ); ?>>Roboto (Klasik)</option>
|
|
<option value="system" <?php selected( 'system', $font_current ); ?>>System Native (Super Cepat)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Box Palet Warna & Presets -->
|
|
<div class="edukarsa-card">
|
|
<div class="edukarsa-card-header">
|
|
<h2>🎨 Skema Warna</h2>
|
|
</div>
|
|
<div class="edukarsa-card-body">
|
|
|
|
<label style="font-weight:700; font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:10px;">Pilih Preset Instan</label>
|
|
|
|
<div class="preset-grid">
|
|
<div class="preset-pill" data-p="#0b4a8e" data-s="#1a73e8" data-h="#0f172a">
|
|
<div class="swatch-group">
|
|
<span class="swatch-item" style="background:#0b4a8e;"></span>
|
|
<span class="swatch-item" style="background:#1a73e8;"></span>
|
|
</div>
|
|
<span class="preset-name">Classic Navy (Default)</span>
|
|
</div>
|
|
<div class="preset-pill" data-p="#065f46" data-s="#10b981" data-h="#064e3b">
|
|
<div class="swatch-group">
|
|
<span class="swatch-item" style="background:#065f46;"></span>
|
|
<span class="swatch-item" style="background:#10b981;"></span>
|
|
</div>
|
|
<span class="preset-name">Islamic Emerald Green</span>
|
|
</div>
|
|
<div class="preset-pill" data-p="#881337" data-s="#e11d48" data-h="#4c0519">
|
|
<div class="swatch-group">
|
|
<span class="swatch-item" style="background:#881337;"></span>
|
|
<span class="swatch-item" style="background:#e11d48;"></span>
|
|
</div>
|
|
<span class="preset-name">Prestige Maroon</span>
|
|
</div>
|
|
<div class="preset-pill" data-p="#0f766e" data-s="#06b6d4" data-h="#134e4a">
|
|
<div class="swatch-group">
|
|
<span class="swatch-item" style="background:#0f766e;"></span>
|
|
<span class="swatch-item" style="background:#06b6d4;"></span>
|
|
</div>
|
|
<span class="preset-name">Techno Teal</span>
|
|
</div>
|
|
<div class="preset-pill" data-p="#581c87" data-s="#8b5cf6" data-h="#3b0764">
|
|
<div class="swatch-group">
|
|
<span class="swatch-item" style="background:#581c87;"></span>
|
|
<span class="swatch-item" style="background:#8b5cf6;"></span>
|
|
</div>
|
|
<span class="preset-name">Royal Violet</span>
|
|
</div>
|
|
<div class="preset-pill" data-p="#b45309" data-s="#f59e0b" data-h="#78350f">
|
|
<div class="swatch-group">
|
|
<span class="swatch-item" style="background:#b45309;"></span>
|
|
<span class="swatch-item" style="background:#f59e0b;"></span>
|
|
</div>
|
|
<span class="preset-name">Autumn Gold</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr style="margin:20px 0; border:none; border-top:1px solid #f1f5f9;">
|
|
|
|
<label style="font-weight:700; font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:12px;">Sesuaikan Manual</label>
|
|
|
|
<div class="color-picker-row">
|
|
<span style="font-size:13px; font-weight:600;">Warna Primer</span>
|
|
<div style="display:flex; align-items:center; gap:8px;">
|
|
<input type="color" id="primary_picker" name="edukarsa_primary_color" value="<?php echo esc_attr( $primary_color ); ?>">
|
|
<code id="primary_code"><?php echo esc_html( $primary_color ); ?></code>
|
|
</div>
|
|
</div>
|
|
<div class="color-picker-row">
|
|
<span style="font-size:13px; font-weight:600;">Warna Aksen</span>
|
|
<div style="display:flex; align-items:center; gap:8px;">
|
|
<input type="color" id="secondary_picker" name="edukarsa_secondary_color" value="<?php echo esc_attr( $secondary_color ); ?>">
|
|
<code id="secondary_code"><?php echo esc_html( $secondary_color ); ?></code>
|
|
</div>
|
|
</div>
|
|
<div class="color-picker-row">
|
|
<span style="font-size:13px; font-weight:600;">Warna Judul</span>
|
|
<div style="display:flex; align-items:center; gap:8px;">
|
|
<input type="color" id="heading_picker" name="edukarsa_heading_color" value="<?php echo esc_attr( $heading_color ); ?>">
|
|
<code id="heading_code"><?php echo esc_html( $heading_color ); ?></code>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
jQuery(document).ready(function($){
|
|
// 1. Logika Toggle Seksi Dinamis
|
|
function syncToggles() {
|
|
$('.section-toggle').each(function(){
|
|
var target = $(this).data('target');
|
|
if ($(this).is(':checked')) {
|
|
$(target).slideDown(200);
|
|
} else {
|
|
$(target).slideUp(200);
|
|
}
|
|
});
|
|
}
|
|
$('.section-toggle').change(syncToggles);
|
|
syncToggles();
|
|
|
|
// 2. Klik Preset Palet Warna
|
|
$('.preset-pill').click(function(){
|
|
var p = $(this).data('p');
|
|
var s = $(this).data('s');
|
|
var h = $(this).data('h');
|
|
|
|
$('#primary_picker').val(p);
|
|
$('#primary_code').text(p);
|
|
|
|
$('#secondary_picker').val(s);
|
|
$('#secondary_code').text(s);
|
|
|
|
$('#heading_picker').val(h);
|
|
$('#heading_code').text(h);
|
|
|
|
$('.preset-pill').css('border-color', '#e2e8f0');
|
|
$(this).css('border-color', '#0b4a8e');
|
|
});
|
|
|
|
// 3. Listener Manual Picker
|
|
$('#primary_picker').on('input change', function(){ $('#primary_code').text($(this).val()); });
|
|
$('#secondary_picker').on('input change', function(){ $('#secondary_code').text($(this).val()); });
|
|
$('#heading_picker').on('input change', function(){ $('#heading_code').text($(this).val()); });
|
|
|
|
// 4. Native WP Media Uploader
|
|
var mediaUploader;
|
|
$('.btn-upload').click(function(e) {
|
|
e.preventDefault();
|
|
var targetInput = $(this).data('target');
|
|
if (mediaUploader) {
|
|
mediaUploader.targetInput = targetInput;
|
|
mediaUploader.open();
|
|
return;
|
|
}
|
|
mediaUploader = wp.media.frames.file_frame = wp.media({
|
|
title: 'Pilih Berkas Media',
|
|
button: { text: 'Gunakan Media Ini' },
|
|
multiple: false
|
|
});
|
|
mediaUploader.targetInput = targetInput;
|
|
mediaUploader.on('select', function() {
|
|
var attachment = mediaUploader.state().get('selection').first().toJSON();
|
|
$(mediaUploader.targetInput).val(attachment.url);
|
|
});
|
|
mediaUploader.open();
|
|
});
|
|
});
|
|
</script>
|
|
<?php
|
|
}
|