Internasjonalisering av WordPress-prosjekter Et praktisk eksempel, del 1

I denne serien tar vi en titt på hvordan vi internasjonaliserer våre WordPress-prosjekter. For de som bare går med oss, anbefaler jeg at du vurderer det første innlegget i serien, da vi ser på alle funksjonene som tilbys i WordPress for å hjelpe oss med å internasjonalisere våre strenger.

Og selv om det er nyttig, hjelper det fortsatt ikke med å forklare hva internasjonalisering er. Som vi sa i det første innlegget:

Internationalisering er prosessen med å utvikle plugin slik at den lett kan oversettes til andre språk.

Gitt at WordPress driver omtrent 25% av nettet, og at nettet ikke er lokalt til opprinnelseslandet, er det fornuftig å sikre at arbeidet vi produserer kan oversettes til andre steder.

For å være klar gjør dette ikke betyr at du som utvikler er ansvarlig for å oversette alle strengene i kodebase til de forskjellige språkene som kundene dine kan bruke. I stedet betyr det at du bruker riktige APIer for å sikre at noen andre kan komme sammen og gi oversettelser for dem.

Før vi går videre, husk:

  • Internationalisering, ofte referert til som i18n, er prosessen der vi bygger vår programvare slik at den kan oversettes.
  • Lokalisering er når vi tar internasjonaliserte strenger og deretter oversetter dem til riktig sted.

Lett nok til å forstå på dette punktet, ikke sant? Men det er mye informasjon der ute for hvordan du gjør dette, og det kan være egentlig vanskelig å skille signalet fra støyen, spesielt hvis du er ny for å gjøre dette.

Men det er det denne serien av opplæringsmål tar sikte på: For å sikre at du er bevæpnet med alt du trenger å vite for å kunne internasjonalisere WordPress-prosjektet ditt, forstå hva du gjør, og forstå hvordan du skal teste det.

I løpet av de neste to artiklene skal vi lage en enkel plugin som er riktig internasjonalisert. Videre skal vi se på hvert eneste stykke plugin som går inn i å internasjonalisere kodebase for å sikre at vi forstår alt.

I neste artikkel tar vi en titt på et av verktøyene som jeg har funnet mest nyttige for å lokalisere arbeidet ditt, og hvordan du kan teste at lokaliseringen fungerer som den skal.

Med det sagt, la oss gå videre og komme i gang.

Starter

For denne spesielle opplæringen skal jeg bruke den nyeste versjonen av WordPress som er tilgjengelig via Subversion. Hvis du har en lokal kopi av WordPress installert, og det er en nylig versjon, er det flott.

Hvis du imidlertid vil leve på blødningskanten, kan du ta en titt på denne veiledningen for å få den nyeste versjonen av koden.

Til slutt kommer det ikke til å påvirke arbeidet vi gjør, men det er en mulighet til å strekke utviklingsferdighetene litt.

Forbereder plugin

Med en lokal kopi av WordPress satt opp på maskinen din, er du klar til å begynne å jobbe med et plugin. Merk at i forbindelse med denne opplæringen skal vi bygge en utrolig grunnleggende plugin.

Hensikten er ikke å forstå hvordan du bygger et plugin, da vi har dekket det i andre kurs og i andre opplæringsprogrammer; Det er imidlertid å forstå de finere nyansene som går inn i internasjonalisering av kodebase slik at du forstår hva det er som du gjør når du fortsetter å gå videre med det arbeidet du skal gjøre i nåværende eller fremtidige prosjekter.

1. Opprett Plugin Directory og Bootstrap

Finn først wp-innhold / tillegg katalog og opprett en katalog som heter tutsplus-i18n. Dette er katalogen der vi skal lagre våre plugin-filer. Det er passende navn Tuts + Internationalisering.

Gå videre og opprett en enkelt fil i katalogen som vil bli brukt til å starte plugin. Ring filen tutsplus-i18n.php.

Før vi går videre, må vi bestemme hva dette pluginet skal gjøre. Vi vet at vi må vise noe til brukeren slik at vi kan øve internasjonalisering (og lokalisering). Dette betyr at det skal være en UI-komponent til plugin.

For det formål, la oss lage en enkel plugin som vil introdusere et nytt menyelement under Verktøy Meny. Vi ringer undermenyelementet Serverinfo, og vi bruker data som er lett tilgjengelig i PHP for å vise en innholdsskisse på en brukervennlig måte.

Kanskje dette kunne brukes til å sende en feilsøkingslogg til en leverandør hvis noe skulle gå galt med et plugin.

2. Definer plugin

Jeg antar at du er kjent med hvordan du lager et grunnleggende plugin. Hvis ikke, har vi en rekke opplæringsprogrammer og kurs tilgjengelig om hvordan du gjør det (som allerede nevnt). Codex har også litt informasjon om hvordan du kommer i gang, også.

Hvis du ikke er kjent med hvordan du gjør det, anbefaler jeg at du sjekker ut de ovennevnte ressursene. Med det sagt, la oss gå videre og definere grunnleggende for plugin-modulen.

For å komme i gang må vi definere pluginheader. Åpen tutsplus-i18n.php og sørg for at den inneholder følgende informasjon:

Når du er ferdig, lagre filen og naviger til plugins skjerm i WordPress. Der bør du se en oppføring for pluginet du nettopp har opprettet. 

Gitt, det vil ikke gjøre noe på dette punktet, men du kan se at vi er på rett spor. Legg merke til at vi har lagt til en tagg som du ikke ofte ser med WordPress-prosjekter, og det er Tekstdomenet stikkord. Dette er hva vi skal bruke for å hjelpe internasjonalisere pluginet vårt.

Her er spesifikke detaljer på denne taggen:

Hvis du oversetter et plugin eller et tema, må du bruke et tekstdomene for å angi all tekst som tilhører det aktuelle plugin. Dette øker overførbarheten og spiller bedre med allerede eksisterende WordPress-verktøy. Tekstdomenet må samsvare med "slug" i plugin.

Tydeligvis har vi definert vårt tekstdomen som tutsplus-i18n. Du vil se dette brukt over resten av kodebasen i resten av opplæringen.

Til slutt, ikke glem å sørge for at du oppdaterer Forfatter og Forfatter URI merker for å matche navnet ditt og hjemmesiden din også.

3. Innfør menypunktet

Det første vi ønsker å gjøre er å introdusere en undermenyelement til Verktøy Meny. For å gjøre dette, vil vi dra nytte av add_submenu_page krok tilbys av WordPress.

Legg merke til at vi bruker __ () funksjon som vi diskuterte i første innlegget i denne veiledningen for å sikre at menyelementets tekst er riktig internasjonalisert for oversettelse. Vær også oppmerksom på at den andre parameteren gikk inn i funksjonen, er den samme som tekstdomenet definert i pluginens overskrift.

Nå er dette ikke helt nok. Hvis du har lest den sammenhengende dokumentasjonen ovenfor, vet du at vi også må definere en funksjon som vil vise innholdet på siden. I koden ovenfor har vi henvist funksjonen som tutsplus_i18n_display_submenu_page, men vi har ikke faktisk definert funksjonen.

La oss gå videre og gjøre det nå. Vi gjør det enkelt, slik at pluginet faktisk skal utføres. Siden vil ikke vise noe, men plugin vil fortsette å fungere.

På dette tidspunktet kan du aktivere pluginet ditt og se på innholdet under Verktøy Meny. Ingenting bør oversettes til dette punktet; men du bør se et nytt menyelement.

Og når du klikker på elementet, bør du se noe som skjermen ovenfor. Det er tomt. Men det er greit fordi i neste avsnitt skal vi faktisk plassere litt informasjon på skjermen.

4. Legg til pluginens skjerm

Avhengig av hvilke andre plugins og hvilken annen kode du har studert når du arbeider med WordPress-plugins, har du sett kode skrevet på en av to måter (eller kanskje begge veier, egentlig) som det gjelder å vise et plugin-skjermbilde.

  1. Alle HTML-kodene er hardkodede i hovedprogrammets PHP-fil.
  2. HTML er inkludert i en ekstern fil som er inkludert via kjernen PHP-filen.

Jeg er en fan av sistnevnte fordi jeg tror det bidrar til å gjøre koden mer vedlikeholdsbar. Så for dette eksemplet skal vi følge denne tilnærmingen. På dette tidspunktet lager du en andre fil i plugin-katalogen din og ringer den tutsplus-i18n-ui.php

Deretter legger du til følgende kode i filen. Vi diskuterer det mer detaljert like etter at du har hatt mulighet til å se gjennom det.

 

$ val) // Input var ok. ?>

Legg merke til at vi lager en bord element som vil vise alle nøklene og verdiene som finnes i PHP $ _SERVER samling. 

Kanskje de viktigste tingene vi ser er de som vi bruker esc_html_e () for våre internasjonaliseringsfunksjoner, og vi bruker moduloperatøren for å hjelpe oss med å gi noen styling til skjermen.

5. Styling pluggen

Teknisk, på dette tidspunktet vil pluginet fungere. La oss ta det et skritt videre for å sikre at skjermen ser litt finere ut.

Først opprett tutsplus-i18n.css filen i roten til plugin katalogen din og legg til følgende kode:

# tutsplus-i18n-bord margin-top: 20px; grense: 1px solid #ccc; polstring: 10px;  # tutsplus-i18n-bordet th font-size: 15px; høyde: 40px;  # tutsplus-i18n-bordet, # tutsplus-i18n-table tbody font-familie: 'Monaco', 'Menlo', 'Courier New', Monospace;  # tutsplus-i18n-table tbody td høyde: 30px; polstring: 5px;  # tutsplus-i18n-table tbody tr.odd bakgrunn: #fff;  

Deretter legger du til en funksjon i pluginfilen som vil skikkelig gjenkjenne denne filen, men bare på Serverinformasjon skjerm:

id) return;  wp_enqueue_style ('tutsplus-i18n-css', plugin_dir_url (__FILE__). '/tutsplus-i18n.css', array (), '1.0.0', 'alle');  

På dette tidspunktet bør pluggen ha en litt finere skjerm:

Nei, dette er ikke nødvendig, men det hjelper til med at pluggen ser litt mer lesbar i sammenheng med hva vi gjør.

Hva om objektorientert programmering?

For de som har fulgt kursene mine og mine opplæringsprogrammer, vet du at jeg foretrekker å skrive koden min i objektorientert programmering i stedet for i prosessormering.

Når det gjelder å lære et nytt konsept, prøver jeg å gjøre fokus for en leksjon så tydelig som mulig. Til det formål finner jeg ofte at det å bruke prosessorprogrammering for å lære noe slikt, skaper mindre forvirring enn når man bruker objektorientert programmering.

Det vil si at objektorientert programmering antar at du har en klar forståelse av visse konsepter som du kanskje ikke har når du går gjennom denne kodebasen. Og hvis det er tilfelle, så kommer du ikke til å kunne fokusere på kjernematerialet i denne opplæringen.

Dermed er de primære emnene som vi tar sikte på å vurdere, ikke noe å gjøre med objektorientert programmering, men med å forstå hvordan man internasjonaliserer og til slutt lokaliserer et WordPress-prosjekt.

Konklusjon

På dette tidspunktet har vi et funksjonelt plugin som kan lastes ned, installeres og kjøres innenfor en WordPress-installasjon. Selv om det er internasjonalisert, har vi ingen lokaliseringsfiler som skal vises hvordan prosessen fungerer. Du kan laste ned en kopi av pluginet fra sidefeltet på denne siden.

I oppfølgingsopplæringen skal vi se hvordan vi kan lage lokaliseringsfiler og simulere en annen lokal for å teste oversettelsene våre, og vi vil også se på verktøy som er tilgjengelige for oss å bruke.

Mens du venter på neste avdrag, ikke glem å se hva vi har tilgjengelig i Envato Market for å hjelpe deg med å bygge ut ditt voksende sett med verktøy for WordPress eller for eksempel kode for å studere og bli mer velbevandret i WordPress.

Hvis du er interessert i å lære mer om WordPress fra et utviklingsperspektiv, merk at jeg bare jobber med WordPress og ofte skriver om det. Du kan fange alle mine kurs og opplæringsprogrammer på min profilside, og du kan følge meg på bloggen min og / eller Twitter på @tommcfarlin hvor jeg snakker om programvareutvikling i forbindelse med WordPress.

Som vanlig, ikke nøl med å legge igjen noen kommentarer eller spørsmål i kommentarfeltet nedenfor.

referanser

  • Plugin Header
  • Tekstdomenet
  • admin_menu
  • add_submenu_page
  • __ ()
  • esc_html_e ()
  • admin_enqueue_scripts
  • wp_enqueue_style