Tradução de shortcodes codificados em URL

Alguns temas e plugins usam shortcodes codificados em URL. Por exemplo, esse é o caso de módulos do construtor de páginas WPBakery, como Progress Bar, Round Chart ou Line Chart. Neste guia, explicamos como ativar a tradução do conteúdo usado com esses tipos de shortcodes.

O que são shortcodes “codificados em URL”?

Quando você insere um elemento que usa shortcodes codificados em URL e muda o seu Editor do WordPress para o modo de Texto, você verá que eles se parecem com o seguinte.

[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="%"]

O value nesses shortcodes é decodificado em um array codificado em JSON semelhante ao seguinte:

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

E, finalmente, essa saída em JSON também é decodificada em um array semelhante a este:

Array JSON decodificado

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 você acha isso muito complexo, não se preocupe. Esse é um processo interno no qual você, como usuário, não precisa intervir.

Traduzindo valores em shortcodes “codificados em URL”

Agora, vamos ver como traduzir as partes label e value desse array. Antes da versão 3.9 do WPML, era difícil traduzir shortcodes desse tipo, mas agora isso pode ser feito em poucos passos simples.

1. Adicione o shortcode ao seu arquivo wpml-config.xml.

Se você não tem um ou não está familiarizado com ele, esta página de documentação deve ajudar, especialmente a seção Conteúdo do construtor de páginas.

No seu wpml-config.xml, além do código comum que você adiciona para um shortcode, você também precisa adicionar os atributos type="area" e encoding="urlencoded_json":

Shortcode de barra de progresso

<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. Adicione o seguinte código ao arquivo functions.php do seu tema.

Função de barra de progresso

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;
}

A parte mais importante do código acima está localizada na seguinte linha:

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

Aqui, você deve adicionar as chaves corretas que você pode obter do array JSON decodificado. No nosso exemplo, elas seriam label e value.

E é isso! Agora, no Editor de tradução, você verá os campos label e value desses shortcodes e eles estarão prontos para tradução.