wp_localize_script에 object / JSON을 전달하십시오.


15

객체 리터럴을 포함하는 작동하는 자바 스크립트가 있습니다. 그러나 현지화해야하며 wp_localize_script ()가 액세스하여 올바른 형식을 출력 할 수 있도록 다시 작성하는 방법을 알아 내려고 노력하고 있습니다.

지역화되지 않은 (비 동적) 버전은 다음과 같습니다.

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;

그리고 그 데이터를 해당 객체 속성에 가져 오기 위해 내가 생각한 것은 아니지만, 분명히 할 수는 없습니다.

$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 구문 분석 오류가 발생하므로 wp_localize_script가 객체 표기법으로 다시 변환하므로 json을 배열 구문으로 다시 작성하려고 시도했지만 이것도 작동하지 않습니다.

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

그래서 .. 어떻게해야합니까 (또는 그냥 객체를 이산 변수로 '평평하게'해야한다는 것을 받아 들여야합니까?

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

답변:


15

실제로 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

쉼표가 아닌 json_encode 뒤에 세미콜론을 의미한다고 생각하지만 매우 유용합니까?
kovshenin

1
@ kovshenin : 잘 잡아! 나는 그것을 고쳤다. 그러나 당신이 그것을 편집으로 제안했다면 당신은 그것을 +2로 받았다.
Jan Fabry

이 질문을 도용하려는 것은 아니지만 wordpress.stackexchange.com/questions/53842를 참조하기 위해이 질문 / 답변을 받았습니다 (누군가가 여기에 포인터가있는 경우). 감사!
Zach

1

면책 조항-나는 여기 JS 보안에 깊이 빠져 있습니다.

먼저, 원하는 출력을 맞추기 위해 중첩 수준을 해제하십시오. 객체 이름은 배열 키 대신 로컬 통화에서 매개 변수로 사용됩니다.

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

그러나 ls하고 rs있기 때문에 여전히 깨진 WP_Scripts->print_scripts_l10n()변수가 배열 인 경우 방법은 사건을 처리하지 않습니다.

최선의 방법은 필터를 따르는 필터를 수정하는 것입니다 (위와 같이-프로덕션에서 필터를 사용하는 것이 얼마나 안전한지 확실하지 않지만 일반적인 아이디어를 제공하는 것).

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

주 객체 이름은 wp_localize_script 호출에서 2dn 매개 변수로 들어간다는 것을 이해하지만 이미 그렇게합니다. 내 지역화 된 객체 이름은 'my_localized_data'로 간주되며 해당 객체에는 대부분의 속성이 있습니다. 일반 문자열 값이지만 다차원 개체가 되려면 이러한 속성 중 하나가 필요합니다.
mikkelbreum

이것은 수정없이 wp_localize_script의 범위를 벗어난 것으로 보입니다. 다차원 배열을 처리 할 수 ​​없습니다. 이제 현지화 된 다차원 객체를 html 데이터 * 값으로 저장하는 다른 방법을 생각해 냈습니다. 이것은 잘 작동하지만 추가 질문을 남깁니다. wordpress.stackexchange.com/questions/8684
mikkelbreum
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.