[워드프레스] jQuery(자바스크립트) 등록및 작동시키는 방법
아래는 워드프레스 테마나 플러그인을 개발할 때 [[jQuery]] 나 [[자바스크립트]] 를 올바르게 로드하여 작동 하도록 하는 방법입니다. 사실 꽤나 간단하지만, 생각보다 왜 안되지? 하는 경우가 많아서 정리 해놓습니다.
(일반적인 워드프레스 사용자라면 사실 만들어진 테마나 플러그인을 사용하기 때문에 jQuery 스크립트를 따로 로드하는 경우가 별로 없습니다.)
준비물
- 스크립트가 들어 있는 js 파일
- 본인이 개발중인 워드프레스 테마 혹은 플러그인
예제
function custom_scripts() { wp_register_script( 'custom-js', get_template_directory_uri() . '/custom.js' ); wp_enqueue_script( 'custom-js' ); } add_action( 'wp_enqueue_scripts', 'custom_scripts' );
위 코드는 실제 사용할 수 있는 최종 결과물입니다.
간단하게 설명하자면 custom-js
라는 스크립트 파일을 등록(register
)하고 대기열에 추가(enqueue
) 하는 custom_scripts
라는 함수를 만들고 wp_enqueue_scripts
라는 워드프레스 기본 함수에 액션을 추가(add_action
)하는 것입니다.
위 코드를 테마에서 작동시키기 위해서는 functions.php
파일에 추가하면 되고, 플러그인에서 작동하도록 하기 위해서는 플러그인의 메인 파일에 추가하면 됩니다.
위 코드는 [[워드프레스 테마]]에서의 작동을 기본으로 하였기에, 스크립트 파일의 기본 주소를 get_template_directory_uri
함수로 불러 오도록 하였습니다. 만약 플러그인에서 작동하도록 하기 위해서는 플러그인의 기본 주소를 불러오는 plugin_dir_url( __FILE__ )
함수를 이용하면 됩니다.
스크립트 register
wp_register_script( 'custom-js', get_template_directory_uri() . '/custom.js' );
워드프레스 내장 함수인 wp_register_script
함수를 이용해 custom-js
라는 이름(첫번째 파라미터)으로 워드프레스 테마가 위치한 폴더의 custom.js
라는 이름의 스크립트 파일을 워드프레스가 인식 할 수 있도록 등록 하는 것입니다.
스크립트 enqueue
wp_enqueue_script( 'custom-js' );
그 다음으로 등록한 custom-js
스크립트 파일을 대기열에 등록하기 위해 wp_enqueue_script
함수를 이용합니다. custom-js
라는 이름의 스크립트를 등록했기 때문에 따로 해당 스크립트에 대한 추가적인 정보를 넣을 필요가 없습니다.
참고
여기서 헷갈릴수 있는 부분이 따로 등록 절차(wp_register_script
)를 거치지 않고 바로 wp_enqueue_script
함수를 이용해 스크립트 파일을 워드프레스가 인식하도록 하면 되지 않을까인데, 왠지 저는 그렇게 하면 스크립트 파일이 제대로 작동하지 않더라구요. 그래서 반드시 등록하고 대기열에 추가 하는 일련의 과정을 거치도록 하였습니다.
끝.