übergeben Sie object / JSON an wp_localize_script

15

Ich habe ein funktionierendes Stück Javascript, das ein Objektliteral enthält. Aber ich muss es lokalisieren und versuche herauszufinden, wie ich es umschreiben kann, damit ich wp_localize_script () bekomme, um es zu aktivieren und das richtige Format auszugeben.

Die nicht lokalisierte (nicht dynamische) Version sieht folgendermaßen aus:

var layoyt_config = {
    'header'        : 1 
,   'footer'        : 1
,   'ls'            : {'sb1':1}
,   'rs'            : {'sb1':1,'sb2':1}
,   'align'         : 'center'
};  

Um diese Werte von PHP generieren zu lassen (basierend auf einigen wp_settings), möchte ich wp_localize_script verwenden, damit ich sie von dort übernehmen kann:

var layoyt_config = my_localized_data.layoyt_config;

Und um diese Daten in diese Objekteigenschaft zu bekommen, dachte ich, dass ich das tun könnte, aber offensichtlich nicht:

$data = array(
    'layout_config' => {
        'header' : 1
    ,   'footer' : 1
    ,   'ls' : {'sb1': 1}
    ,    'rs' : {'sb1': 1,'sb2': 1}
    ,    'align' : 'center'
    }
);
wp_localize_script('my-script-handle', 'my_localized_data', $data);

Da dies zu PHP-Analysefehlern führt, habe ich versucht, die Syntax von json in array umzuschreiben, da wp_localize_script diese zurück in die Objektnotation konvertiert, aber das funktioniert auch bei mir nicht:

$data = array(
    'layout_config' => array(
        'header' => 1
    ,   'footer' => 1
    ,   'ls' => array('sb1'=>1)
    ,    'rs' => array('sb1'=>1,'sb2'=>1)
    ,    'align' => 'center'
    )
);
wp_localize_script('my-script-handle', 'my_localized_data', $data);

Und während dies reibungslos über den PHP-Parser läuft, erhalte ich in meiner Seitenquelle nicht die erwartete Ausgabe, da my_localized_data.layout_config zu einem String "Array" wird. Hier ist die Ausgabe:

<script type='text/javascript'>
    /* <![CDATA[ */
    var wpkit_localized_data = {
    layout_config: "Array"
    };
    /* ]]> */
</script>

Also .. Wie kann ich das machen (oder muss ich einfach akzeptieren, dass ich mein Objekt in diskrete Vars 'platt machen' muss wie:

lc_header = '1';
ls_ls_sb1 = '1';
etc...
mikkelbreum
quelle

Antworten:

15

In der Tat wp_localize_script()ist es einfach , es werden lediglich Anführungszeichen um die Werte eingefügt und der Inhalt wird ausgeblendet, wobei erwartet wird, dass alle Werte Zeichenfolgen sind.

Es gibt jedoch den l10n_print_afterSchlüssel des Arrays, der überhaupt ohne Störung gedruckt wird. Es kann verwendet werden, um beliebigen Code auszuführen, nachdem die Zeichenfolgen übergeben wurden. Sie können es verwenden, um Ihre zusätzlichen Daten zu übergeben.

$data = array(
    'layout_config' => {
      'ls' : {'sb1': 1}
    }
);
$reshuffled_data = array(
    'l10n_print_after' => 'my_localized_data = ' . json_encode( $data ) . ';'
);
wp_localize_script('my-script-handle', 'my_localized_data', $reshuffled_data);

Sie erhalten folgenden Code:

var my_localized_data = {}; // What is left of your array
my_localized_data = {'layout_config': {'ls': {'sb1': 1}}}; // From l10n_print_after
Jan Fabry
quelle
Sehr nützlich, obwohl ich denke, Sie meinten ein Semikolon nach json_encode, kein Komma, richtig?
Kovshenin
1
@kovshenin: Guter Fang! Ich habe es korrigiert, aber wenn du es als Änderung vorgeschlagen hättest, hättest du +2 Wiederholungen dafür bekommen.
Jan Fabry
Ich will diese Frage nicht missbrauchen, habe sie jedoch als Referenz für wordpress.stackexchange.com/questions/53842 erhalten (falls jemand hier irgendwelche Hinweise hat). Vielen Dank!
Zach
1

Haftungsausschluss - Ich bin in Bezug auf JS-Sicherheitsfragen hier nicht ganz auf dem neuesten Stand.

Um der gewünschten Ausgabe zu entsprechen, müssen Sie zunächst die Verschachtelungsebene festlegen. Der Objektname wird als Parameter im Aufruf von localize (anstelle des Array-Schlüssels) verwendet:

$data = array(
        'header' => 1
    ,   'footer' => 1
    ,   'ls' => array('sb1'=>1)
    ,    'rs' => array('sb1'=>1,'sb2'=>1)
    ,    'align' => 'center'
);
wp_localize_script('my-script-handle', 'layout_config', $data);

Aber lsund rssind immer noch kaputt, weil die WP_Scripts->print_scripts_l10n()Methode den Fall nicht behandelt, wenn die Variable ein Array ist.

Das Beste, was mir einfiel, war, den folgenden Filter zu reparieren (wie oben - ich bin mir nicht sicher, wie sicher es wäre, ihn in der Produktion zu verwenden, aber um eine allgemeine Vorstellung zu geben):

add_filter('js_escape','js_escape_nested', 10, 2);

function js_escape_nested($safe_text, $text) {

     if(is_array($text) )
         return str_replace( '"', "'", json_encode ($text) );

     return $safe_text;
}
Rarst
quelle
Ich verstehe, dass der Hauptobjektname als 2dn-Parameter in den Aufruf von wp_localize_script eingeht, aber ich tue das bereits, mein lokalisierter Objektname soll 'my_localized_data' sein, dieses Objekt wird eine Vielzahl von Eigenschaften haben, von denen die meisten haben Werte für einfache Zeichenfolgen, aber ich benötige eine dieser Eigenschaften, um ein mehrdimensionales Objekt zu sein.
mikkelbreum
Dies scheint ohne Änderung außerhalb des Bereichs von wp_localize_script zu liegen. Es kann keine mehrdimensionalen Arrays verarbeiten. Ich habe mir jetzt eine andere Methode ausgedacht, bei der ich mein lokalisiertes mehrdimensionales Objekt als HTML-Daten- * wert speichere. Dies funktioniert gut, aber hinterlassen Sie zusätzliche Fragen: wordpress.stackexchange.com/questions/8684
mikkelbreum