feat(builder): implementasi native drag and drop homepage layout builder yang 100% aman
This commit is contained in:
Mas Budi Kusuma
+345
-288
@@ -3,7 +3,9 @@
|
||||
|
||||
<main id="primary" class="site-main edukarsa-home">
|
||||
|
||||
<!-- 1. SLIDER -->
|
||||
<!-- ==========================================
|
||||
1. SLIDER (TERKUNCI DI PALING ATAS)
|
||||
=========================================== -->
|
||||
<?php if ( get_option('edukarsa_tampil_slider', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-hero-slider" style="padding: 0;">
|
||||
<div class="slider-container" id="hero-slider-container">
|
||||
@@ -33,311 +35,366 @@
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 2. STATISTIK DESAIN KARTU MELAYANG -->
|
||||
<?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-stats">
|
||||
<div class="container stats-grid">
|
||||
<?php for($i=1; $i<=3; $i++) : ?>
|
||||
<div class="stat-item card-style stat-card-modern">
|
||||
<div class="stat-icon-wrapper">
|
||||
<?php $icon = get_option('edukarsa_stat'.$i.'_icon'); ?>
|
||||
<?php if($icon) : ?>
|
||||
<img src="<?php echo esc_url($icon); ?>" alt="Icon">
|
||||
<?php else: ?>
|
||||
<span>🏫</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<h3 class="stat-number"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_angka', '00') ); ?></h3>
|
||||
<h4 class="stat-title"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_label', 'Judul Statistik') ); ?></h4>
|
||||
<p class="stat-desc"><?php echo nl2br(esc_html( get_option('edukarsa_stat'.$i.'_desc', 'Deskripsi singkat') )); ?></p>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 3. ABOUT US / SAMBUTAN -->
|
||||
<?php if ( get_option('edukarsa_tampil_about', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-sambutan">
|
||||
<div class="container sambutan-grid">
|
||||
<div class="sambutan-image-wrapper">
|
||||
<div class="img-wrapper-portrait">
|
||||
<?php $foto = get_option('edukarsa_foto_kepsek'); ?>
|
||||
<?php if(!empty($foto)) : ?>
|
||||
<img src="<?php echo esc_url($foto); ?>" alt="Kepala Sekolah">
|
||||
<?php else : ?>
|
||||
<div class="img-placeholder"><i>👤</i><span>Upload Foto Kepala Sekolah</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sambutan-content">
|
||||
<span class="badge-title">ABOUT US</span>
|
||||
<h2 class="section-title" style="margin-bottom: 6px;"><?php echo esc_html( get_option('edukarsa_nama_kepsek', 'Nama Kepala Sekolah') ); ?></h2>
|
||||
<h4 class="section-subtitle-strong" style="color:var(--primary-color); margin-bottom:18px; font-size:17px; font-weight:700;"><?php echo esc_html( get_option('edukarsa_subtitle_about', 'Pimpinan Institusi') ); ?></h4>
|
||||
<div class="sambutan-text"><?php echo wpautop( wp_kses_post( get_option('edukarsa_teks_sambutan') ) ); ?></div>
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_link_about', '#') ); ?>" class="btn-primary" style="margin-top: 5px;">Ketahui Lebih Lanjut</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 4. MILESTONES -->
|
||||
<?php
|
||||
if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) :
|
||||
$query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
|
||||
if ( $query_milestone->have_posts() ) :
|
||||
$m_sub = get_option( 'edukarsa_milestone_subtitle', 'REKAM JEJAK' );
|
||||
$m_title = get_option( 'edukarsa_milestone_title', 'Milestone & Prestasi' );
|
||||
?>
|
||||
<section class="edukarsa-section edukarsa-milestones bg-light-blue" style="padding: 50px 0;">
|
||||
<div class="container">
|
||||
<?php if ( ! empty( $m_title ) ) : ?>
|
||||
<div class="section-header text-center" style="margin-bottom: 30px;">
|
||||
<?php if ( ! empty( $m_sub ) ) : ?><span class="badge-title"><?php echo esc_html( $m_sub ); ?></span><?php endif; ?>
|
||||
<h2 class="section-title"><?php echo esc_html( $m_title ); ?></h2>
|
||||
<hr class="title-underline">
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="milestone-grid text-center">
|
||||
<?php
|
||||
while ( $query_milestone->have_posts() ) : $query_milestone->the_post();
|
||||
?>
|
||||
<div class="milestone-item card-style" style="padding: 25px 20px;">
|
||||
<h3 class="milestone-title" style="color: var(--primary-color); font-size: 34px; font-weight: 800; margin-bottom: 6px; line-height: 1;">
|
||||
<?php the_title(); ?>
|
||||
</h3>
|
||||
<div class="milestone-desc" style="font-size: 13px; color: var(--text-muted); line-height: 1.5;">
|
||||
<?php the_excerpt(); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php
|
||||
endif;
|
||||
endif;
|
||||
?>
|
||||
|
||||
<!-- 5. PROGRAM UNGGULAN -->
|
||||
<?php
|
||||
if ( get_option('edukarsa_tampil_program', 1) == 1 ) :
|
||||
$prog_sub = get_option( 'edukarsa_program_subtitle', 'AKADEMIK & KARAKTER' );
|
||||
$prog_title = get_option( 'edukarsa_program_title', 'Our Program' );
|
||||
?>
|
||||
<section class="edukarsa-section edukarsa-programs">
|
||||
<div class="container">
|
||||
<div class="section-header text-center">
|
||||
<?php if ( ! empty( $prog_sub ) ) : ?><span class="badge-title"><?php echo esc_html( $prog_sub ); ?></span><?php endif; ?>
|
||||
<h2 class="section-title"><?php echo esc_html( $prog_title ); ?></h2>
|
||||
<hr class="title-underline">
|
||||
</div>
|
||||
<div class="program-grid">
|
||||
<?php
|
||||
$query_program = new WP_Query( array( 'post_type' => 'program', 'posts_per_page' => 3 ) );
|
||||
if ( $query_program->have_posts() ) :
|
||||
while ( $query_program->have_posts() ) : $query_program->the_post();
|
||||
?>
|
||||
<div class="program-card card-style text-center top-border-blue">
|
||||
<div class="img-wrapper-landscape" style="margin-bottom: 18px;">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<?php the_post_thumbnail( 'medium' ); ?>
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder"><i>🏫</i><span>Gambar Program</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<h3 style="margin-bottom: 10px; font-size: 19px; color: var(--heading-color); font-weight: 700;">
|
||||
<?php the_title(); ?>
|
||||
</h3>
|
||||
<div class="program-desc" style="margin-bottom: 20px; font-size: 14px; color: var(--text-muted); line-height: 1.6;">
|
||||
<?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?>
|
||||
</div>
|
||||
<a href="<?php the_permalink(); ?>" class="btn-outline-primary">Lihat Detail</a>
|
||||
</div>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 6 & 7. WRAPPER PARALLAX -->
|
||||
<?php
|
||||
<!-- ==========================================
|
||||
2. ENGINE BUILDER NATIVE (DRAG & DROP)
|
||||
=========================================== -->
|
||||
<?php
|
||||
// Urutan Bawaan
|
||||
$default_layout = array('stats','about','milestone','program','video','keunggulan','cta','news','faq');
|
||||
|
||||
// Ambil Data Urutan dari Database
|
||||
$layout_option = get_option('edukarsa_homepage_layout', implode(',', $default_layout));
|
||||
if (empty($layout_option)) $layout_option = implode(',', $default_layout);
|
||||
|
||||
$sections = explode(',', $layout_option);
|
||||
|
||||
// Konfigurasi Latar Parallax Global
|
||||
$mid_bg = get_option('edukarsa_mid_bg_image');
|
||||
$parallax_style = $mid_bg ? 'background-image: url('.esc_url($mid_bg).');' : 'background: linear-gradient(135deg, var(--primary-color), var(--heading-color));';
|
||||
?>
|
||||
<div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
|
||||
<div class="parallax-overlay"></div>
|
||||
<div class="parallax-content relative-z2">
|
||||
|
||||
// RENDER LOOP BERDASARKAN URUTAN ARRAY
|
||||
foreach ( $sections as $index => $section ) {
|
||||
$section = trim($section);
|
||||
|
||||
switch ( $section ) {
|
||||
|
||||
<!-- 6. VIDEO -->
|
||||
<?php if ( get_option('edukarsa_tampil_video', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-videos" style="padding-bottom: 30px;">
|
||||
<div class="container video-grid">
|
||||
<?php for($i=1; $i<=2; $i++) : ?>
|
||||
<div class="video-item">
|
||||
<?php $vid_thumb = get_option('edukarsa_video'.$i.'_thumb'); ?>
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_video'.$i.'_url', '#') ); ?>" target="_blank">
|
||||
<div class="img-wrapper-video">
|
||||
<?php if($vid_thumb) : ?>
|
||||
<img src="<?php echo esc_url($vid_thumb); ?>" alt="Video">
|
||||
// --- SEKSI STATISTIK ---
|
||||
case 'stats':
|
||||
if ( get_option('edukarsa_tampil_stats', 1) == 1 ) :
|
||||
// Jika urutan pertama, berikan efek melayang (overlap slider)
|
||||
$is_first = ($index === 0);
|
||||
$margin_style = $is_first ? 'margin-top: -80px;' : 'margin-top: 50px;';
|
||||
?>
|
||||
<section class="edukarsa-stats">
|
||||
<div class="container stats-grid" style="<?php echo $margin_style; ?>">
|
||||
<?php for($i=1; $i<=3; $i++) : ?>
|
||||
<div class="stat-item card-style stat-card-modern">
|
||||
<div class="stat-icon-wrapper">
|
||||
<?php $icon = get_option('edukarsa_stat'.$i.'_icon'); ?>
|
||||
<?php if($icon) : ?>
|
||||
<img src="<?php echo esc_url($icon); ?>" alt="Icon">
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder" style="background:#1e293b; color:#cbd5e1; border:none;"><i>▶️</i><span>Upload Thumbnail Video <?php echo $i; ?></span></div>
|
||||
<span>🏫</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php if($vid_thumb) echo '<div class="play-btn">▶</div>'; ?>
|
||||
</a>
|
||||
<h3 class="stat-number"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_angka', '00') ); ?></h3>
|
||||
<h4 class="stat-title"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_label', 'Judul Statistik') ); ?></h4>
|
||||
<p class="stat-desc"><?php echo nl2br(esc_html( get_option('edukarsa_stat'.$i.'_desc', 'Deskripsi singkat') )); ?></p>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
<?php
|
||||
endif;
|
||||
break;
|
||||
|
||||
<!-- 7. KEUNGGULAN DINAMIS -->
|
||||
<?php
|
||||
if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) :
|
||||
$k_sub = get_option( 'edukarsa_keunggulan_subtitle', 'WHY CHOOSE US' );
|
||||
$k_title = get_option( 'edukarsa_keunggulan_title', 'Keunggulan Program' );
|
||||
?>
|
||||
<section class="edukarsa-section edukarsa-keunggulan" style="padding-top: 20px; padding-bottom: 80px;">
|
||||
<div class="container">
|
||||
<div class="section-header text-center">
|
||||
<?php if ( ! empty( $k_sub ) ) : ?><span class="badge-title text-white"><?php echo esc_html( $k_sub ); ?></span><?php endif; ?>
|
||||
<h2 class="section-title text-white"><?php echo esc_html( $k_title ); ?></h2>
|
||||
// --- SEKSI TENTANG KAMI / SAMBUTAN ---
|
||||
case 'about':
|
||||
if ( get_option('edukarsa_tampil_about', 1) == 1 ) :
|
||||
?>
|
||||
<section class="edukarsa-section edukarsa-sambutan">
|
||||
<div class="container sambutan-grid">
|
||||
<div class="sambutan-image-wrapper">
|
||||
<div class="img-wrapper-portrait">
|
||||
<?php $foto = get_option('edukarsa_foto_kepsek'); ?>
|
||||
<?php if(!empty($foto)) : ?>
|
||||
<img src="<?php echo esc_url($foto); ?>" alt="Kepala Sekolah">
|
||||
<?php else : ?>
|
||||
<div class="img-placeholder"><i>👤</i><span>Upload Foto Kepala Sekolah</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sambutan-content">
|
||||
<span class="badge-title">ABOUT US</span>
|
||||
<h2 class="section-title" style="margin-bottom: 6px;"><?php echo esc_html( get_option('edukarsa_nama_kepsek', 'Nama Kepala Sekolah') ); ?></h2>
|
||||
<h4 class="section-subtitle-strong" style="color:var(--primary-color); margin-bottom:18px; font-size:17px; font-weight:700;"><?php echo esc_html( get_option('edukarsa_subtitle_about', 'Pimpinan Institusi') ); ?></h4>
|
||||
<div class="sambutan-text"><?php echo wpautop( wp_kses_post( get_option('edukarsa_teks_sambutan') ) ); ?></div>
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_link_about', '#') ); ?>" class="btn-primary" style="margin-top: 5px;">Ketahui Lebih Lanjut</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="keunggulan-grid">
|
||||
<?php
|
||||
$query_keunggulan = new WP_Query( array( 'post_type' => 'keunggulan', 'posts_per_page' => 9 ) );
|
||||
if ( $query_keunggulan->have_posts() ) :
|
||||
$nomor = 1;
|
||||
while ( $query_keunggulan->have_posts() ) : $query_keunggulan->the_post();
|
||||
</section>
|
||||
<?php
|
||||
endif;
|
||||
break;
|
||||
|
||||
// --- SEKSI MILESTONE ---
|
||||
case 'milestone':
|
||||
if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) :
|
||||
$query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
|
||||
if ( $query_milestone->have_posts() ) :
|
||||
$m_sub = get_option( 'edukarsa_milestone_subtitle', 'REKAM JEJAK' );
|
||||
$m_title = get_option( 'edukarsa_milestone_title', 'Milestone & Prestasi' );
|
||||
?>
|
||||
<section class="edukarsa-section edukarsa-milestones bg-light-blue" style="padding: 50px 0;">
|
||||
<div class="container">
|
||||
<?php if ( ! empty( $m_title ) ) : ?>
|
||||
<div class="section-header text-center" style="margin-bottom: 30px;">
|
||||
<?php if ( ! empty( $m_sub ) ) : ?><span class="badge-title"><?php echo esc_html( $m_sub ); ?></span><?php endif; ?>
|
||||
<h2 class="section-title"><?php echo esc_html( $m_title ); ?></h2>
|
||||
<hr class="title-underline">
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="milestone-grid text-center">
|
||||
<?php
|
||||
while ( $query_milestone->have_posts() ) : $query_milestone->the_post();
|
||||
?>
|
||||
<div class="keunggulan-card card-style">
|
||||
<div class="keunggulan-number"><?php echo sprintf("%02d", $nomor); ?></div>
|
||||
<div class="keunggulan-content-inner">
|
||||
<h4><?php the_title(); ?></h4>
|
||||
<div style="font-size: 14px; color: var(--text-muted); line-height: 1.6;">
|
||||
<?php echo wp_trim_words( wp_strip_all_tags( get_the_content() ), 15, '...' ); ?>
|
||||
<div class="milestone-item card-style" style="padding: 25px 20px;">
|
||||
<h3 class="milestone-title" style="color: var(--primary-color); font-size: 34px; font-weight: 800; margin-bottom: 6px; line-height: 1;">
|
||||
<?php the_title(); ?>
|
||||
</h3>
|
||||
<div class="milestone-desc" style="font-size: 13px; color: var(--text-muted); line-height: 1.5;">
|
||||
<?php the_excerpt(); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php
|
||||
endif;
|
||||
endif;
|
||||
break;
|
||||
|
||||
// --- SEKSI PROGRAM UNGGULAN ---
|
||||
case 'program':
|
||||
if ( get_option('edukarsa_tampil_program', 1) == 1 ) :
|
||||
$prog_sub = get_option( 'edukarsa_program_subtitle', 'AKADEMIK & KARAKTER' );
|
||||
$prog_title = get_option( 'edukarsa_program_title', 'Our Program' );
|
||||
?>
|
||||
<section class="edukarsa-section edukarsa-programs">
|
||||
<div class="container">
|
||||
<div class="section-header text-center">
|
||||
<?php if ( ! empty( $prog_sub ) ) : ?><span class="badge-title"><?php echo esc_html( $prog_sub ); ?></span><?php endif; ?>
|
||||
<h2 class="section-title"><?php echo esc_html( $prog_title ); ?></h2>
|
||||
<hr class="title-underline">
|
||||
</div>
|
||||
<div class="program-grid">
|
||||
<?php
|
||||
$query_program = new WP_Query( array( 'post_type' => 'program', 'posts_per_page' => 3 ) );
|
||||
if ( $query_program->have_posts() ) :
|
||||
while ( $query_program->have_posts() ) : $query_program->the_post();
|
||||
?>
|
||||
<div class="program-card card-style text-center top-border-blue">
|
||||
<div class="img-wrapper-landscape" style="margin-bottom: 18px;">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<?php the_post_thumbnail( 'medium' ); ?>
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder"><i>🏫</i><span>Gambar Program</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<h3 style="margin-bottom: 10px; font-size: 19px; color: var(--heading-color); font-weight: 700;">
|
||||
<?php the_title(); ?>
|
||||
</h3>
|
||||
<div class="program-desc" style="margin-bottom: 20px; font-size: 14px; color: var(--text-muted); line-height: 1.6;">
|
||||
<?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?>
|
||||
</div>
|
||||
<a href="<?php the_permalink(); ?>" class="btn-outline-primary">Lihat Detail</a>
|
||||
</div>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php
|
||||
endif;
|
||||
break;
|
||||
|
||||
// --- SEKSI VIDEO ---
|
||||
case 'video':
|
||||
if ( get_option('edukarsa_tampil_video', 1) == 1 ) :
|
||||
?>
|
||||
<div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
|
||||
<div class="parallax-overlay"></div>
|
||||
<div class="parallax-content relative-z2">
|
||||
<section class="edukarsa-section edukarsa-videos" style="padding: 60px 0;">
|
||||
<div class="container video-grid">
|
||||
<?php for($i=1; $i<=2; $i++) : ?>
|
||||
<div class="video-item">
|
||||
<?php $vid_thumb = get_option('edukarsa_video'.$i.'_thumb'); ?>
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_video'.$i.'_url', '#') ); ?>" target="_blank">
|
||||
<div class="img-wrapper-video">
|
||||
<?php if($vid_thumb) : ?>
|
||||
<img src="<?php echo esc_url($vid_thumb); ?>" alt="Video">
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder" style="background:#1e293b; color:#cbd5e1; border:none;"><i>▶️</i><span>Upload Thumbnail Video <?php echo $i; ?></span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php if($vid_thumb) echo '<div class="play-btn">▶</div>'; ?>
|
||||
</a>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
endif;
|
||||
break;
|
||||
|
||||
// --- SEKSI KEUNGGULAN ---
|
||||
case 'keunggulan':
|
||||
if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) :
|
||||
$k_sub = get_option( 'edukarsa_keunggulan_subtitle', 'WHY CHOOSE US' );
|
||||
$k_title = get_option( 'edukarsa_keunggulan_title', 'Keunggulan Program' );
|
||||
?>
|
||||
<div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
|
||||
<div class="parallax-overlay"></div>
|
||||
<div class="parallax-content relative-z2">
|
||||
<section class="edukarsa-section edukarsa-keunggulan" style="padding: 60px 0 80px;">
|
||||
<div class="container">
|
||||
<div class="section-header text-center">
|
||||
<?php if ( ! empty( $k_sub ) ) : ?><span class="badge-title text-white"><?php echo esc_html( $k_sub ); ?></span><?php endif; ?>
|
||||
<h2 class="section-title text-white"><?php echo esc_html( $k_title ); ?></h2>
|
||||
</div>
|
||||
<div class="keunggulan-grid">
|
||||
<?php
|
||||
$query_keunggulan = new WP_Query( array( 'post_type' => 'keunggulan', 'posts_per_page' => 9 ) );
|
||||
if ( $query_keunggulan->have_posts() ) :
|
||||
$nomor = 1;
|
||||
while ( $query_keunggulan->have_posts() ) : $query_keunggulan->the_post();
|
||||
?>
|
||||
<div class="keunggulan-card card-style">
|
||||
<div class="keunggulan-number"><?php echo sprintf("%02d", $nomor); ?></div>
|
||||
<div class="keunggulan-content-inner">
|
||||
<h4><?php the_title(); ?></h4>
|
||||
<div style="font-size: 14px; color: var(--text-muted); line-height: 1.6;">
|
||||
<?php echo wp_trim_words( wp_strip_all_tags( get_the_content() ), 15, '...' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$nomor++;
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
endif;
|
||||
break;
|
||||
|
||||
// --- SEKSI CTA PENDAFTARAN ---
|
||||
case 'cta':
|
||||
if ( get_option('edukarsa_tampil_cta', 1) == 1 ) :
|
||||
?>
|
||||
<section class="edukarsa-cta-floating-section" style="padding: 50px 0;">
|
||||
<div class="container">
|
||||
<div class="cta-floating-card">
|
||||
<div class="cta-floating-content">
|
||||
<span class="badge-title" style="color: rgba(255,255,255,0.85);">PENDAFTARAN MAHASISWA BARU</span>
|
||||
<h2 class="cta-floating-title"><?php echo esc_html( get_option('edukarsa_cta_title', 'Siap Bergabung Bersama Kami?') ); ?></h2>
|
||||
</div>
|
||||
<div class="cta-floating-action">
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_cta_btn_url', '#') ); ?>" class="btn-primary btn-light cta-btn-custom">
|
||||
<?php echo esc_html( get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang') ); ?> »
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php
|
||||
endif;
|
||||
break;
|
||||
|
||||
// --- SEKSI LATEST NEWS ---
|
||||
case 'news':
|
||||
if ( get_option('edukarsa_tampil_news', 1) == 1 ) :
|
||||
?>
|
||||
<section class="edukarsa-section edukarsa-latest-news" style="padding-top: 50px; padding-bottom: 60px;">
|
||||
<div class="container">
|
||||
<div class="section-header text-center" style="margin-bottom: 35px;">
|
||||
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_news_title', 'News & Update') ); ?></h2>
|
||||
<hr class="title-underline">
|
||||
</div>
|
||||
<div class="news-grid">
|
||||
<?php
|
||||
$query_news = new WP_Query( array('post_type' => 'post', 'posts_per_page' => 6) );
|
||||
if ( $query_news->have_posts() ) :
|
||||
while ( $query_news->have_posts() ) : $query_news->the_post();
|
||||
?>
|
||||
<article class="news-card card-style">
|
||||
<div class="img-wrapper-landscape" style="border-radius: 12px 12px 0 0;">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'medium' ); ?></a>
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder"><i>📰</i><span>Gambar Berita</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<h3 class="news-title"><a href="<?php the_permalink(); ?>" style="color:var(--heading-color);"><?php the_title(); ?></a></h3>
|
||||
<div class="news-excerpt" style="color:var(--text-muted); font-size:14px; margin-bottom:15px;"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
|
||||
<a href="<?php the_permalink(); ?>" class="btn-outline-primary" style="margin-top: auto; align-self: flex-start;">Read More</a>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php
|
||||
endif;
|
||||
break;
|
||||
|
||||
// --- SEKSI FAQ ---
|
||||
case 'faq':
|
||||
if ( get_option('edukarsa_tampil_faq', 1) == 1 ) :
|
||||
$query_faq = new WP_Query( array( 'post_type' => 'faq', 'posts_per_page' => -1, 'order' => 'ASC' ) );
|
||||
if ( $query_faq->have_posts() ) :
|
||||
$faq_title = get_option( 'edukarsa_faq_title', 'Pertanyaan Umum' );
|
||||
?>
|
||||
<section class="edukarsa-section edukarsa-faq-section" style="padding: 50px 0 75px; background-color: #f8fafc;">
|
||||
<div class="container">
|
||||
<div class="section-header text-center" style="margin-bottom: 35px;">
|
||||
<h2 class="section-title"><?php echo esc_html( $faq_title ); ?></h2>
|
||||
<hr class="title-underline">
|
||||
</div>
|
||||
|
||||
<div class="faq-accordion-container">
|
||||
<?php
|
||||
while ( $query_faq->have_posts() ) : $query_faq->the_post();
|
||||
?>
|
||||
<div class="faq-item">
|
||||
<button type="button" class="faq-header">
|
||||
<span class="faq-title"><?php the_title(); ?></span>
|
||||
<span class="faq-icon">＋</span>
|
||||
</button>
|
||||
<div class="faq-body">
|
||||
<div class="faq-body-content">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$nomor++;
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 8. CTA SECTION (FLOATING CARD) -->
|
||||
<?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-cta-floating-section">
|
||||
<div class="container">
|
||||
<div class="cta-floating-card">
|
||||
<div class="cta-floating-content">
|
||||
<span class="badge-title" style="color: rgba(255,255,255,0.85);">PENDAFTARAN MAHASISWA BARU</span>
|
||||
<h2 class="cta-floating-title"><?php echo esc_html( get_option('edukarsa_cta_title', 'Siap Bergabung Bersama Kami?') ); ?></h2>
|
||||
</div>
|
||||
<div class="cta-floating-action">
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_cta_btn_url', '#') ); ?>" class="btn-primary btn-light cta-btn-custom">
|
||||
<?php echo esc_html( get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang') ); ?> »
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 9. LATEST NEWS (JUDUL BERSIH TANPA BADGE BERLEBIH) -->
|
||||
<?php if ( get_option('edukarsa_tampil_news', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-latest-news" style="padding-top: 50px; padding-bottom: 60px;">
|
||||
<div class="container">
|
||||
<div class="section-header text-center" style="margin-bottom: 35px;">
|
||||
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_news_title', 'News & Update') ); ?></h2>
|
||||
<hr class="title-underline">
|
||||
</div>
|
||||
<div class="news-grid">
|
||||
<?php
|
||||
$query_news = new WP_Query( array('post_type' => 'post', 'posts_per_page' => 6) );
|
||||
if ( $query_news->have_posts() ) :
|
||||
while ( $query_news->have_posts() ) : $query_news->the_post();
|
||||
?>
|
||||
<article class="news-card card-style">
|
||||
<div class="img-wrapper-landscape" style="border-radius: 12px 12px 0 0;">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'medium' ); ?></a>
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder"><i>📰</i><span>Gambar Berita</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<h3 class="news-title"><a href="<?php the_permalink(); ?>" style="color:var(--heading-color);"><?php the_title(); ?></a></h3>
|
||||
<div class="news-excerpt" style="color:var(--text-muted); font-size:14px; margin-bottom:15px;"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
|
||||
<a href="<?php the_permalink(); ?>" class="btn-outline-primary" style="margin-top: auto; align-self: flex-start;">Read More</a>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 10. SEKSI FAQ (JUDUL BERSIH TANPA BADGE REDUNDAN) -->
|
||||
<?php
|
||||
if ( get_option('edukarsa_tampil_faq', 1) == 1 ) :
|
||||
$query_faq = new WP_Query( array( 'post_type' => 'faq', 'posts_per_page' => -1, 'order' => 'ASC' ) );
|
||||
if ( $query_faq->have_posts() ) :
|
||||
$faq_title = get_option( 'edukarsa_faq_title', 'Pertanyaan Umum' );
|
||||
?>
|
||||
<section class="edukarsa-section edukarsa-faq-section" style="padding: 50px 0 75px; background-color: #f8fafc;">
|
||||
<div class="container">
|
||||
<div class="section-header text-center" style="margin-bottom: 35px;">
|
||||
<h2 class="section-title"><?php echo esc_html( $faq_title ); ?></h2>
|
||||
<hr class="title-underline">
|
||||
</div>
|
||||
|
||||
<div class="faq-accordion-container">
|
||||
<?php
|
||||
while ( $query_faq->have_posts() ) : $query_faq->the_post();
|
||||
?>
|
||||
<div class="faq-item">
|
||||
<button type="button" class="faq-header">
|
||||
<span class="faq-title"><?php the_title(); ?></span>
|
||||
<span class="faq-icon">＋</span>
|
||||
</button>
|
||||
<div class="faq-body">
|
||||
<div class="faq-body-content">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php
|
||||
endif;
|
||||
endif;
|
||||
</section>
|
||||
<?php
|
||||
endif;
|
||||
endif;
|
||||
break;
|
||||
|
||||
// Mencegah eksekusi diluar blok template (White-list security)
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
</main>
|
||||
|
||||
@@ -908,3 +908,117 @@ function edukarsa_about_page_html() {
|
||||
<?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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user