WordPress 將物件/JSON 傳遞給 wp_localize_script

問題描述

我有一個包含物件文字的 javascript 的工作。但是我需要本地化它，我想知道如何重寫它，以便我可以得到 wp_localize_script()，並輸出正確的格式。

non-localized(非動態) 版本如下所示：

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

現在，要讓這些值由 php(基於一些 wp_settings) 生成，我想使用 wp_localize_script，所以我可以從它那裡獲取：

var layoyt_config = my_localized_data.layoyt_config;

並且要獲得該資料的物件屬性我’thought’ 我可以做到這一點，但顯然不是：

$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);

因為這將導致 PHP 解析錯誤我嘗試重寫 json 到陣列語法，因為 wp_localize_script 將轉換回到物件符號，但這也不適用於我：

$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);

而當這個執行順利的時候，php 解析器，我沒有得到我的頁面源的預期輸出，因為 my_localized_data.layout_config 成為一個字串”Array”，這裡是輸出：

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

所以.. 我該怎麼做 (或者我只需要接受，我必須’flatten’ 我的物件成離散的變數，如：

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

最佳解決方案

實際上，wp_localize_script()很簡單，它只是在值附加了引號，並轉義內容，期望它們都是字串。

然而，陣列中有 l10n_print_after 鍵，根本沒有任何干擾。它可以用於在字串傳遞後執行任意程式碼。您可以使用它來傳遞額外的資料。

$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);

你會得到如下程式碼：

var my_localized_data = {}; // What is left of your array
my_localized_data = {'layout_config': {'ls': {'sb1': 1}}}; // From l10n_print_after

參考文獻

pass object/JSON to wp_localize_script

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 將物件/JSON 傳遞給 wp_localize_script