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  WP_Taxonomy ve WordPress 4.7

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  Jak vytvořit jednoduchý plugin pro WordPress

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 *