Käännä Elementor- ja Divi-mallipohjat ulkoasua rikkomatta

Teit kaiken oikein. Ostit premium-teeman, löysit .po-tiedoston, käänsit sen huolellisesti ja latasit .mo-tiedoston kielikansioosi. Teeman otsikon merkkijonot päivittyvät oikein. Alatunniste näkyy espanjaksi. WooCommerce-kassasi on lokalisoitu. Mutta sitten avaat etusivun, ja jokainen Elementorilla rakennettu otsikko, painike ja tekstilohko on edelleen englanniksi.

Tarkistat .po-tiedoston. Näet englanninkieliset merkkijonot koodissa. Käännät uudelleen. Mikään ei muutu. Tyhjennät välimuistit. Mikään ei muutu. Vakuutat itsellesi, että jokin on rikki, kunnes joku foorumilla huomauttaa ystävällisesti: Elementor (ja Divi, ja Beaver Builder, ja Bricks) eivät tallenna sisältöä .po-tiedostoihin. Ne eivät ole koskaan tallentaneet. Olet taistellut ongelman kanssa, jota ei voi ratkaista käyttämälläsi lähestymistavalla.

Tämä opas selittää, miksi sivunrakentajan sisältö on arkkitehtuuriltaan erilainen kuin teeman ja lisäosan sisältö, kaksi tapaa sen kääntämiseen, ja miten widgetien merkintäkieli säilytetään ehjänä käännöksen aikana, jotta huolellisesti suunnitellut ulkoasusi eivät hajoa.

Miksi Elementor ja Divi eivät käytä .po-tiedostoja

.po-tiedostot tallentavat koodissa olevia merkkijonoja – __( 'Shop', 'mytheme' ) -kutsuja, jotka ovat hajallaan PHP-mallipohjissa. Rakennustyökalu WP-CLI voi poimia nämä merkkijonot .pot-mallipohjaan, kääntäjät työskentelevät .po-tiedostojen parissa, ja käännetyt .mo-tiedostot ladataan ajonaikaisesti.

Sivunrakentajan sisältö on erilaista. Kun kirjoitat "Welcome to our store" Elementor-otsikkowidgetiin, kyseinen teksti ei ole missään PHP-tiedostossa. Se tallennetaan JSON-muodossa (Elementor) tai lyhytkoodiblokkina (Divi) wp_postmeta-tauluun, liitettynä siihen postaukseen, johon sen sijoitit.

Missä sivunrakentajan sisältö todellisuudessa sijaitsee

Elementor tallentaa kunkin sivun widget-puun postmetaan avaimella _elementor_data. Avaa mikä tahansa postaus tietokannasta, ja löydät JSON-taulukon, joka kuvaa jokaisen osion, sarakkeen ja widgetin asetuksineen ja sisältöineen suoraan rivillä:

{
  "id": "a1b2c3",
  "elType": "widget",
  "widgetType": "heading",
  "settings": {
    "title": "Welcome to our store",
    "size": "xl",
    "header_size": "h1"
  }
}

Divi tallentaa sivunsa sisällön lyhytkoodeina, jotka on upotettu post_content-kenttään:

[et_pb_section][et_pb_row][et_pb_column type="4_4"]
  [et_pb_text]Welcome to our store[/et_pb_text]
[/et_pb_column][/et_pb_row][/et_pb_section]

Bricks, Beaver Builder ja Oxygen noudattavat samaa kaavaa omalla formaatillaan. Mitkään .po / .mo -tiedostot eivät koskaan käsittele tätä sisältöä.

Mitä .po-tiedostoissa todella on

Sivunrakentajan lisäosalla itsellään on käyttöliittymän merkkijonoja – editorin painiketekstejä, virheilmoituksia, hallintapaneelin ilmoituksia. Nämä ovat .po-tiedostoissa ja ne kääntyvät .mo-tiedostojesi kautta kansiossa wp-content/languages/plugins/. Tämä on yleensä syy, miksi ihmiset hämmentyvät: he kääntävät "Elementor"-merkkijonoja ja näkevät editorin käyttöliittymän espanjaksi, mutta todellinen sisältö, jonka he rakensivat näillä widgeteillä, pysyy englanniksi.

Tämä ero on myös puolet lippujen perimmäinen syy meidän vianmääritysoppaassamme käännösten puuttumisesta – lukija odottaa .mo-tiedostojen vaikuttavan etusivulla näkyvään sisältöön, mutta sisältö on tietokannassa, ei koodissa.

Mitä .po-tiedostot todella kattavat sivunrakentajaa käyttävällä sivustolla

Antakaa minun vetää selkeä raja näiden kahden välille, jotta tiedätte tarkalleen, mitä kukin tiedostotyyppi käsittelee.

.po- / .mo-tiedostot kääntävät

• Teeman mallipohjien merkkijonot: get_template_part, kovakoodattu teksti header.php-, footer.php- ja functions.php-tiedostoissa.
• Lisäosien käyttöliittymän merkkijonot: WooCommerce-kassa, Yoast-hallintapaneelin otsikot, Contact Form 7 -kenttien otsikot.
• Sivunrakentajan lisäosan käyttöliittymä: Elementor-editorin painikkeet, Divi-tallennusvahvistusviestit.
• Dynaamiset merkkijonot, jotka lisäosat toistavat etusivulle: WooCommerce "Lisää ostoskoriin", "Loppu varastosta", ostoskorin summat.

.po- / .mo-tiedostot EIVÄT käännä

• Elementor-widgeteihin kirjoitetut otsikko-, kappale- ja painiketekstit.
• Kuvaotsikot, hiiren yli -tehosteet, harmonikka-otsikot Divi-moduulien sisällä.
• Sisältö uudelleenkäytettävissä mallipohjissa, globaaleissa osioissa, tallennetuissa lohkoissa.
• Mukautetut CSS-otsikot tai sisäiset skriptit rakentajawidgetien sisällä.

Tästä syystä teemakirjoittajien käännösohjeet ovat teknisesti oikein, mutta usein hyödyttömiä loppukäyttäjille. Meidän oppaamme WordPress-teemojen lokalisoinnista kattaa teemapuolen perusteellisesti – tämä artikkeli jatkaa siitä, mihin edellinen päättyy.

Kaksi tapaa sivunrakentajan lokalisointiin

Sivunrakentajan sisällön kääntämiseen on tasan kaksi tapaa, ja molemmilla on todellisia kompromisseja.

Tapa yksi: Monista sivut kielittäin

Käytä monikielistä lisäosaa, kuten WPML:ää, Polylangia tai TranslatePressiä. Se luo kopion jokaisesta sivusta kullekin kielelle. Elementorissa monistat koko ulkoasun ja vaihdat tekstin jokaisessa kopiossa. Divissä kopioit lyhytkoodiblogin ja käännät tekstin tagien välistä.

Plussat: Jokaisella kielellä voi olla itsenäisesti suunnitellut ulkoasut (hyödyllistä, kun käännetty teksti on pidempi ja rikkoo alkuperäisen suunnittelun). Täysi yhteensopivuus sivunrakentajan visuaalisen editorin kanssa.

Miinukset: Lineaarinen skaalautuminen – 5 kieltä tarkoittaa 5 kertaa enemmän asettelutyötä. Kaikki suunnittelumuutokset on tehtävä 5 kertaa. Tietokanta kasvaa nopeasti. Välimuistin hallinta vaikeutuu.

Tapa kaksi: Merkkijonojen käännöskerros

Jotkut lisäosat (Polylang Pro, WPML:n String Translation -moduuli, TranslatePress) voivat tuoda esiin yksittäisiä merkkijonoja sivunrakentajan widgeteissä käännettäväksi ja sitten vaihtaa ne renderöinnin yhteydessä. Ylläpidät yhtä ulkoasua, ja lisäosa kääntää merkkijonot paikoilleen.

Plussat: Yksi totuuden lähde ulkoasulle. Suunnittelumuutokset vaikuttavat kaikkialle.

Miinukset: Vähäisempi joustavuus, kun käännetyn tekstin pituus muuttuu dramaattisesti. Jotkut widgetit (monimutkaiset, joissa on sisäkkäistä sisältöä, dynaamisia listoja, lomakkeita) eivät paljasta merkkijonoja selkeästi. Suorituskykykustannus renderöintiä kohti.

Meidän Polylang vs WPML vs TranslatePress -vertailumme käsittelee kunkin lisäosan kompromisseja yksityiskohtaisemmin.

Widgetien merkintäkielen turvallinen säilyttäminen käännöksen aikana

Minkä tahansa polun valitsetkin, käännetyn sisällön on säilytettävä rakentajan rakenteellinen merkintäkieli. Jos kääntäjäsi poistaa Elementor-lyhytkoodin, korvaa data-attribuutin tai järjestää sisäkkäisiä tageja uudelleen, widget renderöityy rikkinäisenä.

Elementorin vaaravyöhykkeet

Elementor-widgetit upottavat lyhytkoodeja ja dynaamisia tageja tekstiasetusten sisälle. Otsikkowidgetin otsikkokenttä saattaa sisältää:

Welcome to <strong>our</strong> [user_name] store

Tuo [user_name] on dynaaminen tagi – Elementor korvaa sen kirjautuneen käyttäjän nimellä renderöinnin yhteydessä. Jos käännös turmelee sen, käyttäjille näytetään kirjaimellinen "[user_name]".

Painikkeiden sisällä olevat kuvakkeet käyttävät luokka-attribuutteja, joita ei saa kääntää. Kuvan vaihtoehtoinen teksti tallennetaan erillään kuvan URL-osoitteesta. Sarakeasettelut käyttävät näyttöpistekohtaisia asetuksia (title_mobile, title_tablet), jotka vaativat yksilöllistä käsittelyä.

Divin lyhytkoodien sisäkkäisyys

Divi-lyhytkoodit ovat syvästi sisäkkäisiä: [et_pb_section][et_pb_row][et_pb_column][et_pb_text]. Kääntäjä, joka käsittelee blobia pelkkänä tekstinä, koodaa hakasulkeet, kääntää attribuuttien arvoja tai menettää sulkevat tagit. Mikä tahansa näistä korruptoi moduulin, ja Divi kieltäytyy renderöimästä sitä.

Turvallinen malli

Kummankin rakentajan tapauksessa käännöksen on:

1. Jäsentää widgetin formaatti (JSON Elementorille, lyhytkoodi-AST Diville).
2. Kulkea puuta pitkin tunnistaen vain käyttäjälle näkyvät tekstikentät.
3. Lukita lyhytkoodit, dynaamiset tagit, HTML-attribuutit ja inline-CSS.
4. Lähettää vain tekstipinnat kääntäjälle kontekstin kanssa.
5. Lisätä käännetty teksti takaisin alkuperäiseen rakenteeseen.

Tämä on sama periaate, jota moottorimme soveltaa .po-tiedostoihin. Opas .po-tiedostojen kääntämiseen rikkomatta koodimuuttujia käy läpi %s- ja paikkamerkkikaavat yksityiskohtaisesti – sivunrakentajan vastaava ovat lyhytkoodit ja dynaamiset tagit.

Hybridi työnkulku, joka todella toimii

Useimmille tiimeille käytännöllinen vastaus on molempien lähestymistapojen yhdistäminen.

Vaihe 1: Käännä teeman ja lisäosien käyttöliittymä .po-tiedostojen kautta

Vie .pot-tiedostot teemastasi ja keskeisistä lisäosista (WooCommerce, Yoast, sivunrakentajan käyttöliittymä). Käännä ne kerran pilvipalvelussa toimivalla kääntäjällä, joka kunnioittaa .po-formaattia. Pudota käännetyt .mo-tiedostot wp-content/languages/-kansioon. Tämä hoitaa 80 % sivustosi käyttöliittymän merkkijonoista lähes ilman jatkuvaa ylläpitoa.

Vaihe 2: Valitse monikielinen lisäosa dynaamiselle sisällölle

Asenna Polylang tai WPML postaus-, sivu- ja tuotesisällölle. Määritä URL-rakenne (/es/, /fr/) ja hreflang-tagit. Tämä tarjoaa sinulle infrastruktuurin kielikohtaiselle tietokannan sisällölle.

Vaihe 3: Monista sivunrakentajan mallipohjat valikoivasti

Korkean liikenteen laskeutumissivuille, etusivuille ja kulmakivimarkkinointisisällölle monista sivu jokaiselle kielelle ja käännä widgetit manuaalisesti. Saat täyden suunnittelun hallinnan siellä, missä sillä on merkitystä.

Vaihe 4: Käytä merkkijonokäännöstä toistuville lohkoille

Globaaleille osioille, uudelleenkäytettäville mallipohjille ja jokaisella sivulla näkyville alatunnisteen toimintakehotteille (CTA) käytä monikielisen lisäosasi merkkijonokäännösominaisuutta. Päivitä yhdessä paikassa, vaihda renderöinnin yhteydessä.

Vaihe 5: Suorita laaduntarkistukset

Käännetyn sivunrakentajan sisällön tulisi renderöityä ilman asettelun muutoksia. Pidemmät kielet (saksa, venäjä) rikkovat painikkeiden leveyksiä. Lyhyemmät kielet (kiina, japani) jättävät epämukavaa tyhjää tilaa. Testaa jokainen mallipohja kielikohtaisesti ennen julkaisua.

Yleisiä sudenkuoppia ja miten ne vältetään

Muutamia ansoja, jotka ilmenevät jokaisessa sivunrakentajan lokalisointiprojektissa.

Kuvien vaihtoehtoinen teksti ei käänny

Sekä Elementor että Divi tallentavat alt-tekstin widget-instanssikohtaisesti, eivät mediakirjastoon. Alkuperäisen kuvan kääntäminen ei käännä alt-tekstiä jokaisessa sitä käyttävässä widgetissä. Päivitä alt-teksti jokaisella monistetulla sivulla.

Lomakkeet ja mukautetut kentät

Sivunrakentajan widgeteihin upotetuilla yhteydenottolomakkeilla on omat merkkijononsa (otsikot, paikkamerkit, vahvistusviestit). Katso oppaamme Gravity Forms- ja Contact Form 7 -lomakkeiden kääntämisestä lomakkeiden osalta.

Globaalit widgetit ja mallipohjat

Globaaliin mallipohjaan tehdyt muutokset leviävät jokaiselle sitä käyttävälle sivulle, mukaan lukien käännetyt kopiot. Tämä voi olla hyödyllistä tai katastrofaalista riippuen siitä, haluatko jaettua vai erillistä sisältöä. Päätä selkeästi jokaisen mallipohjan osalta.

Käännösten välimuistin vanheneminen

Sivunrakentajat välimuistittavat renderöidyn HTML:n aggressiivisesti. Käännöksen jälkeen tyhjennä kaikki välimuistit, mukaan lukien Elementorin CSS-välimuisti (Elementor > Työkalut > Uudelleenmuodosta CSS) ja Divin staattinen CSS-välimuisti.

Kaiken yhdistäminen

Elementorilla tai Divillä rakennetun sivuston kääntäminen ei ole vaikeampaa kuin staattisen teeman kääntäminen – se vaatii vain oikeanlaisen ajattelumallin. Teeman ja lisäosien merkkijonot ovat .po-tiedostoissa ja kulkevat .mo-tiedostojen kautta. Sivunrakentajan sisältö on tietokannassa ja kulkee monikielisten lisäosien tai manuaalisen monistamisen kautta. Näiden kahden polun sekoittaminen on yleisin "miksi käännökseni eivät toimi" -turhautumisen lähde.

Voittava työnkulku on tylsä: staattiset .mo-tiedostot kaikelle koodissa olevalle, monikielinen lisäosa sivun sisällölle ja manuaalinen kuratointi arvokkaille laskeutumissivuille. Mikään yksittäinen työkalu ei käsittele kaikkia kolmea, ja jos joku väittää muuta, hän myy sinulle jotain.

Oletko valmis kääntämään teemasi ja lisäosiesi .po-tiedostot rikkomatta widgetien merkintäkieltä? Kokeile SimplePoTranslatea ilmaiseksi – luottokorttia ei tarvita. Lataa .po, lataa turvalliset käännökset, pudota wp-content/languages/-kansioon.