Tradurre gli shortcode urlencoded

Alcuni temi e plugin usano gli shortcode urlencoded. Ad esempio, questo è il caso dei moduli del page builder WPBakery come Progress Bar, Round Chart o Line Chart. In questa guida, spieghiamo come abilitare la traduzione dei contenuti usati con questi tipi di shortcode.

Cosa sono gli shortcode “urlencoded”?

Quando inserisci un elemento che usa gli shortcode urlencoded e passi il tuo editor di WordPress alla modalità Testo, vedrai che hanno un aspetto simile al seguente.

[vc_progress_bar values="%5B%7B%22label%22%3A%22Development%20Test%22%2C%22value%22%3A%2290%22%7D%2C%7B%22label%22%3A%22Design%20Test%22%2C%22value%22%3A%2280%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22bar_blue%22%7D%5D" title="Progress Bar Title Test" units="%"]

Il value in questi shortcode viene decodificato in un array codificato in JSON simile al seguente:

[{"label":"Development Test","value":"90"},{"label":"Design Test","value":"80"},{"label":"Marketing","value":"70","color":"bar_blue"}]

E infine, anche quell’output JSON viene decodificato in un array simile a questo:

Array JSON decodificato

array (
  0 => 
  array (
    'label' => 'Development Test',
    'value' => '90',
  ),
  1 => 
  array (
    'label' => 'Design Test',
    'value' => '80',
  ),
  2 => 
  array (
    'label' => 'Marketing',
    'value' => '70',
    'color' => 'bar_blue',
  ),
)

Se pensi che sia troppo complesso, non preoccuparti. Si tratta di un processo interno in cui tu, come utente, non devi intervenire.

Tradurre i valori negli shortcode “urlencoded”

Ora, vediamo come tradurre le parti label e value di quell’array. Prima della versione 3.9 di WPML, era difficile tradurre gli shortcode di questo tipo, ma ora può essere fatto in pochi semplici passaggi.

1. Aggiungi lo shortcode al tuo file wpml-config.xml.

Se non ne hai uno o non hai familiarità con esso, questa pagina della documentazione dovrebbe aiutarti, in particolare la sezione Contenuti dei page builder.

Nel tuo wpml-config.xml, oltre al normale codice che aggiungi per uno shortcode, devi aggiungere anche gli attributi type="area" e encoding="urlencoded_json":

Shortcode della barra di avanzamento

<shortcode>
    <tag>vc_progress_bar</tag>
    <attributes>
        <attribute encoding="allow_html_tags">title</attribute>
        <attribute type="area" encoding="urlencoded_json">values</attribute>
    </attributes>
</shortcode>

2. Aggiungi il seguente codice al file functions.php del tuo tema.

Funzione della barra di avanzamento

add_filter( 'wpml_pb_shortcode_encode', 'wpml_pb_shortcode_encode_urlencoded_json', 10, 3 );
function wpml_pb_shortcode_encode_urlencoded_json( $string, $encoding, $original_string ) {
	if ( 'urlencoded_json' === $encoding ) {
		$output = array();
		foreach ( $original_string as $combined_key => $value ) {
			$parts = explode( '_', $combined_key );
			$i = array_pop( $parts );
			$key = implode( '_', $parts );
			$output[ $i ][ $key ] = $value;
		}
		$string = urlencode( json_encode( $output ) );
	}
	return $string;
}

add_filter( 'wpml_pb_shortcode_decode', 'wpml_pb_shortcode_decode_urlencoded_json', 10, 3 );
function wpml_pb_shortcode_decode_urlencoded_json( $string, $encoding, $original_string ) {
	if ( 'urlencoded_json' === $encoding ) {
		$rows = json_decode( urldecode( $original_string ), true );
		$string = array();
		foreach ( $rows as $i => $row ) {
			foreach ( $row as $key => $value ) {
			if ( in_array( $key, array( 'text', 'title', 'features', 'substring', 'btn_text', 'label', 'value', 'y_values' ) ) ) {
					$string[ $key . '_' . $i ] = array( 'value' => $value, 'translate' => true );
				} else {
					$string[ $key . '_' . $i ] = array( 'value' => $value, 'translate' => false );
				}
			}
		}
	}
	return $string;
}

La parte più importante del codice precedente si trova nella riga seguente:

if ( in_array( $key, array( 'text', 'title', 'features', 'substring', 'btn_text', 'label', 'value', 'y_values' ) ) )

Qui, devi aggiungere le chiavi corrette che puoi ottenere dall’array JSON decodificato. Nel nostro esempio, sarebbero label e value.

E questo è tutto! Ora, nell’Editor di traduzione, vedrai i campi label e value di quegli shortcode e saranno pronti per la traduzione.