AprilBurger

워드프레스에서 자식테마를 만들었을경우,
자식테마에 있는 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분)

워드프레스로 홈페이지를 만들기 위해 가장 먼저 해야하는 일은, 테마를 구입하는 것이다.
(일부 사용자의 경우 테마를 직접 제작하기도 하지만 이는 논외로 한다.)

테마를 구입한 후 그 테마를 그대로 사용하기에는 많은 아쉬움이 따른다.
주로 범용목적으로 만들어진 테마가 많을 뿐더러, 자신에게 딱 맞는 테마를 찾는다고해도 막상 사용해보면 아쉬운부분이 많다.
따라서, 테마를 수정할 줄 알아야 한다!

워드프레스 메뉴 중 '테마디자인>테마 편집기'에 들어가면, 테마를 바로바로 편집가능하지만, 
이 방법은 많은 전문가가 지양해야한다고 말한다.
왜냐하면 '테마디자인>테마 편집기'에서 바로 수정을하는것은 부모테마를 수정하는것이기 때문이다.
부모테마를 수정하게되면 이후 테마 업데이트가 발생할경우 수정했던 내용이 날라갈 수 있고, 더 나아가서 수정된 코드와 업데이트 내용이 충돌될 경우 일부 페이지가 완전히 깨져버릴수 있기 때문이다.글쓴이도 처음에는 알수없는 자신감으로 부모테마를 바로 편집했지만, 그 사실을 알게된 이후로는 자식테마를 만들어서 수정을 하고 있다.

이 포스트에서는 여러가지 자식테마 만드는 방법을 소개하고, 그 중 가장 좋은 방법을 추천한다.

1. Child Theme 플러그인 사용

가장 쉬운방법이다. Child Theme를 만드는 여러가지 플러그인이 있는데 그 중에 하나를 다운받아서
"Create a Child Theme" 를 실행하면 간단하게 테마가 생성된다. '테마디자인'-테마'에 자식테마가 생성 된 것을 확인할 수 있다.
가장 많이 사용되는 플러그인은 One-Click Child Theme, Child Theme Configurator, Child Theme Generator 등이 있다.
One-Click Child Theme는 한 책에서 메인으로 소개될 정도로 자식테마를 만드는데 많이 쓰였지만 지금은 더이상 업데이트되지않아 사용되지 않는것으로 보인다. 참고로 플러그인은 순환이 좀 빨라서, 대표적으로 쓰인 플러그인이라 하더라도 좀 지나고보면 더이상 업데이트 되지 않는 경우도 많다. 따라서, 그때그때 적절한 플러그인을 사용해야 한다.

2. FTP로 직접 수정

다운로드한 테마가 위치한 폴더안에 들어가서 직접 자식테마 파일을 만드는 방법이다.
테마가 설치된 위치는 조금씩 다를수 있으나, 보편적인 위치는 아래와 같다
위치 : /opt/사용자아이디/apps/wordpress/htdocs/wp-content/themes/
위 폴더에 들어가면 설치된 테마이름의 폴더가 있을것이다.

① /opt/사용자아이디/apps/wordpress/htdocs/wp-content/themes/테마이름-child 폴더를 만든다.
   예) /opt/사용자아이디/apps/wordpress/htdocs/wp-content/themes/sahifa-child
② 만든 폴더 안에 style.css 파일을 만든다.
   예) .../sahifa-child/style.css
③ 자식 테마에게 부모 테마 스타일을 로드하도록 지시하는 functions.php 파일을 만든다.
   예) .../sahifa-child/functions.php

3. 테마에서 제공하는 방법으로 수정

거의 모든 테마에서는 자식테마를 만드는 방법을 별도로 제시하고 있다. 테마 제공사의 홈페이지에서 support 란에 'child theme' 라고 검색을 하면 상세한 내용을 받을 수 있다. 거의 대부분 2번의 FTP로 수정하는 방법을 제시한다.

※ 가장추천하는 방법은 3번이다. ㅎㅎ
   제대로 만들어진 테마라면 자식테마를 만드는방법에대해서 친절한 설명을 제공하고 있으므로, 꼭 테마에서 제공하는 방법대로 자식테마를 만들자!

[만든결과]

위 3가지 아무방법이나 하면 아래와같이 자식테마가 생성된다. 이제 생성된 자식테마를 활성화시키면 자식테마가 선택이 되고, 거기서 수정하면된다.