Translations / Lokalisasi (i18n)

Gambaran Umum

Video ini membahas cara membuat plugin WordPress multi-bahasa menggunakan sistem terjemahan bawaan WordPress. Plugin akan bisa diterjemahkan ke bahasa apapun tanpa mengubah kode PHP.

---

Langkah 1: Setup Text Domain & Domain Path

Pastikan PHP comment header plugin memiliki property ini:

/*
  Plugin Name: Our Word Count Plugin
  ...
  Text Domain: wcpDomain
  Domain Path: /languages
*/

• Text Domain — ID unik yang menghubungkan teks dengan plugin ini
• Domain Path — Folder tempat file-file terjemahan disimpan

---

Langkah 2: Load Text Domain

Tambahkan action di constructor:

function __construct() {
  add_action('init', array($this, 'languages'));
  // ... action dan filter lainnya
}

function languages() {
  load_plugin_text_domain('wcpDomain', false, dirname(plugin_basename(__FILE__)) . '/languages');
}

Penjelasan load_plugin_text_domain():

• Arg 1: Text domain (harus sama dengan di header)
• Arg 2: false (deprecated parameter)
• Arg 3: Path ke folder languages, relatif dari folder plugins

---

Langkah 3: Gunakan Fungsi Terjemahan

__() — Terjemahkan String (Return)

// SEBELUM (hardcoded):
$html .= 'This post has ' . $wordCount . ' words.';

// SESUDAH (translatable):
$html .= __('This post has', 'wcpDomain') . ' ' . $wordCount . ' ' . __('words', 'wcpDomain') . '.';

esc_html__() — Terjemahkan + Escape HTML

// Untuk output yang bisa dilihat user — SELALU gunakan esc_html__()
$html = '<h3>' . esc_html__('Post Statistics', 'wcpDomain') . '</h3>';

KEAMANAN: Selalu gunakan esc_html__() daripada __() untuk output yang ditampilkan ke halaman. Ini mencegah terjemahan jahat yang menyisipkan HTML/JavaScript berbahaya.

Perbedaan:

Fungsi	Return/Echo	Escape HTML?
__('text', 'domain')	Return	❌
_e('text', 'domain')	Echo	❌
esc_html__('text', 'domain')	Return	✅
esc_html_e('text', 'domain')	Echo	✅

---

Langkah 4: Install Plugin Loco Translate

Loco Translate adalah plugin WordPress populer (1M+ installs) untuk mengelola terjemahan:

1. Buka Plugins → Add New
2. Cari "Loco Translate"
3. Install dan aktifkan

---

Langkah 5: Membuat File Terjemahan

Buat Template (.pot file)

1. Buka Loco Translate di admin menu
2. Pilih plugin yang ingin diterjemahkan
3. Klik "Create template"
4. Loco akan scan semua string __() dan esc_html__() dalam plugin
5. File .pot (Portable Object Template) akan dibuat di folder /languages

Buat Terjemahan Bahasa

1. Klik "New language"
2. Pilih bahasa target (misal: Spanish (Mexico) = es_MX)
3. Loco akan menampilkan semua string yang perlu diterjemahkan
4. Isi terjemahan untuk setiap string
5. Klik Save

File yang Dihasilkan:

languages/
  ├── wcpDomain.pot        ← Template (daftar semua string)
  ├── wcpDomain-es_MX.po   ← Terjemahan Spanish Mexico (human-readable)
  └── wcpDomain-es_MX.mo   ← Terjemahan compiled (machine-readable)

File	Format	Kegunaan
.pot	Portable Object Template	Template daftar string
.po	Portable Object	Terjemahan yang bisa diedit
.mo	Machine Object	Versi compiled yang dibaca WordPress

---

Cara Kerja Sistem Terjemahan

1. WordPress mendeteksi bahasa site (Settings → General → Site Language)
2. Saat menemukan __('text', 'wcpDomain'):
   - Cek apakah ada file .mo untuk bahasa aktif di folder /languages
   - Jika ada → gunakan terjemahan
   - Jika tidak → tampilkan string asli (English)

---

Tips Keamanan

Jangan pernah gunakan __() tanpa esc_html untuk output ke halaman. File .po bisa diedit siapa saja yang punya akses ke server. Jika seseorang menyisipkan <script>alert('hacked')</script> sebagai "terjemahan", dan kamu menggunakan __() tanpa escape, kode berbahaya itu akan dieksekusi.

// ❌ TIDAK AMAN:
echo '<h3>' . __('Post Statistics', 'wcpDomain') . '</h3>';

// ✅ AMAN:
echo '<h3>' . esc_html__('Post Statistics', 'wcpDomain') . '</h3>';