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.
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.
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.
