워드프레스에서 자바스크립트(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);
위와 같이 스크립트를 등록한 후에
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...)으로 둘러싸면 해당 조건을 충족하는 경우에만 로드됩니다.
참고:
References:
- wp_enqueue_script (developer.wordpress.org)
- wp enqueue script (Codex)
- Including JavaScript in Plugins or Themes, the Right Way (올바른 방식으로 플러그인이나 테마에서 자바스크립트 include시키기
- How to enqueue Scripts & Stylesheets to WordPress via a plugin (플러그인을 통해 워드프레스에 스크립트/스타일시트 enquque(후크)시키는 방법)
- plugin dir url (Codex)
- ADDING SCRIPTS AND STYLES TO WORDPRESS THE RIGHT WAY WITH ENQUEUEING (올바른 방식으로 Enquque를 사용하여 워드프레스에 스크립트와 스타일을 추가하는 방법)
안녕하세요. 워드님,
블로그에 유익한 글들이 많아 항상 많은 도움 얻어가고 있습니다.
html, css에 대해서만 지식이 있다보니 워드프레스 페이지 작업 중 막히는 부분이 있어서 문의 드립니다.
아래의 소스를 특정 페이지에 한해서만 적용하고 싶습니다.
--------------------------------
function sayHello(){
alert("Hello World!")
}
클릭해주세요!
--------------------------------
일단 부분은 페이지에 적용했는데요.
부분은 어떻게 처리해야하는지 알려주시면 감사하겠습니다.
안녕하세요? 댓글에 HTML 태그를 입력하면 HTML 태그는 삭제되고 등록됩니다.
스크립트를 특정 페이지에만 적용하기를 원하는 것으로 이해되네요.
올바른 방법은 다음 글을 참고해보세요:
https://iwordpower.com/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90%EC%84%9C-js-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%ED%8A%B9%EC%A0%95-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%EC%8B%A4%ED%96%89/
답변 감사합니다!
아래와 같이 하면 되는건가요?
1. 페이지 생성시 grid 라는 제목으로 생성
2. 차일드 테마 폴더 내 grid.js 파일 생성
3. functions.php 파일에 아래 코드 추가
function my_scripts() {
if( is_page( array( 'grid' ) ) ){
wp_enqueue_script( 'script-name', 'grid.js', array(), '1.0.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
한 번 시도해보시고 문제 있으면 알려주시기 바랍니다.
안녕하세요. 워드님
주말 잘 보내셨나요?
버튼을 클릭하면 Hello World! 라는 얼럿 창이 뜨는 소스인데.
grid.js 파일을 제대로 호출하지 못하는 것 같습니다.
한번 살펴봐 봐주시면 감사하겠습니다.
https://wordpress-958476-3655171.cloudwaysapps.com/grid/
제대로 하면 잘 로드됩니다. wpcode 플러그인을 설치하시고, 푸터 부분에 javascript 코드를 추가해보시겠어요? <script> 태그도 추가해야 합니다. 그래도 안 된다면 버튼에 추가된 onclick() 이벤트 때문일 수 있습니다. 버튼도 Js로 생성하도록 코드를 바꾸어보세요. 아니면 버튼을 숏코드로 만들어서 추가하는 것도 가능합니다.
넵! 알겠습니다.
한가지만 더 문의드릴께요.
grid.js 파일의 위치는 어디에 있어야 하는 건가요?
현재는 차일드 테마 폴더 내에 있습니다.
본문에서 맨 아래에 제시된 코드를 사용하는 경우...
차일드 테마 내의 js 폴더 아래에 추가해야 합니다. js 파일에는 <script> 태그가 없어야 합니다.
너무 감사합니다!!
오늘도 좋은 하루되세요~!
좋은글 감사합니다.
js 파일 적용 시, functions.php 최상단에 적용하지 않으니, 일부 Theme과 간섭이 일어나 White Blank Page 이슈가 일어나더라구요. 혹, 참고 될까하여 댓글 남겨봅니다. ㅎ
안녕하세요?
실행 순서와 관련되는 것 같네요.
이 경우 priority를 지정하는 것이 바람직할 것 같습니다.
add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
https://www.thewordcracker.com/intermediate/how-to-add-a-jquery-datepicker-in-wordpress/
여기서 타고 들어왔습니다. 예시와 같이 저도 kboard로 날짜피커 추가할려고 하는데 혹시 예시파일 있으신가요?
wpdocs_scripts_method , wp register script 소스들을 어느 파일에 추가해야하나요?
감사합니다!
안녕하세요?
위의 예시를 상황에 맞게 적절히 수정하시면 됩니다.
테마의 함수 파일(functions.php)에 추가하시기 바랍니다.
twentysixteen_datepicker > template-parts > functions.php
//wp_enqueue_scripts
function wpdocs_scripts_method() {
wp_enqueue_script( 'datepicker-script', get_stylesheet_directory_uri() . '/js/datepicker.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
//END
//wp register script
add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );
function enqueue_and_register_my_scripts(){
//플러그인에서 로드하는 경우
wp_register_script('test', plugin_dir_url(__FILE__) . 'datepicker.js', array('jquery'), '1.0', true);
// jQuery(워드프레스에 의해 자동으로 등록)와 my-script(바로 위에서 등록됨)를 Dependency로 가지는 스크립트를 로드(Enquque)시킴
wp_enqueue_script('test');
//END
twentysixteen_datepicker > template-parts > header.php
twentysixteen_datepicker > js > datepicker.js
$(function() {
$( "#datepicker1" ).datepicker({
dateFormat: 'yy-mm-dd'
});
});
default_deadline > editor.php
Date of Birth (DOB): <input type="text" id="kboard-input-option-deadline" name="kboard_option_deadline" value="option->deadline?>">
default_deadline > document.php
option->deadline?>
이렇게 추가해보았는데요, 잘못된 부분이 있을까요?
Parse error: syntax error, unexpected end of file in /host/home/super/html/wp-content/themes/twentysixteen_datepicker/functions.php on line 425
이렇게 페이지가 떠서 처음부터 functions.php에서 안읽히네요 .. 어디서 설정을 잘못한건지..
425줄은 참고로 맨 마지막 줄이에요
kboard timepicker 페이지 소스 한번 받을 수 있을까요?
안녕하세요?
함수 파일에서는 위의 코드를 다 삭제하고 아래 코드만 추가해보시기 바랍니다.
function wpdocs_scripts_method() {
wp_register_script('datepicker-scripts', get_stylesheet_directory_uri() . 'js/datepicker.js', array('jquery'), '1.0', true);
wp_enqueue_script('datepicker-scripts');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
date picker에 대해서는 다른 글에서 자세히 설명했으니 그대로 따라하면 별 문제가 없을 것입니다.
네 에러 페이지 없어졌어요! 감사합니다