WordPress에서 PHP 변수를 JavaScript로 전달하는 방법

WordPress 테마 또는 플러그인을 빌드할 때 PHP의 데이터/값을 사용해야 하는 JavaScript 코드가 있는 경우가 있습니다. 예를 들어 JavaScript 코드에 다음 값이 필요합니다.

Homepage URL
Theme option values
WordPress posts data
etc

가장 쉬운 방법은 header.php 테마 파일 또는 wp_head 후크에서 해당 값을 JavaScript 객체로 초기화하는 것입니다. 예를 들어 :

<script>
var myThemeParams = {
   homeURL: <?php echo home_url(); ?>,
   themeOptions: <?php echo get_theme_mod( 'mytheme_options', false ); ?>,
}
</script>

작동하지만 WordPress에는 이와 같은 작업을 수행할 수 있는 기능이 제공되었습니다. wp_add_inline_script라고 합니다.

wp_add_inline_script( $handle, $data, $position = 'after' )

$handle : 인라인 스크립트를 추가할 스크립트의 이름입니다.

$data : 추가할 JavaScript가 포함된 문자열입니다.

$position : 핸들 앞 또는 뒤에 인라인 스크립트를 추가할지 여부.

이 함수는 JavaScript 코드 앞이나 뒤에 인라인 스크립트를 추가합니다. 실제로 JavaScript에 PHP 변수를 전달하는 것 외에 더 많은 작업을 수행할 수 있습니다. 여기에서 다른 사용 사례를 볼 수 있습니다.

따라서 PHP에서 JavaScript로 변수를 전달하기 위해 wp_add_inline_script를 사용하려면 JS 파일 앞에 인라인 스크립트를 추가하도록 위치 속성을 before로 설정해야 합니다. 그런 다음 JavaScript 개체를 초기화하고 PHP의 데이터로 값을 설정합니다.

$myThemeParams = array(
    'homeURL' => home_url(),
    'themeOptions' => get_theme_mod( 'mytheme_options', false )
);
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js' );
wp_add_inline_script( 'my-theme-script', 'var myThemeParams = ' . wp_json_encode( $myThemeParams ), 'before' );

JavaScript에서 다음과 같이 액세스할 수 있습니다.

console.log( myThemeParams.homeURL );
console.log( myThemeParams.themeOptions );