425 lines
23 KiB
PHP
425 lines
23 KiB
PHP
<?php defined( 'ABSPATH' ) || exit; ?>
|
||
<?php get_header(); ?>
|
||
|
||
<main id="primary" class="site-main edukarsa-home">
|
||
|
||
<!-- ==========================================
|
||
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">
|
||
<?php
|
||
$query_slider = new WP_Query( array( 'post_type' => 'slider', 'posts_per_page' => -1 ) );
|
||
if ( $query_slider->have_posts() ) :
|
||
echo '<div class="slider-wrapper" id="hero-slider-wrapper">';
|
||
while ( $query_slider->have_posts() ) : $query_slider->the_post();
|
||
$link = get_post_meta( get_the_ID(), '_slider_link', true );
|
||
?>
|
||
<div class="slide-item img-wrapper-slider">
|
||
<?php if(!empty($link)) echo '<a href="'.esc_url($link).'">'; ?>
|
||
<?php if ( has_post_thumbnail() ) : ?>
|
||
<?php the_post_thumbnail( 'full' ); ?>
|
||
<?php else: ?>
|
||
<div class="img-placeholder"><i>🖼️</i><span>Upload Gambar Slider untuk "<?php the_title(); ?>"</span></div>
|
||
<?php endif; ?>
|
||
<?php if(!empty($link)) echo '</a>'; ?>
|
||
</div>
|
||
<?php
|
||
endwhile;
|
||
echo '</div>';
|
||
wp_reset_postdata();
|
||
endif;
|
||
?>
|
||
</div>
|
||
</section>
|
||
<?php endif; ?>
|
||
|
||
<!-- ==========================================
|
||
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));';
|
||
|
||
// RENDER LOOP BERDASARKAN URUTAN ARRAY
|
||
foreach ( $sections as $index => $section ) {
|
||
$section = trim($section);
|
||
|
||
switch ( $section ) {
|
||
|
||
// --- 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: ?>
|
||
<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;
|
||
break;
|
||
|
||
// --- 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>
|
||
</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="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
|
||
endwhile;
|
||
wp_reset_postdata();
|
||
?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<?php
|
||
endif;
|
||
endif;
|
||
break;
|
||
|
||
// Mencegah eksekusi diluar blok template (White-list security)
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
?>
|
||
|
||
</main>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
const slider = document.getElementById('hero-slider-wrapper');
|
||
if (slider && slider.children.length > 1) {
|
||
setInterval(function() {
|
||
if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 10) {
|
||
slider.scrollTo({ left: 0, behavior: 'smooth' });
|
||
} else {
|
||
slider.scrollBy({ left: slider.clientWidth, behavior: 'smooth' });
|
||
}
|
||
}, 4000);
|
||
}
|
||
|
||
document.querySelectorAll('.faq-header').forEach(function(header) {
|
||
header.addEventListener('click', function() {
|
||
const item = this.parentElement;
|
||
item.classList.toggle('active');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<?php get_footer(); ?>
|