feat(popup): tambah modul popup flyer pmb native dengan kontrol dashboard dan session handler

This commit is contained in:
Mas Budi Kusuma
2026-09-16 08:47:40 +07:00
parent 8028c2a64d
commit ba56ff015d
4 changed files with 464 additions and 128 deletions
+3
View File
@@ -23,3 +23,6 @@ require_once get_template_directory() . '/inc/admin-menu.php';
// 6. Memuat Native SEO & Structured Data (JSON-LD)
require_once get_template_directory() . '/inc/seo.php';
// 7. Memuat Modul Pop-up Flyer & Pengumuman Modal
require_once get_template_directory() . '/inc/popup.php';
+190 -128
View File
@@ -17,14 +17,15 @@ function edukarsa_admin_menu() {
);
add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Pengaturan Utama', 'Main Settings' ), edukarsa_t( '⚙️ Pengaturan Utama', '⚙️ Main Settings' ), 'manage_options', 'edukarsa_settings', 'edukarsa_settings_page_html' );
add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Tata Letak Beranda', 'Homepage Layout' ), edukarsa_t( '🏗️ Tata Letak', '🏗️ Layout' ), 'manage_options', 'edukarsa_layout', 'edukarsa_layout_page_html' );
add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua Slider', 'All Sliders' ), edukarsa_t( '🌟 Slider Banner', '🌟 Slider Banners' ), 'manage_options', 'edit.php?post_type=slider' );
add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua Program', 'All Programs' ), edukarsa_t( '📚 Program Kami', '📚 Our Programs' ), 'manage_options', 'edit.php?post_type=program' );
add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua Keunggulan', 'All Advantages' ), edukarsa_t( '⭐ Keunggulan', '⭐ Advantages' ), 'manage_options', 'edit.php?post_type=keunggulan' );
add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua Milestone', 'All Milestones' ), edukarsa_t( '🏆 Milestone', '🏆 Milestones' ), 'manage_options', 'edit.php?post_type=milestone' );
add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua FAQ', 'All FAQs' ), edukarsa_t( '❓ Tanya Jawab (FAQ)', '❓ FAQs' ), 'manage_options', 'edit.php?post_type=faq' );
add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Tentang & Donasi', 'About & Donate' ), edukarsa_t( '☕ Donasi & Info', '☕ Donate & Info' ), 'manage_options', 'edukarsa_about', 'edukarsa_about_page_html' );
add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua Galeri', 'All Galleries' ), edukarsa_t( '📸 Galeri Fasilitas', '📸 Facilities Gallery' ), 'manage_options', 'edit.php?post_type=galeri' );
add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Kategori Galeri', 'Gallery Categories' ), edukarsa_t( '📂 Kategori Galeri', '📂 Gallery Categories' ), 'manage_options', 'edit-tags.php?taxonomy=kategori_galeri&post_type=galeri' );
add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Tentang & Donasi', 'About & Donate' ), edukarsa_t( '☕ Donasi & Info', '☕ Donate & Info' ), 'manage_options', 'edukarsa_about', 'edukarsa_about_page_html' );
}
add_action( 'admin_menu', 'edukarsa_admin_menu' );
@@ -38,17 +39,14 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-settings', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '⚙️ Pengaturan Utama', '⚙️ Main Settings' ), 'href' => admin_url( 'admin.php?page=edukarsa_settings' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-layout', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '🏗️ Tata Letak', '🏗️ Layout' ), 'href' => admin_url( 'admin.php?page=edukarsa_layout' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-slider', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '🌟 Slider Banner', '🌟 Slider Banners' ), 'href' => admin_url( 'edit.php?post_type=slider' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-program', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '📚 Program Kami', '📚 Our Programs' ), 'href' => admin_url( 'edit.php?post_type=program' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-keunggulan', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '⭐ Keunggulan', '⭐ Advantages' ), 'href' => admin_url( 'edit.php?post_type=keunggulan' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-milestone', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '🏆 Milestone', '🏆 Milestones' ), 'href' => admin_url( 'edit.php?post_type=milestone' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-faq', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '❓ Tanya Jawab (FAQ)', '❓ FAQs' ), 'href' => admin_url( 'edit.php?post_type=faq' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-about', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '☕ Donasi & Info', '☕ Donate & Info' ), 'href' => admin_url( 'admin.php?page=edukarsa_about' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-galeri', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '📸 Galeri Fasilitas', '📸 Facilities Gallery' ), 'href' => admin_url( 'edit.php?post_type=galeri' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-about', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '☕ Donasi & Info', '☕ Donate & Info' ), 'href' => admin_url( 'admin.php?page=edukarsa_about' ) ) );
}
add_action( 'admin_bar_menu', 'edukarsa_admin_bar_shortcut', 80 );
// SANITASI CHECKBOX (BOOLEAN ENFORCEMENT)
// SANITASI CHECKBOX
function edukarsa_sanitize_checkbox( $val ) {
return ( ! empty( $val ) && ( $val === 1 || $val === '1' || $val === true ) ) ? 1 : 0;
}
@@ -63,7 +61,8 @@ function edukarsa_register_settings() {
'edukarsa_tampil_cta', 'edukarsa_tampil_faq', 'edukarsa_tampil_news', 'edukarsa_sidebar_tampil_search',
'edukarsa_sidebar_tampil_cta', 'edukarsa_sidebar_tampil_html', 'edukarsa_sidebar_tampil_recent',
'edukarsa_sidebar_tampil_cats', 'edukarsa_tampil_fb', 'edukarsa_tampil_ig', 'edukarsa_tampil_yt',
'edukarsa_tampil_tiktok', 'edukarsa_tampil_x'
'edukarsa_tampil_tiktok', 'edukarsa_tampil_x',
'edukarsa_tampil_popup', 'edukarsa_popup_hanya_beranda'
);
foreach ( $checkboxes as $cb ) {
register_setting( 'edukarsa_settings_group', $cb, array( 'sanitize_callback' => 'edukarsa_sanitize_checkbox' ) );
@@ -81,7 +80,8 @@ function edukarsa_register_settings() {
'edukarsa_video1_thumb', 'edukarsa_video1_url', 'edukarsa_video2_thumb', 'edukarsa_video2_url',
'edukarsa_cta_bg', 'edukarsa_cta_btn_url', 'edukarsa_sidebar_cta_btn_url', 'edukarsa_sidebar_banner_img',
'edukarsa_sidebar_banner_url', 'edukarsa_footer_logo', 'edukarsa_footer_fb', 'edukarsa_footer_ig',
'edukarsa_footer_yt', 'edukarsa_footer_tiktok', 'edukarsa_footer_x'
'edukarsa_footer_yt', 'edukarsa_footer_tiktok', 'edukarsa_footer_x',
'edukarsa_popup_img', 'edukarsa_popup_btn_url'
);
foreach ( $urls as $url ) {
register_setting( 'edukarsa_settings_group', $url, array( 'sanitize_callback' => 'esc_url_raw' ) );
@@ -89,14 +89,15 @@ function edukarsa_register_settings() {
// 4. Numbers & Integers
register_setting( 'edukarsa_settings_group', 'edukarsa_sidebar_recent_count', array( 'sanitize_callback' => 'absint' ) );
register_setting( 'edukarsa_settings_group', 'edukarsa_popup_delay', array( 'sanitize_callback' => 'absint' ) );
// 5. Emails
register_setting( 'edukarsa_settings_group', 'edukarsa_footer_email', array( 'sanitize_callback' => 'sanitize_email' ) );
// 6. Safe HTML Textareas
// 6. Safe HTML & Textareas
$safe_html = array(
'edukarsa_teks_sambutan', 'edukarsa_sidebar_html_content', 'edukarsa_footer_alamat',
'edukarsa_footer_jam', 'edukarsa_footer_desc'
'edukarsa_footer_jam', 'edukarsa_footer_desc', 'edukarsa_popup_desc'
);
foreach ( $safe_html as $html ) {
register_setting( 'edukarsa_settings_group', $html, array( 'sanitize_callback' => 'wp_kses_post' ) );
@@ -114,11 +115,15 @@ function edukarsa_register_settings() {
'edukarsa_sidebar_cta_badge', 'edukarsa_sidebar_cta_title', 'edukarsa_sidebar_cta_desc',
'edukarsa_sidebar_cta_btn_text', 'edukarsa_sidebar_html_title', 'edukarsa_sidebar_recent_title',
'edukarsa_sidebar_cats_title', 'edukarsa_footer_telp', 'edukarsa_wa_btn_text',
'edukarsa_wa_default_msg', 'edukarsa_footer_copyright'
'edukarsa_wa_default_msg', 'edukarsa_footer_copyright',
'edukarsa_popup_badge', 'edukarsa_popup_title', 'edukarsa_popup_btn_text'
);
foreach ( $text_inputs as $txt ) {
register_setting( 'edukarsa_settings_group', $txt, array( 'sanitize_callback' => 'sanitize_text_field' ) );
}
// Registrasi Layout Builder
register_setting('edukarsa_layout_group', 'edukarsa_homepage_layout', 'sanitize_text_field');
}
add_action( 'admin_init', 'edukarsa_register_settings' );
@@ -682,6 +687,87 @@ function edukarsa_settings_page_html() {
</div>
</div>
<!-- 8. Pop-up Flyer & Pengumuman (BARU) -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2><?php echo esc_html( edukarsa_t( '🪟 8. Pop-up Flyer & Pengumuman (Modal Banner)', '🪟 8. Pop-up Flyer & Announcements (Modal Banner)' ) ); ?></h2>
<div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
</div>
<div class="edukarsa-card-body">
<p style="font-size: 13px; color: #64748b; margin-top:0; margin-bottom: 15px;">
<?php echo esc_html( edukarsa_t( 'Tampilkan pop-up dialog promosi PMB, brosur pendaftaran, atau maklumat penting saat pengunjung pertama kali membuka situs.', 'Display promotional admission flyer, registration brochure, or important notices when visitors open the site.' ) ); ?>
</p>
<div class="switch-row-inline">
<div class="switch-row">
<div class="switch-label-wrap">
<span class="switch-label"><?php echo esc_html( edukarsa_t( 'Aktifkan Pop-up Flyer', 'Enable Pop-up Flyer' ) ); ?></span>
<a href="<?php echo esc_url( add_query_arg( 'preview_popup', '1', home_url('/') ) ); ?>" target="_blank" class="cpt-shortcut-link"><?php echo esc_html( edukarsa_t( 'Pratinjau Pop-up ↗', 'Preview Pop-up ↗' ) ); ?></a>
</div>
<label class="edukarsa-switch">
<input type="checkbox" class="section-toggle" data-target="#popup-config-box" name="edukarsa_tampil_popup" value="1" <?php checked(1, get_option('edukarsa_tampil_popup', 0)); ?>>
<span class="slider-round"></span>
</label>
</div>
<div class="switch-row">
<div class="switch-label-wrap">
<span class="switch-label"><?php echo esc_html( edukarsa_t( 'Hanya Muncul di Beranda', 'Homepage Only' ) ); ?></span>
<span style="font-size: 11px; color: #64748b;"><?php echo esc_html( edukarsa_t( 'Tidak mengganggu halaman artikel', 'Do not disturb inner pages' ) ); ?></span>
</div>
<label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_popup_hanya_beranda" value="1" <?php checked(1, get_option('edukarsa_popup_hanya_beranda', 1)); ?>>
<span class="slider-round"></span>
</label>
</div>
</div>
<div id="popup-config-box" class="stat-config-box" style="margin-top: 15px;">
<h4><?php echo esc_html( edukarsa_t( 'Konfigurasi Konten Pop-up', 'Pop-up Content Configuration' ) ); ?></h4>
<div class="form-grid-2">
<div class="form-field-group">
<label><?php echo esc_html( edukarsa_t( 'Gambar Flyer / Poster Banner', 'Flyer Image / Poster Banner' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: Minimal 800x800px (format JPG/WebP terkompresi).', 'Recommended: Min 800x800px (compressed JPG/WebP).' ) ); ?></span></span></label>
<div class="input-with-button">
<input type="text" id="edukarsa_popup_img" name="edukarsa_popup_img" value="<?php echo esc_url(get_option('edukarsa_popup_img')); ?>" placeholder="https://...">
<button type="button" class="button btn-upload" data-target="#edukarsa_popup_img"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button>
</div>
</div>
<div class="form-field-group">
<label><?php echo esc_html( edukarsa_t( 'Badge / Subtitle Kecil', 'Badge / Small Subtitle' ) ); ?></label>
<input type="text" name="edukarsa_popup_badge" value="<?php echo esc_attr(get_option('edukarsa_popup_badge', 'INFORMASI PMB 2026/2027')); ?>" placeholder="cth: INFORMASI PMB 2026/2027">
</div>
</div>
<div class="form-grid-2">
<div class="form-field-group">
<label><?php echo esc_html( edukarsa_t( 'Judul Pop-up (Opsional)', 'Pop-up Title (Optional)' ) ); ?></label>
<input type="text" name="edukarsa_popup_title" value="<?php echo esc_attr(get_option('edukarsa_popup_title', 'Penerimaan Mahasiswa Baru Telah Dibuka!')); ?>">
</div>
<div class="form-field-group">
<label><?php echo esc_html( edukarsa_t( 'Waktu Tunda Muncul (Detik)', 'Appearance Delay (Seconds)' ) ); ?></label>
<input type="number" name="edukarsa_popup_delay" value="<?php echo esc_attr(get_option('edukarsa_popup_delay', 2)); ?>" min="0" max="10">
</div>
</div>
<div class="form-field-group">
<label><?php echo esc_html( edukarsa_t( 'Deskripsi Singkat (Opsional)', 'Short Description (Optional)' ) ); ?></label>
<textarea name="edukarsa_popup_desc" rows="3" placeholder="Daftarkan diri Anda sekarang dan raih potongan biaya serta beasiswa unggulan prestasi institusi kami."><?php echo esc_textarea(get_option('edukarsa_popup_desc')); ?></textarea>
</div>
<div class="form-grid-2" style="margin-bottom:0;">
<div class="form-field-group" style="margin-bottom:0;">
<label><?php echo esc_html( edukarsa_t( 'Teks Tombol Aksi', 'Action Button Text' ) ); ?></label>
<input type="text" name="edukarsa_popup_btn_text" value="<?php echo esc_attr(get_option('edukarsa_popup_btn_text', 'Daftar Sekarang')); ?>" placeholder="cth: Daftar Sekarang">
</div>
<div class="form-field-group" style="margin-bottom:0;">
<label><?php echo esc_html( edukarsa_t( 'Tautan URL Tujuan', 'Target Link URL' ) ); ?></label>
<input type="text" name="edukarsa_popup_btn_url" value="<?php echo esc_attr(get_option('edukarsa_popup_btn_url')); ?>" placeholder="https://...">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- KOLOM KANAN (SIDEBAR ACTION PANEL STICKY) -->
@@ -797,7 +883,7 @@ function edukarsa_settings_page_html() {
e.preventDefault();
var targetInput = $(this).data('target');
if (mediaUploader) { mediaUploader.targetInput = targetInput; mediaUploader.open(); return; }
mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Upload Image', button: { text: 'Use Media' }, multiple: false });
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();
@@ -810,6 +896,97 @@ function edukarsa_settings_page_html() {
<?php
}
function edukarsa_layout_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return;
wp_enqueue_script('jquery-ui-sortable');
$default_layout = array('stats','about','milestone','program','video','keunggulan','cta','news','faq');
$saved_layout = get_option('edukarsa_homepage_layout', implode(',', $default_layout));
$current_layout = explode(',', $saved_layout);
foreach($default_layout as $sec) {
if(!in_array($sec, $current_layout)) $current_layout[] = $sec;
}
$section_names = array(
'stats' => edukarsa_t('📊 Statistik (3 Kotak Capaian)', '📊 Statistics Cards'),
'about' => edukarsa_t('👤 Sambutan & Profil Pimpinan', '👤 Welcome & Leader Profile'),
'milestone' => edukarsa_t('🏆 Rekam Jejak (Milestones)', '🏆 Milestones History'),
'program' => edukarsa_t('📚 Program Unggulan / Kurikulum', '📚 Featured Programs'),
'video' => edukarsa_t('🎬 Video Profil Parallax', '🎬 Parallax Videos'),
'keunggulan' => edukarsa_t('⭐ Poin Keunggulan (Grid Berurut)', '⭐ Advantages Grid'),
'cta' => edukarsa_t('📢 Banner Ajakan (CTA) Pendaftaran', '📢 Admission CTA Banner'),
'news' => edukarsa_t('📰 Berita & Warta Terkini', '📰 Latest News & Updates'),
'faq' => edukarsa_t('❓ Seksi Tanya Jawab (FAQ)', '❓ Frequently Asked Questions')
);
?>
<div class="wrap edukarsa-admin-wrap" style="max-width: 800px; margin-top: 25px;">
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.03);">
<div style="padding: 25px 30px; background: #fafafa; border-bottom: 1px solid #f1f5f9;">
<h1 style="font-weight: 800; font-size: 22px; color: #0f172a; margin: 0 0 8px; line-height: 1.2;">
<?php echo esc_html(edukarsa_t('🏗️ Builder Tata Letak Beranda', '🏗️ Homepage Layout Builder')); ?>
</h1>
<p style="color: #64748b; font-size: 14px; margin: 0;">
<?php echo esc_html(edukarsa_t('Tahan dan geser (drag & drop) blok di bawah ini untuk mengatur urutan seksi di halaman beranda. Modul yang dimatikan di Pengaturan Utama akan otomatis dilewati.', 'Drag and drop the blocks below to rearrange the homepage sections. Modules disabled in Main Settings will be skipped automatically.')); ?>
</p>
</div>
<form action="options.php" method="post" style="padding: 30px;">
<?php settings_fields('edukarsa_layout_group'); ?>
<div style="background: #eef2ff; border: 1px solid #c7d2fe; padding: 16px 20px; border-radius: 8px; margin-bottom: 15px; font-weight: 700; color: #3730a3; display: flex; align-items: center; gap: 12px;">
<span style="font-size: 22px;">🔒</span>
<?php echo esc_html(edukarsa_t('🌟 Slider Banner (Terkunci di Posisi Teratas)', '🌟 Slider Banner (Locked at Very Top)')); ?>
</div>
<input type="hidden" name="edukarsa_homepage_layout" id="layout_order" value="<?php echo esc_attr(implode(',', $current_layout)); ?>">
<ul id="sortable-layout" style="margin: 0; padding: 0; list-style: none;">
<?php foreach($current_layout as $sec): if(isset($section_names[$sec])): ?>
<li data-id="<?php echo esc_attr($sec); ?>" style="background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px 20px; margin-bottom: 12px; cursor: grab; display: flex; align-items: center; gap: 15px; transition: all 0.2s; position: relative;">
<span class="dashicons dashicons-menu-alt2" style="color: #94a3b8; font-size: 24px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;"></span>
<span style="font-size: 15px; font-weight: 700; color: #1e293b; flex-grow: 1;"><?php echo esc_html($section_names[$sec]); ?></span>
<span style="font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; background: #f1f5f9; padding: 4px 10px; border-radius: 12px;">Draggable</span>
</li>
<?php endif; endforeach; ?>
</ul>
<div style="margin-top: 30px; text-align: right; border-top: 1px solid #f1f5f9; padding-top: 25px;">
<?php submit_button(edukarsa_t('Simpan Tata Letak', 'Save Layout Order'), 'primary large', 'submit', false, array('style'=>'border-radius:8px; font-weight:700; padding:8px 30px; font-size: 15px;')); ?>
</div>
</form>
</div>
</div>
<style>
#sortable-layout li:hover { box-shadow: 0 4px 12px rgba(11,74,142,0.08) !important; border-color: #0b4a8e !important; }
#sortable-layout li:hover .dashicons { color: #0b4a8e; }
.ui-sortable-helper { box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important; transform: scale(1.02); z-index: 9999; border-color: #0b4a8e !important; }
.ui-sortable-placeholder { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 8px; visibility: visible !important; height: 60px; margin-bottom: 12px; }
</style>
<script>
jQuery(document).ready(function($) {
$("#sortable-layout").sortable({
placeholder: "ui-sortable-placeholder",
cursor: "grabbing",
axis: "y",
containment: "parent",
tolerance: "pointer",
update: function(event, ui) {
var newOrder = [];
$("#sortable-layout li").each(function() {
newOrder.push($(this).data('id'));
});
$("#layout_order").val(newOrder.join(','));
}
});
$("#sortable-layout").disableSelection();
});
</script>
<?php
}
function edukarsa_about_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return;
?>
@@ -907,118 +1084,3 @@ function edukarsa_about_page_html() {
</div>
<?php
}
// =========================================================================
// FITUR BUILDER TATA LETAK BERANDA (DRAG & DROP NATIVE)
// =========================================================================
add_action('admin_menu', function() {
add_submenu_page(
'edukarsa_settings',
edukarsa_t( 'Tata Letak Beranda', 'Homepage Layout' ),
edukarsa_t( '🏗️ Tata Letak', '🏗️ Layout' ),
'manage_options',
'edukarsa_layout',
'edukarsa_layout_page_html'
);
});
add_action('admin_init', function() {
register_setting('edukarsa_layout_group', 'edukarsa_homepage_layout', 'sanitize_text_field');
});
function edukarsa_layout_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return;
// Muat jQuery UI Sortable (Bawaan Inti WordPress)
wp_enqueue_script('jquery-ui-sortable');
$default_layout = array('stats','about','milestone','program','video','keunggulan','cta','news','faq');
$saved_layout = get_option('edukarsa_homepage_layout', implode(',', $default_layout));
$current_layout = explode(',', $saved_layout);
// Pastikan seksi baru tidak hilang jika pernah disimpan di format lama
foreach($default_layout as $sec) {
if(!in_array($sec, $current_layout)) $current_layout[] = $sec;
}
$section_names = array(
'stats' => edukarsa_t('📊 Statistik (3 Kotak Capaian)', '📊 Statistics Cards'),
'about' => edukarsa_t('👤 Sambutan & Profil Pimpinan', '👤 Welcome & Leader Profile'),
'milestone' => edukarsa_t('🏆 Rekam Jejak (Milestones)', '🏆 Milestones History'),
'program' => edukarsa_t('📚 Program Unggulan / Kurikulum', '📚 Featured Programs'),
'video' => edukarsa_t('🎬 Video Profil Parallax', '🎬 Parallax Videos'),
'keunggulan' => edukarsa_t('⭐ Poin Keunggulan (Grid Berurut)', '⭐ Advantages Grid'),
'cta' => edukarsa_t('📢 Banner Ajakan (CTA) Pendaftaran', '📢 Admission CTA Banner'),
'news' => edukarsa_t('📰 Berita & Warta Terkini', '📰 Latest News & Updates'),
'faq' => edukarsa_t('❓ Seksi Tanya Jawab (FAQ)', '❓ Frequently Asked Questions')
);
?>
<div class="wrap edukarsa-admin-wrap" style="max-width: 800px; margin-top: 25px;">
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.03);">
<div style="padding: 25px 30px; background: #fafafa; border-bottom: 1px solid #f1f5f9;">
<h1 style="font-weight: 800; font-size: 22px; color: #0f172a; margin: 0 0 8px; line-height: 1.2;">
<?php echo esc_html(edukarsa_t('🏗️ Builder Tata Letak Beranda', '🏗️ Homepage Layout Builder')); ?>
</h1>
<p style="color: #64748b; font-size: 14px; margin: 0;">
<?php echo esc_html(edukarsa_t('Tahan dan geser (drag & drop) blok di bawah ini untuk mengatur urutan seksi di halaman beranda. Modul yang dimatikan di Pengaturan Utama akan otomatis dilewati.', 'Drag and drop the blocks below to rearrange the homepage sections. Modules disabled in Main Settings will be skipped automatically.')); ?>
</p>
</div>
<form action="options.php" method="post" style="padding: 30px;">
<?php settings_fields('edukarsa_layout_group'); ?>
<div style="background: #eef2ff; border: 1px solid #c7d2fe; padding: 16px 20px; border-radius: 8px; margin-bottom: 15px; font-weight: 700; color: #3730a3; display: flex; align-items: center; gap: 12px;">
<span style="font-size: 22px;">🔒</span>
<?php echo esc_html(edukarsa_t('🌟 Slider Banner (Terkunci di Posisi Teratas)', '🌟 Slider Banner (Locked at Very Top)')); ?>
</div>
<input type="hidden" name="edukarsa_homepage_layout" id="layout_order" value="<?php echo esc_attr(implode(',', $current_layout)); ?>">
<ul id="sortable-layout" style="margin: 0; padding: 0; list-style: none;">
<?php foreach($current_layout as $sec): if(isset($section_names[$sec])): ?>
<li data-id="<?php echo esc_attr($sec); ?>" style="background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px 20px; margin-bottom: 12px; cursor: grab; display: flex; align-items: center; gap: 15px; transition: all 0.2s; position: relative;">
<span class="dashicons dashicons-menu-alt2" style="color: #94a3b8; font-size: 24px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;"></span>
<span style="font-size: 15px; font-weight: 700; color: #1e293b; flex-grow: 1;"><?php echo esc_html($section_names[$sec]); ?></span>
<span style="font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; background: #f1f5f9; padding: 4px 10px; border-radius: 12px;">Draggable</span>
</li>
<?php endif; endforeach; ?>
</ul>
<div style="margin-top: 30px; text-align: right; border-top: 1px solid #f1f5f9; padding-top: 25px;">
<?php submit_button(edukarsa_t('Simpan Tata Letak', 'Save Layout Order'), 'primary large', 'submit', false, array('style'=>'border-radius:8px; font-weight:700; padding:8px 30px; font-size: 15px;')); ?>
</div>
</form>
</div>
</div>
<style>
#sortable-layout li:hover { box-shadow: 0 4px 12px rgba(11,74,142,0.08) !important; border-color: #0b4a8e !important; }
#sortable-layout li:hover .dashicons { color: #0b4a8e; }
.ui-sortable-helper { box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important; transform: scale(1.02); z-index: 9999; border-color: #0b4a8e !important; }
.ui-sortable-placeholder { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 8px; visibility: visible !important; height: 60px; margin-bottom: 12px; }
</style>
<script>
jQuery(document).ready(function($) {
$("#sortable-layout").sortable({
placeholder: "ui-sortable-placeholder",
cursor: "grabbing",
axis: "y",
containment: "parent",
tolerance: "pointer",
update: function(event, ui) {
var newOrder = [];
$("#sortable-layout li").each(function() {
newOrder.push($(this).data('id'));
});
$("#layout_order").val(newOrder.join(','));
}
});
$("#sortable-layout").disableSelection();
});
</script>
<?php
}
+133
View File
@@ -0,0 +1,133 @@
<?php
/**
* Modul Native Pop-up Flyer & Pengumuman EduKarsa
* 100% Native tanpa plugin eksternal
*/
defined( 'ABSPATH' ) || exit;
function edukarsa_render_popup_flyer() {
// 1. Cek apakah fitur popup aktif
$is_active = get_option( 'edukarsa_tampil_popup', 0 );
if ( ! $is_active ) {
return;
}
// 2. Cek apakah dibatasi hanya di beranda
$hanya_beranda = get_option( 'edukarsa_popup_hanya_beranda', 1 );
if ( $hanya_beranda && ! is_front_page() ) {
return;
}
$img_url = get_option( 'edukarsa_popup_img', '' );
$badge = get_option( 'edukarsa_popup_badge', '' );
$title = get_option( 'edukarsa_popup_title', '' );
$desc = get_option( 'edukarsa_popup_desc', '' );
$btn_text = get_option( 'edukarsa_popup_btn_text', '' );
$btn_url = get_option( 'edukarsa_popup_btn_url', '' );
$delay = intval( get_option( 'edukarsa_popup_delay', 2 ) );
if ( $delay < 0 ) {
$delay = 1;
}
// Jika tidak ada gambar dan tidak ada judul, hentikan render
if ( empty( $img_url ) && empty( $title ) ) {
return;
}
?>
<!-- NATIVE POP-UP FLYER MODAL EDUKARSA -->
<div id="edukarsa-popup-overlay" class="edukarsa-popup-overlay" role="dialog" aria-modal="true" aria-hidden="true">
<div class="edukarsa-popup-card">
<button type="button" class="edukarsa-popup-close" id="edukarsa-popup-close" aria-label="<?php echo esc_attr( edukarsa_t( 'Tutup Pop-up', 'Close Popup' ) ); ?>" title="<?php echo esc_attr( edukarsa_t( 'Tutup', 'Close' ) ); ?>">&times;</button>
<div class="edukarsa-popup-content">
<?php if ( ! empty( $img_url ) ) : ?>
<div class="edukarsa-popup-media">
<?php if ( ! empty( $btn_url ) ) : ?>
<a href="<?php echo esc_url( $btn_url ); ?>" class="edukarsa-popup-img-link">
<img src="<?php echo esc_url( $img_url ); ?>" alt="<?php echo esc_attr( $title ? $title : 'Flyer Pengumuman' ); ?>" loading="lazy">
</a>
<?php else : ?>
<img src="<?php echo esc_url( $img_url ); ?>" alt="<?php echo esc_attr( $title ? $title : 'Flyer Pengumuman' ); ?>" loading="lazy">
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ( ! empty( $badge ) || ! empty( $title ) || ! empty( $desc ) || ( ! empty( $btn_text ) && ! empty( $btn_url ) ) ) : ?>
<div class="edukarsa-popup-details">
<?php if ( ! empty( $badge ) ) : ?>
<span class="edukarsa-popup-badge"><?php echo esc_html( $badge ); ?></span>
<?php endif; ?>
<?php if ( ! empty( $title ) ) : ?>
<h3 class="edukarsa-popup-heading"><?php echo esc_html( $title ); ?></h3>
<?php endif; ?>
<?php if ( ! empty( $desc ) ) : ?>
<div class="edukarsa-popup-desc">
<?php echo nl2br( esc_html( $desc ) ); ?>
</div>
<?php endif; ?>
<?php if ( ! empty( $btn_text ) && ! empty( $btn_url ) ) : ?>
<div class="edukarsa-popup-action">
<a href="<?php echo esc_url( $btn_url ); ?>" class="btn-primary edukarsa-popup-btn">
<?php echo esc_html( $btn_text ); ?> &raquo;
</a>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var popupOverlay = document.getElementById("edukarsa-popup-overlay");
var popupClose = document.getElementById("edukarsa-popup-close");
if (!popupOverlay) return;
// Cek parameter preview admin (?preview_popup=1) untuk bypass session
var urlParams = new URLSearchParams(window.location.search);
var isPreview = urlParams.get("preview_popup") === "1";
// Cek apakah sudah pernah ditutup dalam sesi peramban ini
var isDismissed = sessionStorage.getItem("edukarsa_popup_dismissed");
if (!isPreview && isDismissed === "1") return;
var delayMs = <?php echo ( $delay * 1000 ); ?>;
setTimeout(function() {
popupOverlay.classList.add("is-visible");
popupOverlay.setAttribute("aria-hidden", "false");
document.body.classList.add("edukarsa-popup-open");
}, delayMs);
function closePopup() {
popupOverlay.classList.remove("is-visible");
popupOverlay.setAttribute("aria-hidden", "true");
document.body.classList.remove("edukarsa-popup-open");
sessionStorage.setItem("edukarsa_popup_dismissed", "1");
}
if (popupClose) {
popupClose.addEventListener("click", closePopup);
}
popupOverlay.addEventListener("click", function(e) {
if (e.target === popupOverlay) {
closePopup();
}
});
document.addEventListener("keydown", function(e) {
if (e.key === "Escape" && popupOverlay.classList.contains("is-visible")) {
closePopup();
}
});
});
</script>
<?php
}
add_action( 'wp_footer', 'edukarsa_render_popup_flyer', 50 );
+138
View File
@@ -880,3 +880,141 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
content: none !important;
display: none !important;
}
/* 23. NATIVE POP-UP FLYER MODAL */
body.edukarsa-popup-open {
overflow: hidden;
}
.edukarsa-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(15, 23, 42, 0.78);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}
.edukarsa-popup-overlay.is-visible {
opacity: 1;
visibility: visible;
}
.edukarsa-popup-card {
position: relative;
background: #ffffff;
border-radius: 18px;
max-width: 520px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4);
transform: scale(0.92) translateY(15px);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.edukarsa-popup-overlay.is-visible .edukarsa-popup-card {
transform: scale(1) translateY(0);
}
.edukarsa-popup-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.75);
color: #ffffff;
border: 2px solid #ffffff;
font-size: 24px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: background 0.2s, transform 0.2s;
}
.edukarsa-popup-close:hover {
background: #e11d48;
transform: scale(1.1);
}
.edukarsa-popup-media {
width: 100%;
background: #0f172a;
display: block;
line-height: 0;
}
.edukarsa-popup-media img {
width: 100%;
height: auto;
max-height: 380px;
object-fit: contain;
display: block;
margin: 0 auto;
}
.edukarsa-popup-img-link {
display: block;
cursor: pointer;
}
.edukarsa-popup-details {
padding: 24px 28px;
text-align: center;
background: #ffffff;
}
.edukarsa-popup-badge {
display: inline-block;
padding: 4px 14px;
background: #e0f2fe;
color: var(--primary-color);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
border-radius: 20px;
margin-bottom: 10px;
}
.edukarsa-popup-heading {
font-size: 20px;
font-weight: 800;
color: var(--heading-color);
margin: 0 0 10px;
line-height: 1.35;
}
.edukarsa-popup-desc {
font-size: 14px;
color: var(--text-color);
line-height: 1.6;
margin: 0 0 20px;
}
.edukarsa-popup-action {
margin-top: 15px;
}
.edukarsa-popup-btn {
display: inline-block;
padding: 12px 32px;
font-size: 15px;
font-weight: 800;
border-radius: 50px;
box-shadow: 0 6px 18px rgba(11, 74, 142, 0.25);
}
.edukarsa-popup-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(11, 74, 142, 0.35);
}
@media (max-width: 600px) {
.edukarsa-popup-card { max-width: 95%; border-radius: 14px; }
.edukarsa-popup-details { padding: 18px 16px; }
.edukarsa-popup-heading { font-size: 18px; }
.edukarsa-popup-desc { font-size: 13px; }
.edukarsa-popup-btn { padding: 10px 24px; font-size: 14px; }
.edukarsa-popup-close { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 20px; }
}