() translation by (you can also view the original English article)
Ebben a sorozatban arra vetünk egy pillantást, hogy hogyan tudjuk nemzetközivé tenni a WordPress projektjeinket. Azok számára, akik csak most csatlakoztak hozzánk, erősen javaslom a sorozat első részének megtekintését, mivel minden olyan funkciót sorra veszünk, amit a WordPress biztosít segítségként a karakterláncaink nemzetközivé tételére.
És noha ez nagyon hasznos, de még mindig nem segít megtudni, mi az a nemzetközivé tétel. Ahogy azt az első bejegyzésben mondtuk:
A nemzetközivé tétel a bővítményed fejlesztésének a folyamata, melynek révén könnyen lefordítható lesz más nyelvekre.
Mivel a WordPress a web durván 25%-át működteti, és mert a web nem feltétlenül a te származási országod nyelvén működik, ezért van értelme biztosítani, hogy az általunk létrehozott munka lefordítható legyen más nyelvekre is.
Hogy érthető legyen, ez nem azt jelenti, hogy te, mint fejlesztő, vagy a felelős minden karakterlánc lefordításáért a kódbázisodban a különféle nyelvekre, amiket a felhasználóid esetleg használni szeretnének. Ehelyett azt jelenti, hogy a megfelelő API-val biztosítod másoknak, hogy fordítást nyújthassanak hozzájuk.
Mielőtt tovább haladnánk, emlékezz rá:
- A nemzetközivé tétel, amire gyakran mint i18n hivatkoznak, az a folyamat, amikor úgy készítjük el a szoftverünket, hogy lefordítható legyen.
- A lokalizálás az a folyamat, amikor fogjuk a nemzetközivé tett szövegeket és lefordítjuk őket a megfelelő helyi nyelvre.
Eddig elég könnyen megérthető volt, igaz? De rengeteg erről szóló információ létezik, és tényleg nehéz különválasztani, hogy melyik a jó és melyik nem, különösen, ha még új vagy ebben.
De pont ez ennek a bemutatósorozatnak a célja: ellátni téged mindennel, amit tudnod kell annak érdekében, hogy megfelelően nemzetközivé tehesd a WordPress projektedet, hogy megértsd, mit is csinálsz, és hogy megtanuld, hogyan tudod letesztelni.
A következő két cikk során létre fogunk hozni egy egyszerű bővítményt, ami megfelelően nemetközivé lesz téve. Továbbá végignézzük a bővítmény minden egyes részét, amit nemzetközivé kell tenni, hogy biztosak lehessünk benne, tényleg megértettél mindent.
A következő cikkben megnézzük az egyik eszközt, ami szerintem a leghasznosabb a munkád lokalizálására és annak letesztelésére, hogy a lokalizáció megfelelően működik.
És akkor most haladjunk tovább és fogjunk hozzá.
Fogjunk hozzá
Ebben a bemutatóban a WordPress legutóbbi verzióját fogom elérni, ami a Subversionön keresztül elérhető. Ha van egy helyi WordPress példányod telepítve, és az egy újabb verzió, az nagyszerű.
Ha azonban szeretsz mindig naprakész lenni, akkor nyugodtan nézd meg ezt az útmutatót a kód legújabb változatának beszerzéséhez.
Végső soron ez nem fogja befolyásolni a munkánkat, de egy lehetőséget ad a fejlesztői készségeid kitágítására.
A bővítmény előkészítése
A WordPress egy helyi példányával feltelepítve a gépeden készen állsz dolgozni egy bővítményen. Emlékezz rá, hogy a bemutató célja érdekében egy hihetetlenül alap bővítményt fogunk készíteni.
Nem az a cél, hogy megtanuld, hogyan kell egy bővítményt felépíteni, mert azt már lefedtük más tanfolyamokkal és bemutatókkal; ugyanakkor a nemzetközivé tétel finomabb árnyalatainak megértése teszi lehetővé, hogy tovább haladj a munkáddal, amit a jelenlegi és a jövőbeni projektjeiden fogsz elvégezni.
1. Hozd létre a bővítmény könyvtárat és a Bootstrapot
Először keresd meg a wp-content/plugins könyvtárat és hozz létre egy másikat benne, tutsplus-i18n néven. Ebben a könyvtárban fogjuk eltárolni a bővítményünk fájljait. Ez találóan Tuts+ Nemzetközivé tételének lett elnevezve.
Haladj tovább, és hozz létre egy fájlt a könyvtárban, ami a bővítmény kezdőfájljának lesz használva. Nevezd el a fájlt tutsplus-i18n.php-nek.
Mielőtt továbbhaladnánk, el kell döntenünk, hogy mit fog ez a bővítmény csinálni. Tudjuk, hogy meg kell jelenítenünk valamit a felhasználónak, mert így tudjuk gyakorolni a nemzetközivé tételt (és a lokalizációt). Ez azt jelenti, hogy kell lennie egy UI összetevőnek a bővítményhez.
Evégett hozzunk létre egy egyszerű bővítményt, ami egy új menüelemet vezet be az Eszközök menü alatt. Ezt az almenüt Szerver infónak fogjuk hívni, és azokat az adatokat fogjuk használni, amik PHP-ben könnyen elérhetőek, felhasználóbarát módon megjelenítve egy képernyőnyi tartalmat.
Ez esetleg felhasználható lesz arra, hogy egy hibakeresési naplót készíts arra az esetre, ha valami gond lenne egy bővítménnyel.
2. A bővítmény definiálása
Feltételezem, hogy már jártas vagy egy alap bővítmény létrehozásában. Amennyiben nem, rengeteg bemutatónk és tanfolyamunk érhető el, ami elmagyarázza (ahogy ezt már említettem). A Kódex is szolgálhat információkkal, arról, hogy hogyan fogj hozzá.
Ha nem vagy járatos benne, akkor azt javaslom, hogy nézd át a fenti forrásokat. És akkor haladjunk tovább, és definiáljuk a bővítményünk alapjait.
Kezdésként meg kell határoznunk a bővítmény fejlécét. Nyisd meg a tutsplus-i18n.php-t, és gondoskodj róla, hogy benne legyenek a következő információk:
1 |
<?php
|
2 |
/**
|
3 |
* The plugin bootstrap File_Upload_Upgrader::cleanup
|
4 |
*
|
5 |
* @link https://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676
|
6 |
* @since 1.0.0
|
7 |
* @package TutsPlus_i18n
|
8 |
*
|
9 |
* @wordpress-plugin
|
10 |
* Plugin Name: Tuts+ Internationalization
|
11 |
* Plugin URI: http://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676
|
12 |
* Description: Easily view internationalized server information.
|
13 |
* Version: 1.0.0
|
14 |
* Author: Tom McFarlin
|
15 |
* Author URI: https://tommcfarlin.com
|
16 |
* Text Domain: tutsplus-i18n
|
17 |
* License: GPL-2.0+
|
18 |
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
|
19 |
*/
|
Amint ez megvan, mentsd el a fájlt és navigálj a Bővítmények képernyőre a WordPressben. Ott látni fogod a bővítmény bejegyzését, amit most hoztál létre.
Az biztos, hogy eddig a pontig semmit sem fog csinálni, de legalább látni fogod, hogy jó úton járunk. Továbbá vedd észre, hogy hozzáadtunk egy taget, amit nem túl sűrűn látsz WordPress projektekben, ez a Text Domain tag. Ezt fogjuk használni ahhoz, hogy segítsen nemzetközivé tenni a bővítményünket.
Ennek a tagnek ez a leírása:
Amennyiben egy bővítményt vagy egy témát fordítasz, szükséged lesz egy szövegtartományra (text domain), ami megjelöli az összes szöveget, ami ahhoz a bővítményhez tartozik. Ez megnöveli a hordozhatóságát és jobban együttműködik a már meglévő WordPress eszközökkel. A text domainnek egyeznie kell a bővítmény "slug"-jával.
Nyilvánvaló, hogy a text domainünket mint tutsplus-i18n definiáltuk. Majd látni fogod, hogy ezt a kódbázis többi részében is használni fogjuk a bemutató során.
Végül ne felejtsd el frissíteni az Author és Author URI tageket, hogy egyezzen a neveddel és a weboldaladdal.
3. A menüelem bevezetése
Az első dolog, amit tenni akarunk, hogy bevezetünk egy almenü elemet az Eszközök menübe. Ennek érdekében felhasználjuk a WordPress által kínált add_submenu_page-et.
Vedd észre, hogy a __() függvényt használjuk, amiről a bemutató első bejegyzésében beszéltünk, ezzel garantáljuk, hogy a menüelem szövege megfelelően nemzetközivé legyen téve fordításhoz. Ezen kívül arra is figyelj, hogy a függvénynek átadott második paraméter ugyanaz, mint a bővítmény fejlécében megadott text domain.
1 |
<?php
|
2 |
|
3 |
add_action( 'admin_menu', 'tutsplus_i18n_add_submenu_page' ); |
4 |
/**
|
5 |
* Adds a new submenu item to the Tools menu that will display server
|
6 |
* information to the user.
|
7 |
*
|
8 |
* The menu item is internationalized so that we can provide proper translations
|
9 |
* for users who are outside of our own locale.
|
10 |
*/
|
11 |
function tutsplus_i18n_add_submenu_page() { |
12 |
|
13 |
add_submenu_page( |
14 |
'tools.php', |
15 |
__( 'Server Information', 'tutsplus-i18n' ), |
16 |
__( 'Server Information', 'tutsplus-i18n' ), |
17 |
'manage_options', |
18 |
'tutsplus-i18n-menu', |
19 |
'tutsplus_i18n_display_submenu_page'
|
20 |
);
|
21 |
|
22 |
}
|
Nos, ennyi még nem elég. Ha elolvastad a fent belinkelt dokumentációt, akkor tudhatod, hogy definiálnunk kell egy függvényt is, ami megjeleníti az oldal tartalmát. A fenti kódban a függvényre mint tutsplus_i18n_display_submenu_page hivatkoztunk, de ténylegesen még nem definiáltuk a függvényt.
Akkor gyerünk és csináljuk is meg. Olyan egyszerű lesz, amennyire csak lehet, így a bővítmény ténylegesen működni fog. Az oldal nem fog semmit sem megjeleníteni, de a bővítmény továbblép a függvényhez.
1 |
<?php
|
2 |
|
3 |
/**
|
4 |
* Displays the content of the page associated with the new Server Information
|
5 |
* menu item located in the Tools menu.
|
6 |
*/
|
7 |
function tutsplus_i18n_display_submenu_page() { |
8 |
echo ''; |
9 |
}
|
Ezen a ponton nyugodtan aktiválhatod a bővítményedet és megnézheted a tartalmat az Eszközök menüben. Ezen a ponton még semmit sem kellett lefordítani; ugyanakkor már látnod kellene egy új menüelemet.
És amikor rákattintasz az elemre, valami olyasmit kell kapnod, mint a fenti képernyőn. Üres. De ez így jó, mivel a következő részben fogunk ténylegesen információkat is elhelyezni a képernyőn.
4. A bővítmény képernyőtartalmának hozzáadása
Attól függően, hogy milyen más bővítményeket és milyen kódokat tanulmányoztál, amikor WordPress bővítményeken dolgoztál, kétféleképp láthattál olyan kódokat, amik egy bővítmény képernyőtartalmának megjelenítésével kapcsolatosak.
- Az egész HTML a fő bővítmény PHP-fájljába van beágyazva.
- A HTML egy külső fájlban van, ami a fő PHP fájlon keresztül került beillesztésre.
Én az utóbbit kultiválom, mivel úgy gondolom, hogy segít a kódot sokkal kezelhetőbben tartani. Ennek szemléltetése érdekében ezt a megközelítést fogjuk alkalmazni. Ezen a ponton hozz létre egy második állományt a bővítmény könyvtárban, és nevezd el tutsplus-i18n-ui.php néven.
Ezután add hozzá a következő kódot a fájlhoz. Ezt még részletesen megbeszéljük, mikor már lesz lehetőséged véleményezni.
1 |
<?php
|
2 |
/**
|
3 |
* The user interface for the plugin.
|
4 |
*
|
5 |
* @link http://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676
|
6 |
* @since 1.0.0
|
7 |
* @package TutsPlus_i18n
|
8 |
*/
|
9 |
|
10 |
?>
|
11 |
|
12 |
<div class="wrap"> |
13 |
|
14 |
<h1><?php echo esc_html( get_admin_page_title() ); ?></h1> |
15 |
<span class="description"><?php esc_html_e( 'Information about the environment in which WordPress is running.', 'tutsplus-i18n' ); ?></span> |
16 |
|
17 |
<table id="tutsplus-i18n-table"> |
18 |
<thead>
|
19 |
<tr>
|
20 |
<th>
|
21 |
<?php esc_html_e( 'Server Key', 'tutsplus-i18n' ); ?> |
22 |
</th>
|
23 |
<th>
|
24 |
<?php esc_html_e( 'Server Value', 'tutsplus-i18n' ); ?> |
25 |
</th>
|
26 |
</tr>
|
27 |
</thead>
|
28 |
<tbody>
|
29 |
|
30 |
<?php // This counter is used to determine even/odd rows for styles. ?> |
31 |
<?php $i = 0; ?> |
32 |
|
33 |
<?php foreach ( $_SERVER as $key => $val ) { // Input var okay. ?> |
34 |
|
35 |
<?php // Determine if we're on an odd or even row. ?> |
36 |
<?php $striped = ( $i % 2 ) ? 'even' : 'odd'; ?> |
37 |
|
38 |
<tr class="<?php echo esc_attr( $striped ); ?>"> |
39 |
<th>
|
40 |
<?php echo $key ; ?> |
41 |
</th>
|
42 |
<td>
|
43 |
<?php echo $val; ?> |
44 |
</td>
|
45 |
</tr>
|
46 |
|
47 |
<?php // Increase the counter by one. ?> |
48 |
<?php $i++; ?> |
49 |
|
50 |
<?php } ?> |
51 |
</tbody>
|
52 |
</table>
|
53 |
|
54 |
</div>
|
Figyeld meg, hogy létrehoztunk egy table elemet, ami minden kulcsot és értéket kiír, ami a PHP $_SERVER gyűjteményében található.
Talán a legfontosabb dolog, amit észre kell venned, hogy az esc_html_e()-t használjuk a nemzetköziesítő függvényekhez, és hogy a modulus operátor segítségével biztosítunk némi stílust a képernyőtartalomhoz.
5. A bővítmény stilizálása
Technikailag ezen a ponton a bővítmény már működni fog. Haladjunk egy lépéssel tovább, hogy biztosak legyünk benne, a képernyőképünk egy kicsit szebben fog kinézni.
Először is hozz létre egy tutsplus-i18n.css fájt a bővítmény könyvtárad gyökerében, és add hozzá a következő kódot:
1 |
#tutsplus-i18n-table { |
2 |
|
3 |
margin-top: 20px; |
4 |
border: 1px solid #ccc; |
5 |
padding: 10px; |
6 |
|
7 |
}
|
8 |
|
9 |
#tutsplus-i18n-table thead th { |
10 |
|
11 |
font-size: 15px; |
12 |
height: 40px; |
13 |
|
14 |
}
|
15 |
|
16 |
#tutsplus-i18n-table thead, |
17 |
#tutsplus-i18n-table tbody { |
18 |
font-family: 'Monaco', 'Menlo', 'Courier New', Monospace; |
19 |
}
|
20 |
|
21 |
#tutsplus-i18n-table tbody td { |
22 |
|
23 |
height: 30px; |
24 |
padding: 5px; |
25 |
|
26 |
}
|
27 |
|
28 |
#tutsplus-i18n-table tbody tr.odd { |
29 |
background: #fff; |
30 |
}
|
Ezután adj egy függvényt a bővítmény állományhoz, ami megfelelően rendezi ezt a fájlt, de csak a Szerverinformáció képernyőn:
1 |
<?php
|
2 |
|
3 |
add_action( 'admin_enqueue_scripts', 'tutsplus_i18n_dashboard_styles' ); |
4 |
/**
|
5 |
* Add styles to the table displayed in the Server Info page available from the
|
6 |
* Tools menu.
|
7 |
*/
|
8 |
function tutsplus_i18n_dashboard_styles() { |
9 |
|
10 |
// Only register the stylesheet if we're on the Server Information page.
|
11 |
if ( 'tools_page_tutsplus-i18n-menu' !== get_current_screen()->id ) { |
12 |
return; |
13 |
}
|
14 |
|
15 |
wp_enqueue_style( |
16 |
'tutsplus-i18n-css', |
17 |
plugin_dir_url( __FILE__ ) . '/tutsplus-i18n.css', |
18 |
array(), |
19 |
'1.0.0', |
20 |
'all'
|
21 |
);
|
22 |
|
23 |
}
|
Ezen a ponton a bővítménynek már egy kicsit szebb kinézetének kell lennie:
Nem, ez nem szükséges, de egy kicsit olvashatóbbá teszi a bővítményt, hogy lássuk, mit is csinálunk.
Mi az az objektum-orientált programozás?
Azok, akik követték a tanfolyamaimat és bemutatóimat, tudhatják, hogy jobban szeretem a kódomat objektum-orientált programozással elkészíteni, mint procedurális programozással.
Amikor egy új koncepciót tanítok, igyekszem a lecke fókuszát minél érthetőbbé tenni. Ez okból kifolyólag gyakran úgy látom, hogy a procedurális programozással valami ilyesmit megtanítani sokkal kevesebb zavart hoz létre, mint az objektum-orientált programozás használata.
Ez azért van, mert az objektum-orientált programozás feltételezi, hogy tisztában vagy bizonyos koncepciókkal, amiket nem érintettünk ennek a kódbázisnak az elkészítése során. És ha nem ez a helyzet, akkor nem fogunk tudni ennek a bemutatónak az elsajátítására koncentrálni.
Ezért a fő témánknak semmi köze az objektum-orientált programozáshoz, csak a nemzetközivé tételhez és egy WordPress projekt végső lokalizálásához.
Konklúzió
Ezen a ponton vagy egy letölthető, telepíthető és lefuttatható WordPress telepítésünk. Bár ez már nemzetközivé lett téve, még nincs semmilyen lokalizációs fájlunk, ami megmutatná, hogyan működik a folyamat. Letöltheted a bővítmény egy másolatát ezen oldal oldalsávjáról.
A következő bemutatóban megnézzük, hogyan tudjuk létrehozni a saját lokalizációs fájljainkat és szimulálni egy másik helyi nyelvet a fordításaink tesztelésére, valamint azt is megnézzük, hogy milyen eszközöket tudunk még használni.
Míg a következő részre vársz, ne felejtsd el megnézni, hogy mik érhetőek el az Envato Marketen, amik segíthetnek felépíteni a WordPress eszköztáradat, vagy hogy milyen példakódokat tudsz tanulmányozni, hogy még jobban elmélyedj a WordPressben.
Ha szeretnél többet is megtudni a WordPressről fejlesztői szemszögből, akkor jegyezd meg, hogy én kizárólag WordPressel dolgozom és gyakran írok is róla. Megtalálhatod az összes tanfolyamomat és bemutatómat a profiloldalamon, vagy követhetsz a blogomon és/vagy a Twitteren @tommcfarlin néven, ahol a WordPress kapcsán szoktam a szoftverfejlesztésről beszélni.
Szokás szerint kérlek ne habozz hozzászólni vagy kérdezni a lenti hozzászólásoknál.
Hivatkozások
