Elementor: hiányzó tartalom, linkek és saját widgetek

Ez a fejezet az Elementor-oldalak fordítása folytatása: azt írja le, mit olvas be a WPML magától, mit kell kézzel regisztrálni, hogyan kezeli a lista típusú widgetek linkjeit, és hogyan lehet saját widgetet fordíthatóvá tenni.

Ami magától megjelenik a fordítószerkesztőben

Az Advanced Translation Editor (ATE) beállítás nélkül listázza ezeket:

• Heading: a címsor szövege.
• Text Editor: a bekezdés a benne lévő linkekkel.
• Button: a gomb szövege és a linkje.
• Image: a képaláírás és a képlink.
• Container link: ha a konténer HTML-címkéje a, és be van állítva a linkje, a link külön Link URL sorként jelenik meg. A konténer mást nem ad a fordításhoz.
• Kiegészítő widgetek: a WPML beolvassa a widget vezérlőit, és felsorolja a szöveg-, szövegterület-, vizuális szerkesztő- és linkmezőket, a listák elemeivel együtt. A legtöbb kiegészítő saját wpml-config.xml fájlt is mellékel, amit a WPML szintén beolvas.

Az Icon List, a Slides és a Price Table bejegyzéseinek linkjei is megjelennek (lásd lejjebb).

A hiányzó mező megkeresése

1. Nyisd meg az oldal fordítását: WPML → Translations, Translation Jobs fül. Az oldal sorában kattints a Review (vagy Continue reviewing) gombra, majd a lefordított oldal feletti sávban az Edit translation hivatkozásra. Ha a WPML felülvizsgálat nélkül teszi közzé az automatikus fordításokat, a sorban a ceruza ikon (Edit Translation) van. Ugyanide visz az Oldalak → Összes oldal lista nyelvoszlopaiban látható ikon is.
2. Keresd meg a mezőt. A szerkesztő widgetenként csoportosít, például a Link URL sor a Button csoportban van. Ha egy szöveg vagy link nincs a listán, akkor olyan vezérlőben van, amit a WPML nem olvas: általában egy kiegészítő által egy konténerhez vagy oszlophoz adott vezérlőben.

Hiányzó mező regisztrálása az egyedi XML-konfigurációban

A konténerhez vagy oszlophoz adott vezérlő nem widgetvezérlő, ezért a WPML nem olvassa magától. A példában egy oszlopot kattinthatóvá tevő kiegészítő a konténerekhez egy Container Link vezérlőt ad (link és linkszöveg). A régi oszlopoknál ez a Column Link.

1. Nyisd meg a WPML → Settings oldalt, és keresd meg a Custom XML Configuration részt.
2. Illeszd be a konfigurációt a kódszerkesztőbe. A name az elem neve az Elementorban, a mezők pedig a vezérlők kulcsai.

<wpml-config>
  <elementor-widgets>
    <widget name="container">
      <fields>
        <field type="Container: Link URL" editor_type="LINK">link&gt;url</field>
        <field type="Container: Column link (Make Column Clickable)" editor_type="LINK">column_link&gt;url</field>
        <field type="Container: Column link text (Make Column Clickable)" editor_type="LINE">column_link_text</field>
      </fields>
    </widget>
  </elementor-widgets>
</wpml-config>

3. Kattints a Save gombra. A Configuration saved. üzenet jelenik meg.

Ha container bejegyzést adsz meg, hagyd benne az Elementor saját konténerlink-sorát (link>url) is, mint a példában, hogy a WPML továbbra is regisztrálja a beépített linket.

Az oldal frissítése és az új mezők fordítása

1. Mentsd újra az oldalt Elementorban: szerkeszd, módosíts egy szöveget, és kattints a Publish gombra. A WPML ekkor újra regisztrálja az oldal sztringjeit.
2. Nyisd meg újra a fordítószerkesztőt. Az új sorok az XML-ben megadott neveket viselik.
3. Fordítsd le a linkszöveget, a link URL-jét hagyd meg, és kattints a Save and Complete gombra. A lefordított oldalon a konténerlink a lefordított oldalra mutat.

Mezők regisztrálása wpml-config.xml fájlban

Ugyanez az XML működik egy wpml-config.xml fájlban is, a kiegészítő vagy a téma gyökérmappájában. A WPML ebben a sorrendben egyesíti a konfigurációkat: a saját Elementor-widgetlistája, a népszerű kiegészítőkhöz szolgáltatott konfiguráció, a kiegészítő saját wpml-config.xml fájlja, végül a te egyedi XML-ed, ami mindent felülír.

Automatikus fordítás

Ha a Translate Everything Automatically be van kapcsolva, a WPML az oldalt, a widgeteket és a regisztrált mezőket is lefordítja közzétételkor vagy frissítéskor, a WPML AI-fordításával. A regisztrált konténerlink ilyenkor is a lefordított oldalra mutat. Az eredményt az ATE-ben nézheted át. Az oldal nyelvenként egyszer számít fel, a későbbi szerkesztés csak az oldal növekedésével járó szavakat.

Ha a mező még mindig nem jelenik meg

• Regisztráltad, de nem látszik: mentsd újra az oldalt Elementorban, és nyisd meg újra a szerkesztőt. Ellenőrizd, hogy a Configuration saved. üzenet megjelent-e, és hogy a widget neve és a mezőkulcs egyezik-e a kiegészítő vezérlőjével.
• A vezérlő nem szöveg, szövegterület, vizuális szerkesztő (WYSIWYG) vagy URL típusú: regisztráld PHP-val (lásd lejjebb).
• Egy kiegészítő widgetének szövege vagy linkje hiányzik: a kiegészítő saját wpml-config.xml fájlja kihagyhatta, és az az irányadó a widgetjeire. Add hozzá a mezőt az egyedi XML-konfigurációban, amit a WPML rá egyesít.
• A mező megjelenik, de a lefordított link az eredeti nyelvre mutat: a céloldal még nincs lefordítva. Fordítsd le, és a link követi.

Linkek az ismétlődő elemekben (Icon List, Slides, Price Table)

Az Icon List, a Slides és a Price Table widget bejegyzéslistát tartalmaz, és minden bejegyzésnek saját Link mezője van (a placeholder: „Type or paste your URL”).

Widget	Hol van a link
Icon List (Elementor, General kategória)	Edit Icon List → Content → Items: minden elemnek van Text, Icon és Link mezője.
Slides (Elementor Pro)	Edit Slides → Content → Slides: minden dia Content fülén van Title, Description, Button Text és Link. Az Apply Link On dönti el, hogy az egész dia vagy csak a gomb kattintható.
Price Table (Elementor Pro)	Edit Price Table → Content → Footer, a Button Text alatt. A funkciósoroknak nincs linkjük.

Az egyetlen mezőben megadott linkek (Button, képlink, Text Editor bekezdésben lévő link) ugyanígy fordulnak. A menülinkek a menü fordítását követik.

Mit csinál a WPML a linkekkel

• Belső linkek (a webhely oldalaira, bejegyzéseire, termékeire): a lefordított oldalon a lefordított célra mutatnak, akármelyik oldalt fordítod előbb. Amíg a célnak nincs fordítása, a link az eredetire mutat, és a fordítás közzétételekor átáll. Nincs mit karbantartani.
• Külső linkek (másik webhelyre): változatlanok maradnak, az „új ablakban nyílik” beállítással együtt. A WPML nem tudhatja, van-e a másik webhelynek fordított oldala, ezért az ATE minden linket külön sorként mutat a bejegyzés szövege mellett, ahol átírhatod.

A linkek megtekintése vagy egy külső link módosítása:

1. Nyisd meg a fordítást: WPML → Translations, Translation Jobs fül, Review, majd Edit translation (lásd fent).
2. Keresd meg a link sorokat. Minden bejegyzés két sorban jelenik meg: Text és Link URL az Icon List és a Slides csoportban; a Price Table Button Link sort mutat. A belső link az eredeti címet mutatja, a lefordított címet a WPML az oldal megjelenítésekor számolja ki.
3. A belső linkeket hagyd, a külsőt átírhatod. Fordítsd le a szövegeket, és kattints a Save and Complete gombra. A lefordított oldalon például az „About” link a francia „About” oldalra mutat.

Új elem felvétele fordítás után

Ha később új elemet adsz az eredeti oldalhoz, az új elem és a linkje bekerül a fordításba, a már elkészült fordítások megmaradnak.

1. Szerkeszd az eredeti oldalt Elementorral, jelöld ki az Icon List widgetet, és az Items alatt kattints az + Add Item gombra. Add meg a szöveget és a linket.
2. Kattints a Publish gombra (az Elementor ezt a feliratot tartja meg már közzétett oldalaknál is).
3. Nyisd meg újra a fordítást a WPML → Translations oldalról. Az új elem szövege és linkje sorként megjelenik. Fordítsd le a szöveget, és kattints a Save and Complete gombra.

Ha a lefordított link az eredeti nyelvre mutat

• A céloldalnak még nincs fordítása: amint közzéteszed, a link átáll.
• Egy kiegészítő widget linkje nincs a szerkesztőben: a WPML még nem ismeri a vezérlőt. Regisztráld a hiányzó mezőt (lásd fent), és fordítsd újra az oldalt.
• Egy külső link másik webhely lefordított oldalára kellene mutasson: ezt a WPML nem tudhatja, írd át a bejegyzés sorában.

Fejlesztőknek: linkmezők a wpml-config.xml-ben

Az Elementor az elemlistát ismétlő (repeater) vezérlőnek nevezi. A WPML minden bejegyzés linkvezérlőjét LINK mezőtípussal regisztrálja. A kiegészítő widget a linkvezérlőit a saját wpml-config.xml fájljában deklarálja editor_type="LINK" megadással.

Saját Elementor-widget fordíthatóvá tétele PHP-val

Kétféle saját widget van:

• Egyszerű widget: nincs benne ismétlő mező. A WPML Multilingual Tools bővítményével PHP-kód nélkül is regisztrálható.
• Összetett widget: bonyolultabb szerkezetű, egy vagy több ismétlő mezővel.

Az összetett widgetet kétféleképpen teheted fordíthatóvá: ajánlottan a wpml-config.xml konfigurációs fájllal, vagy kézzel, PHP-kóddal. A PHP-s módszer lépései:

1. WPML-szűrő a widgethez

Minden saját widget bővítményben add hozzá a wpml_elementor_widgets_to_translate szűrőt az init akció alatt. A WPML ebből tudja meg, mely szövegeket kell fordítani.

add_filter( 'wpml_elementor_widgets_to_translate', [ $this, 'wpml_widgets_to_translate_filter' ] );

A szűrő átadja a fordítandó widgettípusok tömbjét (az Elementor alapelemeivel együtt). Az új widgettípusokat ebbe a tömbbe kell felvenni:

public function wpml_widgets_to_translate_filter( $widgets ) {
  $widgets[ $this->get_name() ] = [
     'conditions' => [ 'widgetType' => $this->get_name() ],
     'fields'     => [
        [
           'field'       => 'title',
           'type'        => __( 'Hello World Title', 'hello-world' ),
           'editor_type' => 'LINE'
        ],
     ],
  ];

  return $widgets;
}

A fields tömb elemei:

Elem	Jelentés
field	A mező azonosítója, ugyanaz, mint a vezérlő hozzáadásakor (Control_stack::add_control).
type	A mező típusa: ez a szöveg látszik a fordítószerkesztőben, hogy a fordító tudja, mit fordít.
editor_type	A szerkesztő mezőtípusa: LINE (egy sor), AREA (több sor), VISUAL (vizuális szerkesztő). Linkhez LINK.

2. Saját osztály a fordításokhoz

Bonyolultabb widgetnél hozz létre egy osztályt, és add meg a nevét az integration-class mezőben:

public function wpml_widgets_to_translate_filter( $widgets ) {
  $widgets[ $this->get_name() ] = [
     'conditions' => [ 'widgetType' => $this->get_name() ],
     'fields'     => [],
     'integration-class' => 'My_Custom_Widget_WPML_Support',
  ];

  return $widgets;
}

3. Az IWPML_Page_Builders_Module interfész

Az integrációs osztálynak két függvényt kell megvalósítania. A get visszaadja a fordítandó sztringek listáját, az update pedig frissíti az Elementor-adatokat, amikor fordítás érkezik.

interface IWPML_Page_Builders_Module {
  public function get( $node_id, $element, $strings );
  public function update( $node_id, $element, WPML_PB_String $string );
}

4. Ugyanaz a mező többször egy blokkban: field_id

Ha ugyanaz a mező többször szerepel egy blokkban, a field_id különbözteti meg az előfordulásokat:

'fields' => [
   'title_1' => [
      'field'       => 'title',
      'field_id'    => 'title_1',
      'type'        => __( 'Hello World Title', 'hello-world' ),
      'editor_type' => 'LINE'
   ],
   'title_2' => [
      'field'       => 'title',
      'field_id'    => 'title_2',
      'type'        => __( 'Hello World Title', 'hello-world' ),
      'editor_type' => 'LINE'
   ],
],

5. Elemlistát tartalmazó widget: WPML_Elementor_Module_With_Items

Egyes widgetek (például a Slides) elemlistát tartalmaznak, mondjuk több diát címsorral és gombbal. Ha a saját widgeted is ilyen, terjeszd ki a WPML_Elementor_Module_With_Items osztályt, és az egyes elemeket külön fordíthatod:

class WPML_Elementor_Slides extends WPML_Elementor_Module_With_Items {

  public function get_items_field() {
     return 'slides';
  }

  public function get_fields() {
     return array( 'heading', 'description', 'button_text' );
  }

  protected function get_title( $field ) {
     switch( $field ) {
        case 'heading':
           return esc_html__( 'Slides: heading', 'wpml-string-translation' );
        case 'description':
           return esc_html__( 'Slides: description', 'wpml-string-translation' );
        case 'button_text':
           return esc_html__( 'Slides: button text', 'wpml-string-translation' );
        default:
           return '';
     }
  }

  protected function get_editor_type( $field ) {
     switch( $field ) {
        case 'heading':
        case 'button_text':
           return 'LINE';
        case 'description':
           return 'VISUAL';
        default:
           return '';
     }
  }
}

További példák a WPML core bővítmény addons/wpml-page-builders/classes/Integrations/Elementor/modules/ mappájában vannak. Az osztályokat az init horogra töltsd be: a WPML 4.5-től az init előtti betöltés végzetes hibát okoz.