프로그래밍

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

끝.

Leave a comment