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

feat(footer): arsitektur 4-kolom institusi, native svg social icons, dan opsi jam layanan

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 22:56:17 +07:00
parent 8bcb046113
commit 77819e7d1f
3 changed files with 324 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inc/admin-menu.php
+86 -58
View File
@@ -111,10 +111,10 @@ function edukarsa_register_settings() {
// Dynamic Appearance
'edukarsa_font_choice', 'edukarsa_primary_color', 'edukarsa_secondary_color', 'edukarsa_heading_color',
// Toggle
// Toggle Seksi Beranda
'edukarsa_tampil_slider', 'edukarsa_tampil_stats', 'edukarsa_tampil_about', 'edukarsa_tampil_milestone', 'edukarsa_tampil_program', 'edukarsa_tampil_video', 'edukarsa_tampil_keunggulan', 'edukarsa_tampil_cta', 'edukarsa_tampil_news',
// Logo
// Header Logo
'edukarsa_header_logo',
// Custom Teks
@@ -129,18 +129,26 @@ function edukarsa_register_settings() {
'edukarsa_foto_kepsek', 'edukarsa_nama_kepsek', 'edukarsa_subtitle_about', 'edukarsa_teks_sambutan', 'edukarsa_link_about',
'edukarsa_video1_thumb', 'edukarsa_video1_url', 'edukarsa_video2_thumb', 'edukarsa_video2_url',
// Mid Section Parallax
// Parallax Area
'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
// CTA & Footer
// CTA
'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_footer_copyright', 'edukarsa_custom_css'
// Footer Lengkap
'edukarsa_footer_logo', 'edukarsa_footer_desc', 'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_footer_jam',
'edukarsa_tampil_fb', 'edukarsa_footer_fb',
'edukarsa_tampil_ig', 'edukarsa_footer_ig',
'edukarsa_tampil_yt', 'edukarsa_footer_yt',
'edukarsa_tampil_tiktok', 'edukarsa_footer_tiktok',
'edukarsa_tampil_x', 'edukarsa_footer_x',
'edukarsa_footer_copyright', 'edukarsa_custom_css'
);
foreach ( $options as $opt ) { register_setting( 'edukarsa_settings_group', $opt ); }
}
add_action( 'admin_init', 'edukarsa_register_settings' );
// 4. HALAMAN PENGATURAN DENGAN DESAIN MODERN 2-KOLOM
// 4. HALAMAN PENGATURAN DENGAN DESAIN 2-KOLOM
function edukarsa_settings_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return;
$font_current = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
@@ -151,14 +159,11 @@ function edukarsa_settings_page_html() {
<style>
.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; }
/* Kartu & Panel */
.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-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; }
.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; }
/* Toggle Switch Ringkas Modern */
.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-label { font-weight: 600; font-size: 13px; color: #334155; }
@@ -169,7 +174,6 @@ function edukarsa_settings_page_html() {
input:checked + .slider-round { background-color: #0b4a8e; }
input:checked + .slider-round:before { transform: translateX(20px); }
/* Form Controls */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.form-field-group { margin-bottom: 15px; }
.form-field-group label { display: block; font-weight: 600; font-size: 13px; color: #475569; margin-bottom: 6px; }
@@ -177,12 +181,10 @@ function edukarsa_settings_page_html() {
.input-with-button { display: flex; gap: 8px; }
.input-with-button input { flex-grow: 1; }
/* Mini Grid Statistik */
.stats-config-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
.stat-config-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; }
.stat-config-box h4 { margin: 0 0 12px; font-size: 13px; color: #0b4a8e; font-weight: 700; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; }
/* Presets Warna */
.preset-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.preset-pill { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; transition: all .2s; }
.preset-pill:hover { border-color: #0b4a8e; transform: translateX(3px); }
@@ -190,7 +192,6 @@ function edukarsa_settings_page_html() {
.swatch-item { width: 18px; height: 18px; }
.preset-name { font-size: 12px; font-weight: 600; color: #334155; }
/* Sidebar Kanan Sticky */
.edukarsa-admin-sidebar { position: sticky; top: 45px; }
.color-picker-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.color-picker-row input[type="color"] { border: none; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; background: transparent; }
@@ -211,7 +212,7 @@ function edukarsa_settings_page_html() {
<div class="edukarsa-admin-layout">
<!-- KOLOM KIRI (PENGATURAN UTAMA) -->
<!-- KOLOM KIRI (FORM UTAMA) -->
<div class="edukarsa-admin-main">
<!-- 1. Header, Logo & Slider -->
@@ -245,7 +246,6 @@ function edukarsa_settings_page_html() {
</div>
</div>
<!-- 3 Mini Card Statistik yang Rapi -->
<div id="stats-settings-box">
<div class="stats-config-grid">
<?php for($i=1; $i<=3; $i++) : ?>
@@ -398,7 +398,7 @@ function edukarsa_settings_page_html() {
</div>
</div>
<div class="form-field-group" style="margin-bottom:0;">
<label>URL Video 1 (YouTube/Embed)</label>
<label>URL Video 1</label>
<input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>" placeholder="https://youtube.com/watch?v=...">
</div>
</div>
@@ -413,7 +413,7 @@ function edukarsa_settings_page_html() {
</div>
</div>
<div class="form-field-group" style="margin-bottom:0;">
<label>URL Video 2 (YouTube/Embed)</label>
<label>URL Video 2</label>
<input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>" placeholder="https://youtube.com/watch?v=...">
</div>
</div>
@@ -478,32 +478,57 @@ function edukarsa_settings_page_html() {
</div>
</div>
<!-- 6. Footer & Kontak -->
<!-- 6. FOOTER LENGKAP & FLEKSIBEL (UPGRADED) -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>📞 6. Informasi Kontak Footer & Media Sosial</h2>
<h2>📞 6. Pengaturan Footer & Media Sosial Lengkap</h2>
</div>
<div class="edukarsa-card-body">
<!-- Identitas Footer -->
<div class="form-grid-2">
<div class="form-field-group">
<label>Logo Footer (Opsional, kosongkan jika pakai logo header)</label>
<div class="input-with-button">
<input type="text" id="edukarsa_footer_logo" name="edukarsa_footer_logo" value="<?php echo esc_url(get_option('edukarsa_footer_logo')); ?>" placeholder="https://...">
<button type="button" class="button btn-upload" data-target="#edukarsa_footer_logo">Pilih</button>
</div>
</div>
<div class="form-field-group">
<label>Jam Operasional / Layanan</label>
<input type="text" name="edukarsa_footer_jam" value="<?php echo esc_attr(get_option('edukarsa_footer_jam', 'Senin – Jumat: 08.00 – 16.00 WIB')); ?>" placeholder="cth: Senin – Jumat: 08.00 – 16.00 WIB">
</div>
</div>
<div class="form-field-group">
<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>
</div>
<div class="form-field-group">
<label>Alamat Lengkap Institusi</label>
<textarea name="edukarsa_footer_alamat" rows="2"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea>
</div>
<div class="form-grid-2">
<div class="form-field-group">
<label>Nomor Telepon / WhatsApp</label>
<input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>">
<label>Nomor Telepon / WhatsApp Layanan</label>
<input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>" placeholder="+62 ...">
</div>
<div class="form-field-group">
<label>Alamat Email Resmi</label>
<input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>">
<input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>" placeholder="[email protected]">
</div>
</div>
<div class="form-field-group">
<label>Teks Hak Cipta (Copyright)</label>
<input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright')); ?>">
<label>Teks Hak Cipta (Copyright Bar)</label>
<input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright', 'EduKarsa University. All Rights Reserved.')); ?>">
</div>
<h4 style="margin: 20px 0 10px; font-size:13px; color:#0b4a8e;">Akun Media Sosial</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">
<span class="switch-label">Facebook</span>
<div style="display:flex; align-items:center; gap:12px; width:70%;">
@@ -514,6 +539,8 @@ function edukarsa_settings_page_html() {
</label>
</div>
</div>
<!-- IG -->
<div class="switch-row">
<span class="switch-label">Instagram</span>
<div style="display:flex; align-items:center; gap:12px; width:70%;">
@@ -524,6 +551,8 @@ function edukarsa_settings_page_html() {
</label>
</div>
</div>
<!-- YT -->
<div class="switch-row">
<span class="switch-label">YouTube</span>
<div style="display:flex; align-items:center; gap:12px; width:70%;">
@@ -534,15 +563,39 @@ function edukarsa_settings_page_html() {
</label>
</div>
</div>
<!-- TikTok -->
<div class="switch-row">
<span class="switch-label">TikTok</span>
<div style="display:flex; align-items:center; gap:12px; width:70%;">
<input type="text" name="edukarsa_footer_tiktok" value="<?php echo esc_attr(get_option('edukarsa_footer_tiktok')); ?>" placeholder="https://tiktok.com/@..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
<label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_tampil_tiktok" value="1" <?php checked(1, get_option('edukarsa_tampil_tiktok', 0)); ?>>
<span class="slider-round"></span>
</label>
</div>
</div>
<!-- X / Twitter -->
<div class="switch-row">
<span class="switch-label">X (Twitter)</span>
<div style="display:flex; align-items:center; gap:12px; width:70%;">
<input type="text" name="edukarsa_footer_x" value="<?php echo esc_attr(get_option('edukarsa_footer_x')); ?>" placeholder="https://x.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
<label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_tampil_x" value="1" <?php checked(1, get_option('edukarsa_tampil_x', 0)); ?>>
<span class="slider-round"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- KOLOM KANAN (SIDEBAR COMMAND PANEL) -->
<!-- KOLOM KANAN (SIDEBAR ACTION PANEL) -->
<div class="edukarsa-admin-sidebar">
<!-- Box Aksi Simpan -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>💾 Publikasi</h2>
@@ -553,7 +606,6 @@ function edukarsa_settings_page_html() {
</div>
</div>
<!-- Box Tipografi -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>🔤 Tipografi Font</h2>
@@ -572,56 +624,36 @@ function edukarsa_settings_page_html() {
</div>
</div>
<!-- Box Palet Warna & Presets -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>🎨 Skema Warna</h2>
</div>
<div class="edukarsa-card-body">
<label style="font-weight:700; font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:10px;">Pilih Preset Instan</label>
<div class="preset-grid">
<div class="preset-pill" data-p="#0b4a8e" data-s="#1a73e8" data-h="#0f172a">
<div class="swatch-group">
<span class="swatch-item" style="background:#0b4a8e;"></span>
<span class="swatch-item" style="background:#1a73e8;"></span>
</div>
<div class="swatch-group"><span class="swatch-item" style="background:#0b4a8e;"></span><span class="swatch-item" style="background:#1a73e8;"></span></div>
<span class="preset-name">Classic Navy (Default)</span>
</div>
<div class="preset-pill" data-p="#065f46" data-s="#10b981" data-h="#064e3b">
<div class="swatch-group">
<span class="swatch-item" style="background:#065f46;"></span>
<span class="swatch-item" style="background:#10b981;"></span>
</div>
<div class="swatch-group"><span class="swatch-item" style="background:#065f46;"></span><span class="swatch-item" style="background:#10b981;"></span></div>
<span class="preset-name">Islamic Emerald Green</span>
</div>
<div class="preset-pill" data-p="#881337" data-s="#e11d48" data-h="#4c0519">
<div class="swatch-group">
<span class="swatch-item" style="background:#881337;"></span>
<span class="swatch-item" style="background:#e11d48;"></span>
</div>
<div class="swatch-group"><span class="swatch-item" style="background:#881337;"></span><span class="swatch-item" style="background:#e11d48;"></span></div>
<span class="preset-name">Prestige Maroon</span>
</div>
<div class="preset-pill" data-p="#0f766e" data-s="#06b6d4" data-h="#134e4a">
<div class="swatch-group">
<span class="swatch-item" style="background:#0f766e;"></span>
<span class="swatch-item" style="background:#06b6d4;"></span>
</div>
<div class="swatch-group"><span class="swatch-item" style="background:#0f766e;"></span><span class="swatch-item" style="background:#06b6d4;"></span></div>
<span class="preset-name">Techno Teal</span>
</div>
<div class="preset-pill" data-p="#581c87" data-s="#8b5cf6" data-h="#3b0764">
<div class="swatch-group">
<span class="swatch-item" style="background:#581c87;"></span>
<span class="swatch-item" style="background:#8b5cf6;"></span>
</div>
<div class="swatch-group"><span class="swatch-item" style="background:#581c87;"></span><span class="swatch-item" style="background:#8b5cf6;"></span></div>
<span class="preset-name">Royal Violet</span>
</div>
<div class="preset-pill" data-p="#b45309" data-s="#f59e0b" data-h="#78350f">
<div class="swatch-group">
<span class="swatch-item" style="background:#b45309;"></span>
<span class="swatch-item" style="background:#f59e0b;"></span>
</div>
<div class="swatch-group"><span class="swatch-item" style="background:#b45309;"></span><span class="swatch-item" style="background:#f59e0b;"></span></div>
<span class="preset-name">Autumn Gold</span>
</div>
</div>
@@ -663,7 +695,6 @@ function edukarsa_settings_page_html() {
<script>
jQuery(document).ready(function($){
// 1. Logika Toggle Seksi Dinamis
function syncToggles() {
$('.section-toggle').each(function(){
var target = $(this).data('target');
@@ -677,7 +708,6 @@ function edukarsa_settings_page_html() {
$('.section-toggle').change(syncToggles);
syncToggles();
// 2. Klik Preset Palet Warna
$('.preset-pill').click(function(){
var p = $(this).data('p');
var s = $(this).data('s');
@@ -696,12 +726,10 @@ function edukarsa_settings_page_html() {
$(this).css('border-color', '#0b4a8e');
});
// 3. Listener Manual Picker
$('#primary_picker').on('input change', function(){ $('#primary_code').text($(this).val()); });
$('#secondary_picker').on('input change', function(){ $('#secondary_code').text($(this).val()); });
$('#heading_picker').on('input change', function(){ $('#heading_code').text($(this).val()); });
// 4. Native WP Media Uploader
var mediaUploader;
$('.btn-upload').click(function(e) {
e.preventDefault();