Frazy językowe w skryptach JavaScript

WordPress oferuje wiele przydatnych mechanizmów, które znacząco ułatwiają życie developerów. Jednym z takich mechanizmów jest możliwość tworzenia fraz językowych, które da się przetłumaczyć poprzez pliki językowe w skryptach JavaScript.

JavaScript sam w sobie nie umożliwia łatwej podmiany pewnych fragmentów kodu na inne pochodzące z wyników działania po stronie serwera. Na szczęście znaleziono na ten problem łatwe rozwiązanie – wykorzystano następujacy wzorzec:

Frazy językowe zostają zgrupowane w tablicy asocjacyjnej, która jest dostępna w innych skryptach dając dostęp poprzez zapis tablica.nazwa_frazy. Tablica asocjacyjna generowana jest przez skrypt PHP i umieszczana w znaczniku script w sekcji head dokumentu przed wywołaniem skryptu którego dotyczy.

Aby całość znacząco uprościć powstała funkcja wp_localize_script. Jest ona ściśle związana z inną funkcją – wp_enqueue_script co przy okazji wymusza na developerach stosowanie dobrych praktyk we wtyczkach i motywach.

Składnia funkcji wp_localize_script jest następująca:

wp_localize_script('NAZWA_SKRYPTU', 'NAZWA_OBIEKTU', $DANE_FRAZ);

NAZWA_SKRYPTU to po prostu pierwszy argument z funkcji wp_enqueue_script – pozwala on powiązać tłumaczenia z danym skryptem i umieścić tablicę tłumaczeń odpowiednio wcześnie w kodzie strony.

NAZWA_OBIEKTU to po prostu nazwa zmiennej, która będzie przechowywała dane tablicy asocjacyjnej z tłumaczeniami. Odwołania do niej odbywają się w skrypcie poprzez zapis:

NAZWA_OBIEKTU.NAZWA_FRAZY

$DANE_FRAZY to tablica asocjacyjna w PHP, która przechowuje nasze frazy do przetłumaczenia np.:

$DANE_FRAZY = array(
    'error_info' => __('Treść błędu'),
    'warning_info' => __('Treść ostrzeżenia'),
    'notice_info' => __('Treść powiadomienia')
);

Składając to wszystko w całość i chcąc przetłumaczyć frazy w skrypcie test.js otrzymujemy:

$testjs_translations = array(
    'error_info' => __('Treść błędu'),
    'warning_info' => __('Treść ostrzeżenia'),
    'notice_info' => __('Treść powiadomienia')
);

wp_enqueue_script('test', 'path/to/test.js', array(), false, true);
wp_localize_script('test', 'TestLang', $testjs_translations);

Po dodaniu takiego kodu w skrypcie test.js możemy się odwołać do frazy error_info następująco:

TestLang.error_info

Uwaga! W powyższym przykładzie dla uproszczenia kodu pominąłem takie elementy jak drugi argument funkcji __() oraz prefiksy uchwytu do skryptu, które warto stosować aby uniknąć konfliktów przestrzeni nazw.