Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

WordPress projektek nemzetközivé tétele: Egy gyakorlati példa, 1. rész

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Internationalizing WordPress Projects.
Internationalizing WordPress Projects: The Introduction

Hungarian (Magyar) translation by Szabó Péter (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ű.

The most recent copy of WordPress installed via Subversion

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.

The basic file of the plugin

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:

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.

The Tuts Internationalization plugin visible in the Installed Plugins screen

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.

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.

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.

The new Server Information menu item

É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.

  1. Az egész HTML a fő bővítmény PHP-fájljába van beágyazva.
  2. 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.

The initial UI for the Tuts Internationalization Plugin

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.

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:

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:

Ezen a ponton a bővítménynek már egy kicsit szebb kinézetének kell lennie:

The final UI of the plugin for this version of the tutorial

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.