close
WordPress

Tworzenie wtyczek WordPress – #5 Tłumaczenie wtyczki i style administratora

tworzenie-wtyczek-5

W piątej części kursu “Tworzenie wtyczek WordPress” dodamy przetłumaczymy wtyczkę na język angielski. Oprócz tego dodamy style do panelu administratora.

Tłumaczenie wtyczki

Tłumaczenie pluginu w WordPressie zaczyna się już podczas jego tworzenia. Wtyczka musi być odpowiednio przygotowana, aby można było ją przetłumaczyć na inne języki.

Dane wtyczki

Pierwszą rzeczą, którą musimy sprawdzić są dane wtyczki w pliku devcorner-events.php:

Informacja ważna dla tworzenia tłumaczeń znajduje się w ostatniej linii – Text Domain: devcorner-events. Text Domain to unikalny identyfikator tłumaczenia wtyczek/motywów. Dzięki niemu możemy pogrupować zgrupować wszystkie teksty użyte we wtyczce. Musi to być koniecznie nazwa pluginu pisana z małych liter i bez spacji. Devcorner Events -> devcorner-events.

Tłumaczenia będą przechowywane w formie plików .mo i .po. Domyślnie zostaną umieszczone w głównym folderze wtyczki – nie chcemy tego. W pierwszej części kursu utworzyliśmy katalog languages. Musimy umieścić tę informację wewnątrz danych wtyczki. Poniżej Text Domain: devcorner-events dopisz:

Dzięki temu tłumaczenia będą pobierane z tego folderu.

Załadowanie text domain

Aby wtyczka korzystała z tłumaczeń, które przygotujemy później, musimy dodać jedną prostą akcję. Możesz to zrobić na końcu pliku devcorner-events.php:

W parametrach funkcji load_plugin_textdomain() podajemy Text Domain i ścieżkę do folderu z tłumaczeniami.

Przygotowanie tekstów

Domyślnie WordPress nie wie, które teksty wewnątrz wtyczki powinny być tłumaczone. Jest to dobre, ponieważ nie chcemy tłumaczyć części elementów (np. klas).

Do wskazania tekstów, które będą tłumaczone służą w WordPressie dwie funkcje:

  • _e() – wyświetlanie przetłumaczonego tekstu
  • __() – pobranie przetłumaczonego tekstu (np. do zmiennej, bez wyświetlania)

Najlepiej zrozumiesz ich działanie na przykładzie. Przejdź do pliku menu.php i znajdziesz tekst:

To będzie pierwsza linijka, którą przygotujemy do tłumaczenia. Robimy to w ten sposób:

Funkcja _e() przyjmuje dwa parametry:

  1. Tekst do przetłumaczenia. Jest to po prostu tekst, który był wcześniej wewnątrz nagłówka.
  2. Text Domain – identyczna jak ustawiona wcześniej w danych pluginu.

Widzisz już pewnie, że zasada działania tłumaczeń jest bardzo prosta. Wewnątrz funkcji wpisujemy tekst (na jego podstawie będziemy tworzyć tłumaczenia) i Text Domain (grupa tłumaczeń, zawsze taka sama). Poniżej wpisanego kodu znajdują się dwa kolejne elementy:

Robimy to samo:

Zastanawiasz się pewnie teraz do czego właściwie służy druga funkcja – __(). Odpowiedź jest prosta: do tego samego, ale nie wyświetla tłumaczenia. Zobaczmy to na przykładzie:

Chcemy przetłumaczyć string Tekst do przetłumaczenia. Nie możemy jednak wyświetlić tekstu w tym miejscu, bo byłoby to równoznaczne z:

Taki zapis będzie oczywiścnie niepoprawny. Chcemy tylko pobrać tłumaczenie, bez wyświetlania go. W tym przypadku używamy funkcji __():

Teraz możesz przejść przez wszystkie teksty wewnątrz pluginu i przygotować je do tłumaczenia. Jest to powtarzalna i prosta czynność, więc nie ma sensu umieszczać jej w tym artykule. Jeśli nie chcesz tego robić, to nie musisz. 3 teksty, które przygotowaliśmy wystarczą do demonstracji 🙂

Tłumaczenie wtyczki

Po przygotowaniu tekstów możemy je przetłumaczyć. Najprostszym sposobem jest instalacja wtyczki Loco Translate. Pobierz ją teraz, zainstaluj i włącz. W panelu administratora pojawi się nowa zakładka Loco Translate. Przejdź do niej i otwórz podstronę Plugins:

loco translate plugins

Ten panel służy do tłumaczenia pluginów. Z listy wybieramy naszą wtyczkę Devcorner Events:

loco create template

Pierwszą akcją będzie utworzenie szablonu tłumaczeń. Loco przeskanuje pliki naszej wtyczki i wyświetli wszystkie przygotowane do tłumaczenia teksty. Kliknijmy Create template. Potwierdzamy utworzenie szablonu klikając ponownie Create template:

loco translate potwierdzenie

Szablon został wygenerowany.

loco new

Możemy teraz dodać tłumaczenie klikając na New language. Tutaj zaznaczamy opcję WordPress language, wybieramy język English (United States) i zaznaczamy opcję plugins/devcorner-events/languages/devcorner-events-en_US.po (tym samym mówimy wtyczce, że tłumaczenia ma zapisywać w folderze languages).

loco ustawienia

Klikamy Start translating.

tlumaczenie wtyczki

Zostaną wyświetlone wszystkie przygotowane do tłumaczenia teksty. Tłumaczenie jest bardzo proste. Klikamy ma tekst i w oknie English wpisujemy tłumaczenie. Po wszystkim klikamy Save.

Przejdź teraz do ustawień WordPressa i zmień język witryny na angielski:

jezyk witryny

Po zmiane języka przejdź do Devcorner Events -> Settings.

dc events settings

Jak widzisz trzy tłumaczenia, które przygotowaliśmy działają poprawnie. Jeśli teraz dodasz kolejne teksty do tłumaczenia, to zauważysz, że nie wyświetlą się w panelu tłumaczeń Loco. Wystarczy wtedy kliknąć przycisk Sync, aby nowe teksty zostały pobrane.

Style administratora

W tej chwili ustawienia naszej wtyczki nie wyglądają zbyt dobrze. Dodajmy kilka reguł, ktore zwiększą przejrzystość. Zacznijmy od utworzenia nowego pliku w katalogu admin/css. Nazwiemy go admin-style.css. Podepnijmy go dodając na końcu pliku functions.php poniższy kod:

Style w panelu administratora podpinamy używając akcji admin_head. Wewnąrz utworzonego pliku dodajmy kilka reguł:

Możemy teraz odświeżyć stronę ustawień:

dc events ustawienia

Podczas stylowania panelu administratora musisz pamiętać o jednej rzeczy. Zawsze używaj klas z unikalnym prefixem. Nigdy nie styluj klas definiowanych przez WordPressa takich jak np. wrap i postbox.

Na tym skończymy tą część kursu. W kolejnym artykule z tej serii zajmiemy się dodaniem nowych ustawień i aktualizacją wtyczki.

Pobierz paczkę z wtyczką >>

Tags : loco translate