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

feat(admin): integrasi tooltip panduan dan shortcut navigasi langsung ke menu CPT

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 23:17:18 +07:00
parent 9786cd515a
commit aeb594a0d4
1 changed files with 104 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inc/admin-menu.php
+104 -22
View File
@@ -159,15 +159,58 @@ function edukarsa_settings_page_html() {
<style> <style>
.edukarsa-admin-wrap { margin-top: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; } .edukarsa-admin-wrap { margin-top: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; }
.edukarsa-admin-layout { display: grid; grid-template-columns: 1fr 320px; gap: 25px; align-items: start; } .edukarsa-admin-layout { display: grid; grid-template-columns: 1fr 320px; gap: 25px; align-items: start; }
.edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; overflow: hidden; } .edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; overflow: visible; }
.edukarsa-card-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; } .edukarsa-card-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; border-radius: 10px 10px 0 0; }
.edukarsa-card-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; } .edukarsa-card-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; }
.edukarsa-card-body { padding: 24px; } .edukarsa-card-body { padding: 24px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; } .switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; }
.switch-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 15px; } .switch-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 15px; }
.switch-label { font-weight: 600; font-size: 13px; color: #334155; } .switch-label-wrap { display: flex; flex-direction: column; gap: 5px; }
.edukarsa-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; } .switch-label { font-weight: 700; font-size: 13px; color: #334155; display: inline-flex; align-items: center; gap: 6px; }
/* Shortcut Badge Link */
.cpt-shortcut-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #0b4a8e; text-decoration: none; background: #e0f2fe; padding: 2px 9px; border-radius: 12px; width: fit-content; transition: all 0.2s ease; border: 1px solid #bae6fd; }
.cpt-shortcut-link:hover { background: #0b4a8e; color: #ffffff !important; border-color: #0b4a8e; }
/* Tooltip Native CSS */
.tooltip-hint { position: relative; cursor: help; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #94a3b8; color: #fff; font-size: 10px; font-weight: 800; }
.tooltip-hint:hover { background: #0b4a8e; }
.tooltip-hint .tooltip-text {
visibility: hidden;
opacity: 0;
position: absolute;
bottom: 140%;
left: 50%;
transform: translateX(-50%);
background-color: #0f172a;
color: #ffffff;
text-align: left;
padding: 8px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
line-height: 1.45;
white-space: normal;
width: 220px;
z-index: 1000;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
}
.tooltip-hint .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #0f172a transparent transparent transparent;
}
.tooltip-hint:hover .tooltip-text { visibility: visible; opacity: 1; }
.edukarsa-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; flex-shrink: 0; }
.edukarsa-switch input { opacity: 0; width: 0; height: 0; } .edukarsa-switch input { opacity: 0; width: 0; height: 0; }
.slider-round { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .25s; border-radius: 22px; } .slider-round { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .25s; border-radius: 22px; }
.slider-round:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .25s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .slider-round:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .25s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
@@ -231,14 +274,26 @@ function edukarsa_settings_page_html() {
<div class="switch-row-inline" style="margin-top: 20px;"> <div class="switch-row-inline" style="margin-top: 20px;">
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">Tampilkan Slider Atas</span> <div class="switch-label-wrap">
<div class="switch-label">
<span>Tampilkan Slider Atas</span>
<span class="tooltip-hint">?<span class="tooltip-text">Gambar & URL link banner dikelola pada modul 🌟 Slider Banner.</span></span>
</div>
<a href="<?php echo admin_url('edit.php?post_type=slider'); ?>" class="cpt-shortcut-link">Kelola Slider ↗</a>
</div>
<label class="edukarsa-switch"> <label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?>> <input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?>>
<span class="slider-round"></span> <span class="slider-round"></span>
</label> </label>
</div> </div>
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">Tampilkan 3 Kotak Statistik</span> <div class="switch-label-wrap">
<div class="switch-label">
<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>
</div>
<span style="font-size: 11px; color: #64748b;">Form Pengaturan Bawah ↓</span>
</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)); ?>>
<span class="slider-round"></span> <span class="slider-round"></span>
@@ -317,34 +372,59 @@ function edukarsa_settings_page_html() {
</div> </div>
</div> </div>
<!-- 3. Program, Milestone & Keunggulan --> <!-- 3. Program, Milestone & Keunggulan (DENGAN TOOLTIP & SHORTCUT) -->
<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"> <div class="switch-row-inline">
<!-- Milestone Switch & Shortcut -->
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">Tampilkan 4 Milestone</span> <div class="switch-label-wrap">
<div class="switch-label">
<span>Tampilkan 4 Milestone</span>
<span class="tooltip-hint">?<span class="tooltip-text">Data angka prestasi & capaian diisi melalui menu 🏆 Milestone di sidebar admin.</span></span>
</div>
<a href="<?php echo admin_url('edit.php?post_type=milestone'); ?>" class="cpt-shortcut-link">Kelola Milestone ↗</a>
</div>
<label class="edukarsa-switch"> <label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?>> <input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?>>
<span class="slider-round"></span> <span class="slider-round"></span>
</label> </label>
</div> </div>
<!-- Program Switch & Shortcut -->
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">Tampilkan Program (3 Grid)</span> <div class="switch-label-wrap">
<div class="switch-label">
<span>Tampilkan Program (3 Grid)</span>
<span class="tooltip-hint">?<span class="tooltip-text">Daftar jurusan & program kurikulum dikelola melalui menu 📚 Program Kami di sidebar admin.</span></span>
</div>
<a href="<?php echo admin_url('edit.php?post_type=program'); ?>" class="cpt-shortcut-link">Kelola Program ↗</a>
</div>
<label class="edukarsa-switch"> <label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?>> <input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?>>
<span class="slider-round"></span> <span class="slider-round"></span>
</label> </label>
</div> </div>
<!-- Keunggulan Switch & Shortcut -->
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">Tampilkan Keunggulan (9 Grid)</span> <div class="switch-label-wrap">
<div class="switch-label">
<span>Tampilkan Keunggulan (9 Grid)</span>
<span class="tooltip-hint">?<span class="tooltip-text">9 butir keunggulan institusi dikelola melalui menu ⭐ Keunggulan di sidebar admin.</span></span>
</div>
<a href="<?php echo admin_url('edit.php?post_type=keunggulan'); ?>" class="cpt-shortcut-link">Kelola Keunggulan ↗</a>
</div>
<label class="edukarsa-switch"> <label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?>> <input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?>>
<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;"> <div class="form-grid-2" style="margin-top: 15px;">
@@ -429,14 +509,23 @@ function edukarsa_settings_page_html() {
<div class="edukarsa-card-body"> <div class="edukarsa-card-body">
<div class="switch-row-inline"> <div class="switch-row-inline">
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">Tampilkan CTA Banner</span> <div class="switch-label-wrap">
<span class="switch-label">Tampilkan CTA Banner</span>
<span style="font-size: 11px; color: #64748b;">Pengaturan Khusus PPDB</span>
</div>
<label class="edukarsa-switch"> <label class="edukarsa-switch">
<input type="checkbox" class="section-toggle" data-target="#cta-settings-box" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?>> <input type="checkbox" class="section-toggle" data-target="#cta-settings-box" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?>>
<span class="slider-round"></span> <span class="slider-round"></span>
</label> </label>
</div> </div>
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">Tampilkan Berita Kampus</span> <div class="switch-label-wrap">
<div class="switch-label">
<span>Tampilkan Berita Kampus</span>
<span class="tooltip-hint">?<span class="tooltip-text">Berita otomatis diambil dari menu 'Pos' bawaan WordPress.</span></span>
</div>
<a href="<?php echo admin_url('edit.php'); ?>" class="cpt-shortcut-link">Kelola Berita ↗</a>
</div>
<label class="edukarsa-switch"> <label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?>> <input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?>>
<span class="slider-round"></span> <span class="slider-round"></span>
@@ -478,14 +567,12 @@ function edukarsa_settings_page_html() {
</div> </div>
</div> </div>
<!-- 6. FOOTER LENGKAP & FLEKSIBEL (UPGRADED) --> <!-- 6. Footer & Kontak -->
<div class="edukarsa-card"> <div class="edukarsa-card">
<div class="edukarsa-card-header"> <div class="edukarsa-card-header">
<h2>📞 6. Pengaturan Footer & Media Sosial Lengkap</h2> <h2>📞 6. Pengaturan Footer & Media Sosial Lengkap</h2>
</div> </div>
<div class="edukarsa-card-body"> <div class="edukarsa-card-body">
<!-- Identitas Footer -->
<div class="form-grid-2"> <div class="form-grid-2">
<div class="form-field-group"> <div class="form-field-group">
<label>Logo Footer (Opsional, kosongkan jika pakai logo header)</label> <label>Logo Footer (Opsional, kosongkan jika pakai logo header)</label>
@@ -502,7 +589,7 @@ function edukarsa_settings_page_html() {
<div class="form-field-group"> <div class="form-field-group">
<label>Deskripsi Singkat Kampus / Visi Ringkas (Kolom 1)</label> <label>Deskripsi Singkat Kampus / Visi Ringkas (Kolom 1)</label>
<textarea name="edukarsa_footer_desc" rows="3" placeholder="Deskripsi singkat mengenai institusi..."><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak lulusan berkarakter, inovatif, dan berdaya saing global.')); ?></textarea> <textarea name="edukarsa_footer_desc" rows="3" placeholder="Deskripsi singkat mengenai institusi..."><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak generasi berkarakter cerdas, kompetitif, dan berintegritas.')); ?></textarea>
</div> </div>
<div class="form-field-group"> <div class="form-field-group">
@@ -528,7 +615,6 @@ function edukarsa_settings_page_html() {
<h4 style="margin: 25px 0 12px; font-size:14px; color:#0b4a8e; border-bottom:1px solid #e2e8f0; padding-bottom:8px;">Jaringan Media Sosial Resmi</h4> <h4 style="margin: 25px 0 12px; font-size:14px; color:#0b4a8e; border-bottom:1px solid #e2e8f0; padding-bottom:8px;">Jaringan Media Sosial Resmi</h4>
<!-- FB -->
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">Facebook</span> <span class="switch-label">Facebook</span>
<div style="display:flex; align-items:center; gap:12px; width:70%;"> <div style="display:flex; align-items:center; gap:12px; width:70%;">
@@ -540,7 +626,6 @@ function edukarsa_settings_page_html() {
</div> </div>
</div> </div>
<!-- IG -->
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">Instagram</span> <span class="switch-label">Instagram</span>
<div style="display:flex; align-items:center; gap:12px; width:70%;"> <div style="display:flex; align-items:center; gap:12px; width:70%;">
@@ -552,7 +637,6 @@ function edukarsa_settings_page_html() {
</div> </div>
</div> </div>
<!-- YT -->
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">YouTube</span> <span class="switch-label">YouTube</span>
<div style="display:flex; align-items:center; gap:12px; width:70%;"> <div style="display:flex; align-items:center; gap:12px; width:70%;">
@@ -564,7 +648,6 @@ function edukarsa_settings_page_html() {
</div> </div>
</div> </div>
<!-- TikTok -->
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">TikTok</span> <span class="switch-label">TikTok</span>
<div style="display:flex; align-items:center; gap:12px; width:70%;"> <div style="display:flex; align-items:center; gap:12px; width:70%;">
@@ -576,7 +659,6 @@ function edukarsa_settings_page_html() {
</div> </div>
</div> </div>
<!-- X / Twitter -->
<div class="switch-row"> <div class="switch-row">
<span class="switch-label">X (Twitter)</span> <span class="switch-label">X (Twitter)</span>
<div style="display:flex; align-items:center; gap:12px; width:70%;"> <div style="display:flex; align-items:center; gap:12px; width:70%;">