diff --git a/README.md b/README.md index 5f17784..dd887df 100644 --- a/README.md +++ b/README.md @@ -1,106 +1,117 @@ # EduKarsa — Tema WordPress Native Sekolah & Perguruan Tinggi -EduKarsa adalah tema WordPress profesional yang dirancang khusus untuk portal resmi institusi pendidikan, sekolah, madrasah, pesantren, maupun perguruan tinggi. Dibangun dengan mematuhi prinsip 100% Native & Zero Plugin, tema ini menjamin performa akses ultra cepat, efisiensi beban server, keamanan tingkat tinggi, serta bebas dari lisensi plugin pihak ketiga yang berbayar. +EduKarsa adalah tema WordPress institusional yang dibangun dengan arsitektur **100% Native & Zero Plugin**. Didesain khusus untuk portal sekolah, madrasah, pesantren, dan perguruan tinggi dengan mengutamakan performa, keamanan ketat, serta aksesibilitas ramah disabilitas. -- Demo Langsung: https://edukarsa.masbudi.my.id -- Repositori Resmi: https://git.masbudi.my.id -- Portal Aplikasi: https://apps.masbudi.my.id/ -- Dukungan & Donasi: https://donate.masbudi.my.id -- Pengembang: Mas Budi Kusuma (masbudikusuma@gmail.com) +- **Demo Situs**: https://edukarsa.masbudi.my.id +- **Portal Aplikasi**: https://apps.masbudi.my.id/edukarsa +- **Dukungan & Donasi**: https://donate.masbudi.my.id/edukarsa +- **Pengembang**: Mas Budi Kusuma (masbudikusuma@gmail.com — https://masbudi.my.id) --- -## Keunggulan Utama +## Pilar Arsitektur -- Zero Plugin Dependency: Berjalan penuh hanya dengan inti WordPress native. Seluruh fitur (slider banner, program, milestone, keunggulan, FAQ, dan sidebar) dikelola tanpa ACF, Elementor, atau plugin pembangun halaman lainnya. -- Keamanan Berlapis (Hardened Security): - - Proteksi eksekusi langsung berkas PHP (defined('ABSPATH') || exit;). - - Injeksi header keamanan HTTP native (X-Content-Type-Options, X-Frame-Options, Referrer-Policy). - - Penyamaran sidik jari versi WordPress dari tag meta dan pembersihan query string aset. - - Proteksi pemindaian nama pengguna (anti-author enumeration ?author=N). - - Pembatasan endpoint REST API /wp/v2/users untuk pengunjung tanpa login. - - Sanitasi ketat di seluruh basis Settings API (sanitize_hex_color, esc_url_raw, wp_kses_post, dll.). -- Aksesibilitas Disabilitas (WCAG 2.1): Dilengkapi toolbar aksesibilitas melayang dengan pembaca suara audio (Web Speech Synthesizer bawaan browser), penyesuaian ukuran huruf, kontras tinggi, mode monokrom, dan penegas garis tautan. -- Fitur Multilingual Dinamis: Dukungan translasi instan otomatis (ID, EN, AR, ZH, JA) pada frontend tanpa merusak database, serta panel admin bilingual yang otomatis mendeteksi bahasa sistem. -- SEO & Rich Snippets Otomatis: Injeksi OpenGraph, Twitter Cards, Canonical URL, dan skema data terstruktur JSON-LD (NewsArticle dan EducationalOrganization) tanpa plugin SEO. -- Dashboard Akordeon Ergonomis: Pengaturan tema modular 7 seksi dengan animasi luncur (smooth slide) dan panel aksi simpan yang selalu melayang (sticky). +1. **Zero Plugin Dependency**: Berjalan optimal tanpa ketergantungan plugin pihak ketiga (tanpa ACF, Elementor, atau plugin galeri). +2. **Modular Architecture (`inc/`)**: Berkas `functions.php` berfungsi murni sebagai pemanggil (*router*). Seluruh fungsionalitas diisolasi ke dalam sub-berkas direktori `inc/`. +3. **Hardened Security Native**: + - Pengecekan eksekusi langsung via `defined('ABSPATH') || exit;`. + - Injeksi HTTP *security headers* native (`X-Frame-Options`, `X-Content-Type-Options`, `Referrer-Policy`). + - Penonaktifan *author enumeration* (`?author=N`) dan proteksi rute REST API `/wp/v2/users` untuk pengguna anonim. + - Sanitasi data ketat di seluruh antarmuka Settings API. +4. **WCAG 2.1 Accessibility**: Widget aksesibilitas bawaan dengan Web Speech API (suara baca audio), pengubah ukuran teks, kontras tinggi, mode monokrom, dan sorotan tautan. +5. **Multilingual Terpadu**: Penerjemah instan sisi depan (ID, EN, AR, ZH, JA) serta panel admin dwibahasa (ID/EN). +6. **SEO & Structured Data**: Skema data terstruktur JSON-LD `EducationalOrganization` dan `NewsArticle` native untuk visibilitas mesin pencari. --- -## Fitur & Modul Tema +## Modul & Fitur Utama -### 1. Tata Letak Beranda (Front Page) -- Slider Banner: Dukungan tautan khusus per gambar menggunakan Custom Meta Box native. -- Kartu Statistik Melayang: Tiga kartu capaian/prestasi dengan ikon kustom yang menumpuk anggun di atas slider banner. -- Profil Pimpinan & Sambutan: Tata letak portrait rasio 3:4 dengan format tipografi yang rapi. -- Milestone & Rekam Jejak: Empat kartu capaian ringkas dengan perlindungan anti-rongga kosong otomatis. -- Program Unggulan: Tampilan grid 3 kolom yang terhubung ke template detail kurikulum khusus (single-program.php). -- Seksi Video & Parallax: Media player video ganda dengan latar belakang parallax dinamis yang warnanya menyatu dengan tema. -- 9 Butir Keunggulan: Grid fleksibel dengan penomoran otomatis dua digit. -- Floating CTA Banner: Kartu ajakan pendaftaran mahasiswa/siswa baru (PPDB/PMB) yang memecah visual secara kontras. -- Warta & Berita Terkini: Menampilkan artikel pos terbaru dalam format kartu modern. -- Akordeon FAQ Interaktif: Seksi tanya-jawab buka-tutup yang posisinya berada di bawah berita dan tertutup secara default. +### 1. Tata Letak Beranda (Native Section Builder) +- Pengaturan urutan seksi secara visual (*drag-and-drop*) berbasis jQuery UI Sortable bawaan WordPress. +- Loop rendering berbasis daftar putih (*whitelist array*) untuk mencegah celah LFI. +- Slider layar penuh terkunci di posisi teratas dengan dukungan custom link per slide. +- Kartu statistik melayang dengan penyesuaian margin dinamis. +- Sambutan pimpinan institusi dengan rasio potret 3:4. +- Rekam jejak capaian (Milestones) anti-celah kosong. +- Tiga program unggulan terhubung ke template detail `single-program.php`. +- Video profil ganda berlatar efek parallax. +- Sembilan poin keunggulan bernomor otomatis dua digit. +- Banner pendaftaran (CTA PPDB/PMB) kontras tinggi. +- Warta berita terbaru dan akordeon tanya-jawab (FAQ) interaktif. -### 2. Sidebar & Halaman Dalam -- 100% Pengaturan Sidebar Native: Komponen pencarian cepat, mini CTA pendaftaran, warta terkini, daftar kategori, banner promosi poster, serta Box HTML kustom (untuk Google Maps atau teks bebas) diatur langsung dari menu EduKarsa tanpa menyentuh widget WordPress. -- Paginasi Ganda: Navigasi multi-halaman dalam satu artikel (intra-post) dan kartu tautan navigasi artikel Sebelumnya / Selanjutnya (inter-post). -- Bilah Berbagi Cepat: Tombol bagikan artikel native ke WhatsApp, Facebook, X, serta tombol salin tautan. -- Breadcrumbs Terpadu: Navigasi penunjuk posisi halaman otomatis pada artikel pos dan laman statis. +### 2. Galeri Fasilitas & Lightbox (`page-galeri.php`) +- Custom Post Type `galeri` terintegrasi dengan taksonomi `kategori_galeri`. +- Tombol penyaring kategori beranimasi halus via JavaScript murni. +- Lightbox popup native dengan kontrol zoom, navigasi geser, deskripsi foto, dan dukungan tombol keyboard (Esc, Panah Kiri/Kanan). -### 3. Footer & Kontak -- Arsitektur 4 Kolom Institusi: Menampung profil kampus, kontak resmi, navigasi tautan penting, dan jam layanan kantor multi-baris. -- Ikon Sosial Media SVG: Tombol interaktif tajam tanpa file font eksternal untuk Facebook, Instagram, YouTube, TikTok, dan X. -- Floating WhatsApp Hotline: Tombol konsultasi melayang dengan label dan draf pesan awal yang dapat disesuaikan. -- Tombol Kembali ke Atas: Tombol melayang Back-to-Top otomatis dengan animasi gulir halus. +### 3. Pop-up Flyer Promosi (`inc/popup.php`) +- Modal dialog promosi PMB/pengumuman penting dengan pengatur waktu tunda (*delay*). +- Mekanisme penyimpanan sesi (`sessionStorage`) agar tidak berulang kali memblokir layar pengguna. +- Opsi pembatasan hanya di beranda serta parameter pratinjau `?preview_popup=1`. + +### 4. Navigasi, Sidebar, & Footer +- Dropdown menu bertingkat bebas tanda butir (*bullet*). +- Sidebar dinamis: form pencarian, mini CTA, daftar berita terkini, arsip kategori, poster gambar, dan kotak HTML kustom. +- Navigasi paginasi ganda (antar-halaman dan intra-artikel) serta tombol berbagi media sosial native. +- Footer 4 kolom: profil institusi, jam layanan kantor multi-baris, kontak resmi, lencana akreditasi, tombol WhatsApp melayang dinamis, dan atribusi pengembang. --- -## Struktur Berkas Modular +## Rekomendasi Dimensi Aset -edukarsa/ -├── 404.php # Halaman penanganan galat 404 -├── footer.php # Footer institusi 4 kolom, WA float, & a11y toolbar -├── front-page.php # Tata letak modular beranda -├── functions.php # Loader utama tema (Router) -├── header.php # Navigasi utama, hamburger mobile, & language switcher -├── inc/ -│ ├── admin-menu.php # Settings API, dashboard akordeon, & shortcut toolbar -│ ├── cpt-slider.php # Registrasi CPT (Slider, Program, Milestone, Keunggulan, FAQ) -│ ├── i18n.php # Logika bilingual dan kamus antarmuka admin -│ ├── security.php # Hardening header, proteksi REST API, & anti-enumeration -│ ├── seo.php # Meta tag media sosial & JSON-LD Structured Data -│ └── setup.php # Theme support, pendaftaran menu, & dynamic inline CSS -├── index.php # Template fallback dan arsip daftar warta -├── page.php # Template laman statis tunggal dengan sidebar -├── sidebar.php # Template sidebar native berbasis dasbor -├── single-program.php # Template detail khusus program studi & kurikulum -├── single.php # Template baca artikel penuh dengan breadcrumbs & paging -├── style.css # Berkas CSS utama (Plus Jakarta Sans & CSS custom variables) -└── README.md # Dokumentasi tema +| Aset Media | Rekomendasi Dimensi | Rasio Aspek | Format Ideal | +| :--- | :--- | :--- | :--- | +| **Logo Header** | Lebar proporsional, tinggi 110 px | Fleksibel | PNG Transparan / WebP | +| **Slider Banner** | 1920 × 1080 px atau 1920 × 800 px | 16:9 / Lebar | JPG / WebP (< 300 KB) | +| **Foto Pimpinan** | 600 × 800 px atau 800 × 1067 px | 3:4 (Potret) | JPG / WebP | +| **Latar Parallax** | 1920 × 1080 px | 16:9 Lanskap | JPG / WebP | +| **Flyer Pop-up** | Minimal 800 × 800 px | 1:1 / 4:5 | JPG / WebP (< 250 KB) | +| **Poster Sidebar** | Lebar 600 px (tinggi bebas) | Vertikal | JPG / WebP | +| **Galeri Kampus** | 1200 × 900 px | 4:3 Lanskap | JPG / WebP | --- -## Panduan Instalasi +## Struktur Direktori -1. Salin folder tema edukarsa ke direktori: wp-content/themes/edukarsa -2. Masuk ke panel admin WordPress, buka menu Tampilan > Tema, lalu aktifkan EduKarsa. -3. Akses menu EduKarsa > Pengaturan Utama pada bilah menu admin untuk mengatur logo, palet warna, tipografi font, dan seksi halaman depan. -4. Buka menu Tampilan > Menu untuk menetapkan menu pada lokasi Menu Utama dan Menu Footer. + edukarsa/ + ├── 404.php + ├── footer.php + ├── front-page.php + ├── functions.php + ├── header.php + ├── inc/ + │ ├── admin-menu.php + │ ├── cpt-slider.php + │ ├── i18n.php + │ ├── popup.php + │ ├── security.php + │ ├── seo.php + │ └── setup.php + ├── index.php + ├── page-galeri.php + ├── page.php + ├── README.md + ├── sidebar.php + ├── single-program.php + ├── single.php + └── style.css --- -## Donasi & Kontribusi +## Petunjuk Penggunaan -Pengembangan tema ini dilakukan secara independen untuk mendukung digitalisasi sekolah dan institusi pendidikan di Indonesia agar memiliki portal web yang cepat, aman, dan elegan tanpa beban lisensi plugin berbayar. - -Jika tema ini bermanfaat untuk sekolah, kampus, atau proyek Anda, Anda dapat menyalurkan dukungan dan donasi melalui: -https://donate.masbudi.my.id (Pilih EduKarsa) - -Dukungan Anda membantu keberlanjutan pembaruan keamanan, penambahan fitur, dan perawatan repositori ini. +1. **Pengaturan Identitas**: Masuk ke **EduKarsa > ⚙️ Pengaturan Utama** untuk konfigurasi logo, warna tema, font, profil, kontak, dan footer. +2. **Menyusun Halaman Utama**: Buka **EduKarsa > 🏗️ Tata Letak** untuk mengatur urutan seksi secara drag-and-drop, lalu simpan perubahan. +3. **Membuat Halaman Galeri**: + - Tambahkan dokumentasi pada **EduKarsa > 📸 Galeri Fasilitas** dan tandai kategorinya. + - Buat laman baru (**Laman > Tambah Baru**), pilih template **Galeri & Fasilitas** di panel atribut laman, lalu terbitkan. +4. **Mengaktifkan Pop-up Flyer**: + - Buka panel **🪟 8. Pop-up Flyer & Pengumuman** di Pengaturan Utama. + - Aktifkan sakelar, unggah berkas flyer, isi tautan tujuan pendaftaran, lalu simpan. --- ## Lisensi & Hak Cipta -Tema ini dirancang dan dikembangkan oleh Mas Budi Kusuma (https://masbudi.my.id). -Didistribusikan di bawah lisensi GNU General Public License v2 atau yang lebih baru. +Dirancang dan dikembangkan oleh **Mas Budi Kusuma** ([masbudi.my.id](https://masbudi.my.id)). +Didistribusikan di bawah naungan lisensi **GNU General Public License v2** atau yang lebih baru.