워드프레스 자식테마 만들기

워드프레스 자식테마 만들기

오늘은 워드프레스 자식테마 만들기에 대해서 알아보겠습니다.

자식테마를 만드는 이유는 테마의 기능중에 내가 필요한 기능이 없을때 테마 소스를 직접 수정을 해야 합니다.

하지만 원본 소스를 수정하면 테마가 업데이트될때 이 소스가 새버젼으로 덮어 써 지기때문에,

자신이 작업한 내용이 날아가게 됩니다.

그래서 동일한 기능의 자식 테마를 만들고 자식테마의 소스를 수정하면,

업데이트 되더라도 자식테마에서 자신이 수정한 소스는 영향이 없게 됩니다.

테마의 기능을 이용하여 컨텐츠 내용을 수정한다던지 이미지를 교체하는것은 상관없습니다.

소스 수정만 해당되는 내용입니다.

1. 자식테마 만들기

지난 시간에 새로 추가하여 적용한 Zerif Lite 테마의 자식테마를 만들어 보겠습니다.

테마마다 자식테마 만들기가 가능한 지원되는 테마가 있고 안되는 테마가 있으니 참고 바랍니다.

Zerif Lite 테마는 지원이 가능한지 살펴보기 위해서,

관리자 화면에서 외모 > Zerif Lite 소개 메뉴로 이동해 보겠습니다.

여기서 지원탭을 클릭하면, 하단에 자식 테마 만들기에 대한 부분의 설명이 있습니다.

자식 테마를 만드는 이유에 대해서도 간략히 설명이 되어 있습니다.

'하는 방법 보기' 메뉴를 눌러서 만드는 방법에 대해서 살펴보도록 하겠습니다.

'하는 방법 보기' 메뉴를 누르시면 아래와 같은 홈페이지가 열립니다.

그리고 자식 테마 만드는 방법에 대해서 설명이 되어 있습니다.

영문이라 살짝 당황이 됩니다. ^^;

일단은 자식 테마를 만들기 위해서 먼저 해당 폴더를 생성해야 합니다.

FTP 프로그램인 파일질라를 실행하고 호스팅 받는 FTP 서버에 접속을 합니다.

그리고 아래 화면처럼 테마 폴더를 찾아갑니다.

참고로 FTP 프로그램이 없는 분들은 아래 링크를 참고해 주세요~

FTP 프로그램 파일질라 설치하기 : http://modestmind.tistory.com/10

그럼 자식 테마 폴더인 zerif-lite-child 라는 폴더를 만들어 보겠습니다.

아래 화면처럼 zerif-lite 폴더와 동일한 위치에 만드시면 됩니다.

그런후 좀전의 영문 설명 홈페이지를 다시 열어 보겠습니다.

첫번째로 해야할 일이 style.css 파일을 만드는 일입니다.

자신의 컴퓨터에 임시 폴더를 만들고 style.css 파일을 만들어 보겠습니다.

폴더명을 가능하면 위에서 만든 자식폴더명과 동일하게 'zerif-lite-child'라고 만드시면 좋습니다.

메모장이나 기타 에디터 프로그램을 실행하여,

style.css 파일을 만드시고 홈페이지에 있는 내용을 복사하여 붙여넣기 해 줍니다.

다만 내용중에 하나 수정해야하는 부분이 있는데,

아래 화면처럼 'zerif-pro' 라는 텍스트를 'zerif-lite' 로 수정하고 저장해 주세요~

다음으로 설명 페이지를 하단으로 내리면 functions.php 파일을 생성하라고 나와 있습니다.

style.css 파일을 만든 방법과 동일하게 생성해 주시면 됩니다.

편집기에서 해당 파일을 만들고 홈페이지에 있는 내용을 복사하여 붙여넣기 해 줍니다.

아래 처럼 내용을 붙여넣고 저장해 줍니다. 

여기서는 수정할 내용은 없습니다.

그리고 한가지 더 해야할 일은 썸네일 이미지를 만들어야 하는데,

zerif-lite 폴더에 있는 이미지를 다운받아서 그대로 사용하겠습니다.

아래 처럼 서버쪽에 zerif-lite 폴더에 들어가면 screenshot.png 파일이 있습니다.

이 파일을 지금까지 우리가 작업한 로컬 폴더에 다운로드 받습니다.

그럼 좌측 화면처럼 총 3개의 파일이 준비되어 있을 겁니다.

서버쪽에 'zerif-lite-child' 폴더에 해당 파일들을 업로드 합니다.

자식테마 폴더에 이렇게 3개의 파일을 올리면 자식테마 만들기 작업이 다 마무리 된것입니다.

관리자 화면에서 외모에 테마에 들어가 보시면,

우리가 만든 자식테마가 보이실 겁니다.

이름이 'Zerif Pro Child' 라고 되어 있는데 상관은 없습니다.

해당 테마를 활성화해서 실제 적용해 보도록 하겠습니다.

아래처럼 화성화 버튼을 눌러 주세요~

그럼 우리가 만든 자식테마가 활성화 되어 적용된 것을 확인할 수 있습니다.

이제 홈페이지를 열어서 확인해 보도록 하겠습니다.

부모 테마와 동일하게 적용된 것을 확인할 수 있습니다.

실제로 달라진 것이 없어서 적용이 된것인지 구분하기는 힘드실 겁니다.

그럼 여기서 간단한 소스 수정을 한번 해 보도록 하겠습니다.

메인 타이틀인 '홈페이지에 오신것을 환영합니다!'라는 글씨 색을 노란색으로 바꾸고 싶습니다.

하지만 테마의 기능을 찾아봐도 색을 변경할수 있는 메뉴를 찾을수가 없습니다.

이럴때는 어쩔수 없이 소스를 수정을 해야 합니다.

2. 테마 소스 수정해 보기

소스가 어떤 부분인지를 확인하기 위해서,

메인 타이틀 부분에 마우스 우클릭을 하시면 아래와 같은 메뉴들이 나옵니다.

여기서 검사를 클릭합니다.

그러 개발자 도구 창이 열리면서,  해당 소스 부분을 가리켜 줍니다.

소스 부분에 마우스 클릭을 해 보시면 아래와 같이 영역이 표시가 됩니다.

메인 타이틀 부분의 소스가 '<h1 class="intro-text">홈페이지에 오신것을 환영합니다!</h1>' 인것을 확인할수 있습니다.

그럼 색상을 변경해 보기 위해서,

우리가 좀 전에 만든 style.css 파일을 열어 보겠습니다.

여기서 메인타이틀의 색상을 지정해 보도록 하겠습니다.

메인 타이틀의 스타일을 담당하는 클래스 명이 intro-text 입니다.

intro-text 클래스에 속성중에 color 속성을 blue 로 지정해 보겠습니다.

해당 내용의 코드를 아래와 같이 style.css 파일에 한줄 추가해 보도록 하겠습니다.

저장을 하고 FTP를 이용하여 해당 파일을 서버에 올립니다.

동일한 파일이 있으므로 덮어쓰기 하셔야 합니다.

그리고 홈페이지 가셔서 새로고침을 해보면 아래와 같이 메인 타이틀 색상이 노라색으로 바뀌는 것을 볼수 있습니다.

그냥 새로고침 하시면 style.css 파일이 캐쉬되어 있어서 바뀌지가 않습니다.

그럴때는 Shift를 누른 상태에서 새로고침을 하시면 됩니다.

간단하게 소스 수정이라는 것을 한번 해 보았습니다.

나중에 자신이 원하는 형태로 홈페이지를 변경하려면 이같은 소스 수정작업이 필요하실겁니다.

간단하게나마 소스 수정의 감을 잡으셨으리라 생각이 됩니다.

수고 많으셨습니다~