Jak přeložit řetězce v javascriptových souborech

Javascript se ve WodPressu používá stále více a s tím také vyvstává otázka, jakým způsobem lokalizovat řetězce v js souborech. V článku vám ukáži, jak na to.

Lokalizace je jednou ze silných stránek WordPressu a díky tomu, jak je elegantně řešená, můžete překládat pluginy a šablony do různých jazyků.

Samozřejmě, pouze za předpokladu, že programátor na to „myslel“ a svůj produkt na to připravil. Naštěstí drtivá většina WordPress developerů používá minimálně tyto dvě funkce __() a _e(). Je totiž největší zlo, hledat někde v kódu zapomenutý řetězec, nepřipravený na možnost překladu.

Výše zmíněné platí pro PHP

A zde narážíme na to, co jsem zmínil na začátku článku. Co když mám v js souboru nějaký alert? Nevypadá to moc dobře, když na českém webu vyskočí hláška „Please, enter valid e-mail!„.

Krásný příklad je plugin WP Tell a friend, jenž umožňuje do stránky přidat tlačítko vyvolávající popup okno s formulářem pro odeslání emailu.

Všechno v angličtině. Co teď? 

U tohoto pluginu nebudeme řešit nedostatky, je to záležitost jeho autora. Ale jak postupovat ve vlastních šablonách a pluginech? Naštěstí má WordPress velmi elegantní řešení tohoto problému.

wp_localize_script

Než si vysvětlíme, jak použít funkci wp_localize_script, musíme se podívat na wp_enqueue_script. Pomocí unqueue vkládáte do šablon a pluginů css a js soubory. Pokud to tak neděláte, tak s tím okamžitě začněte – wp_enqueue_script.

Čtěte  Wordcamp Praha 2014

Wp_enqueue_script má jako první argument takzvaný $handle, což je označení scriptu, který vkládáte. Například jQuery má handle překvapivě „jquery“.

Vložení js souboru pak může vypadat třeba takto:

wp_enqueue_script('soubor', plugin_dir_url( __FILE__ ) . 'js/soubor.js');

V originálně pojmenovaném souboru soubor.js budeme mít například něco takového:

jQuery(document).read(function($) {
jQuery('#tlacitko').on('click', function() {
alert('You have clicked the button!');
});
        jQuery('#druhytlacitko').on('click', function() {
alert('Not again, please!');
});
});

Překlad řetězce v js souboru

A nyní přichází na řadu wp_localize_script. Nejprve si připravíme v php souboru, kde vkládáme soubor.js pomocí enqueue, pole s texty.

$translate = array(
   'message'        => __('You have clicked the button!','textdomain'),
   'second_message' => __('Not again, please!','textdomain')
);

Následně použijeme výše zmíněnou funkci:

wp_localize_script('soubor', 'script_strings', $translate);

Vysvětlení:

Vzpomeňte si na $handle z enqueue, o kterém jsem psal výše. To je první argument, tady je to „soubor“. Díky tomu ví WordPress, že toto konkrétní volání funkce se vztahuje ke konkrétnímu js souboru.

Čtěte  Zranitelnost v knihovně ImageMagick

Důležité: enqueue musí být použito ve scriptu dříve, než localize!

Druhý argument funkce je objekt, do které vložíte všechny řetezce a jeho použití si ukážeme za chvilku.

No a jako třetí máme pole s texty. Klíč položek budeme používat v js souboru a hodnota je uzavřená ve funkci__(), která nám umožňuje řetězec přeložit, tak jak jsme zvyklí.

Zpět k js souboru

Vytvořený soubor upravíme takto:

jQuery(document).read(function($) {
jQuery('#tlacitko').on('click', function() {
alert(script_strings.message);
});
        jQuery('#druhytlacitko').on('click', function() {
alert(script_strings.second_message);
});
});

A máme javascript lokalizovaný. Všechny řetězce máme připraveny v „script_strings“ a připojením pomocí tečky, vypisujeme jednotlivé texty, tak jak potřebujeme.

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

Leave a Reply

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Chcete mít přehled o dění ve světě WordPressu?

Přímo do vašeho emailu

Pravidelný přehled o novinkách, trendech a událostech, které se točí kolem WordPressu. Souhrn toho nejzajímavějšího od nás i ze zahraničí.