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:

/*
Plugin Name: Devcorner Events
Plugin URI: https://devcorner.pl
Description: Dodawaj i wyświetlaj wydarzenia.
Version: 1.0
Author: Devcorner
Author URI: https://devcorner.pl
Text Domain: devcorner-events
*/

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:

Domain Path: /languages

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:

add_action( 'plugins_loaded', 'devcorner_events_load_textdomain' );

function devcorner_events_load_textdomain() {
  load_plugin_textdomain( 'devcorner-events', false, basename( dirname( __FILE__ ) ) . '/languages' );
}

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:

<h2>Ustawienia wtyczki Devcorner Events</h2>

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

<h2><?php _e('Ustawienia wtyczki Devcorner Events', 'devcorner-events'); ?></h2>

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:

<h3>Właściwości wtyczki</h3>
<p>Tutaj możesz zmodyfikować właściwości wtyczki.</p>

Robimy to samo:

<h3><?php _e('Właściwości wtyczki', 'devcorner-events'); ?></h3>
<p><?php _e('Tutaj możesz zmodyfikować właściwości wtyczki.', 'devcorner-events'); ?></p>

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:

$content = 'Lorem ipsum dolor sit amet'.$content.'Tekst do przetłumaczenia';

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:

$content = 'Lorem ipsum dolor sit amet'.$content. echo 'Tekst do przetłumaczenia';

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

$content = 'Lorem ipsum dolor sit amet'.$content.__('Tekst do przetłumaczenia', 'devcorner-events');

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:

function devcorner_events_load_admin_styles() {
  wp_enqueue_style('devcorner_events_admin_style', plugins_url('/devcorner-events/admin/css/admin-style.css'));
}

add_action('admin_head', 'devcorner_events_load_admin_styles');

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

.devcorner-events-options-properties, .devcorner-events-options-widget-styles  {
  padding: 15px;
}

.devcorner-events-options th {
  text-align: left;
}

.devcorner-events-options td {
  padding: 8px 0;
}

.devcorner-events-options label {
  margin-right: 16px;
}

.devcorner-events-options h3 {
  margin: 0 0 5px 0;
}

body #wpwrap .devcorner-events-options h2 {
  margin-bottom: 15px;
}

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

Bądź pierwszą osobą, która skomentuje ten wpis.