Překládejte šablony Elementor a Divi, aniž byste rozbili rozvržení

Udělali jste všechno správně. Koupili jste prémiovou šablonu, našli soubor .po, pečlivě ho přeložili a nahráli .mo do složky s jazyky. Řetězce v hlavičce šablony se aktualizují správně. Zápatí se zobrazuje ve španělštině. Vaše pokladna WooCommerce je lokalizovaná. Ale pak otevřete domovskou stránku a každý nadpis, tlačítko a textový blok vytvořený pomocí Elementoru je stále v angličtině.

Zkontrolujete soubor .po. Vidíte anglické řetězce v kódu. Znovu přeložíte. Nic se nezmění. Vymažete mezipaměti. Nic se nezmění. Přesvědčujete sami sebe, že je něco rozbité, dokud někdo na fóru jemně neupozorní: Elementor (a Divi, a Beaver Builder, a Bricks) neukládají obsah do souborů .po. Nikdy neukládaly. Bojovali jste s problémem, který nelze vyřešit přístupem, který používáte.

Tento průvodce vysvětluje, proč se obsah nástrojů pro tvorbu stránek architektonicky liší od obsahu šablon a pluginů, ukazuje dvě cesty pro jeho překlad a jak udržet strukturu widgetů neporušenou během překladu, aby se vaše pečlivě navržené rozvržení nerozpadlo.

Proč Elementor a Divi nepoužívají soubory .po

Soubory .po ukládají řetězce, které žijí v kódu – volání __( 'Shop', 'mytheme' ) roztroušená po PHP šablonách. Nástroj pro sestavení WP-CLI dokáže tyto řetězce extrahovat do šablony .pot, překladatelé pracují se soubory .po a kompilované soubory .mo jsou načteny za běhu.

Obsah nástrojů pro tvorbu stránek je jiný. Když zadáte „Vítejte v našem obchodě“ do widgetu nadpisu Elementoru, tento text není v žádném PHP souboru. Uloží se jako JSON (Elementor) nebo blob shortcodů (Divi) do tabulky wp_postmeta, spojený s příspěvkem, kam jste jej umístili.

Kde se ve skutečnosti nachází obsah nástrojů pro tvorbu stránek

Elementor ukládá strom widgetů každé stránky do postmeta pod klíčem _elementor_data. Otevřete jakýkoli příspěvek v databázi a najdete pole JSON popisující každou sekci, sloupec a widget, s nastavením a obsahem přímo v něm:

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

Divi ukládá obsah svých stránek jako shortcody vložené do post_content:

[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 a Oxygen se řídí stejným vzorem s vlastním formátem. Žádný z tohoto obsahu není nikdy ovlivněn soubory .po / .mo.

Co se nachází v souborech .po

Samotný plugin nástroje pro tvorbu stránek obsahuje řetězce uživatelského rozhraní – popisky tlačítek v editoru, chybové zprávy, administrátorské oznámení. Tyto se nacházejí v souborech .po a jsou překládány vašimi soubory .mo ve wp-content/languages/plugins/. To je obvykle důvod, proč jsou lidé zmatení: přeloží řetězce „Elementor“ a vidí uživatelské rozhraní editoru ve španělštině, ale skutečný obsah, který vytvořili pomocí těchto widgetů, zůstává v angličtině.

Tento rozdíl je také hlavní příčinou poloviny dotazů v našem průvodci řešením problémů, kdy se překlady nezobrazují – čtenář očekává, že soubory .mo ovlivní obsah, který vidí na frontendu, ale obsah je v databázi, nikoli v kódu.

Co soubory .po skutečně pokrývají na stránkách postavených na page-builderu

Dovolte mi jasně rozlišit obě možnosti, abyste přesně věděli, co každý typ souboru zpracovává.

Soubory .po / .mo překládají

• Řetězce šablon motivu: get_template_part, pevně zakódovaný text v header.php, footer.php, functions.php.
• Řetězce uživatelského rozhraní pluginů: pokladna WooCommerce, administrátorské popisky Yoast, popisky polí Contact Form 7.
• Uživatelské rozhraní pluginu pro tvorbu stránek: tlačítka editoru Elementor, potvrzovací zprávy Divi pro uložení.
• Dynamické řetězce, které pluginy vypisují na frontendu: WooCommerce „Přidat do košíku“, „Není skladem“, součty košíku.

Soubory .po / .mo NEpřekládají

• Text nadpisů, odstavců, tlačítek zadaný do widgetů Elementoru.
• Popisky obrázků, efekty při najetí myši, názvy akordeonů uvnitř modulů Divi.
• Obsah v opakovaně použitelných šablonách, globálních sekcích, uložených blocích.
• Vlastní popisky CSS nebo vložené skripty uvnitř widgetů builderu.

Proto je dokumentace autorů šablon o překladu technicky správná, ale pro koncové uživatele často zbytečná. Náš průvodce jak lokalizovat libovolnou šablonu WordPress, i když nejste vývojář podrobně pokrývá stranu šablon – tento příspěvek navazuje tam, kde ten předchozí končí.

Dvě cesty pro lokalizaci obsahu nástrojů pro tvorbu stránek

Existují přesně dva způsoby, jak přeložit obsah nástrojů pro tvorbu stránek, a oba mají skutečné kompromisy.

Cesta jedna: Duplikace stránek pro každý jazyk

Použijte vícejazyčný plugin jako WPML, Polylang nebo TranslatePress. Vytvoří kopii každé stránky pro každý jazyk. V Elementoru duplikujete celé rozvržení a na každé kopii vyměníte text. V Divi zkopírujete blob shortcodů a přeložíte text mezi značkami.

Klady: Každý jazyk může mít nezávisle navržené rozvržení (užitečné, když je přeložený text delší a narušuje váš původní design). Plná kompatibilita s vizuálním editorem nástroje pro tvorbu stránek.

Zápory: Lineární škálování – 5 jazyků znamená 5x více práce s rozvržením. Jakákoli změna designu musí být aplikována 5krát. Databáze rychle roste. Caching se stává obtížnějším.

Cesta dvě: Vrstva překladu řetězců

Některé pluginy (Polylang Pro, modul String Translation od WPML, TranslatePress) dokážou zpřístupnit jednotlivé řetězce uvnitř widgetů pro tvorbu stránek k překladu a poté je vyměnit v době vykreslení. Udržujete jedno rozvržení a plugin překládá řetězce přímo na místě.

Klady: Jediný zdroj pravdy pro rozvržení. Změny designu se aplikují všude.

Zápory: Nižší flexibilita, když se délka přeloženého textu dramaticky změní. Některé widgety (komplexní s vnořeným obsahem, dynamické seznamy, formuláře) nezpřístupňují řetězce čistě. Výkonnostní náklady na každé vykreslení.

Naše srovnání Polylang vs WPML vs TranslatePress podrobněji rozebírá kompromisy jednotlivých pluginů.

Udržování struktury widgetů v bezpečí během překladu

Ať už si vyberete kteroukoli cestu, přeložený obsah musí zachovat strukturální kódování nástroje. Pokud váš překladatel odstraní shortcode Elementoru, nahradí datový atribut nebo přeřadí vnořené tagy, widget se zobrazí poškozený.

Nebezpečné zóny Elementoru

Widgety Elementoru vkládají shortcody a dynamické tagy do nastavení textu. Pole nadpisu widgetu může obsahovat:

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

To [user_name] je dynamický tag – Elementor ho při vykreslování nahradí jménem přihlášeného uživatele. Pokud se při překladu poškodí, uživatelům se zobrazí doslovný „[user_name]“.

Ikony uvnitř tlačítek používají atributy třídy, které nesmí být přeloženy. Alternativní text obrázku je uložen odděleně od URL obrázku. Rozvržení sloupců používají nastavení specifická pro breakpointy (title_mobile, title_tablet), která vyžadují individuální zpracování.

Vnořování shortcodů v Divi

Shortcody Divi jsou hluboce vnořené: [et_pb_section][et_pb_row][et_pb_column][et_pb_text]. Překladatel, který s blobem zachází jako s prostým textem, zakóduje hranaté závorky, přeloží hodnoty atributů nebo ztratí ukončovací tagy. Cokoli z toho modul poškodí a Divi jej odmítne vykreslit.

Bezpečný vzor

Pro kterýkoli z nástrojů musí překlad:

1. Analyzovat formát widgetu (JSON pro Elementor, AST shortcodů pro Divi).
2. Procházet strom a identifikovat pouze uživatelsky viditelná textová pole.
3. Uzamknout shortcody, dynamické tagy, HTML atributy a vložené CSS.
4. Odeslat překladateli pouze textové plochy s kontextem.
5. Znovu vložit přeložený text do původní struktury.

Jedná se o stejný princip, který náš engine aplikuje na soubory .po. Průvodce překladem souborů .po bez porušení proměnných kódu podrobně popisuje vzory %s a placeholderů – ekvivalentem pro page builder jsou shortcody a dynamické tagy.

Hybridní pracovní postup, který skutečně funguje

Pro většinu týmů je praktickou odpovědí kombinace obou přístupů.

Krok 1: Překlad uživatelského rozhraní šablony a pluginů pomocí souborů .po

Exportujte soubory .pot z vaší šablony a klíčových pluginů (WooCommerce, Yoast, UI nástroje pro tvorbu stránek). Přeložte je jednou pomocí cloudového překladače, který respektuje formát .po. Zkopírujte zkompilované soubory .mo do wp-content/languages/. Tímto způsobem pokryjete 80 % řetězců rozhraní vašeho webu s téměř nulovou průběžnou údržbou.

Krok 2: Vyberte vícejazyčný plugin pro dynamický obsah

Nainstalujte Polylang nebo WPML pro obsah příspěvků, stránek a produktů. Nakonfigurujte strukturu URL (/es/, /fr/) a značky hreflang. To vám poskytne infrastrukturu pro obsah databáze pro jednotlivé jazyky.

Krok 3: Selektivně duplikujte šablony vašeho page builderu

Pro vysoce navštěvované vstupní stránky, domovské stránky a základní marketingový obsah duplikujte stránku v každém jazyce a přeložte widgety ručně. Získáte tak plnou kontrolu nad designem tam, kde na tom záleží.

Krok 4: Použijte překlad řetězců pro opakující se bloky

Pro globální sekce, opakovaně použitelné šablony a výzvy k akci v zápatí, které se zobrazují na každé stránce, použijte funkci překladu řetězců vašeho vícejazyčného pluginu. Aktualizujte na jednom místě, vyměňte při vykreslení.

Krok 5: Spusťte kontrolu kvality

Přeložený obsah page builderu by se měl vykreslovat bez posunů rozvržení. Delší jazyky (němčina, ruština) narušují šířku tlačítek. Kratší jazyky (čínština, japonština) zanechávají nepříjemné mezery. Před spuštěním otestujte každou šablonu pro každý jazyk.

Běžné nástrahy a jak se jim vyhnout

Několik nástrah, které se objevují v každém projektu lokalizace page builderu.

Alternativní text obrázku se nepřekládá

Elementor i Divi ukládají alternativní text pro každou instanci widgetu, nikoli v Knihovně médií. Překlad původního obrázku nepřeloží alternativní text v každém widgetu, který jej používá. Aktualizujte alternativní text na každé duplikované stránce.

Formuláře a vlastní pole

Kontaktní formuláře vložené do widgetů nástroje pro tvorbu stránek mají vlastní řetězce (popisky, zástupné symboly, validační zprávy). Pro část týkající se formulářů se podívejte na našeho průvodce překladem Gravity Forms a Contact Form 7.

Globální widgety a šablony

Změny v globální šabloně se šíří na každou stránku, která ji používá, včetně přeložených kopií. To může být užitečné nebo katastrofální v závislosti na tom, zda chcete sdílený nebo oddělený obsah. Rozhodněte se explicitně pro každou šablonu.

Vypršení mezipaměti překladů

Nástroje pro tvorbu stránek agresivně ukládají vykreslený HTML do mezipaměti. Po překladu vyprázdněte všechny mezipaměti, včetně mezipaměti CSS Elementoru (Elementor > Nástroje > Regenerovat CSS) a statické mezipaměti CSS Divi.

Shrnutí

Překlad webu vytvořeného pomocí Elementoru nebo Divi není těžší než překlad statické šablony – jen vyžaduje správný mentální model. Řetězce šablon a pluginů se nacházejí v souborech .po a cestují přes soubory .mo. Obsah nástrojů pro tvorbu stránek se nachází v databázi a cestuje přes vícejazyčné pluginy nebo ruční duplikaci. Smíchání těchto dvou cest je nejčastější příčinou frustrace z „proč moje překlady nefungují“.

Vítězný pracovní postup je nudný: statické soubory .mo pro vše, co je v kódu, vícejazyčný plugin pro obsah stránek a ruční správa pro vysoce hodnotné vstupní stránky. Žádný jediný nástroj nezvládne všechny tři, a kdokoli, kdo vám slibuje opak, vám něco prodává.

Jste připraveni přeložit soubory .po vaší šablony a pluginů, aniž byste poškodili strukturu widgetů? Vyzkoušejte SimplePoTranslate zdarma – není potřeba kreditní karta. Nahrajte .po, stáhněte si bezpečné překlady, vložte do wp-content/languages/.