การแปล shortcode ที่เป็น urlencoded

ธีมและปลั๊กอินบางตัวใช้ shortcode แบบ urlencoded ตัวอย่างเช่น กรณีของโมดูลในปลั๊กอินสร้างหน้าเว็บ WPBakery เช่น Progress Bar, Round Chart หรือ Line Chart ในคู่มือนี้ เราจะอธิบายวิธีเปิดใช้งานการแปลเนื้อหาที่ใช้กับ shortcode ประเภทเหล่านี้

shortcode แบบ "urlencoded" คืออะไร

เมื่อคุณแทรกองค์ประกอบที่ใช้ shortcode แบบ urlencoded และสลับตัวแก้ไข 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 ใน shortcode ดังกล่าวจะถูกถอดรหัสเป็นอาร์เรย์ที่เข้ารหัสแบบ 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',
  ),
)

หากคุณพบว่าเรื่องนี้ซับซ้อนเกินไป ไม่ต้องกังวล นี่เป็นกระบวนการภายในที่คุณในฐานะผู้ใช้ไม่จำเป็นต้องเข้าไปแทรกแซง

การแปลค่าใน shortcode แบบ "urlencoded"

ตอนนี้ เรามาดูวิธีแปลส่วน label และ value ของอาร์เรย์นั้นกัน ก่อนหน้า WPML เวอร์ชัน 3.9 การแปล shortcode ประเภทนี้ทำได้ยาก แต่ตอนนี้สามารถทำได้ในไม่กี่ขั้นตอนง่าย ๆ

1. เพิ่ม shortcode ลงในไฟล์ wpml-config.xml ของคุณ

หากคุณไม่มีไฟล์นี้หรือไม่คุ้นเคยกับมัน หน้าเอกสารประกอบนี้ช่วยคุณได้ โดยเฉพาะในส่วนเนื้อหาของปลั๊กอินสร้างหน้าเว็บ

ใน wpml-config.xml ของคุณ นอกเหนือจากโค้ดปกติที่คุณเพิ่มสำหรับ shortcode แล้ว คุณยังต้องเพิ่มแอตทริบิวต์ type="area" และ 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. เพิ่มโค้ดต่อไปนี้ลงในไฟล์ 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 จาก shortcode เหล่านั้น และพร้อมสำหรับการแปลแล้ว