Перевод URL-кодированных шорткодов

Некоторые темы оформления и плагины используют URL-кодированные шорткоды. Например, это относится к таким модулям конструктора страниц WPBakery Page Builder, как Progress Bar, Round Chart или Line Chart. В этом руководстве мы объясним, как включить перевод контента, используемого с этими типами шорткодов.

Что такое «URL-кодированные» шорткоды?

Когда Вы вставляете элемент, использующий URL-кодированные шорткоды, и переключаете редактор WordPress в режим Текст, Вы увидите, что они выглядят примерно так:

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

Атрибут value в таких шорткодах декодируется в массив в формате JSON, который выглядит примерно так:

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

И, наконец, этот JSON-вывод также декодируется в массив, подобный этому:

Декодированный массив JSON

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

Если Вам кажется, что это слишком сложно, не волнуйтесь. Это внутренний процесс, в который Вам как пользователю вмешиваться не нужно.

Перевод значений в «URL-кодированных» шорткодах

Теперь давайте посмотрим, как перевести части label и value этого массива. До версии WPML 3.9 переводить шорткоды этого типа было сложно, но теперь это можно сделать за несколько простых шагов.

1. Добавьте шорткод в Ваш файл wpml-config.xml.

Если у Вас его нет или Вы с ним не знакомы, Вам поможет эта страница документации, особенно раздел Контент конструктора страниц.

В Ваш wpml-config.xml, помимо обычного кода, который Вы добавляете для шорткода, Вам также нужно добавить атрибуты type="area" и encoding="urlencoded_json":

Шорткод Progress bar

<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. Добавьте следующий код в файл functions.php Вашей темы оформления.

Функция Progress bar

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

Самая важная часть приведенного выше кода находится в следующей строке:

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

Здесь Вы должны добавить правильные ключи, которые можно получить из декодированного массива JSON. В нашем примере это будут label и value.

И на этом всё! Теперь в Редакторе переводов Вы увидите поля label и value из этих шорткодов, и они будут готовы к переводу.