Certains thèmes et extensions utilisent des shortcodes encodés en URL. Par exemple, c’est le cas des modules du constructeur de pages WPBakery tels que Progress Bar, Round Chart ou Line Chart. Dans ce guide, nous expliquons comment activer la traduction du contenu utilisé avec ces types de shortcodes.
Que sont les shortcodes « urlencoded » ?
Lorsque vous insérez un élément qui utilise des shortcodes urlencoded et que vous passez votre éditeur WordPress en mode Texte, vous verrez qu’ils ressemblent à ce qui suit.
[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="%"]
La valeur de ces shortcodes est décodée en un tableau encodé en JSON similaire à ce qui suit :
[{"label":"Development Test","value":"90"},{"label":"Design Test","value":"80"},{"label":"Marketing","value":"70","color":"bar_blue"}]Et enfin, cette sortie JSON est également décodée en un tableau similaire à celui-ci :
Tableau JSON décodé
array (
0 =>
array (
'label' => 'Development Test',
'value' => '90',
),
1 =>
array (
'label' => 'Design Test',
'value' => '80',
),
2 =>
array (
'label' => 'Marketing',
'value' => '70',
'color' => 'bar_blue',
),
)Si vous trouvez cela trop complexe, ne vous inquiétez pas. Il s’agit d’un processus interne dans lequel vous n’avez pas besoin d’intervenir en tant qu’utilisateur.
Traduire les valeurs dans les shortcodes « urlencoded »
Voyons maintenant comment traduire les parties label et value de ce tableau. Avant la version 3.9 de WPML, il était difficile de traduire des shortcodes de ce type, mais cela peut désormais se faire en quelques étapes simples.
1. Ajoutez le shortcode à votre fichier wpml-config.xml.
Si vous n’en avez pas ou si vous ne le connaissez pas, cette page de documentation devrait vous aider, en particulier la section Contenu du constructeur de pages.
Dans votre fichier wpml-config.xml, en plus du code habituel que vous ajoutez pour un shortcode, vous devez également ajouter les attributs type="area" et 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. Ajoutez le code suivant au fichier functions.php de votre thème.
Fonction 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;
}La partie la plus importante du code ci-dessus se trouve à la ligne suivante :
if ( in_array( $key, array( 'text', 'title', 'features', 'substring', 'btn_text', 'label', 'value', 'y_values' ) ) )
Ici, vous devez ajouter les clés correctes que vous pouvez obtenir à partir du tableau JSON décodé. Dans notre exemple, il s’agirait de label et value.
Et c’est tout ! Désormais, dans l’Éditeur de traduction, vous verrez les champs label et value de ces shortcodes et ils seront prêts pour la traduction.
