워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법

워드프레스에서 자바스크립트(js) 파일이나 스타일시트 파일(css)을 로드하려면 wp_enqueue_script() 함수를 사용합니다. 이 글에서는 다양한 상황에서 js/css 파일을 워드프레스에 로드하는 방법에 대해 살펴보겠습니다.

워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하기

wp_enqueue_script

wp_enqueue_script ( string $handle, string|bool $src = false, array $deps = array(), string|bool $ver = false, bool $in_footer = false )

파라미터:

• $handle
  (string) (필수) 스크립트 이름
• $src
  (string|bool) (옵션) 워드프레스 루트 디렉터리로부터 스크립트의 경로. 예: '/js/myscript.js'.
  기본값: false
• $deps
  (array) (옵션) 이 스크립트가 의존하고 있는 등록된 핸들의 array.
  기본값: array()
• $ver
  (string|bool) (옵션) 스크립트 버전 번호. 이 파라미터는 캐싱에 상관 없이 올바른 버전이 클라이언트에 전달되도록 하는 데 사용됩니다.
  기본값: false
• $in_footer
  (bool) (옵션) 스크립트가 </head> 앞에 위치할지 아니면 </body> 앞에 위치할지를 지정합니다. 기본값은 'false'입니다. 'false' 또는 'true' 사용 가능.
  기본값: false

예시:

다음과 같은 코드를 함수 파일에 추가하도록 합니다.

function wpdocs_scripts_method() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );

위에서 get_stylesheet_directory_uri()는 자식 테마가 있는 경우 자식 테마의 경로를 가리킵니다. 만약 부모 테마의 경로를 가리키려면 get_template_directory_uri()를 사용하도록 합니다. 따라서 위의 액션 함수는 테마 폴더 아래의 js/custom_script.js 파일을 후크(enqueue)하게 됩니다.

wp register script

wp register script는 워드프레스 내의 스크립트 파일을 등록했다가 wp_enqueue_script() 함수를 사용하여 페이지에 연결하는 데 사용되며 스크립트 의존성(Dependency)를 안전하게 처리합니다.

사용법:

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

예시:

add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );

function enqueue_and_register_my_scripts(){
wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js' ); // 테마 폴더 내 js 폴더 아래의 my-script.js 파일을 등록
// jQuery(워드프레스에 의해 자동으로 등록)와 my-script(바로 위에서 등록됨)를 Dependency로 가지는 스크립트를 로드(Enquque)시킴
wp_enqueue_script( 'my-careers-script', get_stylesheet_directory_uri() . '/js/my-careers-script.js', array( 'jquery', 'my-script' ) );
}

플러그인에서 로드하는 경우에는

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

위와 같이 스크립트를 등록한 후에

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

wp_enqueue_script('test');

위와 같은 방식으로 스크립트를 include시킵니다. plugin_dir_url( __FILE__ )은 플러그인 _FILE_의 경로를 나타냅니다. 따라서 위의 경우 해당 플러그인 폴더 아래의 test.js 파일을 로드하게 됩니다.

function myplugin_scripts() {
wp_register_style( 'foo-styles',  plugin_dir_url( __FILE__ ) . 'assets/foo-styles.css' );
wp_enqueue_style( 'foo-styles' );
}
add_action( 'wp_enqueue_scripts', 'myplugin_scripts' );

플러그인 폴더 아래의 CSS를 로드할 경우 위와 같은 형태로 사용할 수 있습니다. 다음과 같은 코드로 사용자 CSS를 로드할 수 있습니다.

function custom_style_sheet() {
wp_enqueue_style( 'custom-styling', get_stylesheet_directory_uri() . '/mycustom.css' );
}
add_action('wp_enqueue_scripts', 'custom_style_sheet');

특정 페이지에 스크립트 로드하기

특정 페이지나 특정 조건을 지정하여 스크립트를 로드(후크)시킬 수 있습니다.

function enqueue_and_register_my_scripts(){

wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js' );

// Enqueues a script only to be used on a specific page of the site
// 사이트의 특정 페이지에만 사용하도록 스크립트를 enquque(후크)시킴
if ( is_page( 'careers' ) ){

wp_enqueue_script( 'my-careers-script', get_stylesheet_directory_uri() . '/js/my-careers-script.js', array( 'jquery', 'my-script' ) );
}
}

위와 같이 wp_enqueue_script() 부분을 조건문(if...)으로 둘러싸면 해당 조건을 충족하는 경우에만 로드됩니다.

[출처] https://www.thewordcracker.com/intermediate/how-to-load-js-files-in-wordpress/