wp_enqueue_script() | 자바스크립트 파일 연결
정라잇 |
개요
워드프레스에서 사용되는 자바스크립트 파일을 연결하는 방법입니다.
wp_enqueue_script('{$이름}', {$경로}, {$의존}, '{$버전}', '{$푸터}');| 매개변수 | 예제 | 설명 | 필수 |
|---|---|---|---|
| $이름 | 이름 | 겹치지 않는 이름을 지정합니다 | O |
| $경로 | get_template_directory_uri() . ‘주소값’ | 파일 경로를 지정합니다. | O |
| $의존 | array(선행 스크립트명) | 먼저 실행해야하는 스크립트 | X |
| $버전 | 1.0.0 time() | 버전명을 1.0.0로 설정합니다. 버전명을 시간으로 설정합니다 | X |
| $푸터 | false (기본값) true | <head> 영역에 추가합니다 </body> 앞에 추가합니다 | X |
사용방법
function script_default()
{
// 여기에 함수 추가
}
add_action('wp_enqueue_scrupts' , 'script_default');우리는 액션 함수를 활용하여 함수를 작동시킬겁니다.
적용방법은 테마의 functions.php 에 값을 추가하면 되는데 자세한 내용은 [이곳] 을 참고하시면 됩니다.
wp_enqueue_scrupts 는 프론트 엔드 영역에서만 작동되는 스크립트이며, 관리자 영역에서 작동되길 원하신다면 admin_enqueue_scripts 를 대체해서 넣으면 됩니다.
쉬운 적용방법
// 설명용
wp_enqueue_script('$이름', $경로);
// 활용
wp_enqueue_script('rdg_theme_script', get_template_directory_uri().'/script.js' );가장 쉽게 사용하는 방법입니다. $이름과 $경로 만 설정하면 사용할 수 있습니다. get_template_directory_uri() 를 활용하면 테마 경로를 가져오게 됩니다. 테마 경로에 있는 style.css 를 가져온다는 의미입니다.
핵심 적용방법
// 설명용
wp_enqueue_script('$이름', $경로, $의존, '$버전', '$푸터');
// 활용
wp_enqueue_script('rdg_theme_script', get_template_directory_uri().'/script.js', array(), '1.0.0', false);$의존은 먼저 실행되어야 하는 자바스크립트 자료가 있는경우 array() 안에 적어두면 그 JS가 실행된 다음 해당 JS가 실행됩니다. 이것이 궁금하신 분은 [여기] 를 참고해주세요.
$버전은 브라우저에게 캐시를 새로 다운받아야 한다는 것을 알릴 수 있습니다. 잔꾀를 부리자면 time() 함수를 사용하여 매번마다 다운받게 만들 수도 있습니다. 이 방법은 개발할 때만 사용하면 편합니다.
$푸터는 true를 입력하면 </body> 영역에서 실행됩니다. 실행 순서를 늦게 하는 작업입니다. 기본값은 false 입니다.
제이쿼리 등록하기
wp_enqueue_script('jquery');제이쿼리를 등록해야 하는 경우 해당 코드를 wp_enqueue_scripts 를 추가해야합니다.
HTML 적용방법
일반적인 방법은<head>태그의 마지막에link태그를 추가합니다.