Registrare i widget personalizzati dei page builder per la traduzione

Per registrare i widget personalizzati dei page builder per la traduzione devi usare il file wpml-config.xml. Segui questo tutorial per imparare a usarlo.

Questa guida è per gli sviluppatori che creano temi e plugin o aggiungono codice personalizzato per i page builder al loro sito.

Se usi un page builder di terze parti e non riesci a tradurre i widget personalizzati sul tuo sito, contatta il supporto di WPML.

I page builder come Elementor (si apre in una nuova scheda), Beaver Builder (si apre in una nuova scheda), SiteOrigin (si apre in una nuova scheda) e Cornerstone (si apre in una nuova scheda) includono una suite di widget propri. Questi widget predefiniti funzionano perfettamente con WPML.

A volte potresti creare widget personalizzati destinati all’uso con questi o altri page builder.

Un widget personalizzato è un qualsiasi widget aggiuntivo e unico che non è incluso in un page builder. Questi possono essere creati dal tuo team di sviluppo, da sviluppatori di terze parti o provenire da altri plugin e temi.

Un widget personalizzato è anche qualsiasi widget che proviene da componenti aggiuntivi sviluppati appositamente per un page builder, come Elementor, da sviluppatori esterni.

Quando devo registrare i widget personalizzati per la traduzione?

Devi registrare il tuo widget personalizzato per la traduzione:

• Se è un widget non fornito originariamente da un page builder
• Se lo hai creato e aggiunto tramite un altro plugin o tema
• Se è sviluppato per i tuoi siti WordPress o per un page builder specifico dal tuo team o da terze parti

In passato, il modo più comune per registrare i widget personalizzati per la traduzione era utilizzare del codice PHP personalizzato. Ora puoi registrare facilmente il widget per la traduzione utilizzando wpml-config.xml, il file di configurazione di WPML.

Come registrare i widget personalizzati di Elementor e i blocchi di Gutenberg per la traduzione utilizzando il plugin Multilingual Tools

Il nostro plugin Multilingual Tools include un WPML – Config Generator per Elementor e i blocchi di Gutenberg. Questa funzionalità ti permette di aggiungere a una pagina qualsiasi widget personalizzato di Elementor o blocco di Gutenberg che vuoi registrare per la traduzione. Successivamente, genera automaticamente la prima versione del codice XML di cui hai bisogno.

Scopri come registrare i widget personalizzati di Elementor per la traduzione e come rendere traducibili i blocchi di Gutenberg.

Come trovare le informazioni di registrazione di un widget

Per poter registrare un widget personalizzato all’interno del file wpml-config.xml , devi prima trovare alcune informazioni di base al riguardo: il nome del tipo di widget e i nomi dei campi che vuoi tradurre.

Aggiungi il widget da solo in una nuova pagina e salva la pagina. Elementor memorizza i widget della pagina nel campo meta dell’articolo _elementor_data, e un plugin come JSM Show Post Metadata (si apre in una nuova scheda) mostra quel campo in un metabox in fondo all’editor della pagina, in modo che tu possa leggere i dati del widget lì.

In quei dati:

• widgetType è il nome da utilizzare nell’attributo name del widget.
• Le chiavi sotto settings sono i campi del widget. Una chiave che contiene un testo che vuoi tradurre, come title, è il nome di un campo da registrare.
• Un campo ripetitore (repeater) contiene un array di righe. La chiave che contiene quell’array, come contents, è il nome “items of”.

Una volta ottenute queste informazioni, puoi procedere con la registrazione effettiva del widget per la traduzione.

Per verificare il tuo lavoro, apri una pagina che usa il widget nell’editor di traduzione. I campi che hai registrato vengono mostrati lì per nome, con i testi del widget accanto. Un widget non registrato non contribuisce in alcun modo al lavoro, quindi se non appare nessuno dei suoi testi, la registrazione non ha avuto effetto.

Registrare widget semplici

Il seguente video ti guida attraverso un esempio di registrazione di un widget semplice di Elementor:

Il seguente esempio illustra come registrare un widget semplice. Per widget semplice qui si intende che il widget non ha campi ripetitore.

<wpml-config>
	<elementor-widgets>
		<widget name="heading">
			<conditions>
				<condition key="widgetType">heading</condition>
			</conditions>
			<fields>
				<field type="Heading" editor_type="LINE">title</field>
				<field type="Heading: Link URL" editor_type="LINK">link>url</field>
			</fields>
		</widget>
	</elementor-widgets>
</wpml-config>

Analizziamo la struttura dell’esempio fornito:

1. Inizia con il tag <elementor-widgets>. Questo indica a WPML quali widget dei page builder andrai a registrare. Può essere uno di questi:
   • <elementor-widgets>: deve essere usato se stai usando Elementor, Elementor PRO o qualsiasi altro componente aggiuntivo per Elementor.
   • <beaver-builder-widgets>: deve essere usato se stai usando Beaver Builder Lite, Beaver Builder premium o qualsiasi altro componente aggiuntivo per Beaver Builder.
   • <siteorigin-widgets>: deve essere usato se stai usando il page builder SiteOrigin.
   • <cornerstone-widgets>: e questo deve essere usato per il page builder Cornerstone incluso nel tema X o nel tema PRO.
2. Aggiungi i tuoi widget:
   • <widget name="widget_name"> dove widget_name è il nome utilizzato per registrare il widget nel page builder.
   • <conditions> (opzionale): sotto le condizioni, aggiungi una condizione con una chiave uguale al nome del widget. Può essere utilizzata quando il nome del widget è diverso dalla chiave del widget nei dati, ma di solito non è necessaria.

3. Aggiungi i campi dei widget, racchiudendoli in un tag <fields>:
   • field: L’ID del campo. È lo stesso ID utilizzato quando si aggiunge un controllo tramite la funzione Control_stack::add_control.
   • type (opzionale): Il tipo di campo. Questo è il testo visualizzato nell’Editor di traduzione avanzato o nell’Editor di traduzione classico di WPML per aiutare il traduttore a capire quale campo viene tradotto.
   • editor_type (opzionale): Questo è il tipo di campo di testo utilizzato nell’Editor di traduzione classico di WPML. I valori validi sono LINE, AREA, LINK e VISUAL. Se mancante, il valore predefinito è LINE.
   • key_of (opzionale): Viene utilizzato solo per i tag <field> che hanno un array all’interno di un tag <fields-in-item>.

Puoi utilizzare questi elementi per registrare un widget semplice con qualsiasi numero di campi.

Registrare campi con ID di articoli o tassonomie

Nella sezione precedente, hai imparato che l’attributo type viene tipicamente utilizzato per visualizzare un testo descrittivo nell’Editor di traduzione.

Tuttavia, quando i campi del tuo widget memorizzano ID di articoli o ID di tassonomie (come immagini selezionate, articoli correlati o categorie scelte), utilizzi valori speciali che attivano la conversione automatica:

• type="post-ids" – per i campi che contengono ID di articoli
• type="term-ids" – per i campi che contengono ID di tassonomie/termini

Quando usi questi valori types:

• Il campo non apparirà nell’editor di traduzione
• WPML converte automaticamente gli ID per puntare al contenuto tradotto corrispondente
• Sono supportati sia ID singoli che elenchi di ID separati da virgole

Esempio:

<wpml-config>
    <elementor-widgets>
        <widget name="the-widget-name">
            <fields>
                <field type="post-ids" sub-type="attachment">image_id</field>
                <field type="post-ids" sub-type="post">selected_posts</field>
                <field type="term-ids" sub-type="category">category_filter</field>
            </fields>
        </widget>
    </elementor-widgets>
</wpml-config>

In questo esempio, l’attributo opzionale sub-type specifica l’esatto tipo di post o tassonomia che viene convertito:

• Per type="post-ids": usa sub-type="attachment", sub-type="post", sub-type="page" o lo slug del tuo tipo di post personalizzato
• Per type="term-ids": usa sub-type="category", sub-type="post_tag" o lo slug della tua tassonomia personalizzata

L’aggiunta di sub-type migliora le prestazioni evitando query extra al database per determinare il tipo di contenuto.

Per altri esempi, consulta il file di configurazione di Elementor (si apre in una nuova scheda) e cerca post-ids.

Registrare widget con campi ripetitore

Il seguente video ti guida attraverso un esempio di registrazione di un widget avanzato di Elementor con campi ripetitore:

Per i widget che hanno campi ripetitore, devi racchiudere i campi in un tag <fields-in-item items_of="tabs"> (dove tabs è il nome del widget con campi ripetuti). Dai un’occhiata a questo esempio:

<widget name="accordion">
	<fields-in-item items_of="tabs">
		<field type="Accordion: Title" editor_type="LINE">tab_title</field>
		<field type="Accordion: Content" editor_type="VISUAL">tab_content</field>
	</fields-in-item>
</widget>

In alcuni casi, il widget può avere più campi ripetitore. Considera la seguente struttura dei dati del widget Tabella (Table) di Ultimate Addons for Elementor come esempio:

Per registrare questo widget, guarda il seguente esempio:

<widget name="uael-table">
	<fields-in-item items_of="table_content">
		<field type="The Cell text" editor_type="LINE">cell_text</field>
	</fields-in-item>
	<fields-in-item items_of="table_headings">
		<field type="The Heading text" editor_type="LINE">heading_text</field>
	</fields-in-item>
</widget>

Registrare widget con campi semplici e ripetitore

Nota che i widget possono avere entrambi i tipi: fields e fields-in-item. Dai un’occhiata a questo esempio per un widget che li usa entrambi:

<widget name="price-table">
	<fields>
		<field type="Price Table: Heading" editor_type="LINE">heading</field>
		<!-- ... -->
	</fields>
	<fields-in-item items_of="features_list">
		<field type="Price table: text" editor_type="LINE">item_text</field>
	</fields-in-item>
</widget>

Raggruppare i campi per una migliore organizzazione

Per migliorare la chiarezza e l’organizzazione della tua configurazione XML, puoi anteporre alle etichette dei campi il nome del gruppo. Considera questo esempio di un widget hotspot:

<widget name="hotspot">
    <fields-in-item items_of="hotspot">
        <field type="Hotspot: Label">hotspot_label</field>
        <field type="Hotspot: URL" key_of="hotspot_link">url</field>
        <field type="Hotspot: Content" editor_type="VISUAL">hotspot_tooltip_content</field>
    </fields-in-item>
</widget>

Qui, a ogni campo all’interno del widget hotspot viene anteposta l’etichetta Hotspot:. Questo prefisso appare anche nell’Editor di traduzione avanzato: i campi del widget si trovano in un riquadro Hotspot e ognuno ha la propria etichetta, rendendo più facile identificare e tradurre ogni campo:

Registrare altri tipi di contenuto dei page builder

Consulta la nostra documentazione su come registrare il contenuto dei page builder nel file di configurazione delle lingue per maggiori informazioni sulla registrazione di stringhe, shortcode e altro ancora.

Risorse aggiuntive

Per saperne di più sul file wpml-config.xml, visita la guida sui File di configurazione delle lingue.

Per personalizzare altri elementi usando il file wpml-config.xml, visita le nostre guide aggiuntive:

• Registrare il contenuto dei page builder per la traduzione
• Tradurre gli shortcode personalizzati con WPML
• Impostare le opzioni di traduzione per i campi personalizzati utilizzando il file di configurazione di WPML
• Registrare termini, tipi e tassonomie personalizzati come traducibili
• Rendere traducibili i blocchi personalizzati di Gutenberg
• Tradurre i testi che il tema e i plugin salvano in wp_options
• Personalizzare il selettore di lingua di WPML utilizzando il file di configurazione di WPML