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

feat(customizer): tambahkan input kustomisasi judul dan badge frontend untuk seksi milestone, program, dan keunggulan

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 23:22:26 +07:00
parent aeb594a0d4
commit 03d6abd8ba
2 changed files with 114 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front-page.php
+34 -14
View File
@@ -32,7 +32,7 @@
</section> </section>
<?php endif; ?> <?php endif; ?>
<!-- 2. STATISTIK KARTU MELAYANG --> <!-- 2. STATISTIK DESAIN KARTU MELAYANG -->
<?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?> <?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?>
<section class="edukarsa-stats"> <section class="edukarsa-stats">
<div class="container stats-grid"> <div class="container stats-grid">
@@ -80,14 +80,25 @@
</section> </section>
<?php endif; ?> <?php endif; ?>
<!-- 4. MILESTONES --> <!-- 4. MILESTONES (LABEL & HEADINGS DINAMIS) -->
<?php <?php
if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) : if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) :
$query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) ); $query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
if ( $query_milestone->have_posts() ) : 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: 45px 0;"> <section class="edukarsa-section edukarsa-milestones bg-light-blue" style="padding: 50px 0;">
<div class="container milestone-grid text-center"> <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 <?php
while ( $query_milestone->have_posts() ) : $query_milestone->the_post(); while ( $query_milestone->have_posts() ) : $query_milestone->the_post();
?> ?>
@@ -104,19 +115,24 @@
wp_reset_postdata(); wp_reset_postdata();
?> ?>
</div> </div>
</div>
</section> </section>
<?php <?php
endif; endif;
endif; endif;
?> ?>
<!-- 5. PROGRAM UNGGULAN --> <!-- 5. PROGRAM UNGGULAN (LABEL & HEADINGS DINAMIS) -->
<?php if ( get_option('edukarsa_tampil_program', 1) == 1 ) : ?> <?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"> <section class="edukarsa-section edukarsa-programs">
<div class="container"> <div class="container">
<div class="section-header text-center"> <div class="section-header text-center">
<span class="badge-title">AKADEMIK & KARAKTER</span> <?php if ( ! empty( $prog_sub ) ) : ?><span class="badge-title"><?php echo esc_html( $prog_sub ); ?></span><?php endif; ?>
<h2 class="section-title">Our Program</h2> <h2 class="section-title"><?php echo esc_html( $prog_title ); ?></h2>
<hr class="title-underline"> <hr class="title-underline">
</div> </div>
<div class="program-grid"> <div class="program-grid">
@@ -151,7 +167,7 @@
</section> </section>
<?php endif; ?> <?php endif; ?>
<!-- 6 & 7. WRAPPER PARALLAX (SINKRON DENGAN WARNA TEMA) --> <!-- 6 & 7. WRAPPER PARALLAX -->
<?php <?php
$mid_bg = get_option('edukarsa_mid_bg_image'); $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));'; $parallax_style = $mid_bg ? 'background-image: url('.esc_url($mid_bg).');' : 'background: linear-gradient(135deg, var(--primary-color), var(--heading-color));';
@@ -183,13 +199,17 @@
</section> </section>
<?php endif; ?> <?php endif; ?>
<!-- 7. KEUNGGULAN DINAMIS --> <!-- 7. KEUNGGULAN DINAMIS (LABEL & HEADINGS DINAMIS) -->
<?php if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) : ?> <?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;"> <section class="edukarsa-section edukarsa-keunggulan" style="padding-top: 20px; padding-bottom: 80px;">
<div class="container"> <div class="container">
<div class="section-header text-center"> <div class="section-header text-center">
<span class="badge-title text-white"><?php echo esc_html( get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US') ); ?></span> <?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( get_option('edukarsa_keunggulan_title', 'Keunggulan Program') ); ?></h2> <h2 class="section-title text-white"><?php echo esc_html( $k_title ); ?></h2>
</div> </div>
<div class="keunggulan-grid"> <div class="keunggulan-grid">
<?php <?php
@@ -221,7 +241,7 @@
</div> </div>
</div> </div>
<!-- 8. CTA SECTION (FLOATING CARD DESIGN - PEMISAH ELEGAN) --> <!-- 8. CTA SECTION (FLOATING CARD DESIGN) -->
<?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?> <?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?>
<section class="edukarsa-cta-floating-section"> <section class="edukarsa-cta-floating-section">
<div class="container"> <div class="container">
inc/admin-menu.php
+65 -24
View File
@@ -117,8 +117,11 @@ function edukarsa_register_settings() {
// Header Logo // Header Logo
'edukarsa_header_logo', 'edukarsa_header_logo',
// Custom Teks // Custom Teks Headings Frontend (Milestone, Program, Keunggulan, News)
'edukarsa_keunggulan_subtitle', 'edukarsa_keunggulan_title', 'edukarsa_news_title', 'edukarsa_milestone_subtitle', 'edukarsa_milestone_title',
'edukarsa_program_subtitle', 'edukarsa_program_title',
'edukarsa_keunggulan_subtitle', 'edukarsa_keunggulan_title',
'edukarsa_news_title',
// Stats Fields // Stats Fields
'edukarsa_stat1_angka', 'edukarsa_stat1_label', 'edukarsa_stat1_desc', 'edukarsa_stat1_icon', 'edukarsa_stat1_angka', 'edukarsa_stat1_label', 'edukarsa_stat1_desc', 'edukarsa_stat1_icon',
@@ -148,7 +151,7 @@ function edukarsa_register_settings() {
} }
add_action( 'admin_init', 'edukarsa_register_settings' ); add_action( 'admin_init', 'edukarsa_register_settings' );
// 4. HALAMAN PENGATURAN DENGAN DESAIN 2-KOLOM // 4. HALAMAN PENGATURAN
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' );
@@ -277,7 +280,7 @@ function edukarsa_settings_page_html() {
<div class="switch-label-wrap"> <div class="switch-label-wrap">
<div class="switch-label"> <div class="switch-label">
<span>Tampilkan Slider Atas</span> <span>Tampilkan Slider Atas</span>
<span class="tooltip-hint">?<span class="tooltip-text">Gambar & URL link banner dikelola pada modul 🌟 Slider Banner.</span></span> <span class="tooltip-hint">?<span class="tooltip-text">Gambar & tautan banner dikelola pada modul 🌟 Slider Banner.</span></span>
</div> </div>
<a href="<?php echo admin_url('edit.php?post_type=slider'); ?>" class="cpt-shortcut-link">Kelola Slider ↗</a> <a href="<?php echo admin_url('edit.php?post_type=slider'); ?>" class="cpt-shortcut-link">Kelola Slider ↗</a>
</div> </div>
@@ -290,9 +293,9 @@ function edukarsa_settings_page_html() {
<div class="switch-label-wrap"> <div class="switch-label-wrap">
<div class="switch-label"> <div class="switch-label">
<span>Tampilkan 3 Kotak Statistik</span> <span>Tampilkan 3 Kotak Statistik</span>
<span class="tooltip-hint">?<span class="tooltip-text">Konfigurasi teks, angka capaian, dan ikon diatur langsung pada form di bawah.</span></span> <span class="tooltip-hint">?<span class="tooltip-text">Konfigurasi teks, angka capaian, dan ikon diatur langsung pada formulir di bawah.</span></span>
</div> </div>
<span style="font-size: 11px; color: #64748b;">Form Pengaturan Bawah ↓</span> <span style="font-size: 11px; color: #64748b;">Formulir Pengaturan Bawah ↓</span>
</div> </div>
<label class="edukarsa-switch"> <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)); ?>> <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)); ?>>
@@ -372,20 +375,20 @@ function edukarsa_settings_page_html() {
</div> </div>
</div> </div>
<!-- 3. Program, Milestone & Keunggulan (DENGAN TOOLTIP & SHORTCUT) --> <!-- 3. Program, Milestone & Keunggulan (KATA-KATA FRONTEND BISA DIKOSTUM) -->
<div class="edukarsa-card"> <div class="edukarsa-card">
<div class="edukarsa-card-header"> <div class="edukarsa-card-header">
<h2>⭐ 3. Program, Milestones, & Keunggulan</h2> <h2>⭐ 3. Program, Milestones, & Keunggulan</h2>
</div> </div>
<div class="edukarsa-card-body"> <div class="edukarsa-card-body">
<div class="switch-row-inline">
<!-- Milestone Switch & Shortcut --> <!-- Baris Switch Toggle & Shortcut Sidebar CPT -->
<div class="switch-row-inline">
<div class="switch-row"> <div class="switch-row">
<div class="switch-label-wrap"> <div class="switch-label-wrap">
<div class="switch-label"> <div class="switch-label">
<span>Tampilkan 4 Milestone</span> <span>Seksi Milestone</span>
<span class="tooltip-hint">?<span class="tooltip-text">Data angka prestasi & capaian diisi melalui menu 🏆 Milestone di sidebar admin.</span></span> <span class="tooltip-hint">?<span class="tooltip-text">Data angka prestasi diisi melalui menu 🏆 Milestone di sidebar admin.</span></span>
</div> </div>
<a href="<?php echo admin_url('edit.php?post_type=milestone'); ?>" class="cpt-shortcut-link">Kelola Milestone ↗</a> <a href="<?php echo admin_url('edit.php?post_type=milestone'); ?>" class="cpt-shortcut-link">Kelola Milestone ↗</a>
</div> </div>
@@ -395,11 +398,10 @@ function edukarsa_settings_page_html() {
</label> </label>
</div> </div>
<!-- Program Switch & Shortcut -->
<div class="switch-row"> <div class="switch-row">
<div class="switch-label-wrap"> <div class="switch-label-wrap">
<div class="switch-label"> <div class="switch-label">
<span>Tampilkan Program (3 Grid)</span> <span>Seksi Program</span>
<span class="tooltip-hint">?<span class="tooltip-text">Daftar jurusan & program kurikulum dikelola melalui menu 📚 Program Kami di sidebar admin.</span></span> <span class="tooltip-hint">?<span class="tooltip-text">Daftar jurusan & program kurikulum dikelola melalui menu 📚 Program Kami di sidebar admin.</span></span>
</div> </div>
<a href="<?php echo admin_url('edit.php?post_type=program'); ?>" class="cpt-shortcut-link">Kelola Program ↗</a> <a href="<?php echo admin_url('edit.php?post_type=program'); ?>" class="cpt-shortcut-link">Kelola Program ↗</a>
@@ -410,12 +412,11 @@ function edukarsa_settings_page_html() {
</label> </label>
</div> </div>
<!-- Keunggulan Switch & Shortcut -->
<div class="switch-row"> <div class="switch-row">
<div class="switch-label-wrap"> <div class="switch-label-wrap">
<div class="switch-label"> <div class="switch-label">
<span>Tampilkan Keunggulan (9 Grid)</span> <span>Seksi Keunggulan</span>
<span class="tooltip-hint">?<span class="tooltip-text">9 butir keunggulan institusi dikelola melalui menu ⭐ Keunggulan di sidebar admin.</span></span> <span class="tooltip-hint">?<span class="tooltip-text">Butir keunggulan institusi dikelola melalui menu ⭐ Keunggulan di sidebar admin.</span></span>
</div> </div>
<a href="<?php echo admin_url('edit.php?post_type=keunggulan'); ?>" class="cpt-shortcut-link">Kelola Keunggulan ↗</a> <a href="<?php echo admin_url('edit.php?post_type=keunggulan'); ?>" class="cpt-shortcut-link">Kelola Keunggulan ↗</a>
</div> </div>
@@ -424,20 +425,60 @@ function edukarsa_settings_page_html() {
<span class="slider-round"></span> <span class="slider-round"></span>
</label> </label>
</div> </div>
</div> </div>
<div class="form-grid-2" style="margin-top: 15px;"> <!-- Opsi Custom Teks Frontend: Milestone -->
<div class="form-field-group"> <div style="border-top: 1px solid #e2e8f0; margin-top: 20px; padding-top: 15px;">
<label>Subtitle Keunggulan</label> <h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e; display: flex; align-items: center; gap: 6px;">
<input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>"> 🏆 Label Tampilan: Seksi Milestone
</h4>
<div class="form-grid-2">
<div class="form-field-group" style="margin-bottom: 0;">
<label>Subtitle / Badge Teks</label>
<input type="text" name="edukarsa_milestone_subtitle" value="<?php echo esc_attr(get_option('edukarsa_milestone_subtitle', 'REKAM JEJAK')); ?>" placeholder="cth: REKAM JEJAK / CAPAIAN KAMI">
</div> </div>
<div class="form-field-group"> <div class="form-field-group" style="margin-bottom: 0;">
<label>Judul Seksi Keunggulan</label> <label>Judul Seksi (Heading)</label>
<input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>"> <input type="text" name="edukarsa_milestone_title" value="<?php echo esc_attr(get_option('edukarsa_milestone_title', 'Milestone & Prestasi')); ?>" placeholder="cth: Milestone & Prestasi (Kosongkan jika tanpa judul)">
</div> </div>
</div> </div>
</div> </div>
<!-- Opsi Custom Teks Frontend: Program -->
<div style="border-top: 1px solid #e2e8f0; margin-top: 15px; padding-top: 15px;">
<h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e; display: flex; align-items: center; gap: 6px;">
📚 Label Tampilan: Seksi Program
</h4>
<div class="form-grid-2">
<div class="form-field-group" style="margin-bottom: 0;">
<label>Subtitle / Badge Teks</label>
<input type="text" name="edukarsa_program_subtitle" value="<?php echo esc_attr(get_option('edukarsa_program_subtitle', 'AKADEMIK & KARAKTER')); ?>" placeholder="cth: AKADEMIK & KARAKTER / JURUSAN PILIHAN">
</div>
<div class="form-field-group" style="margin-bottom: 0;">
<label>Judul Seksi (Heading)</label>
<input type="text" name="edukarsa_program_title" value="<?php echo esc_attr(get_option('edukarsa_program_title', 'Our Program')); ?>" placeholder="cth: Program Unggulan / Program Studi">
</div>
</div>
</div>
<!-- Opsi Custom Teks Frontend: Keunggulan -->
<div style="border-top: 1px solid #e2e8f0; margin-top: 15px; padding-top: 15px;">
<h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e; display: flex; align-items: center; gap: 6px;">
⭐ Label Tampilan: Seksi Keunggulan
</h4>
<div class="form-grid-2">
<div class="form-field-group" style="margin-bottom: 0;">
<label>Subtitle / Badge Teks</label>
<input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>" placeholder="cth: WHY CHOOSE US / ALASAN MEMILIH KAMI">
</div>
<div class="form-field-group" style="margin-bottom: 0;">
<label>Judul Seksi (Heading)</label>
<input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>" placeholder="cth: Keunggulan Sekolah / Fasilitas Terbaik">
</div>
</div>
</div>
</div>
</div> </div>
<!-- 4. Video & Parallax Area --> <!-- 4. Video & Parallax Area -->