WordPress Block Theme – JavaScript 파일

css 파일을 포함시키는 방법과 유사하게 JavaScript 파일도 포함시킬 수 있습니다.

기본적인 함수는 wp_enqueue_script() 입니다.

wp_enqueue_script(
string $handle,
string $src = ”,
string[] $deps = array(),
string|bool|null $ver = false,
array|bool $in_footer = false
);

함수 인자에 $ver 이 있는데, 이 값은 기본 워드프레스의 버전이 사용되지만, 개발자가 임의로 값을 설정해서 캐싱을 하지않고 최신의 파일을 로딩하도록 할 수 있습니다.

wp_enqueue_script(
‘theme-slug-example’,
get_parent_theme_file_uri( ‘assets/js/example.js’ ),
array(),
wp_get_theme()->get( ‘Version’ ),
true
);

특정 시점에 js 파일을 포함시키도록 명령하기 위해서 ‘wp_enqueue_scripts’ 후크에 액션을 걸어서 js를 포함시키도록 설정합니다.

add_action( ‘wp_enqueue_scripts’, ‘theme_slug_enqueue_scripts’ );

function theme_slug_enqueue_scripts() {
wp_enqueue_script(
‘theme-slug-navigation’,
get_parent_theme_file_uri( ‘assets/js/navigation.js’ ),
array(),
wp_get_theme()->get( ‘Version’ ),
true
);
}

inline JavaScript 포함시키는 방법

wp_add_inline_script() 함수를 사용할 수 있습니다.

add_action( ‘wp_enqueue_scripts’, ‘theme_slug_enqueue_scripts’ );

function theme_slug_enqueue_scripts() {
wp_add_inline_script(
‘theme-slug-navigation’,
‘console.log( “Testing” );’
);
}

Editor 에서 사용할 JavaScript 포함시키는 방법

블록 편집기에 사용할 js 파일이 있다면 enqueue_block_editor_assets 후크에 액션을 걸어서 js파일을 로드하도록 설정하면 됩니다.

add_action( ‘enqueue_block_editor_assets’, ‘theme_slug_enqueue_editor_scripts’ );

function theme_slug_enqueue_editor_scripts() {
wp_enqueue_script(
‘theme-slug-editor’,
get_parent_theme_file_uri( ‘assets/js/editor.js’ ),
array(),
wp_get_theme()->get( ‘Version’ ),
true
);
}