Registrare i widget personalizzati del page builder per la traduzione

Per registrare i widget personalizzati del 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 del page builder al loro sito.

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

I page builder come Elementor, Beaver Builder, SiteOrigin e Cornerstone 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 è qualsiasi widget aggiuntivo e unico che non viene fornito in bundle con 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 plugin 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 web 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 usare del codice PHP personalizzato. Ora, puoi registrare facilmente il widget per la traduzione usando wpml-config.xml, il file di configurazione di WPML.

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

Il nostro plugin Multilingual Tools include un WPML – Config Generator per i blocchi di Elementor e 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.

Puoi ottenere facilmente queste informazioni usando un plugin come JSM Show Post Metadata. Questo plugin mostra i metadati degli articoli e i loro valori non serializzati in un metabox in fondo alle pagine di modifica degli articoli.

In alternativa, puoi seguire questi passaggi per ottenere queste informazioni:

1. Vai alla pagina WPML → Impostazioni, scorri fino alla sezione Traduzione dei campi personalizzati e fai clic sul link Mostra campo di sistema .
2. Imposta il campo personalizzato _elementor_data su Traduci.
3. Crea una nuova pagina e aggiungi solo il widget di Elementor che desideri registrare. Salva la pagina.
4. Vai su WPML → Impostazioni e nella sezione Editor di traduzione attiva temporaneamente l'opzione Editor di traduzione classico.
5. Prova a tradurre la pagina che hai creato nel passaggio 3 usando l'Editor di traduzione classico e noterai un array serializzato, come questo:

6. Copia il contenuto dell'array serializzato.
7. Usa il tuo strumento di unserialize preferito per vedere meglio come il widget sta emettendo il suo contenuto. Nel nostro caso, abbiamo usato il sito Unserialize.

Ecco la spiegazione del contenuto dell'array che vedrai:

• [widgetType] contiene il nome inserito nell'attributo name del tag del widget.
• I campi effettivi saranno all'interno di un array e puoi trovarli cercando [0], che riporterà il contenuto del primo elemento dell'array.
• Il valore di field sarà il nome all'interno delle parentesi che conterrà il nome del campo. Ad esempio: [title] => this is a field title. In questo caso, “title” è il testo di cui hai bisogno.
• “Items of” otterrà il suo valore dall'elemento che crea l'array. Ad esempio: [contents]=> array. In questo caso, “contents” è il testo di cui hai bisogno.

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

Registrare i 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. Un widget semplice qui significa 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>

Esaminiamo la struttura dell'esempio fornito:

1. Inizia con il tag <elementor-widgets>. Questo dice a WPML quali widget del page builder andrai a registrare. Può essere uno di questi:
   • <elementor-widgets>: questo deve essere usato se stai usando Elementor, Elementor PRO o qualsiasi altro componente aggiuntivo di Elementor.
   • <beaver-builder-widgets>: questo deve essere usato se stai usando Beaver Builder Lite, Beaver Builder premium o qualsiasi altro componente aggiuntivo di Beaver Builder.
   • <siteorigin-widgets>: questo 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 usato 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 usato quando il nome del widget è diverso dalla chiave del widget nei dati, ma di solito non è necessario.

3. Aggiungi i campi dei widget, racchiudendoli in un tag <fields>:
   • field: L'ID del campo. Questo è lo stesso ID usato 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 sapere quale campo viene tradotto.
   • editor_type (opzionale): Questo è il tipo di campo di testo usato nell'Editor di traduzione classico di WPML. I valori validi sono LINE, AREA, LINK e VISUAL. Il valore predefinito è LINE se mancante.
   • key_of (opzionale): Questo viene usato solo per i tag <field> che hanno un array all'interno di un tag <fields-in-item>.

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

Registrare i campi con ID di articoli o tassonomie

Nella sezione precedente, hai imparato che l'attributo type viene solitamente usato 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), usi valori speciali che attivano la conversione automatica:

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

Quando usi questi valori di type:

• 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 virgola

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 la tassonomia da convertire:

• 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

Aggiungere sub-type migliora le prestazioni evitando query aggiuntive al database per determinare il tipo di contenuto.

Per altri esempi, vedi il file di configurazione di Elementor e cerca post-ids.

Registrare i 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 nel 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 come esempio la seguente struttura dati del widget Table di Ultimate Addons for Elementor:

Per registrare questo widget, vedi 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 i widget con campi semplici e ripetitore

Nota: 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 far precedere le etichette dei campi dal 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, ogni campo all'interno del widget hotspot è preceduto dall'etichetta Hotspot:. Questo prefisso appare anche nell'Editor di traduzione avanzato, rendendo più facile identificare e tradurre ogni campo:

Registrare altri tipi di contenuto del page builder

Consulta la nostra documentazione su come registrare il contenuto del page builder nel file di configurazione della lingua per ulteriori informazioni sulla registrazione di stringhe, shortcode e altro.

Risorse aggiuntive

Per saperne di più sul file wpml-config.xml, visita la guida ai File di configurazione della lingua.

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

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