Lokalisasi / Terjemahan untuk JavaScript

Gambaran Umum

Video ini membahas cara membuat teks dalam JavaScript/JSX bisa diterjemahkan ke bahasa lain — sama seperti PHP menggunakan __(), tapi kali ini menggunakan wp.i18n.__(), wp_set_script_translations(), dan Loco Translate plugin.

---

Langkah 1: Setup PHP untuk Mendukung Terjemahan

Text Domain & Domain Path di Plugin Header

<?php
/*
  Plugin Name: Featured Professor Block Type
  Text Domain: featured-prof
  Domain Path: /languages
*/

Buat Folder languages

featured-professor/
  ├── languages/        ← Folder kosong baru
  ├── src/
  ├── inc/
  └── featured-professor.php

Load Text Domain di onInit()

function onInit() {
  load_plugin_textdomain('featured-professor', false, 
    dirname(plugin_basename(__FILE__)) . '/languages'
  );
  
  // ... register_meta, register_script, dll ...
}

Parameter:

1. 'featured-professor' → text domain (harus match dengan header)
2. false → parameter deprecated, cukup false
3. Path ke folder languages/ relatif dari plugin directory

---

Langkah 2: Gunakan __() di JavaScript

Buat Shortcut dari Global Scope

const __ = wp.i18n.__;

Mengapa tidak import? import { __ } from '@wordpress/i18n' seharusnya bekerja, tapi Loco Translate plugin kadang tidak mendeteksi teks dengan benar jika di-import. Mengambil langsung dari global scope lebih reliable.

Gunakan di JSX

<select onChange={e => props.setAttributes({ profId: e.target.value })}>
  <option>{__('Select a professor', 'featured-professor')}</option>
  {allProfs.map(prof => (
    <option value={prof.id} selected={props.attributes.profId == prof.id}>
      {prof.title.rendered}
    </option>
  ))}
</select>

Syntax __():

__('Original text', 'text-domain')

• Arg 1: Teks asli (default language)
• Arg 2: Text domain plugin kita
• Bisa digunakan di mana saja di JavaScript, tidak hanya di JSX curly brackets

---

Langkah 3: Hubungkan JavaScript dengan Translation System

wp_set_script_translations() di onInit()

function onInit() {
  load_plugin_textdomain('featured-professor', false, 
    dirname(plugin_basename(__FILE__)) . '/languages'
  );
  
  wp_register_script('featuredProfessorScript', ...);
  wp_register_style('featuredProfessorStyle', ...);
  
  // PENTING: Taruh SETELAH register script
  wp_set_script_translations('featuredProfessorScript', 'featured-professor', 
    plugin_dir_path(__FILE__) . '/languages'
  );
  
  register_meta(...);
  register_block_type(...);
}

Parameter wp_set_script_translations():

1. 'featuredProfessorScript' → Handle name script yang didaftarkan
2. 'featured-professor' → Text domain
3. Path absolut ke folder languages/

Kunci: Fungsi ini menghubungkan file JavaScript spesifik dengan sistem terjemahan WordPress.

---

Langkah 4: Membuat Terjemahan dengan Loco Translate

Setting Loco Translate untuk JavaScript

1. Buka Loco Translate → Settings
2. Di field "Scan JavaScript files with extensions" → ketik js
3. Save Settings

Secara default, Loco Translate tidak scan file JavaScript. Harus diaktifkan manual.

Membuat Template

1. Buka Loco Translate → Klik plugin Featured Professor Block Type
2. Klik "Create Template"
3. Loco Translate akan scan semua file termasuk JS dan menemukan string yang bisa diterjemahkan

Membuat Terjemahan Baru

1. Klik "New Language"
2. Pilih bahasa (contoh: Español de México)
3. Pilih lokasi: Plugin languages folder ← penting!
4. Klik "Start Translating"
5. Pilih string yang ingin diterjemahkan (contoh: "Select a professor")
6. Masukkan terjemahan → Save

Testing

1. Buka Settings → General
2. Ubah Site Language ke bahasa yang diterjemahkan
3. Pergi ke editor post → insert block Featured Professor
4. Teks "Select a professor" sekarang tampil dalam bahasa yang dipilih

---

Ringkasan Alur Kerja Terjemahan JavaScript

1. Plugin Header: Text Domain + Domain Path
        ↓
2. PHP: load_plugin_textdomain()
        ↓
3. PHP: wp_set_script_translations() → hubungkan script handle dengan translation
        ↓
4. JS: const __ = wp.i18n.__
        ↓
5. JS: __('text', 'domain') → di mana saja dalam kode
        ↓
6. Loco Translate: Settings → Scan JS files → Create Template → New Language
        ↓
7. WordPress: Settings → Site Language → Terjemahan aktif!