URL-codierte Shortcodes übersetzen

Einige Themes und Plugins verwenden URL-kodierte Shortcodes. Dies ist zum Beispiel bei WPBakery Page-Builder-Modulen wie Progress Bar, Round Chart oder Line Chart der Fall. In dieser Anleitung erklären wir, wie Sie die Übersetzung von Inhalten aktivieren, die mit diesen Arten von Shortcodes verwendet werden.

Was sind „URL-kodierte“ Shortcodes?

Wenn Sie ein Element einfügen, das URL-kodierte Shortcodes verwendet, und Ihren WordPress-Editor in den Modus Text umschalten, werden Sie feststellen, dass diese ähnlich wie im folgenden Beispiel aussehen.

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

Der Wert in solchen Shortcodes wird in ein JSON-kodiertes Array dekodiert, das ähnlich wie das Folgende aussieht:

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

Und schließlich wird diese JSON-Ausgabe ebenfalls in ein Array dekodiert, das ähnlich wie dieses aussieht:

Dekodiertes JSON-Array

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

Wenn Ihnen dies zu komplex erscheint, machen Sie sich keine Sorgen. Dies ist ein interner Prozess, bei dem Sie als Benutzer nicht eingreifen müssen.

Werte in „URL-kodierten“ Shortcodes übersetzen

Sehen wir uns nun an, wie Sie die Teile label und value dieses Arrays übersetzen. Vor der WPML-Version 3.9 war es schwierig, Shortcodes dieses Typs zu übersetzen, aber jetzt lässt sich dies in wenigen einfachen Schritten erledigen.

1. Fügen Sie den Shortcode zu Ihrer Datei wpml-config.xml hinzu.

Wenn Sie keine haben oder nicht damit vertraut sind, sollte diese Dokumentationsseite helfen, insbesondere der Abschnitt Page-Builder-Inhalte.

In Ihrer wpml-config.xml müssen Sie neben dem regulären Code, den Sie für einen Shortcode hinzufügen, auch die Attribute type="area" und encoding="urlencoded_json" hinzufügen:

Progress-Bar-Shortcode

<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. Fügen Sie den folgenden Code zur Datei functions.php Ihres Themes hinzu.

Progress-Bar-Funktion

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

Der wichtigste Teil des obigen Codes befindet sich in der folgenden Zeile:

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

Hier müssen Sie die korrekten Schlüssel hinzufügen, die Sie aus dem dekodierten JSON-Array erhalten können. In unserem Beispiel wären dies label und value.

Das ist schon alles! Nun sehen Sie im Übersetzungs-Editor die Felder label und value aus diesen Shortcodes und sie sind bereit für die Übersetzung.