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

feat(i18n): integrasi tombol bilingual native ID/EN dan skrip translasi instan otomatis

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 23:37:36 +07:00
parent 2f53ae6e8d
commit 7ba6d951bf
3 changed files with 139 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
header.php
+77 -18
View File
@@ -22,24 +22,83 @@
</a>
</div>
<!-- Tombol Hamburger Mobile -->
<button class="menu-toggle" id="mobile-menu-toggle" aria-label="Buka Menu Navigasi">
<span></span>
<span></span>
<span></span>
</button>
<!-- Area Navigasi & Bilingual -->
<div class="header-nav-wrap">
<nav class="main-navigation" id="site-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-utama',
'menu_id' => 'primary-menu',
'fallback_cb' => false,
'container' => false,
'menu_class' => 'nav-menu-custom'
) );
?>
</nav>
<!-- BILINGUAL SWITCHER (ID | EN) -->
<?php if ( get_option( 'edukarsa_tampil_bilingual', 1 ) == 1 ) : ?>
<div class="edukarsa-lang-switcher" id="lang-switcher">
<button type="button" class="lang-btn active" data-lang="id" title="Bahasa Indonesia">ID</button>
<span class="lang-divider">|</span>
<button type="button" class="lang-btn" data-lang="en" title="English">EN</button>
</div>
<div id="google_translate_element" style="display:none;"></div>
<?php endif; ?>
<!-- Tombol Hamburger Mobile -->
<button class="menu-toggle" id="mobile-menu-toggle" aria-label="Buka Menu Navigasi">
<span></span>
<span></span>
<span></span>
</button>
</div>
<!-- Navigasi Utama -->
<nav class="main-navigation" id="site-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-utama',
'menu_id' => 'primary-menu',
'fallback_cb' => false,
'container' => false,
'menu_class' => 'nav-menu-custom'
) );
?>
</nav>
</div>
</header>
<?php if ( get_option( 'edukarsa_tampil_bilingual', 1 ) == 1 ) : ?>
<!-- SKRIP NATIVE TRANSLATE CONTROLLER -->
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id',
includedLanguages: 'en,id',
autoDisplay: false
}, 'google_translate_element');
}
function changeLanguage(lang) {
var host = window.location.hostname;
var cookieVal = '/id/' + lang;
if (lang === 'id') {
document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + host;
document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
} else {
document.cookie = "googtrans=" + cookieVal + "; path=/; domain=" + host;
document.cookie = "googtrans=" + cookieVal + "; path=/;";
}
window.location.reload();
}
document.addEventListener("DOMContentLoaded", function() {
// Cek status bahasa aktif dari cookie
var match = document.cookie.match(/googtrans=\/id\/([a-z]{2})/i);
var activeLang = match ? match[1].toLowerCase() : 'id';
var buttons = document.querySelectorAll('.lang-btn');
buttons.forEach(function(btn) {
if (btn.getAttribute('data-lang') === activeLang) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
btn.addEventListener('click', function() {
var selected = this.getAttribute('data-lang');
changeLanguage(selected);
});
});
});
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<?php endif; ?>
inc/admin-menu.php
+19 -8
View File
@@ -44,7 +44,7 @@ add_action( 'admin_bar_menu', 'edukarsa_admin_bar_shortcut', 80 );
function edukarsa_register_settings() {
$options = array(
'edukarsa_font_choice', 'edukarsa_primary_color', 'edukarsa_secondary_color', 'edukarsa_heading_color',
'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_faq', 'edukarsa_tampil_news',
'edukarsa_tampil_bilingual', '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_faq', 'edukarsa_tampil_news',
'edukarsa_header_logo',
'edukarsa_milestone_subtitle', 'edukarsa_milestone_title',
'edukarsa_program_subtitle', 'edukarsa_program_title',
@@ -141,7 +141,7 @@ function edukarsa_settings_page_html() {
<div class="edukarsa-admin-layout">
<div class="edukarsa-admin-main">
<!-- 1. Header, Logo & Slider -->
<!-- 1. Header, Logo, Slider & Bilingual Switcher -->
<div class="edukarsa-card">
<div class="edukarsa-card-header"><h2>🏛️ 1. Header, Logo & Slider</h2></div>
<div class="edukarsa-card-body">
@@ -153,7 +153,22 @@ function edukarsa_settings_page_html() {
</div>
</div>
<div class="switch-row-inline" style="margin-top: 20px;">
<!-- Opsi Bilingual -->
<div class="switch-row" style="margin-top: 18px; background: #eef2ff; border-color: #c7d2fe;">
<div class="switch-label-wrap">
<div class="switch-label" style="color: #3730a3;">
<span>🌐 Fitur Bilingual (Bahasa Indonesia & Inggris)</span>
<span class="tooltip-hint">?<span class="tooltip-text">Menampilkan tombol switcher ID | EN di header dengan sistem translasi instan otomatis.</span></span>
</div>
<span style="font-size: 11px; color: #4338ca;">Penerjemah instan untuk mempermudah pengunjung internasional tanpa membebani operator.</span>
</div>
<label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_tampil_bilingual" value="1" <?php checked(1, get_option('edukarsa_tampil_bilingual', 1)); ?>>
<span class="slider-round"></span>
</label>
</div>
<div class="switch-row-inline" style="margin-top: 15px;">
<div class="switch-row">
<div class="switch-label-wrap">
<div class="switch-label"><span>Tampilkan Slider Atas</span><span class="tooltip-hint">?<span class="tooltip-text">Gambar & tautan banner dikelola pada modul 🌟 Slider Banner.</span></span></div>
@@ -166,7 +181,7 @@ function edukarsa_settings_page_html() {
</div>
<div class="switch-row">
<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 pada form di bawah.</span></span></div>
<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 pada formulir di bawah.</span></span></div>
<span style="font-size: 11px; color: #64748b;">Formulir Pengaturan Bawah ↓</span>
</div>
<label class="edukarsa-switch">
@@ -292,8 +307,6 @@ function edukarsa_settings_page_html() {
<div class="edukarsa-card">
<div class="edukarsa-card-header"><h2>📢 5. CTA Pendaftaran, FAQ & Berita</h2></div>
<div class="edukarsa-card-body">
<!-- Switch Rows -->
<div class="switch-row-inline">
<div class="switch-row">
<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>
@@ -312,7 +325,6 @@ function edukarsa_settings_page_html() {
</div>
</div>
<!-- Form CTA -->
<div id="cta-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
<h4>Konfigurasi CTA PPDB / PMB</h4>
<div class="form-grid-2">
@@ -325,7 +337,6 @@ function edukarsa_settings_page_html() {
</div>
</div>
<!-- Form Label FAQ -->
<div id="faq-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
<h4>Label Tampilan Seksi FAQ (Tanya Jawab)</h4>
<div class="form-grid-2">
style.css
+43
View File
@@ -378,3 +378,46 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
.faq-body-content p { margin-bottom: 0; }
.faq-body-content p + p { margin-top: 10px; }
.faq-item.active .faq-body { max-height: 400px; padding: 0 26px 22px; }
/* 17. BILINGUAL LANGUAGE SWITCHER & GOOGLE RESET */
.header-nav-wrap { display: flex; align-items: center; gap: 20px; }
.edukarsa-lang-switcher {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 3px 8px;
border-radius: 20px;
backdrop-filter: blur(4px);
}
.lang-btn {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
cursor: pointer;
padding: 3px 6px;
border-radius: 12px;
transition: all 0.2s ease;
}
.lang-btn:hover { color: #ffffff; }
.lang-btn.active {
background: #ffffff;
color: var(--primary-color) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.lang-divider {
color: rgba(255, 255, 255, 0.3);
font-size: 11px;
user-select: none;
margin: 0 1px;
}
/* HILANGKAN TOOLBAR BANNER ASLI GOOGLE AGAR HEADER TETAP BERSIH */
.goog-te-banner-frame.skiptranslate, .goog-te-banner-frame { display: none !important; }
body { top: 0px !important; position: static !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }
#goog-gt-tt { display: none !important; }