WordPress-temahandledning för nybörjare – Del 8: Översättning
I den här lektionen lär vi oss om hur översättning (eller annars känd som i18n) i WordPress fungerar och hur man gör nödvändiga justeringar i våra mallar. Vi kommer också att lära oss hur du ställer in PoEdit korrekt för att skapa en översättningsfil för vårt tema, redo att översättas till olika språk.
Varför bry sig om att lägga till översättningsstöd?
Alla teman, åtminstone sådana som blir offentliga för användning av andra än utvecklaren, bör vara tillgängliga för översättning. Detta kallas internationalisering (i18n i korthet), och låter människor översätta texter du lägger till i ditt tema till ett annat språk.
Så det fungerar är att du som temaförfattare eller plugin-utvecklare slår in alla dina texter (som "Läs mer", "Inga inlägg") i vissa funktioner. Dessa funktioner gör att WordPress kan plocka upp dessa och injicera en översättning om den finns Inuti ditt tema (eller plugin) kan du lägga till filer av en viss filtyp för varje översatt språk, eller se till att andra människor kan skapa sin egen översättning på sitt eget språk.
Detta är mycket användbart för personer som vill använda WordPress och ditt tema (eller plugin) på ett annat språk än ursprungsspråket det skrevs på (som vanligtvis är engelska). Men det kan också användas för att ändra vissa texter till något annat inom samma språk.
Om du är intresserad av ämnet har WordPress Codex en lång och bra dokumentationsguide om i18n för utvecklare.
Implementering av i18n i vårt tema
Vi har redan gjort den första delen i det föregående steget i denna temahandledningsserie, där vi lagt load_theme_textdomaintill vårt temas inställningsfunktion. Om du har glömt det här är vad vi har lagt till:
load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');Det första argumentet är handtaget, detta är en unik sträng som du kommer att använda för att gruppera alla texter som hör till ditt tema. Du kommer att upprepa detta handtag varje gång du gör en text översättbar. Det andra argumentet talar om för WordPress var översättningsfilerna finns. Vi definierade dem att ligga i en undermapp ‘ lang‘ i vår temakatalog.
Oroa dig inte om den här mappen inte finns eller inte innehåller några filer – ingenting kommer att krascha. Om WordPress inte hittar mappen eller de korrekta översättningsfilerna kommer den som standard tillbaka till de texter vi har i temat.
Nästa steg är att gå igenom all vår kod och hitta alla textutdata som borde vara översättbara. Det är bra att se till att vi täcker absolut alla texter. Ingenting är mer irriterande än att använda ett tema eller plugin där författaren hårdkodade texter som gör det omöjligt att översätta eller ändra på något sätt.
Hur man gör texter översättbara
Det vi gör med alla texter är att placera dem i en av WordPresss gettext-funktioner, som oftast är _e()eller __(). Den första är ett understreck med "e" som används när du vill eka texten samtidigt. Det andra är två understreck och används när du inte vill eka det utan lagra det eller använda det i en variabel.
WordPress har fler gettext-funktioner som tjänar mer specifika syften, till exempel esc_html__(), _n(), _x()och mer. Men vi kommer inte att gå in i detalj för dem i denna handledning.
Gettext-funktionerna tar två parametrar; först själva texten, och för det andra handtaget du definierade i load_theme_textdomain. I det här fallet är det ‘ wptutorial‘.
Till exempel, om du har något sånt här:
echo 'Read more';Du måste ersätta den med:
_e('Read more', 'wptutorial');Och på liknande sätt för att lagra i en variabel;
$myvariable = 'Read more';Det måste skrivas så här:
$myvariable = __('Read more', 'wptutorial');Nu måste vi hitta alla texter i våra mallar! Om du har följt denna handledning till ett "T" är det inte många. Vi har några strängar i index.phpoch några i single.php.
Lägger till översättningsstöd i vårt tema
Låt oss börja med index.phpoch hitta meddelandet "Inga inlägg, förlåt" som vi lade till om slingan inte innehöll några inlägg. Vi lindar in den här texten _e()eftersom vi fortfarande vill upprepa den. Så det här är vad vi får:
Eftersom du använde _e()bör du inte se någon förändring när du trycker på uppdatera på framsidan eller arkivet. Men under huven är denna text nu översättbar!
Vi har samma text i vår single.phpoch page.php. Uppdatera dessa på samma sätt som vi gjorde i index.php. Vi lade till några fler texter i single.php, så här är hur det ser ut efter att ha gjort alla texter översättbara:
Från och med nu alla texter vi lägger till i vårt tema ser vi till att slå in dem inuti __()eller _e().
Översättningsfiler
Det finns två sätt att tillhandahålla översättningsfiler till ditt tema;
- Ange en
.pot-fil - eller tillhandahålla ett par
.pooch.mofiler.
-filen .potrekommenderas för ett tema som du säljer eller ger bort till andra användare, för med den här filen är det väldigt enkelt att skapa en översättningsfil för ett nytt språk. Det är dock inte lätt (eller gratis) att skapa en av dessa filer. Om du är bekant med WP-CLI (kommandorad WordPress) eller Grunt kan du följa riktlinjerna i WordPress dokumentation här. Om inte kan det andra alternativet vara något för dig.
Filerna .pooch .moarbeta tillsammans. WordPress kräver en .moför översättning av texter, men den här filen är inte läsbar för människor. Därför har vi .pofilen som är läsbar för oss. Med rätt programvara genererar den .mofilen när du gör ändringar.
Nackdelen med .pooch .mofiler är att du behöver generera ett par för varje språk, och när du väl har översatt det till ett språk finns det inget enkelt sätt att tömma alla översättningar för att skapa ett nytt språk.
Du behöver ett program för att redigera .potoch .pofiler. Den vanligaste är PoEdit. PoEdit är gratis och fungerar för både iOS och Windows. Men vissa avancerade funktioner (som att generera en .pot-fil) kräver tyvärr en betalversion. Vi kommer att använda gratisversionen för att skapa en .pofil för vårt tema.
Ladda ner och installera PoEdit för att följa resten av handledningen.
Skapa en .po-fil för vårt tema med PoEdit
Att skapa en översättningsfil för engelska brukar inte vara meningsfullt när alla texter i vårt tema är engelska i alla fall, men för den här handledningen kommer jag att göra en engelsk översättningsfil.
1 Öppna PoEdit och klicka på Arkiv > Ny…
2 Du kommer att bli ombedd att välja ett språk. Välj önskat språk, till exempel engelska.
3 Tryck på Spara (Ctrl+S). Leta reda på din temamapp och ange /lang/undermappen. (Om du inte skapade det i förra steget, skapa det nu). Namnet på din fil är avgörande. För teman bör den bara heta din språkkod. För amerikansk engelska skulle det vara en_US, för norska är det nb_NO. Googla eller hänvisa till den här översikten för att hitta din språkkod. Vi ska namnge det en_US.po.
4 I menyn klickar du på Katalog > Egenskaper…
5 På den första fliken kan du fylla i viss information som ditt projekt (tema) namn, eller ändra språk – men det är inte nödvändigt. Jag rekommenderar att du behåller teckenuppsättning i UTF-8 eftersom det är detta vi skriver för WordPress.
6 Klicka på fliken Källor sökvägar. Här måste du definiera vilka mappar filen ska leta efter för översättningsbara texter. Sökvägarna är relativa, och eftersom vi redan har sparat den i en undermapp till vårt tema, vet vi att den måste gå upp en katalog. Tryck på +-knappen under sökvägsrutan och välj Lägg till mappar. Välj din temakatalog. Detta bör lägga till ett sökvägselement "." (gå upp en mapp). Dubbelkolla att "Bassökväg" refererar till din rottemakatalog.
7 Klicka på nästa flik, "Källor nyckelord". Här måste du berätta för PoEdit vilka funktioner du har använt för översättningsbara texter (till exempel __, _e, esc_html_eoch så vidare). Klicka på +-knappen för att lägga till varje funktion och skriv dem utan "()". Det är upp till dig om du vill täcka alla dina baser och lägga till alla WordPresss gettext-funktioner, men i den här handledningen vet vi att vi bara har använt två. Så vi lägger till två element; __()och _e(). Lägg till funktionerna utan någon parentes.
8 Tryck på OK.
9 Allt som återstår är att be PoEdit att skanna de angivna sökvägarna efter funktioner med hjälp av __()och _e()(eller vilket du angav). Du gör detta genom att trycka på knappen "Uppdatera från kod". (Windows-versionen har texten på knappen men iOS-versionen gör det inte – så för iOS måste du trycka på knappen som vanligtvis är den sista i verktygsfältet; en filikon med en "gör om"-ikon överst. Klicka på knappen "Uppdatera från kod" och du bör se alla texter listade med ett gränssnitt för översättning:
Trevlig!
Genererade översättningsfiler
Nu kan du använda PoEdit för att översätta varje sträng, men vi kommer inte att göra det här eftersom det inte är någon idé att översätta engelska till engelska. Kom ihåg att trycka på Spara för att uppdatera och generera en .mofil, och varje gång du lägger till ytterligare en text i ditt tema måste du trycka på knappen "Uppdatera från kod" igen. Då visas de nya ändringarna i dina mallar.
Om du kollar /langundermappen i din temakatalogmapp bör du se två filer; filen .povi nyss skapade, och en .mofil med samma namn, genererad genom att vi sparar i PoEdit.
Du kan göra en kopia av en_US.pofilen och byta namn på den till en annan språkkod. Men kom ihåg att PoEdit inte erbjuder ett enkelt sätt att rensa alla översatta strängar; du måste rensa en efter en. Detta är anledningen till att detta suger för användare som vill översätta ditt tema till ett annat språk. Så om du har möjlighet att skapa en .potfil bör du göra det.
WordPress kommer att söka efter översättningsfil beroende på vilket språk som definieras i admin-menyn Inställningar > Webbplatsspråk. Om du lade till ett annat språk än engelska kan du testa det genom att byta språk på webbplatsen och se om din översättning visas!