{"id":2404,"date":"2015-05-07T05:55:24","date_gmt":"2015-05-07T05:55:24","guid":{"rendered":"http:\/\/musilda.cz\/?p=2404"},"modified":"2015-05-07T05:55:24","modified_gmt":"2015-05-07T05:55:24","slug":"jak-prelozit-retezce-v-javascriptovych-souborech","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-prelozit-retezce-v-javascriptovych-souborech\/","title":{"rendered":"Jak p\u0159elo\u017eit \u0159et\u011bzce v javascriptov\u00fdch souborech"},"content":{"rendered":"

Javascript se ve WodPressu pou\u017e\u00edv\u00e1 st\u00e1le v\u00edce a s t\u00edm tak\u00e9 vyvst\u00e1v\u00e1 ot\u00e1zka, jak\u00fdm zp\u016fsobem lokalizovat \u0159et\u011bzce v js souborech. V \u010dl\u00e1nku v\u00e1m uk\u00e1\u017ei, jak na to.<\/p>\n

Lokalizace je jednou ze siln\u00fdch str\u00e1nek WordPressu a d\u00edky tomu, jak je elegantn\u011b \u0159e\u0161en\u00e1, m\u016f\u017eete p\u0159ekl\u00e1dat pluginy a \u0161ablony do r\u016fzn\u00fdch jazyk\u016f.<\/p>\n

Samoz\u0159ejm\u011b, pouze za p\u0159edpokladu, \u017ee program\u00e1tor na to „myslel“ a sv\u016fj produkt na to p\u0159ipravil. Na\u0161t\u011bst\u00ed drtiv\u00e1 v\u011bt\u0161ina WordPress developer\u016f pou\u017e\u00edv\u00e1 minim\u00e1ln\u011b tyto dv\u011b funkce __() a _e(). Je toti\u017e nejv\u011bt\u0161\u00ed zlo, hledat n\u011bkde v k\u00f3du zapomenut\u00fd \u0159et\u011bzec, nep\u0159ipraven\u00fd na mo\u017enost p\u0159ekladu.<\/p>\n

V\u00fd\u0161e zm\u00edn\u011bn\u00e9 plat\u00ed pro PHP<\/h3>\n

A zde nar\u00e1\u017e\u00edme na to, co jsem zm\u00ednil na za\u010d\u00e1tku \u010dl\u00e1nku. Co kdy\u017e m\u00e1m v js souboru n\u011bjak\u00fd alert? Nevypad\u00e1 to moc dob\u0159e, kdy\u017e na \u010desk\u00e9m webu vysko\u010d\u00ed hl\u00e1\u0161ka „Please, enter valid e-mail!<\/span>„.<\/p>\n

Kr\u00e1sn\u00fd p\u0159\u00edklad je plugin WP Tell a friend<\/a>, jen\u017e umo\u017e\u0148uje do str\u00e1nky p\u0159idat tla\u010d\u00edtko vyvol\u00e1vaj\u00edc\u00ed popup okno s formul\u00e1\u0159em pro odesl\u00e1n\u00ed emailu.<\/p>\n

V\u0161echno v angli\u010dtin\u011b. Co te\u010f?\u00a0<\/strong><\/p>\n

U tohoto pluginu nebudeme \u0159e\u0161it nedostatky, je to z\u00e1le\u017eitost jeho autora. Ale jak postupovat ve vlastn\u00edch \u0161ablon\u00e1ch a pluginech? Na\u0161t\u011bst\u00ed m\u00e1 WordPress velmi elegantn\u00ed \u0159e\u0161en\u00ed tohoto probl\u00e9mu.<\/p>\n

wp_localize_script<\/h3>\n

Ne\u017e si vysv\u011btl\u00edme, jak pou\u017e\u00edt funkci wp_localize_script, mus\u00edme se pod\u00edvat na wp_enqueue_script. Pomoc\u00ed unqueue vkl\u00e1d\u00e1te do \u0161ablon a plugin\u016f css a js soubory. Pokud to tak ned\u011bl\u00e1te, tak s t\u00edm okam\u017eit\u011b za\u010dn\u011bte – wp_enqueue_script<\/a>.<\/p>\n

Wp_enqueue_script m\u00e1 jako prvn\u00ed argument takzvan\u00fd $handle, co\u017e je ozna\u010den\u00ed scriptu, kter\u00fd vkl\u00e1d\u00e1te. Nap\u0159\u00edklad jQuery m\u00e1 handle p\u0159ekvapiv\u011b „jquery“.<\/p>\n

Vlo\u017een\u00ed js souboru pak m\u016f\u017ee vypadat t\u0159eba takto:<\/p>\n

wp_enqueue_script('soubor', plugin_dir_url( __FILE__ ) . 'js\/soubor.js');<\/pre>\n
V origin\u00e1ln\u011b pojmenovan\u00e9m souboru soubor.js budeme m\u00edt nap\u0159\u00edklad n\u011bco takov\u00e9ho:<\/p>\n
\njQuery(document).read(function($) {\n\tjQuery('#tlacitko').on('click', function() {\n\t\talert('You have clicked the button!');\n\t});\n        jQuery('#druhytlacitko').on('click', function() {\n\t\talert('Not again, please!');\n\t});\n});\n<\/pre>\n
P\u0159eklad \u0159et\u011bzce v js souboru<\/h3>\n
A nyn\u00ed p\u0159ich\u00e1z\u00ed na \u0159adu wp_localize_script. Nejprve si p\u0159iprav\u00edme v php souboru, kde vkl\u00e1d\u00e1me soubor.js pomoc\u00ed enqueue, pole s texty.<\/p>\n
\n$translate = array(\n   'message'        => __('You have clicked the button!','textdomain'),\n   'second_message' => __('Not again, please!','textdomain')\n);\n<\/pre>\n
N\u00e1sledn\u011b pou\u017eijeme v\u00fd\u0161e zm\u00edn\u011bnou funkci:<\/p>\n
\nwp_localize_script('soubor', 'script_strings', $translate);\n<\/pre>\n
Vysv\u011btlen\u00ed:<\/strong><\/p>\n
Vzpome\u0148te si na $handle z enqueue, o kter\u00e9m jsem psal v\u00fd\u0161e. To je prvn\u00ed argument, tady je to „soubor“. D\u00edky tomu v\u00ed WordPress, \u017ee toto konkr\u00e9tn\u00ed vol\u00e1n\u00ed funkce se vztahuje ke konkr\u00e9tn\u00edmu js souboru.<\/p>\n
D\u016fle\u017eit\u00e9: enqueue mus\u00ed b\u00fdt pou\u017eito ve scriptu d\u0159\u00edve, ne\u017e localize!<\/strong><\/p>\n
Druh\u00fd argument funkce je objekt, do kter\u00e9 vlo\u017e\u00edte v\u0161echny \u0159etezce a jeho pou\u017eit\u00ed si uk\u00e1\u017eeme za chvilku.<\/p>\n
No a jako t\u0159et\u00ed m\u00e1me pole s texty. Kl\u00ed\u010d polo\u017eek budeme pou\u017e\u00edvat v js souboru a hodnota je uzav\u0159en\u00e1 ve funkci__(), kter\u00e1 n\u00e1m umo\u017e\u0148uje \u0159et\u011bzec p\u0159elo\u017eit, tak jak jsme zvykl\u00ed.<\/p>\n
Zp\u011bt k js souboru<\/strong><\/p>\n
Vytvo\u0159en\u00fd soubor uprav\u00edme takto:<\/p>\n
\njQuery(document).read(function($) {\n\tjQuery('#tlacitko').on('click', function() {\n\t\talert(script_strings.message);\n\t});\n        jQuery('#druhytlacitko').on('click', function() {\n\t\talert(script_strings.second_message);\n\t});\n});\n<\/pre>\n
A m\u00e1me javascript lokalizovan\u00fd. V\u0161echny \u0159et\u011bzce m\u00e1me p\u0159ipraveny v „script_strings“ a p\u0159ipojen\u00edm pomoc\u00ed te\u010dky, vypisujeme jednotliv\u00e9 texty, tak jak pot\u0159ebujeme.<\/p>\n","protected":false},"excerpt":{"rendered":"
Javascript se ve WodPressu pou\u017e\u00edv\u00e1 st\u00e1le v\u00edce a s t\u00edm tak\u00e9 vyvst\u00e1v\u00e1 ot\u00e1zka, jak\u00fdm zp\u016fsobem lokalizovat \u0159et\u011bzce v js souborech. V \u010dl\u00e1nku v\u00e1m uk\u00e1\u017ei, jak na to. Lokalizace je jednou ze siln\u00fdch str\u00e1nek WordPressu a d\u00edky tomu, jak je elegantn\u011b \u0159e\u0161en\u00e1, m\u016f\u017eete p\u0159ekl\u00e1dat pluginy a \u0161ablony do r\u016fzn\u00fdch jazyk\u016f. Samoz\u0159ejm\u011b, pouze za p\u0159edpokladu, \u017ee program\u00e1tor<\/p>\n","protected":false},"author":1,"featured_media":2405,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[12,30],"tags":[],"class_list":["post-2404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-wordpress"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2404"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=2404"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2404\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/2405"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=2404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=2404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=2404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}