2016년 12월 24일 토요일

wp_enqueue_script() 사용법 - 워드프레스

안녕하세요. Alan 입니다.

워드프레스 wp_enqueue_script() 함수 사용법(https://developer.wordpress.org/reference/functions/wp_enqueue_script/)을 간단히 정리하였습니다.

[설명]

wp_enqueue_script() 함수는 워드프레스 내에서 스크립트를 추가할때 사용합니다.
별도로 html 내에 태그를 통해 스크립트를 추가하기 보다,
워드프레스 내의 스크립트 관리를 위해서 wp_enqueue_script() 함수를 적극 활용하는 것이 좋습니다.

기본적으로 워드프레스는 jquery 와 같은 스크립트와 오픈소스 스크립트 등이 이미 일부 포함되어 등록되어 있습니다.

해당 스크립트와 충돌을 방지하거나, 또는 버전별로 관리하기 위해서는 가급적 wp_enqueue_script() 함수를 이용하여 활용하시는 것이 좋습니다.

스크립트에 변수값을 추가하기 위해서는 별도의 함수인 wp_localize_script() 사용법을 참고해주세요.

[함수 설명]

wp_enqueue_script(string $handle, string $src='', array $deps=array(),string|bool|null $ver = false, bool $in_footer = false)


$handle

핸들값(스크립트 명칭). 스크립트의 명칭을 주로 입력합니다. 예) jquery-ui 등등...

$src

스크립트 소스 경로. URL 기반으로 입력하면 됩니다. URL 을 표시하는 워드프레스 함수 등을 이용하여 지정하시면 좋습니다.

$deps

스크립트 의존성 설정. 특정 스크립트가 있어야 한다거나, jquery 가 있어야 동작한다던가 하는 의존성을 설정할 수 있습니다. 배열이나, 문자열, bool 값, null 값이 들어갈 수 있습니다.

$ver

스크립트 버전정보 설정. 문자열로 버전 정보를 기입하면, 추후 스크립트 로딩시 script.js?ver=1.0 과 같이 버전 정보를 추가하여, 브라우저가 최신 버전이 적용되면 바로 로딩할 수 있게 됩니다. 가급적 기준이 되는 버전 정보를 기재하여 사용하는 것이 좋습니다.

$in_footer

스크립트 호출 위치 설정. header 와 footer 중 어디에 스크립트가 로딩되도록 설정할 것인지를 지정합니다. true 또는 false로 설정할 수 있으며, true 설정시 footer 에서 스크립트가 로딩됩니다.


[사용 예제]

/**
 * Proper way to enqueue scripts and styles.
 */
function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );


감사합니다. 

댓글 없음:

댓글 쓰기

댓글을 통한 의뢰/홍보/광고나 스팸 작성은 정중히 거절합니다.