Kr\u00f3tko m\u00f3wi\u0105c, jak t\u0142umaczy\u0107 skrypty JavaScript (Gutenberg): WordPress wymaga Musimy wi\u0119c najpierw doda\u0107 funkcje gettext ( Pami\u0119taj, \u017ce Tw\u00f3j motyw lub pliki Pierwszym krokiem jest umieszczenie wszystkich tekst\u00f3w w naszym pliku JavaScript wewn\u0105trz funkcji t\u0142umaczenia. Je\u015bli zajmowa\u0142e\u015b si\u0119 t\u0142umaczeniem WordPressa w PHP, prawdopodobnie dobrze znasz funkcje Podobnie jak w przypadku PHP, musisz poda\u0107 domen\u0119 textdomain (nazwa\/uchwyt). Mo\u017ce to by\u0107 cokolwiek chcesz, ale trzymaj si\u0119 kr\u00f3tkich, poniewa\u017c prawdopodobnie b\u0119dziesz musia\u0142 je wpisywa\u0107 bardzo cz\u0119sto. Dla mojego motywu ustawi\u0142em moj\u0105 textdomain z domen\u0105 Zacznijmy edytowa\u0107 nasz plik JavaScript. Najpierw musimy zdestrukturyzowa\u0107 funkcj\u0119 A potem jest kwestia znalezienia wszystkich naszych zakodowanych na sztywno tekst\u00f3w w pliku JavaScript i ich aktualizacji. Pami\u0119taj, \u017ce funkcje Na przyk\u0142ad nasza A co do rekwizyt\u00f3w, czyli w Zawi\u0144 wszystkie teksty, dla kt\u00f3rych chcesz obs\u0142ugiwa\u0107 t\u0142umaczenie w Ten krok r\u00f3\u017cni si\u0119 nieco w zale\u017cno\u015bci od tego, co ju\u017c zrobi\u0142e\u015b i skonfigurowa\u0142e\u015b dla swojego motywu lub wtyczki. By\u0107 mo\u017ce piszesz skrypty Gutenberga w nowej i pustej wtyczce, kt\u00f3ra nie zosta\u0142a skonfigurowana do t\u0142umaczenia PHP, lub w motywie, kt\u00f3ry ma ju\u017c zarejestrowan\u0105 domen\u0119 tekstow\u0105. Mo\u017cesz mie\u0107 gotowe pliki PO (i MO) lub mo\u017cesz mie\u0107 tylko plik POT. Postaram si\u0119 jak najlepiej obj\u0105\u0107 wszystkie podstawy.<\/p>\n Je\u015bli masz ju\u017c plik PO lub POT w swoim projekcie, najprawdopodobniej masz r\u00f3wnie\u017c funkcj\u0119 PHP Wszystko, co musisz zrobi\u0107, to za\u0142adowa\u0107 plik PO dla j\u0119zyka, kt\u00f3ry chcesz przet\u0142umaczy\u0107 (lub wygenerowa\u0107 plik z pliku POT) na przyk\u0142ad w PoEdit<\/a>. Kliknij \u201eAktualizuj z kodu" (lub podobnie w innych programach), aby program m\u00f3g\u0142 przeskanowa\u0107 wszystkie pliki projektu (w tym nasze ostatnio zaktualizowane pliki JavaScript) i zaktualizowa\u0107 pul\u0119 ci\u0105g\u00f3w do t\u0142umaczenia. Ci\u0105gi w naszym pliku JavaScript powinny si\u0119 pojawi\u0107. Nast\u0119pnie wystarczy przet\u0142umaczy\u0107 je jak zwykle i zapisa\u0107.<\/p>\n PS: Je\u015bli nie mo\u017cesz klikn\u0105\u0107 \u201eAktualizuj z kodu” lub ponownie przeskanowa\u0107 pliki, prawdopodobnie plik PO nie zosta\u0142 poprawnie skonfigurowany. Poszukaj wskaz\u00f3wek w nast\u0119pnej sekcji.<\/p>\n Je\u015bli Tw\u00f3j motyw lub projekt nie zosta\u0142 skonfigurowany z t\u0142umaczeniem, musisz wygenerowa\u0107 plik POT za pomoc\u0105 WP-CLI lub r\u0119cznie utworzy\u0107 plik PO.<\/p>\n Mam dok\u0142adny przewodnik, jak utworzy\u0107 plik PO w moim samouczku motywu dla pocz\u0105tkuj\u0105cych \u2013 cz\u0119\u015b\u0107 8<\/a>. W po\u015bcie opisano, jak utworzy\u0107 plik i poprawnie go skonfigurowa\u0107, aby przeszukiwa\u0107 pliki motyw\u00f3w, oraz s\u0142owa kluczowe do wyszukania ( Je\u015bli wolisz utworzy\u0107 plik POT, mo\u017cesz u\u017cy\u0107 polecenia wp i18n make-pot<\/a> w WP-CLI, a nast\u0119pnie utworzy\u0107 z tego plik PO za pomoc\u0105 np. PoEdit. Pami\u0119taj, \u017ce b\u0119dziesz musia\u0142 ponownie wygenerowa\u0107 plik POT (a nast\u0119pnie plik PO) za ka\u017cdym razem, gdy aktualizujesz dowolne ci\u0105gi w kodzie.<\/p>\n Tym, czego ostatecznie potrzebujesz, jest plik PO, kt\u00f3ry znalaz\u0142 ci\u0105gi JavaScript w miejscu, w kt\u00f3rym zosta\u0142y one przet\u0142umaczone. Zalecam umieszczenie plik\u00f3w t\u0142umacze\u0144 w osobnym folderze w motywie lub wtyczce. Kiedy zaczniemy generowa\u0107 pliki JSON, otrzymamy ca\u0142kiem sporo plik\u00f3w do t\u0142umaczenia i fajnie b\u0119dzie trzyma\u0107 je wszystkie razem we w\u0142asnym folderze.<\/p>\n Jako punkt odniesienia umieszczam wszystkie pliki t\u0142umacze\u0144 w moim Nast\u0119pnym krokiem jest u\u017cycie WP-CLI do wygenerowania plik\u00f3w JSON z naszego pliku po. W tym celu u\u017cywamy polecenia wp i18n make-json<\/a>.<\/p>\n Nale\u017cy pami\u0119ta\u0107, \u017ce domy\u015blnie to polecenie usunie przet\u0142umaczone ci\u0105gi z pliku PO do u\u017cycia podczas generowania pliku JSON. Mo\u017ce to by\u0107 uci\u0105\u017cliwe w trakcie opracowywania motywu lub wtyczki. Poniewa\u017c kiedy dodasz nowe lub dostosujesz ci\u0105gi, b\u0119dziesz musia\u0142 ponownie przeskanowa\u0107 pliki i ponownie przet\u0142umaczy\u0107 wszystkie ci\u0105gi (i znowu i znowu). Na szcz\u0119\u015bcie w poleceniu jest flaga, aby tego unikn\u0105\u0107.<\/p>\n Zaczynajmy! W swoim terminalu przejd\u017a do katalogu j\u0119zykowego dla swojego projektu. Uruchom nast\u0119puj\u0105ce polecenie i odnie\u015b si\u0119 do swojego pliku po (jak wspomniano, mam Je\u015bli nie masz problemu z usuni\u0119ciem przet\u0142umaczonych napis\u00f3w z pliku PO (na przyk\u0142ad, je\u015bli tworzysz ostateczn\u0105 wersj\u0119), mo\u017cesz pomin\u0105\u0107 Terminal powinien wy\u015bwietli\u0107 komunikat \u201eSukces” i poda\u0107 liczb\u0119 utworzonych plik\u00f3w JSON. Je\u015bli widzisz, \u017ce wygenerowa\u0142 dwa pliki JSON, dzieje si\u0119 tak dlatego, \u017ce odczyta\u0142 zar\u00f3wno nasz kod \u017ar\u00f3d\u0142owy pliku JavaScript, jak i plik kompilacji, i wygenerowa\u0142 po jednym dla ka\u017cdego. Je\u015bli masz wi\u0119cej plik\u00f3w JavaScript w swoim projekcie, otrzymasz jeszcze wi\u0119cej plik\u00f3w JSON.<\/p>\n W momencie pisania tego (WordPress v 5.3.2 i WP-CLI wersja 2.4.0) pliki JSON s\u0105 generowane z kodem j\u0119zyka i hashem \u2013 zagadkowym ci\u0105giem jako nazwami plik\u00f3w. Musimy znale\u017a\u0107 w\u0142a\u015bciwy i zmieni\u0107 jego nazw\u0119.<\/p>\n.mo<\/code>plik\u00f3w do t\u0142umaczenia plik\u00f3w PHP, ale dla JavaScript WordPress wymaga .json<\/code>pliku. Ka\u017cdy plik JavaScript wymaga jednego pliku JSON do t\u0142umaczenia. JSON powinien mie\u0107 okre\u015blony format (WP CLI wygeneruje go dla nas) z naszymi przet\u0142umaczonymi ci\u0105gami. Potrzebujemy jednego pliku JSON na j\u0119zyk, na kt\u00f3ry chcemy t\u0142umaczy\u0107.<\/p>\n__()<\/code>, _e()<\/code>itp.) do naszych plik\u00f3w JavaScript i jak zwykle wygenerowa\u0107 plik PO dla naszego motywu lub wtyczki. Poniewa\u017c opakowali\u015bmy teksty w naszych plikach skryptowych np __()<\/code>., plik PO powinien by\u0107 w stanie je zawiera\u0107. Nast\u0119pnie wykonujemy t\u0142umaczenie jak zwykle w naszym pliku PO. A potem w ko\u0144cu u\u017cywamy WP CLI, aby wyodr\u0119bni\u0107 niezb\u0119dne ci\u0105gi z pliku PO i wygenerowa\u0107 pliki JSON dla wszystkich naszych plik\u00f3w JavaScript.<\/p>\n.po<\/code>\/ .mo<\/code>-wtyczki nigdy nie b\u0119d\u0105 mia\u0142y wp\u0142ywu na Twoje pliki JavaScript \u2013 nawet je\u015bli zawieraj\u0105 one przet\u0142umaczone ci\u0105gi z naszych plik\u00f3w JavaScript.<\/p>\nImplementacja t\u0142umaczenia w JavaScript<\/h2>\n
__()<\/code>, _e()<\/code>i esc_html__()<\/code>tak dalej. WordPress posiada pakiet wp.i18n<\/code>zawieraj\u0105cy te funkcje, kt\u00f3re dzia\u0142aj\u0105 dok\u0142adnie tak, jak w PHP.<\/p>\nawhitepixel<\/code>. Wi\u0119c w PHP zrobi\u0119 __('My string', 'awhitepixel')<\/code>t\u0142umaczenie \u0142a\u0144cuch\u00f3w i b\u0119dzie to dok\u0142adnie to samo w plikach JavaScript.<\/p>\n__<\/code>i _e<\/code>z wp.i18n<\/code>pakietu. Ze wzgl\u0119du na charakter React najprawdopodobniej b\u0119dziesz w wi\u0119kszo\u015bci, a mo\u017ce tylko korzysta\u0107 z tej __<\/code>funkcji.<\/p>\nconst { __, _e } = wp.i18n;<\/code><\/pre>\n__<\/code>i _e<\/code>wymagaj\u0105 kontekstu JavaScript. Oznacza to, \u017ce gdy wpisujemy stringi jako na przyk\u0142ad warto\u015bci w\u0142a\u015bciwo\u015bci obiektu, u\u017cywamy __()<\/code>od razu, ale jako warto\u015bci np. rekwizyt\u00f3w musimy wszystko zawin\u0105\u0107 do \u015brodka { }<\/code>, aby zaznaczy\u0107, \u017ce jest to kod JavaScript.<\/p>\nregisterBlockType<\/code>obs\u0142uga t\u0142umaczenia b\u0119dzie wygl\u0105da\u0107 tak:<\/p>\nregisterBlockType('awp\/firstblock', {\n title: __('My first block', 'awhitepixel'), \n category: 'common',\n icon: 'smiley',\n description: __('Learning in progress', 'awhitepixel'),\n keywords: [__('example', 'awhitepixel'), __('test', 'awhitepixel')],\n attributes: {\n ...<\/code><\/pre>\nInspectorControls<\/code>:<\/p>\n<InspectorControls>\n <PanelBody\n title={__(\"Most awesome settings ever\", 'awhitepixel')}\n initialOpen={true}\n >\n ...\n <ToggleControl\n label={__(\"Toggle me\", 'awhitepixel')}\n checked={attributes.toggle}\n onChange={(newval) => setAttributes({ toggle: newval })}\n \/>\n ...<\/code><\/pre>\n__()<\/code>i _e()<\/code>. Je\u015bli wykona\u0142e\u015b ten samouczek krok po kroku, nie powiniene\u015b mie\u0107 \u017cadnych przypadk\u00f3w, w kt\u00f3rych musisz u\u017cy\u0107 _e()<\/code>. Kiedy sko\u0144czysz, ponownie skompiluj JavaScript, a my odejdziemy od JavaScript.<\/p>\nKonfigurowanie plik\u00f3w po i\/lub pot<\/h2>\n
M\u00f3j motyw lub wtyczka ma ju\u017c plik po(t)<\/h3>\n
load_theme_textdomain()<\/code>lub gdzie\u015b w swoim kodzie. Upewnij si\u0119, \u017ce zarejestrowana domena jest taka sama, jak w plikach JavaScript.load_child_theme_textdomain()``load_plugin_textdomain()<\/code><\/p>\nNie mam \u017cadnych plik\u00f3w t\u0142umaczeniowych<\/h3>\n
__<\/code>, _e<\/code>, itp.).<\/p>\nWynik ko\u0144cowy<\/h3>\n
theme\/assets\/lang\/<\/code>. Doda\u0142em norweskie t\u0142umaczenie dla mojego motywu o nazwie nb_NO.po<\/code>, kt\u00f3re zawiera przet\u0142umaczone ci\u0105gi z naszego niestandardowego pliku JavaScript bloku.<\/p>\nGenerowanie plik\u00f3w JSON z pliku po<\/h2>\n
nb_NO.po<\/code>gotowy plik).<\/p>\nwp i18n make-json nb_NO.po --no-purge<\/code><\/pre>\n--no-purge<\/code>flag\u0119.<\/p>\nZmiana nazwy pliku JSON i \u0142adowanie go w PHP<\/h2>\n
![\"Utw\u00f3rz](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153240-61e50a824a365.png\")
<\/a><\/p>\n![\"Utw\u00f3rz](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153240-61e50a83bedae.png\")
<\/a><\/p>\n