[워드프레스] 제이쿼리/자바스크립트 사용하기

초반에는 워드프레스에서 제이쿼리 사용할때, 워드프레스에서 사용하는 방법을 잘몰라서 웹사이트가 난리가 나곤 했던것 같다. (CDN를 이상한데 넣었다가 오류를 뿜었던듯 하다. )

 

워드프레스 제이쿼리 사용하기

방법01.

워드프레스는 기본적으로 제이쿼리 CDN를 내장하고 있어 따로 삽입할 필요가 없다. 

워드프레스 아닐때 ▶ - 제이쿼리(jQuery) CDN연결 방법

방법02.

페이지에 직접넣기보단 스크립트 삽입 플러그인 사용을 추천 (페이지에 직접 RAW JS로 넣으면 잘 될때도 많은데 간혹 안될때가 있다. ) 

추천플러그인 사용법 ▶ - 워드프레스 플러그인 Simple CSS and JS

 

제이쿼리 설치 여부 확인 방법

워드프레스에 제이쿼리가 내장되어 있기 때문에 CDN를 삽입하지 않아도 되지만, 그래도 설치되어있는지 확인해보자

사이트에서 콘솔을 켜준다. (F12누르면 켜져용)

그리고 console 창에 "jQuery" 라고 쳤을때 저렇게 "jQuery is not defined "라고 나오면 설치가 안된것!

이렇게 나오면 설치가 되어있다는 뜻! 

만약 설치가 안되어있다면, 테마편집기 > function.php 파일을 열어 다음 코드를 넣고 저장한다. ( 하지만 대부분 설치되어서 할 필요가 없음)

add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
    wp_enqueue_script( 'jquery' );
}

 

스크립트 파일을 불러오는 방법

제이쿼리 플러그인이 다양하게 잘되어있는데 워드프레스 플러그인말고, 스크립트 파일을 로드해서 사용하고 싶다면!? function.php파일에 php로 넣어도 가능하지만 head에 내용을 추가할 수 있는 플러그인을 사용하면 편리하다. 

head에 내용을 추가할 수 있는 플러그인은 테마 자체에 포함 되어있기도 하고, 설치도 가능하다. 플러그인 검색에서 적당한걸 다운받아서 사용하면 된다. 

이렇게 해더에 스크립트 파일을 연결시키면 별 문제없이 작동한다. (사용한 플러그인 -Head, Footer and Post Injections)