워드프레스에서 jQuery $ 표시 사용하는 법

워드프레스로 사이트를 만들다 보면, 스크립트를 추가하거나 테마 커스터마이징을 위해 jQuery를 사용해야 할 때가 많습니다. 그런데 막상 코드를 붙여넣으면 $ is not a function 같은 오류가 뜨면서 제대로 동작하지 않는 경우가 있죠.

이 글에서는 워드프레스에서 $를 안전하게 사용하는 방법을 가장 쉽고 정확하게 정리해드릴게요!

---

✔️ 왜 $가 바로 안 될까?

워드프레스는 기본적으로 jQuery를 noConflict 모드로 로딩합니다.
즉, $를 전역에서 마음대로 쓰지 못하게 하고, 대신 jQuery를 사용하도록 설정되어 있어요.

그래서 아래처럼 $만 쓰면 오류가 납니다.

$(document).ready(function() {
    console.log("안녕하세요!");
});

---

✔️ 워드프레스에서 $를 쓰는 올바른 방법

1) 즉시 실행 함수(IIFE)로 $ 권한 받아오기

가장 일반적이고 권장되는 방식입니다.

jQuery(function($) {
    // 여기 안에서는 $ 사용 가능!
    $('.menu').addClass('active');
});

위 코드에서 중요한 점은:

• jQuery(function($){ ... })
  → 이 안에서 $는 안전하게 jQuery 역할을 합니다.
• 외부에서는 여전히 $ 충돌을 막아주기 때문에 오류가 발생하지 않습니다.

---

✔️ 또 다른 패턴: 함수 전체 래핑하기

조금 더 구조적으로 작성하고 싶다면 아래처럼 해도 됩니다.

(function($){
    // 여기도 $ 사용 가능
    $(document).ready(function(){
        console.log("로드 완료!");
    });
})(jQuery);

---

✔️ 스크립트 연결 시 꼭 지켜야 할 점

워드프레스에서는 wp_enqueue_script()를 사용해서 jQuery를 불러야 합니다.

function my_script() {
    wp_enqueue_script('jquery');
    wp_enqueue_script(
        'custom-js',
        get_template_directory_uri() . '/js/custom.js',
        array('jquery'), // jQuery 의존성 등록
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'my_script');

여기서 array('jquery')는
“이 스크립트는 jQuery 이후에 실행해줘!” 라는 의미입니다.

---

✔️ 정리

상황	해결 방법
$가 undefined 오류	jQuery noConflict 모드 때문
워드프레스에서 $ 사용	jQuery(function($){ ... }) 안에서 사용
스크립트 로딩 오류	wp_enqueue_script()로 jQuery 의존성 등록

---

✔️ 예시: 워드프레스에서 $로 a 태그 스타일 적용하기

jQuery(function($){
    $('a').on('mouseover', function(){
        $(this).css('box-shadow', '0 2px 8px rgba(0,0,0,0.2)');
    });

    $('a').on('mouseout', function(){
        $(this).css('box-shadow', 'none');
    });
});

위 방법으로 워드프레스에서도 $를 자유롭게 사용해보세요!