Elementor és Divi sablonok fordítása a tördelés felborítása nélkül

Mindent jól csinált. Prémium témát vásárolt, megtalálta a .po fájlt, gondosan lefordította, majd feltöltötte a .mo fájlt a nyelvi mappájába. A téma fejlécében lévő szövegek helyesen frissülnek. A lábléc spanyolul jelenik meg. A WooCommerce pénztár is lokalizált. De aztán megnyitja a honlapot, és minden egyes Elementorral épített címsor, gomb és szövegblokk továbbra is angolul van.

Ellenőrzi a .po fájlt. Látja az angol szövegeket a kódban. Újrafordítja. Semmi sem változik. Törli a gyorsítótárakat. Semmi sem változik. Meggyőzi magát, hogy valami elromlott, amíg valaki egy fórumban finoman rá nem mutat: az Elementor (és a Divi, a Beaver Builder, és a Bricks) nem tárolja a tartalmat .po fájlokban. Soha nem is tette. Olyan problémával küzdött, ami az Ön által használt megközelítéssel nem oldható meg.

Ez az útmutató elmagyarázza, miért különbözik az oldalépítő tartalom architekturálisan a téma és bővítmény tartalmától, bemutatja a fordítás két útját, és azt, hogyan lehet a widgetek jelölését sértetlenül megőrizni a fordítás során, hogy gondosan megtervezett elrendezései ne essenek szét.

Miért nem használnak .po fájlokat az Elementor és a Divi

A .po fájlok olyan szövegeket tárolnak, amelyek a kódban élnek – __( 'Shop', 'mytheme' ) hívások, amelyek PHP sablonokban szétszórva találhatók. A WP-CLI build eszköz képes ezeket a szövegeket egy .pot sablonba kinyerni, a fordítók .po fájlokkal dolgoznak, és a lefordított .mo fájlok futásidőben töltődnek be.

Az oldalépítő tartalom más. Amikor beírja, hogy „Welcome to our store” egy Elementor címsor widgetbe, az a szöveg nincs semmilyen PHP fájlban. JSON-ként (Elementor) vagy egy shortcode blobként (Divi) kerül mentésre a wp_postmeta táblába, ahhoz a bejegyzéshez társítva, ahová elhelyezte.

Hol is található valójában az oldalépítő tartalom

Az Elementor minden oldal widgetfáját a postmeta táblában tárolja a _elementor_data kulcs alatt. Nyisson meg bármilyen bejegyzést az adatbázisban, és talál egy JSON tömböt, amely minden szakaszt, oszlopot és widgetet leír, beállításokkal és tartalommal együtt:

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

A Divi az oldaltartalmát a post_contentbe ágyazott shortcode-okként tárolja:

[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]

A Bricks, a Beaver Builder és az Oxygen ugyanezt a mintát követik a saját formátumukkal. Ezt a tartalmat a .po / .mo fájlok soha nem érintik.

Mi él valójában a .po fájlokban

Az oldalépítő bővítménynek magának is vannak UI szövegei – gombfeliratok a szerkesztőben, hibaüzenetek, admin értesítések. Ezek .po fájlokban vannak, és a wp-content/languages/plugins/ mappában lévő .mo fájljai lefordítják őket. Ez általában az oka a zavarnak: az emberek lefordítják az „Elementor” szövegeket, és spanyolul látják a szerkesztő felhasználói felületét, de az általuk ezekkel a widgetekkel létrehozott tartalom angolul marad.

Ez a különbség az oka a fordítások megjelenítésével kapcsolatos hibaelhárítási útmutatónk hibajegyek felének is – az olvasó azt várja, hogy a .mo fájlok befolyásolják az általa a frontend-en látott tartalmat, de a tartalom az adatbázisban van, nem a kódban.

Amit a .po fájlok valójában lefednek egy oldalépítő alapú oldalon

Húzzunk egy tiszta határt a kettő között, hogy pontosan tudja, melyik fájltípus mit kezel.

A .po / .mo fájlok fordítanak

• A téma sablon szövegeit: get_template_part, a header.php, footer.php, functions.php fájlokban lévő beégetett szöveg.
• Bővítmények UI szövegeit: WooCommerce pénztár, Yoast admin címkék, Contact Form 7 mezőcímkék.
• Oldalépítő bővítmények UI-jét: Elementor szerkesztő gombok, Divi mentési visszaigazoló üzenetek.
• Dinamikus szövegeket, amelyeket a bővítmények a frontend-re visszhangoznak: WooCommerce „Kosárba tesz”, „Nincs raktáron”, kosár összegek.

A .po / .mo fájlok NEM fordítanak

• Az Elementor widgetekbe beírt címsor, bekezdés, gomb szövegét.
• Képaláírásokat, lebegő effekteket, harmonika címeket a Divi modulokon belül.
• Újrahasználható sablonokban, globális szekciókban, mentett blokkokban lévő tartalmat.
• Egyedi CSS címkéket vagy inline szkripteket a builder widgeteken belül.

Ezért van az, hogy a témafejlesztők fordítással kapcsolatos dokumentációja technikailag helyes, de a végfelhasználók számára gyakran haszontalan. A bármely WordPress téma lokalizálásáról szóló útmutatónk alaposan lefedi a téma oldalát – ez a bejegyzés ott folytatódik, ahol az véget ér.

Két út az oldalépítő lokalizációhoz

Pontosan két módja van az oldalépítő tartalom fordításának, és mindkettőnek vannak valós kompromisszumai.

Első út: oldalak duplikálása nyelvenként

Használjon többnyelvű bővítményt, például a WPML-t, a Polylang-ot vagy a TranslatePress-t. Ez minden oldalról létrehoz egy másolatot nyelvenként. Az Elementorban lemásolja a teljes elrendezést, és minden másolaton kicseréli a szöveget. A Diviben lemásolja a shortcode blob-ot, és lefordítja a címkék közötti szöveget.

Előnyök: Minden nyelvnek lehet önállóan tervezett elrendezése (hasznos, ha a lefordított szöveg hosszabb, és felborítja az eredeti tervezést). Teljes kompatibilitás az oldalépítő vizuális szerkesztőjével.

Hátrányok: Lineáris skálázás – 5 nyelv 5-szörös elrendezési munkát jelent. Minden tervezési változtatást 5 alkalommal kell alkalmazni. Az adatbázis gyorsan nő. A gyorsítótárazás nehezebb lesz.

Második út: String fordítási réteg

Néhány bővítmény (Polylang Pro, WPML String Translation modulja, TranslatePress) képes az oldalépítő widgetekben lévő egyedi szövegeket fordításra felkínálni, majd azokat renderelési időben kicserélni. Egy elrendezést tart fenn, és a bővítmény a helyén fordítja a szövegeket.

Előnyök: Egyetlen forrás az elrendezéshez. A tervezési változások mindenhol érvényesülnek.

Hátrányok: Alacsonyabb rugalmasság, ha a lefordított szöveg hossza drámaian változik. Néhány widget (komplexek, beágyazott tartalommal, dinamikus listákkal, űrlapokkal) nem kínál fel tisztán szövegeket. Renderelésenkénti teljesítményköltség.

A Polylang vs WPML vs TranslatePress összehasonlításunk részletesebben tárgyalja az egyes bővítmények kompromisszumait.

A widget jelölések biztonságának megőrzése fordítás közben

Bármely utat is választja, a lefordított tartalomnak meg kell őriznie a builder strukturális jelölését. Ha a fordító eltávolít egy Elementor shortcode-ot, kicserél egy adatattribútumot, vagy átrendezi a beágyazott címkéket, a widget hibásan jelenik meg.

Elementor veszélyes zónák

Az Elementor widgetek shortcode-okat és dinamikus címkéket ágyaznak be a szövegbeállításokba. Egy címsor widget cím mezője tartalmazhatja a következőket:

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

Az a [user_name] egy dinamikus címke – az Elementor futásidőben a bejelentkezett felhasználó nevével helyettesíti. Ha a fordítás megrongálja, akkor szó szerint „[user_name]” jelenik meg a felhasználóknak.

A gombokban lévő ikonok osztályattribútumokat használnak, amelyeket nem szabad lefordítani. A kép alt szövege külön tárolódik a kép URL-jétől. Az oszlopelrendezések töréspont-specifikus beállításokat (title_mobile, title_tablet) használnak, amelyek egyedi kezelést igényelnek.

Divi Shortcode beágyazás

A Divi shortcode-ok mélyen egymásba ágyazódnak: [et_pb_section][et_pb_row][et_pb_column][et_pb_text]. Egy fordító, aki a blob-ot egyszerű szövegként kezeli, kódolni fogja a szögletes zárójeleket, lefordítja az attribútumértékeket, vagy elveszíti a záró címkéket. Bármelyik megrongálja a modult, és a Divi megtagadja annak megjelenítését.

A biztonságos minta

Mindkét builder esetében a fordításnak a következőket kell tennie:

1. Elemzi a widget formátumát (JSON az Elementorhoz, shortcode AST a Divihez).
2. Végigjárja a fát, azonosítva csak a felhasználó számára látható szövegmezőket.
3. Zárolja a shortcode-okat, dinamikus címkéket, HTML attribútumokat és inline CSS-t.
4. Csak a szöveges felületeket küldi el a fordítónak kontextussal együtt.
5. Visszahelyezi a lefordított szöveget az eredeti struktúrába.

Ez ugyanaz az elv, amelyet a mi motorunk a .po fájlokra is alkalmaz. A .po fájlok kódváltozók megsértése nélküli fordításáról szóló útmutató részletesen bemutatja a %s és placeholder mintákat – az oldalépítő megfelelője a shortcode-ok és dinamikus címkék.

Egy hibrid munkafolyamat, ami ténylegesen működik

A legtöbb csapat számára a gyakorlati válasz a két megközelítés kombinálása.

1. lépés: A téma és a bővítmény UI fordítása .po fájlokon keresztül

Exportálja a .pot fájlokat a témájából és a kulcsfontosságú bővítményekből (WooCommerce, Yoast, oldalépítő UI). Fordítsa le egyszer egy felhőalapú fordítóval, amely tiszteletben tartja a .po formátumot. Helyezze a lefordított .mo fájlokat a wp-content/languages/ mappába. Ez kezeli webhelye felületi szövegeinek 80%-át, közel nulla folyamatos karbantartási igénnyel.

2. lépés: Válasszon egy többnyelvű bővítményt a dinamikus tartalomhoz

Telepítse a Polylang-ot vagy a WPML-t a bejegyzés, oldal és termék tartalomhoz. Konfigurálja az URL struktúrát (/es/, /fr/) és a hreflang címkéket. Ez biztosítja az infrastruktúrát a nyelvenkénti adatbázis tartalomhoz.

3. lépés: Szelektíven duplikálja az oldalépítő sablonokat

A nagy forgalmú landoló oldalak, honlapok és sarokkövi marketing tartalmak esetében duplikálja az oldalt minden nyelven, és manuálisan fordítsa le a widgeteket. Ez teljes tervezési kontrollt biztosít, ahol erre szükség van.

4. lépés: Használja a String fordítást az ismétlődő blokkokhoz

A globális szakaszokhoz, újrahasználható sablonokhoz és lábléc CTA-khoz, amelyek minden oldalon megjelennek, használja a többnyelvű bővítmény string fordítási funkcióját. Frissítse egy helyen, cserélje le rendereléskor.

5. lépés: Futtasson minőségellenőrzéseket

A lefordított oldalépítő tartalomnak elrendezési eltolódások nélkül kell megjelennie. Hosszabb nyelvek (német, orosz) felboríthatják a gombok szélességét. Rövidebb nyelvek (kínai, japán) kínos üres területeket hagyhatnak. Tesztelje minden sablont nyelvenként a közzététel előtt.

Gyakori buktatók és elkerülésük

Néhány csapda, ami minden oldalépítő lokalizációs projektben felmerül.

Képek alt szövegének fordításának hiánya

Az Elementor és a Divi is widget példányonként tárolja az alt szöveget, nem a média könyvtárban. Az eredeti kép fordítása nem fordítja le az alt szöveget minden olyan widgetben, amely azt használja. Frissítse az alt szöveget minden duplikált oldalon.

Űrlapok és egyéni mezők

Az oldalépítő widgetekbe ágyazott űrlapoknak saját szövegeik vannak (címkék, helyőrzők, validációs üzenetek). Lásd útmutatónkat a Gravity Forms és Contact Form 7 fordításához az űrlapok oldaláról.

Globális widgetek és sablonok

A globális sablonokban végrehajtott változások minden olyan oldalra kiterjednek, amely azt használja, beleértve a lefordított másolatokat is. Ez hasznos vagy katasztrofális lehet attól függően, hogy megosztott vagy különálló tartalmat szeretne. Döntse el kifejezetten sablononként.

Fordítási gyorsítótár lejárat

Az oldalépítők agresszíven gyorsítótárazzák a renderelt HTML-t. Fordítás után ürítse az összes gyorsítótárat, beleértve az Elementor CSS gyorsítótárat (Elementor > Eszközök > CSS újragenerálása) és a Divi statikus CSS gyorsítótárat.

Mindez összegezve

Az Elementorral vagy Divivel épített webhely fordítása nem nehezebb, mint egy statikus téma fordítása – csak a megfelelő gondolkodásmódot igényli. A téma és a bővítmény szövegei .po fájlokban élnek, és .mo fájlokon keresztül utaznak. Az oldalépítő tartalom az adatbázisban él, és többnyelvű bővítményeken vagy manuális duplikáláson keresztül utazik. A két út összekeverése a „miért nem működnek a fordításaim” frusztráció leggyakoribb oka.

A nyerő munkafolyamat unalmas: statikus .mo fájlok minden kód alapú dologhoz, többnyelvű bővítmény az oldal tartalmához, és manuális kurálás a nagy értékű landoló oldalakhoz. Egyetlen eszköz sem kezeli mindhármat, és aki az ellenkezőjét ígéri, az valamit el akar Önnek adni.

Készen áll a téma és a bővítmény .po fájljainak lefordítására anélkül, hogy a widget jelöléseket megsértené? Próbálja ki ingyen a SimplePoTranslate-et – hitelkártya nélkül. Töltsd fel a .po fájlt, töltsd le a biztonságos fordításokat, majd helyezd a wp-content/languages/ mappába.