# URL-kódolt shortcode-ok fordítása

> Hogyan teheted fordíthatóvá az URL-kódolt, JSON-t tartalmazó shortcode-ok szövegeit, például a WPBakery Progress Bar elemét.

Egyes témák és bővítmények URL-kódolt shortcode-okat használnak. Ilyen például a WPBakery Page Builder Progress Bar, Round Chart és Line Chart modulja. Ez a fejezet azt mutatja meg, hogyan fordíthatók az ilyen shortcode-ok szövegei.

## Mi az az URL-kódolt shortcode?

Ha beszúrsz egy ilyen elemet, és a szerkesztőt szöveges (Text) módra váltod, a shortcode így néz ki:

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

A `values` érték URL-dekódolás után JSON-tömb:

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

A JSON dekódolása után PHP-tömb lesz belőle:

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

Ez belső folyamat, neked nem kell beavatkoznod.

## Az értékek fordíthatóvá tétele

A szöveges mezők (itt a `label` és a `value`) két lépésben válnak fordíthatóvá.

1. **Add a shortcode-ot a `wpml-config.xml` fájlhoz.** A szokásos shortcode-bejegyzés mellett add meg a `type="area"` és az `encoding="urlencoded_json"` attribútumot is a kódolt mezőnél:

```xml
<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. **Add a következő kódot a témád `functions.php` fájljához.**

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

A kód legfontosabb sora az `in_array( $key, array( ... ) )` feltétel. Ide azokat a kulcsokat kell felvenned, amelyek a dekódolt JSON-tömbben szerepelnek, és fordítani akarod őket. A példában ez a `label` és a `value`.

Ezután a fordítószerkesztőben megjelennek a shortcode-ok `label` és `value` mezői, és fordíthatók. A `wpml-config.xml` fájlról a [nyelvi konfigurációs fájl](https://hub.hellowp.io/hu/plugins/sitepress-multilingual-cms/fejleszto-wpml-config/) fejezetben, az oldalépítő-tartalom regisztrálásáról az [Oldalépítő-tartalom regisztrálása](https://hub.hellowp.io/hu/plugins/sitepress-multilingual-cms/fejleszto-oldalepito-tartalom/) fejezetben olvashatsz.