자식테마의 js파일 적용하기

워드프레스에서 자식테마를 만들었을경우,
자식테마에 있는 CSS파일과 PHP 파일은
부모테마에 있는 파일들보다 우선순위로 홈페이지에 표현된다.

하지만, JS파일의 경우 자식테마 폴더에 JS파일이 존재하더라도 있더라도,
부모테마 폴더에 있는 JS파일을 참조하며, 자식테마 폴더에 있는 JS파일은 무시한다.

이와같은 문제가 발생하는 이유는 JS파일 참조 위치를 수정해주지 않아서다.
JS파일을 바꾸기 위해서는 JS파일을 자식테마에 새로 만드는것 뿐만아니라,
JS파일 참조 경로를 변경해야 한다.

아래와 같은 순서로 간단히 자식테마의 js파일을 홈페이지에 적용할 수 있다.

 

0. 자식폴더에서 사용할 JS파일을 자식폴더에 복사하기

우선! 자식테마 폴더에 수정된 js파일이 위치해야한다.
편의를 위해 js파일 위치는 부모테마폴더의 위치와 동일한 방식으로 만드는 것이 좋다.
-부모테마 폴더에서의 js파일 위치 : ../theme/js/
-자식테마 폴더에서의 js파일 위치 : ../theme_child/js/

1. JS파일 위치를 정의하는 PHP파일 찾기

js파일은 그냥 동일한 폴더에 있는다고 참조가 되는것이 아니다.
경로를 지정해주는 php파일이 분명히 존재할 것이다.
grep 명령어로 쉽게 검색해보자. (※ 윈도우 창에서 검색할경우 검색이 잘 되지 않더라..)

예) 만일 theme라는 부모테마폴더에서 tie-scripts.js 라는 파일을 참조하는  php파일을 찾을 경우
     ../theme# grep -rn "tie-scripts.js"

2. 자식테마에 PHP파일 복사해서 수정하기

grep 명령어로 찾은 php파일 안에 들어가면, tie-scripts.js라는 파일을 참조하는 부분이 있을 것이다.
그 부분을 자식테마의 위치로 변경하자

예) common-scripts.php 파일 안에 /js/tie-scripts.js 라고 정의되어 있다
     → common-scripts.php 파일을 theme-child에 복사한 후
        /js/tie-scripts/js 부분을 ../theme-child/js/tie-scripts.js 로 수정한다. 

 

위와같은 방법대로 진행한다면, 부모테마에 영향 없이 자식테마에서 간단히 js파일을 새로 적용할 수 있다.
※주의 : js파일을 수정하더라도 홈페이지에 반영되는 시간은 다소 걸릴 수 있다.(2~3분)