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フィールドが表示され、翻訳できるようになります。