URL 인코딩된 숏코드 번역

일부 테마 및 플러그인은 URL 인코딩된 숏코드를 사용합니다. 예를 들어, Progress Bar, Round Chart 또는 Line Chart와 같은 WPBakery 페이지 빌더 모듈이 이에 해당합니다. 이 가이드에서는 이러한 유형의 숏코드와 함께 사용되는 콘텐츠의 번역을 활성화하는 방법을 설명합니다.

“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 필드가 표시되며 번역할 수 있습니다.