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

feat(admin): halaman donasi & info aplikasi, persuasi CTA donasi, dan transisi halus accordion

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-16 00:09:37 +07:00
parent f6a16450da
commit 1325362eca
1 changed files with 122 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inc/admin-menu.php
+122 -12
View File
@@ -20,6 +20,7 @@ function edukarsa_admin_menu() {
add_submenu_page( 'edukarsa_settings', 'Semua Keunggulan', '⭐ Keunggulan', 'manage_options', 'edit.php?post_type=keunggulan' );
add_submenu_page( 'edukarsa_settings', 'Semua Milestone', '🏆 Milestone', 'manage_options', 'edit.php?post_type=milestone' );
add_submenu_page( 'edukarsa_settings', 'Semua FAQ', '❓ Tanya Jawab (FAQ)', 'manage_options', 'edit.php?post_type=faq' );
add_submenu_page( 'edukarsa_settings', 'Tentang & Donasi', '☕ Donasi & Info', 'manage_options', 'edukarsa_about', 'edukarsa_about_page_html' );
}
add_action( 'admin_menu', 'edukarsa_admin_menu' );
@@ -38,6 +39,7 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-keunggulan', 'parent' => 'edukarsa-topbar-menu', 'title' => '⭐ Keunggulan', 'href' => admin_url( 'edit.php?post_type=keunggulan' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-milestone', 'parent' => 'edukarsa-topbar-menu', 'title' => '🏆 Milestone', 'href' => admin_url( 'edit.php?post_type=milestone' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-faq', 'parent' => 'edukarsa-topbar-menu', 'title' => '❓ Tanya Jawab (FAQ)', 'href' => admin_url( 'edit.php?post_type=faq' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-about', 'parent' => 'edukarsa-topbar-menu', 'title' => '☕ Donasi & Info', 'href' => admin_url( 'admin.php?page=edukarsa_about' ) ) );
}
add_action( 'admin_bar_menu', 'edukarsa_admin_bar_shortcut', 80 );
@@ -61,7 +63,7 @@ function edukarsa_register_settings() {
'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
// Pengaturan Sidebar (Termasuk Box HTML Kustom)
// Pengaturan Sidebar Native
'edukarsa_sidebar_tampil_search',
'edukarsa_sidebar_tampil_cta',
'edukarsa_sidebar_cta_badge',
@@ -89,6 +91,7 @@ function edukarsa_register_settings() {
}
add_action( 'admin_init', 'edukarsa_register_settings' );
// HALAMAN PENGATURAN UTAMA DENGAN TRANSISI ACCORDION HALUS
function edukarsa_settings_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return;
$font_current = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
@@ -121,9 +124,7 @@ function edukarsa_settings_page_html() {
.collapse-icon { width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; transition: transform 0.25s ease, background 0.2s ease; color: #334155; }
.edukarsa-card.is-collapsed .collapse-icon { transform: rotate(-90deg); background: #f1f5f9; }
.edukarsa-card-body { padding: 22px; border-top: 1px solid #f1f5f9; }
.edukarsa-card.is-collapsed .edukarsa-card-body { display: none; }
/* ACTION TOOLBAR ATAS */
.edukarsa-accordion-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 15px; }
.btn-acc-action { background: #f1f5f9; border: 1px solid #cbd5e1; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; color: #475569; }
.btn-acc-action:hover { background: #e2e8f0; color: #0b4a8e; }
@@ -187,15 +188,13 @@ function edukarsa_settings_page_html() {
<div class="edukarsa-admin-layout">
<!-- KOLOM UTAMA (7 PANEL COLLAPSIBLE ACCORDION) -->
<div class="edukarsa-admin-main">
<div class="edukarsa-accordion-actions">
<button type="button" class="btn-acc-action" id="acc-expand-all">➕ Buka Semua</button>
<button type="button" class="btn-acc-action" id="acc-collapse-all">➖ Tutup Semua</button>
</div>
<!-- 1. Header, Logo, Slider, Bahasa & Aksesibilitas -->
<!-- 1. Header, Logo, Slider & Bahasa -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>🏛️ 1. Header, Logo, Slider & Bahasa</h2>
@@ -466,7 +465,7 @@ function edukarsa_settings_page_html() {
</div>
</div>
<!-- 6. Kustomisasi Sidebar (Termasuk Box HTML Kustom) -->
<!-- 6. Kustomisasi Sidebar -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>📑 6. Pengaturan Sidebar (Artikel & Halaman)</h2>
@@ -507,7 +506,6 @@ function edukarsa_settings_page_html() {
</div>
</div>
<!-- OPSI BARU: BOX HTML KUSTOM SIDEBAR -->
<div class="switch-row" style="background: #fdf4ff; border-color: #f5d0fe;">
<div class="switch-label-wrap">
<div class="switch-label" style="color: #86198f;">
@@ -696,29 +694,33 @@ function edukarsa_settings_page_html() {
<script>
jQuery(document).ready(function($){
// 1. COLLAPSIBLE ACCORDION PANEL LOGIC
// Tutup seksi 2 sampai 7 secara default agar dasbor sangat ringkas
// 1. TRANSISI HALUS ACCORDION BERBASIS JQUERY SLIDETOGGLE
$('.edukarsa-admin-main .edukarsa-card').each(function(index){
if (index > 0) {
$(this).addClass('is-collapsed');
$(this).find('.edukarsa-card-body').hide();
}
});
// Event klik toggle header
$('.edukarsa-admin-main .edukarsa-card-header').on('click', function(e){
if ($(e.target).closest('.edukarsa-switch, input, a, button').length) {
return;
}
var $card = $(this).closest('.edukarsa-card');
var $body = $card.find('.edukarsa-card-body');
$card.toggleClass('is-collapsed');
$body.stop().slideToggle(250);
});
$('#acc-expand-all').click(function(){
$('.edukarsa-admin-main .edukarsa-card').removeClass('is-collapsed');
$('.edukarsa-admin-main .edukarsa-card-body').stop().slideDown(250);
});
$('#acc-collapse-all').click(function(){
$('.edukarsa-admin-main .edukarsa-card').addClass('is-collapsed');
$('.edukarsa-admin-main .edukarsa-card-body').stop().slideUp(250);
});
// 2. TOGGLE ROW FORM INPUT
@@ -745,7 +747,7 @@ function edukarsa_settings_page_html() {
$('#secondary_picker').on('input change', function(){ $('#secondary_code').text($(this).val()); });
$('#heading_picker').on('input change', function(){ $('#heading_code').text($(this).val()); });
// 4. NATIVE MEDIA UPLOADER
// 4. MEDIA UPLOADER
var mediaUploader;
$('.btn-upload').click(function(e) {
e.preventDefault();
@@ -763,3 +765,111 @@ function edukarsa_settings_page_html() {
</script>
<?php
}
// HALAMAN KHUSUS: TENTANG APLIKASI, DEVELOPER & PERSUASIVE DONATION CTA
function edukarsa_about_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return;
?>
<div class="wrap edukarsa-admin-wrap" style="max-width: 1000px; margin-top: 20px;">
<!-- HEADER UTAMA APLIKASI -->
<div style="background: linear-gradient(135deg, #0f2b5c 0%, #1a73e8 100%); color: #ffffff; padding: 45px 40px; border-radius: 16px; box-shadow: 0 15px 35px rgba(15,43,92,0.18); margin-bottom: 30px; position: relative; overflow: hidden;">
<div style="position: absolute; top: -20px; right: -20px; font-size: 140px; opacity: 0.08; font-weight: 900; user-select: none;">🎓</div>
<span style="display: inline-block; background: rgba(255,255,255,0.2); padding: 4px 14px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 15px;">WordPress Theme Khusus Sekolah & Kampus</span>
<h1 style="color: #ffffff; font-size: 32px; font-weight: 800; margin: 0 0 12px; line-height: 1.2;">EduKarsa Theme</h1>
<p style="font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.7; max-width: 680px; margin: 0 0 25px;">
Tema WordPress profesional 100% Native dan Zero Plugin yang dirancang secara khusus untuk memberikan performa ultra cepat, keamanan tingkat tinggi, ramah disabilitas (WCAG), dan siap pakai untuk kebutuhan akreditasi institusi pendidikan.
</p>
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
<a href="https://apps.masbudi.my.id/edukarsa" target="_blank" rel="noopener" class="button" style="background: #ffffff; color: #0f2b5c; font-weight: 800; padding: 6px 20px; height: auto; border-radius: 50px; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
🌐 https://apps.masbudi.my.id/ &raquo;
</a>
<a href="https://donate.masbudi.my.id/edukarsa" target="_blank" rel="noopener" class="button" style="background: #f59e0b; color: #ffffff; font-weight: 800; padding: 6px 20px; height: auto; border-radius: 50px; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
☕ https://donate.masbudi.my.id &raquo;
</a>
</div>
</div>
<div style="display: grid; grid-template-columns: 1.4fr 1fr; gap: 25px; align-items: start;">
<!-- KOLOM KIRI: KARTU DONASI & PERSUASI PENGEMBANGAN -->
<div>
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); margin-bottom: 25px;">
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
<span style="font-size: 32px;">☕</span>
<div>
<h3 style="margin: 0; font-size: 18px; color: #0f172a; font-weight: 800;">Dukung Keberlanjutan Tema EduKarsa</h3>
<span style="font-size: 12px; color: #64748b;">Kontribusi Anda menjaga tema ini tetap gratis, aman, dan terus berkembang.</span>
</div>
</div>
<p style="font-size: 14px; color: #334155; line-height: 1.75; margin-bottom: 18px;">
Tema <strong>EduKarsa</strong> dibangun dengan komitmen <em>Zero Plugin</em> untuk memastikan situs institusi pendidikan Anda terbebas dari lisensi berbayar bulanan, terbebas dari celah keamanan plugin pihak ketiga, dan memiliki kecepatan akses maksimal bagi siswa maupun wali murid.
</p>
<div style="background: #fef3c7; border-left: 4px solid #f59e0b; padding: 14px 16px; border-radius: 4px; margin-bottom: 22px;">
<p style="margin: 0; font-size: 13px; color: #92400e; line-height: 1.6;">
<strong>Mari Berkolaborasi:</strong> Jika tema ini membantu sekolah atau kampus Anda menghemat biaya pengembangan ratusan ribu hingga jutaan rupiah, Anda dapat menyisihkan donasi sukarela untuk mendukung riset, pembaruan fitur, dan pemeliharaan jangka panjang.
</p>
</div>
<a href="https://donate.masbudi.my.id/edukarsa" target="_blank" rel="noopener" style="display: block; text-align: center; background: linear-gradient(135deg, #f59e0b, #d97706); color: #ffffff; text-decoration: none; padding: 14px 25px; border-radius: 50px; font-weight: 800; font-size: 15px; box-shadow: 0 8px 20px rgba(217,119,6,0.3); transition: all 0.2s ease;">
💖 Salurkan Donasi Melalui https://donate.masbudi.my.id &raquo;
</a>
</div>
<!-- KARTU SPESIFIKASI ARSITEKTUR -->
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.04);">
<h4 style="margin: 0 0 15px; font-size: 15px; color: #0f172a; font-weight: 800;">⚡ Keunggulan Arsitektur EduKarsa</h4>
<ul style="margin: 0; padding-left: 18px; font-size: 13px; color: #475569; line-height: 1.9;">
<li><strong>100% Native WordPress</strong>: Mengandalkan Settings API dan Native CPT tanpa ketergantungan plugin pihak ketiga.</li>
<li><strong>WCAG 2.1 Accessibility</strong>: Dilengkapi Web Speech Synthesizer (Audio Baca), Kontras Tinggi, dan Monokrom untuk disabilitas.</li>
<li><strong>Multilingual Ready</strong>: Dukungan translasi instan otomatis (ID, EN, AR, ZH, JA) tanpa membebani operator sekolah.</li>
<li><strong>Structured Schema JSON-LD</strong>: Metadata otomatis untuk memaksimalkan peringkat Google Search dan Google News.</li>
<li><strong>Zero Cache Trapping</strong>: Menggunakan manajemen cache-busting dinamis untuk kemudahan deployment.</li>
</ul>
</div>
</div>
<!-- KOLOM KANAN: PROFIL DEVELOPER & KONTAK -->
<div>
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); margin-bottom: 25px;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="width: 75px; height: 75px; border-radius: 50%; background: #0f2b5c; color: #ffffff; font-size: 32px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 8px 20px rgba(15,43,92,0.2);">
MB
</div>
<h3 style="margin: 0 0 4px; font-size: 18px; font-weight: 800; color: #0f172a;">Mas Budi Kusuma</h3>
<span style="font-size: 12px; color: #1a73e8; font-weight: 700; background: #e0f2fe; padding: 2px 10px; border-radius: 12px;">Full-Stack & DevOps Engineer</span>
</div>
<div style="border-top: 1px solid #f1f5f9; padding-top: 15px; font-size: 13px; color: #334155; line-height: 1.8;">
<div style="margin-bottom: 10px;">
<span style="display: block; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase;">Portal Aplikasi</span>
<a href="https://apps.masbudi.my.id/edukarsa" target="_blank" rel="noopener" style="font-weight: 700; color: #0f2b5c; text-decoration: none;">https://apps.masbudi.my.id/</a>
</div>
<div style="margin-bottom: 10px;">
<span style="display: block; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase;">Portal Donasi</span>
<a href="https://donate.masbudi.my.id/edukarsa" target="_blank" rel="noopener" style="font-weight: 700; color: #d97706; text-decoration: none;">https://donate.masbudi.my.id</a>
</div>
<div style="margin-bottom: 15px;">
<span style="display: block; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase;">Email Developer</span>
<a href="mailto:[email protected]" style="font-weight: 700; color: #0f2b5c; text-decoration: none;">[email protected]</a>
</div>
</div>
<a href="mailto:[email protected]?subject=Konsultasi%20Tema%20EduKarsa" class="button" style="width: 100%; text-align: center; border-radius: 6px; padding: 6px 0; font-weight: 700; color: #0f2b5c; border-color: #cbd5e1;">
✉️ Kirim Pesan ke Developer
</a>
</div>
<div style="text-align: center; font-size: 12px; color: #94a3b8;">
<p style="margin: 0;">EduKarsa Theme &bull; Versi 1.1.4</p>
<p style="margin: 4px 0 0;">Dikelola dan dirawat oleh <strong>masbudi.my.id</strong></p>
</div>
</div>
</div>
</div>
<?php
}