Dịch các shortcode được mã hóa URL

Một số giao diện và plugin sử dụng các shortcode được mã hóa url. Ví dụ: đây là trường hợp của các module WPBakery Page Builder như Progress Bar, Round Chart hoặc Line Chart. Trong hướng dẫn này, chúng tôi sẽ giải thích cách bật tính năng dịch nội dung được sử dụng với các loại shortcode này.

Shortcode “được mã hóa url” là gì?

Khi bạn chèn một phần tử sử dụng các shortcode được mã hóa url và chuyển trình soạn thảo WordPress của bạn sang chế độ Văn bản , bạn sẽ thấy chúng trông giống như sau.

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

Phần value trong các shortcode như vậy được giải mã thành một mảng được mã hóa JSON tương tự như sau:

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

Và cuối cùng, đầu ra JSON đó cũng được giải mã thành một mảng tương tự như thế này:

Mảng JSON đã giải mã

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

Nếu bạn thấy điều này quá phức tạp, đừng lo lắng. Đây là một quá trình nội bộ mà bạn, với tư cách là người dùng, không cần phải can thiệp.

Dịch các giá trị trong shortcode “được mã hóa url”

Bây giờ, hãy xem cách dịch các phần label và value của mảng đó. Trước phiên bản WPML 3.9, việc dịch các shortcode loại này khá khó khăn nhưng giờ đây có thể được thực hiện trong vài bước đơn giản.

1. Thêm shortcode vào tệp wpml-config.xml của bạn.

Nếu bạn chưa có tệp này hoặc chưa quen với nó, trang tài liệu này sẽ hữu ích, đặc biệt là phần Nội dung của trình tạo trang.

Trong tệp wpml-config.xml của bạn, bên cạnh mã thông thường mà bạn thêm cho một shortcode, bạn cũng cần thêm các thuộc tính type="area" và encoding="urlencoded_json":

Shortcode 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. Thêm mã sau vào tệp functions.php trong giao diện của bạn.

Hàm 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;
}

Phần quan trọng nhất của đoạn mã trên nằm ở dòng sau:

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

Tại đây, bạn phải thêm các khóa (key) chính xác mà bạn có thể lấy từ mảng JSON đã giải mã. Trong ví dụ của chúng tôi, chúng sẽ là label và value.

Và thế là xong! Bây giờ, trong Trình biên tập dịch thuật, bạn sẽ thấy các trường label và value từ các shortcode đó và chúng sẽ sẵn sàng để dịch.