[워드프레스] 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 함수를 이용해 스크립트 파일을 워드프레스가 인식하도록 하면 되지 않을까인데, 왠지 저는 그렇게 하면 스크립트 파일이 제대로 작동하지 않더라구요. 그래서 반드시 등록하고 대기열에 추가 하는 일련의 과정을 거치도록 하였습니다.

끝.