워드프레스 jQuery 호환 모드(Compatibility Mode)

아래 내용은 wpmudev의 "How to Properly Add jQuery Scripts to WordPress(워드프레스에 jQuery 스크립트를 올바르게 추가하는 방법)"에 나온 내용 중 "jQuery’s Compatibility Mode" 부분만 발췌한 것입니다.

jQuery의 호환 모드

워드프레스 코어에는 jQuery가 기본적으로 포함되어 있습니다. 워드프레스의 jQuery가 로드되면 다른 언어 라이브러리와의 충돌을 방지하는 메커니즘인 호환 모드(Compatibility Mode)가 사용됩니다. 합니다.

요약하면 다른 프로젝트에서 사용하듯이 달러 기호($)를 사용할 수 없습니다. 워드프레스에 사용할 jQuery를 작성할 때 달러 기호 대신 jQuery를 사용해야 합니다. 아래 코드를 살펴보시면 무슨 의미인지 이해하게 될 것입니다.

/* 일반적인 jQuery */
$('.hideable').on('click', function() {
$(this).hide();
})

/* 호환 모드 */
jQuery('.hideable').on('click', function() {
jQuery(this).hide();
})

다행히 몇 가지 방법을 통해 달러 기호를 다시 사용할 수 있습니다. jQuery를 너무 많이 사용하면 코드가 길어지고 읽기도 어렵게 됩니다.

잘 아시겠지만, $ 기호는 jQuery()의 별칭(Alias; 앨리어스)이고 함수의 별칭입니다. 기본적인 구문은 $(selector).action()입니다.

  • 달러 기호 - jQury 정의
  • (선택자) - HTML 요소 쿼리(또는 찾기)
  • jQuery 액션() - 요소에 대해 수행됨

스크립트를 푸터에서 로드하는 경우 코드를 익명 함수(anonymous function)로 둘러쌀 수 있습니다. 그러면 jQuery를 $로 매핑합니다. 방법은 다음과 같습니다.

(function($) {

$('.hideable').on('click', function() {
$(this).hide();
})

})( jQuery );

스크립트를 헤더에서 로드하려는 경우(가능한 경우 이 방법은 피해야 함) document-ready 함수로 모든 것을 둘러쌀 수 있습니다.

jQuery(document).ready(function( $ ) {

$('.hideable').on('click', function() {
$(this).hide();
})

});

댓글 남기기

* 이메일 주소는 공개되지 않습니다.