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

feat(admin): tata letak 2-kolom, preset palet warna, dan micro-switch toggle

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 21:22:11 +07:00
parent 09b0cf080c
commit 954cd83e60
1 changed files with 564 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inc/admin-menu.php
+564 -176
View File
@@ -5,7 +5,6 @@
// 1. REGISTRASI MENU ADMIN SIDEBAR // 1. REGISTRASI MENU ADMIN SIDEBAR
function edukarsa_admin_menu() { function edukarsa_admin_menu() {
// Menu Induk langsung mengarah ke halaman Pengaturan Utama
add_menu_page( add_menu_page(
'EduKarsa', 'EduKarsa',
'EduKarsa', 'EduKarsa',
@@ -59,23 +58,16 @@ function edukarsa_admin_menu() {
} }
add_action( 'admin_menu', 'edukarsa_admin_menu' ); add_action( 'admin_menu', 'edukarsa_admin_menu' );
// 2. SHORTCUT MENU DI TOPBAR (ADMIN BAR) SEBELAH TOMBOL '+ BARU' // 2. SHORTCUT MENU DI TOPBAR (ADMIN BAR)
function edukarsa_admin_bar_shortcut( $wp_admin_bar ) { function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
if ( ! current_user_can( 'manage_options' ) ) { if ( ! current_user_can( 'manage_options' ) ) return;
return;
}
// Node Utama: Tepat di samping '+ Baru' (prioritas tombol '+ Baru' bawaan WP adalah 70)
$wp_admin_bar->add_node( array( $wp_admin_bar->add_node( array(
'id' => 'edukarsa-topbar-menu', 'id' => 'edukarsa-topbar-menu',
'title' => '<span class="ab-icon dashicons dashicons-welcome-learn-more" style="top:2px;"></span><span class="ab-label">EduKarsa</span>', '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' ), 'href' => admin_url( 'admin.php?page=edukarsa_settings' ),
'meta' => array(
'title' => 'Buka Pengaturan Tema EduKarsa',
),
) ); ) );
// Submenu Pintas 1: Pengaturan Utama
$wp_admin_bar->add_node( array( $wp_admin_bar->add_node( array(
'id' => 'edukarsa-sub-settings', 'id' => 'edukarsa-sub-settings',
'parent' => 'edukarsa-topbar-menu', 'parent' => 'edukarsa-topbar-menu',
@@ -83,7 +75,6 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
'href' => admin_url( 'admin.php?page=edukarsa_settings' ), 'href' => admin_url( 'admin.php?page=edukarsa_settings' ),
) ); ) );
// Submenu Pintas 2: Slider Banner
$wp_admin_bar->add_node( array( $wp_admin_bar->add_node( array(
'id' => 'edukarsa-sub-slider', 'id' => 'edukarsa-sub-slider',
'parent' => 'edukarsa-topbar-menu', 'parent' => 'edukarsa-topbar-menu',
@@ -91,7 +82,6 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
'href' => admin_url( 'edit.php?post_type=slider' ), 'href' => admin_url( 'edit.php?post_type=slider' ),
) ); ) );
// Submenu Pintas 3: Program Kami
$wp_admin_bar->add_node( array( $wp_admin_bar->add_node( array(
'id' => 'edukarsa-sub-program', 'id' => 'edukarsa-sub-program',
'parent' => 'edukarsa-topbar-menu', 'parent' => 'edukarsa-topbar-menu',
@@ -99,7 +89,6 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
'href' => admin_url( 'edit.php?post_type=program' ), 'href' => admin_url( 'edit.php?post_type=program' ),
) ); ) );
// Submenu Pintas 4: Keunggulan
$wp_admin_bar->add_node( array( $wp_admin_bar->add_node( array(
'id' => 'edukarsa-sub-keunggulan', 'id' => 'edukarsa-sub-keunggulan',
'parent' => 'edukarsa-topbar-menu', 'parent' => 'edukarsa-topbar-menu',
@@ -107,7 +96,6 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
'href' => admin_url( 'edit.php?post_type=keunggulan' ), 'href' => admin_url( 'edit.php?post_type=keunggulan' ),
) ); ) );
// Submenu Pintas 5: Milestone
$wp_admin_bar->add_node( array( $wp_admin_bar->add_node( array(
'id' => 'edukarsa-sub-milestone', 'id' => 'edukarsa-sub-milestone',
'parent' => 'edukarsa-topbar-menu', 'parent' => 'edukarsa-topbar-menu',
@@ -152,187 +140,587 @@ function edukarsa_register_settings() {
} }
add_action( 'admin_init', 'edukarsa_register_settings' ); add_action( 'admin_init', 'edukarsa_register_settings' );
// 4. TAMPILAN FORM PENGATURAN UTAMA // 4. HALAMAN PENGATURAN DENGAN DESAIN MODERN 2-KOLOM
function edukarsa_settings_page_html() { function edukarsa_settings_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return; if ( ! current_user_can( 'manage_options' ) ) return;
$font_current = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' ); $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> <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-admin-wrap { margin-top: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; }
.edukarsa-panel h2 { border-bottom: 2px solid #f1f5f9; padding-bottom: 12px; margin-top: 0; color: #0b4a8e; font-size: 18px; } .edukarsa-admin-layout { display: grid; grid-template-columns: 1fr 320px; gap: 25px; align-items: start; }
.toggle-row { display: flex; align-items: center; gap: 10px; font-weight: bold; background: #f0f7ff; padding: 15px; border-left: 4px solid #0b4a8e; border-radius: 4px; }
.hidden-row { display: none; } /* Kartu & Panel */
.color-field-wrap { display: flex; align-items: center; gap: 12px; } .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; }
.color-field-wrap input[type="color"] { border: none; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; background: transparent; } .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> </style>
<div class="wrap"> <div class="wrap edukarsa-admin-wrap">
<h1>Pengaturan Tema EduKarsa</h1> <h1 style="font-weight: 800; font-size: 24px; margin-bottom: 20px;">Pengaturan Tema EduKarsa</h1>
<?php settings_errors(); ?> <?php settings_errors(); ?>
<form action="options.php" method="post"> <form action="options.php" method="post">
<?php settings_fields( 'edukarsa_settings_group' ); ?> <?php settings_fields( 'edukarsa_settings_group' ); ?>
<!-- PANEL: TIPOGRAFI & SKEMA WARNA -->
<div class="edukarsa-panel">
<h2>🎨 Tipografi & Skema Warna Global</h2>
<table class="form-table">
<tr>
<th>Pilihan Font Tema</th>
<td>
<select name="edukarsa_font_choice" id="edukarsa_font_choice" style="min-width: 240px; padding: 5px;">
<option value="plus_jakarta_sans" <?php selected( 'plus_jakarta_sans', $font_current ); ?>>Plus Jakarta Sans (Default Rekomendasi)</option>
<option value="inter" <?php selected( 'inter', $font_current ); ?>>Inter (Modern & Netral)</option>
<option value="poppins" <?php selected( 'poppins', $font_current ); ?>>Poppins (Geometris & Tegas)</option>
<option value="roboto" <?php selected( 'roboto', $font_current ); ?>>Roboto (Klasik & Ringkas)</option>
<option value="system" <?php selected( 'system', $font_current ); ?>>System Native (Super Cepat, Tanpa Font Luar)</option>
</select>
<p class="description">Font utama yang diterapkan ke seluruh halaman publikasi.</p>
</td>
</tr>
<tr>
<th>Warna Primer (Primary)</th>
<td>
<div class="color-field-wrap">
<input type="color" name="edukarsa_primary_color" value="<?php echo esc_attr( get_option( 'edukarsa_primary_color', '#0b4a8e' ) ); ?>">
<code><?php echo esc_html( get_option( 'edukarsa_primary_color', '#0b4a8e' ) ); ?></code>
</div>
<p class="description">Warna identitas kampus (header bar, tombol primer, latar footer, dan border utama).</p>
</td>
</tr>
<tr>
<th>Warna Sekunder / Aksen</th>
<td>
<div class="color-field-wrap">
<input type="color" name="edukarsa_secondary_color" value="<?php echo esc_attr( get_option( 'edukarsa_secondary_color', '#1a73e8' ) ); ?>">
<code><?php echo esc_html( get_option( 'edukarsa_secondary_color', '#1a73e8' ) ); ?></code>
</div>
<p class="description">Warna sorotan interaktif (hover tombol, kartu statistik, dan aksen badge).</p>
</td>
</tr>
<tr>
<th>Warna Teks Judul (Heading)</th>
<td>
<div class="color-field-wrap">
<input type="color" name="edukarsa_heading_color" value="<?php echo esc_attr( get_option( 'edukarsa_heading_color', '#0f172a' ) ); ?>">
<code><?php echo esc_html( get_option( 'edukarsa_heading_color', '#0f172a' ) ); ?></code>
</div>
<p class="description">Warna teks untuk seluruh judul seksi, judul berita, dan header halaman.</p>
</td>
</tr>
</table>
</div>
<!-- PANEL 1: LOGO & STATISTIK --> <div class="edukarsa-admin-layout">
<div class="edukarsa-panel">
<h2>1. Header, Logo & Slider</h2>
<table class="form-table">
<tr><th>Logo Website</th><td><input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#edukarsa_header_logo" value="Upload Logo" /></td></tr>
</table>
<hr>
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?> /> <label>Tampilkan Slider Atas</label></div>
<div class="toggle-row" style="margin-top:10px;"><input type="checkbox" class="section-toggle" data-target=".row-stats" name="edukarsa_tampil_stats" value="1" <?php checked(1, get_option('edukarsa_tampil_stats', 1)); ?> /> <label>Tampilkan 3 Kotak Statistik</label></div>
<table class="form-table row-stats hidden-row">
<?php for($i=1; $i<=3; $i++) : ?>
<tr>
<th>Statistik <?php echo $i; ?></th>
<td>
Ikon: <input type="text" id="stat<?php echo $i; ?>_icon" name="edukarsa_stat<?php echo $i; ?>_icon" value="<?php echo esc_url(get_option('edukarsa_stat'.$i.'_icon')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#stat<?php echo $i; ?>_icon" value="Upload" /><br>
Angka: <input type="text" name="edukarsa_stat<?php echo $i; ?>_angka" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_angka')); ?>" class="regular-text"><br>
Judul: <input type="text" name="edukarsa_stat<?php echo $i; ?>_label" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_label')); ?>" class="regular-text"><br>
Subteks: <input type="text" name="edukarsa_stat<?php echo $i; ?>_desc" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_desc')); ?>" class="regular-text">
</td>
</tr>
<?php endfor; ?>
</table>
</div>
<!-- PANEL 2: ABOUT -->
<div class="edukarsa-panel">
<h2>2. Tentang Kami</h2>
<div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-about" name="edukarsa_tampil_about" value="1" <?php checked(1, get_option('edukarsa_tampil_about', 1)); ?> /> <label>Tampilkan Seksi About</label></div>
<table class="form-table row-about hidden-row">
<tr><th>Foto</th><td><input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>"><input type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek" value="Upload" /></td></tr>
<tr><th>Nama</th><td><input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>" class="large-text" /></td></tr>
<tr><th>Sub-Judul</th><td><input type="text" name="edukarsa_subtitle_about" value="<?php echo esc_attr(get_option('edukarsa_subtitle_about')); ?>" class="large-text" /></td></tr>
<tr><th>Teks</th><td><textarea name="edukarsa_teks_sambutan" rows="4" class="large-text"><?php echo esc_textarea(get_option('edukarsa_teks_sambutan')); ?></textarea></td></tr>
<tr><th>Link</th><td><input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>"></td></tr>
</table>
</div>
<!-- PANEL 3: PROGRAM & KEUNGGULAN -->
<div class="edukarsa-panel">
<h2>3. Program, Milestones, & Keunggulan</h2>
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?> /> <label>Tampilkan 4 Milestone</label></div>
<div class="toggle-row" style="margin-top:10px;"><input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?> /> <label>Tampilkan Program (3 Grid)</label></div>
<hr>
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?> /> <label>Tampilkan Keunggulan (9 Grid)</label></div>
<table class="form-table">
<tr><th>Subtitle (Contoh: WHY CHOOSE US)</th><td><input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>" class="regular-text"></td></tr>
<tr><th>Judul (Contoh: Keunggulan Program)</th><td><input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>" class="regular-text"></td></tr>
</table>
</div>
<!-- PANEL 4: VIDEO & PARALLAX -->
<div class="edukarsa-panel">
<h2>4. Video & Latar Parallax (Area Biru Tengah)</h2>
<table class="form-table">
<tr><th>Gambar Parallax</th><td><input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>"><input type="button" class="button btn-upload" data-target="#mid_bg_image" value="Upload" /></td></tr>
<tr><th>Warna Overlay Parallax</th><td><input type="color" name="edukarsa_mid_bg_color" value="<?php echo esc_attr(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?>"></td></tr>
</table>
<hr>
<div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-video" name="edukarsa_tampil_video" value="1" <?php checked(1, get_option('edukarsa_tampil_video', 1)); ?> /> <label>Tampilkan Video</label></div>
<table class="form-table row-video hidden-row">
<tr><th>Video 1</th><td>Thumb: <input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid1_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>"></td></tr>
<tr><th>Video 2</th><td>Thumb: <input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid2_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>"></td></tr>
</table>
</div>
<!-- PANEL 5: CTA & FOOTER -->
<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> <!-- KOLOM KIRI (PENGATURAN UTAMA) -->
<table class="form-table"> <div class="edukarsa-admin-main">
<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> <!-- 1. Header, Logo & Slider -->
<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-card">
<tr><th>Copyright</th><td><input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright')); ?>"></td></tr> <div class="edukarsa-card-header">
</table> <h2>🏛️ 1. Header, Logo & Slider</h2>
</div>
<h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Sosial Media</h3> <div class="edukarsa-card-body">
<table class="form-table"> <div class="form-field-group">
<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> <label>Logo Website (Header)</label>
<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> <div class="input-with-button">
<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> <input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" placeholder="https://...">
</table> <button type="button" class="button btn-upload" data-target="#edukarsa_header_logo">Pilih Logo</button>
</div> </div>
</div>
<p class="submit"><?php submit_button( 'Simpan Pengaturan', 'primary', 'submit', false ); ?></p> <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> </form>
</div> </div>
<script> <script>
jQuery(document).ready(function($){ 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(); } }); } // 1. Logika Toggle Seksi Dinamis
$('.section-toggle').change(handleToggles); handleToggles(); 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; var mediaUploader;
$('.btn-upload').click(function(e) { $('.btn-upload').click(function(e) {
e.preventDefault(); var target = $(this).data('target'); e.preventDefault();
if (mediaUploader) { mediaUploader.targetInput = target; mediaUploader.open(); return; } var targetInput = $(this).data('target');
mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Pilih Gambar', button: { text: 'Pilih' }, multiple: false }); if (mediaUploader) {
mediaUploader.targetInput = target; mediaUploader.targetInput = targetInput;
mediaUploader.on('select', function() { $(mediaUploader.targetInput).val(mediaUploader.state().get('selection').first().toJSON().url); }); 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(); mediaUploader.open();
}); });
}); });