840 lines
52 KiB
PHP
840 lines
52 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 Seksi Beranda
|
||
'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',
|
||
|
||
// Header 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',
|
||
|
||
// Parallax Area
|
||
'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
|
||
|
||
// CTA
|
||
'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
|
||
|
||
// Footer Lengkap
|
||
'edukarsa_footer_logo', 'edukarsa_footer_desc', 'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_footer_jam',
|
||
'edukarsa_tampil_fb', 'edukarsa_footer_fb',
|
||
'edukarsa_tampil_ig', 'edukarsa_footer_ig',
|
||
'edukarsa_tampil_yt', 'edukarsa_footer_yt',
|
||
'edukarsa_tampil_tiktok', 'edukarsa_footer_tiktok',
|
||
'edukarsa_tampil_x', 'edukarsa_footer_x',
|
||
'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 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; }
|
||
.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: visible; }
|
||
.edukarsa-card-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; border-radius: 10px 10px 0 0; }
|
||
.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; }
|
||
|
||
.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: 14px; margin-bottom: 15px; }
|
||
.switch-label-wrap { display: flex; flex-direction: column; gap: 5px; }
|
||
.switch-label { font-weight: 700; font-size: 13px; color: #334155; display: inline-flex; align-items: center; gap: 6px; }
|
||
|
||
/* Shortcut Badge Link */
|
||
.cpt-shortcut-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #0b4a8e; text-decoration: none; background: #e0f2fe; padding: 2px 9px; border-radius: 12px; width: fit-content; transition: all 0.2s ease; border: 1px solid #bae6fd; }
|
||
.cpt-shortcut-link:hover { background: #0b4a8e; color: #ffffff !important; border-color: #0b4a8e; }
|
||
|
||
/* Tooltip Native CSS */
|
||
.tooltip-hint { position: relative; cursor: help; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #94a3b8; color: #fff; font-size: 10px; font-weight: 800; }
|
||
.tooltip-hint:hover { background: #0b4a8e; }
|
||
.tooltip-hint .tooltip-text {
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
position: absolute;
|
||
bottom: 140%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background-color: #0f172a;
|
||
color: #ffffff;
|
||
text-align: left;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 1.45;
|
||
white-space: normal;
|
||
width: 220px;
|
||
z-index: 1000;
|
||
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||
pointer-events: none;
|
||
}
|
||
.tooltip-hint .tooltip-text::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
margin-left: -5px;
|
||
border-width: 5px;
|
||
border-style: solid;
|
||
border-color: #0f172a transparent transparent transparent;
|
||
}
|
||
.tooltip-hint:hover .tooltip-text { visibility: visible; opacity: 1; }
|
||
|
||
.edukarsa-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; flex-shrink: 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-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; }
|
||
|
||
.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; }
|
||
|
||
.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; }
|
||
|
||
.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 (FORM 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">
|
||
<div class="switch-label-wrap">
|
||
<div class="switch-label">
|
||
<span>Tampilkan Slider Atas</span>
|
||
<span class="tooltip-hint">?<span class="tooltip-text">Gambar & URL link banner dikelola pada modul 🌟 Slider Banner.</span></span>
|
||
</div>
|
||
<a href="<?php echo admin_url('edit.php?post_type=slider'); ?>" class="cpt-shortcut-link">Kelola Slider ↗</a>
|
||
</div>
|
||
<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">
|
||
<div class="switch-label-wrap">
|
||
<div class="switch-label">
|
||
<span>Tampilkan 3 Kotak Statistik</span>
|
||
<span class="tooltip-hint">?<span class="tooltip-text">Konfigurasi teks, angka capaian, dan ikon diatur langsung pada form di bawah.</span></span>
|
||
</div>
|
||
<span style="font-size: 11px; color: #64748b;">Form Pengaturan Bawah ↓</span>
|
||
</div>
|
||
<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>
|
||
|
||
<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 (DENGAN TOOLTIP & SHORTCUT) -->
|
||
<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">
|
||
|
||
<!-- Milestone Switch & Shortcut -->
|
||
<div class="switch-row">
|
||
<div class="switch-label-wrap">
|
||
<div class="switch-label">
|
||
<span>Tampilkan 4 Milestone</span>
|
||
<span class="tooltip-hint">?<span class="tooltip-text">Data angka prestasi & capaian diisi melalui menu 🏆 Milestone di sidebar admin.</span></span>
|
||
</div>
|
||
<a href="<?php echo admin_url('edit.php?post_type=milestone'); ?>" class="cpt-shortcut-link">Kelola Milestone ↗</a>
|
||
</div>
|
||
<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>
|
||
|
||
<!-- Program Switch & Shortcut -->
|
||
<div class="switch-row">
|
||
<div class="switch-label-wrap">
|
||
<div class="switch-label">
|
||
<span>Tampilkan Program (3 Grid)</span>
|
||
<span class="tooltip-hint">?<span class="tooltip-text">Daftar jurusan & program kurikulum dikelola melalui menu 📚 Program Kami di sidebar admin.</span></span>
|
||
</div>
|
||
<a href="<?php echo admin_url('edit.php?post_type=program'); ?>" class="cpt-shortcut-link">Kelola Program ↗</a>
|
||
</div>
|
||
<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>
|
||
|
||
<!-- Keunggulan Switch & Shortcut -->
|
||
<div class="switch-row">
|
||
<div class="switch-label-wrap">
|
||
<div class="switch-label">
|
||
<span>Tampilkan Keunggulan (9 Grid)</span>
|
||
<span class="tooltip-hint">?<span class="tooltip-text">9 butir keunggulan institusi dikelola melalui menu ⭐ Keunggulan di sidebar admin.</span></span>
|
||
</div>
|
||
<a href="<?php echo admin_url('edit.php?post_type=keunggulan'); ?>" class="cpt-shortcut-link">Kelola Keunggulan ↗</a>
|
||
</div>
|
||
<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</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</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">
|
||
<div class="switch-label-wrap">
|
||
<span class="switch-label">Tampilkan CTA Banner</span>
|
||
<span style="font-size: 11px; color: #64748b;">Pengaturan Khusus PPDB</span>
|
||
</div>
|
||
<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">
|
||
<div class="switch-label-wrap">
|
||
<div class="switch-label">
|
||
<span>Tampilkan Berita Kampus</span>
|
||
<span class="tooltip-hint">?<span class="tooltip-text">Berita otomatis diambil dari menu 'Pos' bawaan WordPress.</span></span>
|
||
</div>
|
||
<a href="<?php echo admin_url('edit.php'); ?>" class="cpt-shortcut-link">Kelola Berita ↗</a>
|
||
</div>
|
||
<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. Pengaturan Footer & Media Sosial Lengkap</h2>
|
||
</div>
|
||
<div class="edukarsa-card-body">
|
||
<div class="form-grid-2">
|
||
<div class="form-field-group">
|
||
<label>Logo Footer (Opsional, kosongkan jika pakai logo header)</label>
|
||
<div class="input-with-button">
|
||
<input type="text" id="edukarsa_footer_logo" name="edukarsa_footer_logo" value="<?php echo esc_url(get_option('edukarsa_footer_logo')); ?>" placeholder="https://...">
|
||
<button type="button" class="button btn-upload" data-target="#edukarsa_footer_logo">Pilih</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-field-group">
|
||
<label>Jam Operasional / Layanan</label>
|
||
<input type="text" name="edukarsa_footer_jam" value="<?php echo esc_attr(get_option('edukarsa_footer_jam', 'Senin – Jumat: 08.00 – 16.00 WIB')); ?>" placeholder="cth: Senin – Jumat: 08.00 – 16.00 WIB">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-field-group">
|
||
<label>Deskripsi Singkat Kampus / Visi Ringkas (Kolom 1)</label>
|
||
<textarea name="edukarsa_footer_desc" rows="3" placeholder="Deskripsi singkat mengenai institusi..."><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak generasi berkarakter cerdas, kompetitif, dan berintegritas.')); ?></textarea>
|
||
</div>
|
||
|
||
<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 Layanan</label>
|
||
<input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>" placeholder="+62 ...">
|
||
</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')); ?>" placeholder="[email protected]">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-field-group">
|
||
<label>Teks Hak Cipta (Copyright Bar)</label>
|
||
<input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright', 'EduKarsa University. All Rights Reserved.')); ?>">
|
||
</div>
|
||
|
||
<h4 style="margin: 25px 0 12px; font-size:14px; color:#0b4a8e; border-bottom:1px solid #e2e8f0; padding-bottom:8px;">Jaringan Media Sosial Resmi</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 class="switch-row">
|
||
<span class="switch-label">TikTok</span>
|
||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||
<input type="text" name="edukarsa_footer_tiktok" value="<?php echo esc_attr(get_option('edukarsa_footer_tiktok')); ?>" placeholder="https://tiktok.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_tiktok" value="1" <?php checked(1, get_option('edukarsa_tampil_tiktok', 0)); ?>>
|
||
<span class="slider-round"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="switch-row">
|
||
<span class="switch-label">X (Twitter)</span>
|
||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||
<input type="text" name="edukarsa_footer_x" value="<?php echo esc_attr(get_option('edukarsa_footer_x')); ?>" placeholder="https://x.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_x" value="1" <?php checked(1, get_option('edukarsa_tampil_x', 0)); ?>>
|
||
<span class="slider-round"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- KOLOM KANAN (SIDEBAR ACTION PANEL) -->
|
||
<div class="edukarsa-admin-sidebar">
|
||
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<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($){
|
||
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();
|
||
|
||
$('.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');
|
||
});
|
||
|
||
$('#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()); });
|
||
|
||
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
|
||
}
|