자식 테마의 구조를 이해하였다면 자식 테마 제작시 플러그인을 활용하는 것이 좋습니다. 플러그인을 활용하면 자식 테마를 만들때 필요한 파일들을 자동으로 생성해주기 때문에 편리하게 이용할 수 있습니다.
자식 테마 제작 플러그인으로 많이 사용하는 것은 One-Click Child Theme 플러그인 입니다.

One-Click Child Theme 플러그인 설치하기


관리자 화면의 왼쪽 사이드바 메뉴에서 플러그인 추가하기 메뉴를 클릭합니다.



플러그인 검색필드에서 child theme을 입력하고 검색을 합니다. 여러가지 플러그인이 있지만 아래 오렌지색 박스 부분에 6만명 이상이 설치한 One-Click Child Theme 플러그인을 설치할 것입니다. 지금 설치하기 버튼을 클릭합니다.



플러그인을 활성화 링크를 클릭해서 설치를 완료합니다.



One-Click Child Theme 플러그인으로 자식테마 생성하기


자식 테마를 만들기 전에 현재 서버에 설치된 테마의 현황을 확인하겠습니다. 서버나 자신의 로컬 PC에 워드프레스가 설치된 디렉토리로 이동합니다. 저의 경우 아래 그림처럼 서버에 5개의 테마가 설치된 것을 확인할 수 있습니다.



현재 테마의 설치 현황을 확인하였으니 이제 플러그인을 통해서 자식 테마를 생성해보겠습니다. 왼쪽 사이드바 메뉴에서 외모를 클릭하면 Child Theme 라는 서브 메뉴가 생성된 것을 확인할 수 있습니다. Child Theme을 클릭합니다.



자식 테마를 만들수 있는 화면이 나타납니다. 아래와 같이 테마의 이름과 설명, 테마 제작자를 입력하고 Create Child 버튼을 클릭합니다.


Create Child 버튼을 클릭하면 자동으로 Shuman Child Theme 자식테마가 생성되고 화면이 외모 > 테마 화면으로 이동하면서 테마가 활성화 됩니다. 이때 자식 테마가 생성되는 기준은 직전에 활성화 되어있는 테마가 됩니다. 플러그인은 직전 테마를 부모로 삼아 자동으로 자식 테마를 만들어냅니다.



자식테마 생성 확인하기


이제 자식 테마가 정상적으로 생성되었는지 확인해야 합니다. 정상 생성여부를 확인하기 위해서 다시 워드프레스가 설치된 디렉토리 폴더로 이동합니다.

서버에 접속하니 아래 화면과 같이 /wp-content/themes/shuman-child-theme 라는 자식 테마폴더가 생성된 것을 확인할 수 있습니다. 그리고 폴더 안엔는 총 4개의 화일이 자동 생성 된것을 알 수 있습니다. 이제 필요하다면 자동 생성된 화일을 열어서 테마를 수정 작업하면 됩니다. 이렇게 플러그인을 활용하면 자식 테마를 간편하게 만들어 낼 수 있습니다.





자식 테마란 무엇인가?


자식 테마(Child Theme)은 말 그대로 부모 테마(Parent Theme)을 상속받은 테마를 이야기 합니다. 부모 테마는 우리가 테마라고 부르는 바로 그 테마 원본 화일을 이야기합니다. 이해하기 쉽게 표현하면 자식 테마는 부모 테마를 상속받고 추가적인 설정 및 세팅 값을 가지고 있는 테마를 말합니다.

자식 테마가 중요한 이유는 테마의 수정과 업데이트에 있습니다. 만약 자식 테마를 사용하지 않고 원본 테마인 부모 테마의 설정과 내용을 수정한다면 테마의 업데이트 될 때 한 순간에 자신이 작업했던 모든 변경 내용이 날라가게 됩니다.

테마를 설치해서 사용할 때 설치시 초기 설정와 모든 세팅값을 100% 그래도 사용한다면 굳이 자식 테마를 사용할 필요가 없겠지만 그런 경우는 거의 없습니다. 일반적으로는 테마 콘텐츠의 위치를 변경한다든지 이미지를 변경한다든지 여러가지 스타일 값을 변경해서 사용합니다. 그렇다고 부모 테마에 직접 수정을 하는 것은 바람직하지 않습니다. 그래서 자식 테마가 필요한 것입니다.

한 가지 더 알고 있어야 할 내용은 자식 테마 만으로는 테마가 동작하지 않는다는 것입니다. 부모 테마를 기본으로 가지고 있어야 기능이 작동합니다.


자식 테마는 어디에서 제공받는가?


그렇다면 자식 테마는 어디에서 제공받아서 사용해야 하는가? 하는 생각을 하게 됩니다. 테마를 설치한다고 해서 모든 테마가 자식 테마를 제공하는 것은 아닙니다. 물론 유료 테마는 많은 경우 테마 제작사에서 자식 테마를 함께 제공하는 경우가 많지만 그렇다고  100% 자식 테마를 제공하는 것은 아닙니다. 

- 자식 테마를 제공하는 유료 테마 The7 - 



만약, 테마 제작사가 자식 테마를 제공하고 있지 않다면 워드프레스 공식 사이트에서 자식 테마 만드는 방법을 참고해서 제작할 수 있습니다.


자식 테마 구조 쉽고 빠르게 이해하는 방법


자식 테마(Child Theme)을 만드는 방법은 무척 간단합니다. 몇 개의 조건만 충족되면 자식 테마로서 기능이 작동합니다. 일단 테마 폴더에 자식 테마 폴더를 만들고 그 폴더 안에 style.css 화일이 있으면 됩니다. 그리고 style.css 화일 안에서 부모 테마가 누구인지를 설정해주면 됩니다.

그럼 하나하나 살펴보도록 하겠습니다. 먼저 자신의 워드프레스가 설치된 경로에 들어갑니다. 호스팅을 받고 있다면 호스팅 서버에 들어가야 할 것이고, 로컬 PC라면 PC에 워드프레스가 설치된 경로로 들어갑니다.

워드프레스가 설치된 폴더에서 디렉토리 구조를 보면 테마는 /wp-content/themes 의 디렉토리 경로에 위치하게 됩니다. 즉, 각각의  테마 화일은 모두 themes 디렉토리 아래에 폴더 형태로 구성되어 있습니다. 저의 경우 서버 내에 현재 총 4개의 테마가 설치되어 있는 것을 확인할 수 있습니다.



자식 테마가 되는 조건은 세 가지라고 언급하였습니다. 다시 한 번 확인하면, 자식 테마의 조건은 아래와 같습니다.

자식 테마의 조건

첫째, 자식 테마의 폴더 위치
둘째, 자식 테마 폴더 내에 style.css 화일 포함 여부
세째, style.css 내에 부모 테마에 대한 import 설정


자식 테마 디렉토리 만들기


이제 우리가 학습하고 있는 twentyfourteen 테마에 대한 자식 테마를 만들고 사이트에 적용하는 방법을 알아보도록 하겠습니다
먼저 themes 폴더 아래에 twentyfourteen-child 라는 폴더를 생성합니다. FTP 프로그램에서 themes 폴더에서 마우스 우클릭을 해서 디렉토리 만들기를 클릭합니다.



생성할 디렉토리 이름에 twentyfourteen-child 를 입력하고 확인 버튼을 클릭합니다.



아래와 같이 twentyfourteen-child 라는 자식 테마 폴더가 생성된 것을 확인할 수 있습니다.



자식 테마에 사용할 style.css 화일 제작 및 서버에 배치


이제 twentyfourteeen-child 폴더 안에 style.css 화일을 만들 것입니다. 먼저 로컬에서 서브라임 텍스트로 style.css 화일을 만들고나서 FTP 프로그램을 통해서 서버로 업로드해서 테스트 할 것입니다.

서브라임 텍스트 편집기를 열어서 아래와 같이 코드를 작성합니다. 주석 안에는 테마의 이름과 설명, 그리고 테마를 만든 테마 제작자를 명기합니다. Theme Name은 Twenty Fourteen Child 라고 작성하고, Author는 Shuman으로 작성하였습니다. 나머지도 아래와 같이 작성합니다.
 
아래쪽 소스 코드 상에 import 부분은 자식 테마의 부모가 누구인지를 연결하는 부분입니다. 프로그래밍에서 이렇게 상속을 할 때는 import 구문을 자주 사용합니다. 즉, 부모의 스타일 시트 전체를 상속받아서 사용한다는 의미입니다.



이제 로컬에서 저장한 화일을 서버의 twentyfourteen-child 폴더 안으로 FTP 프로그램을 활용해서 업로드합니다. 업로드가 완료되고 나면 아래와 같이 자식테마 디렉토리안에 style.css 화일이 보일 것입니다.



그리고 부모 테마 폴더에 가서 screenshot.png 화일을 로컬로 내려 받은 뒤에 다시 자식 폴더에 업로드 합니다. 이 화일은 워드프레스 관리자 화면에서 테마 화면에 들어갔을 때 자식 테마를 나타내는 대표이미지로 사용될 것입니다.



최종적으로 자식테마 폴더인 twentyfourteen-child 디렉토리 안에는 아래와 같이 2개의 화일을 배치하였습니다.



외모에서 테마 설정하기


이제 관리자 화면에서 현재 테마를 자식 테마로 변경하겠습니다. 먼저 왼쪽 사이드바 메뉴에서 외모 > 테마 메뉴를 클릭합니다.



왼쪽 맨 처음에 활성화 되어있는 Twenty Fourteen 테마가 현재 적용된 테마입니다. 그 아래에 보면 조금전 우리가 만든 Twenty Fourteen Child 테마가 있습니다. 



Twenty Fourteen Child 테마 위에 마우스를 올리면 활성화 버튼이 나타납니다. 활성화 버튼을 클릭합니다.



새로운 테마를 적용했습니다. 라는 메시지가 뜨고 자식 테마가 현재의 테마로 활성화 되었습니다. 



이제 제대로 사이트가 열리는지 확인해 보도록 하겠습니다. 일부 메뉴의 권한 관리 내역을 제외하고는 정상적으로 원본 부모 테마에 만들어 놓았던 사이트가 그래도 열리는 것을 확인할 수 있습니다. 단지 자식 테마 폴더와 스타일 시트만 추가했는데도 이렇게 쉽게 부모 테마의 내역을 상속받아서 새로운 테마로 작업이 가능한 것입니다.




자식 테마에만 나눔 명조 폰트 적용하기


새로 만든 자식 테마에 스타일을 적용하고 제대로 동작하는지 확인하겠습니다. 구글 나눔 명조체를 적용하겠습니다. CSS 스타일 편집기에서 아래와 같이 구글 폰트를 적용하고 스타일시트 저장 버튼을 클릭합니다.



사용자 화면에 들어가보면 사이트 전체에 명조체가 적용된 것을 확인할 수 있습니다. 이렇게 자식 테마에서 수정을 하면서 워드프레스 사이트를 만들어 나가면 됩니다.



웹표준과 워드프레스


워드프레스는 웹표준인 HTML과 CSS 기반하에 제작된 시스템 도구입니다. 워드프레스는 코어 부분부터 웹표준을 기반으로 제작된 CMS 툴이기 때문에 워드프레스를 깊이 공부할수록 웹표준에 대한 이해가 있어야 다루기가 수월한 것이 사실입니다.
워드프레스를 이야기 할 때 자주 언급되는 Custom CSS를 이해하는 것도 마찬가지입니다. HTML과 CSS 지식이 있는 만큼 이해도가 높을 것입니다. 웹표준인 HTML5와 CSS3를 공부해두는 것은 자신의 미래 경쟁력을 향상시키는 길입니다.

워드프레스 테마 스타일 화일


워드프레스 코어는 이미 짜여진 동일한 프레임웍 구조 안에서 움직이고 있습니다. 워드프레스 테마 역시 코어 프레임웍 구조 안에서 동작합니다. 워드프레스 4.3.1을 설치하면 현재 포스팅에서 다루고 있는 Twenty Fourteen 테마와 Twenty Thirteen, Twenty Fifteen 테마 총 3개가 기본 제공됩니다.

현재 적용된 워드프레스 테마 스타일 화일을 확인하기 위해서는 외모 > 테마편집기를 클릭하면 확인할 수 있습니다.



테마 편집기 안에서 마우스 스크롤을 내려서 Twenty Fourteen 스타일 시트인 style.css 화일 내용을 볼 수 있습니다. 아래로 조금 내리면 오렌지색 박스가 그려진 부분이 기본적으로 HTML 태그에 대해서 스타일을 일괄 적용한 곳입니다. 그렇지만 테마 스타일 화일인 style.css를 이곳 테마편집기 안에서 수정하는 경우는 거의 없습니다. style.css 의 텍스트 양이 많기 때문에 마우스 스크롤 속도모 무척 느릴뿐 아니라 오타의 확률도 높기 때문입니다.



서브라임 텍스트 Sublime Text


일반적으로 테마 스타일 화일을 수정할 때 권고하는 것은 HTML/CSS 전용 편집기를 사용하는 것입니다. 요즈음 퍼블리셔나 개발자가 가장 선호하는 편집기 중 하나는 서브라임 텍스트 입니다. 서브라임 텍스트는 서브라임텍스트 사이트에서 무료로 다운로드 해서 사용이 가능합니다. 단 무료 버전은 광고가 있습니다. 좋은 툴이기 때문에 많이 사용한다면 유료 구매도 고려해 볼만 합니다. 아직 서브라임 텍스트가 설치되어 있지 않다면 다운로드해서 설치합니다.



Twenty Forteen 테마의 테마의 물리적인 스타일 화일인 style.css 화일은 wp-content/themes/ 안에 존재합니다. 실제 화일은 호스팅을 받고 있는 서버 안에 있으므로 FTP 툴로 접속하면 아래 그림과 같은 폴더 경로가 나올 것입니다. wp-content/themes/twentyfourteen 폴더 안에 style.css 화일이 있고 style.css 화일을 로컬 PC로 다운로드 받거나 바로 클릭해서 서브라임 텍스트 편집기로 열 수 있습니다. 



조금 전 워드프레스의 테마편집기에서 열었던 style.css 화일을 서브라임 텍스트 편집기로 열면 아래와 같습니다. 아래 화면과 같이 일단 코드에 대한 시각적 가독성이 뛰어나고 여러가지 편리한 편집 기능을 제공합니다.




Custom CSS 란?


워드프레스 테마는 wp-content/themes 경로 안에 폴더 형태로 존재하게 됩니다. 그래서 해당 테마의 스타일 화일을 수정하면 테마가 수정됩니다. 그렇지만 그렇게 직접 해당 테마의 스타일 화일을 수정하면 테마가 업데이트 되게되면 자신이 수정했던 내용이 모두 사라지게 됩니다. 그런 황망한 경험을 한 유저도 많을 것입니다. 또한 수정한 화일의 버전관리도 어렵습니다.
그래서 사용하게 되는 것이 Custom CSS 입니다.

Custom CSS는 시간순으로 맨 나중에 작성한 CSS 코드가 시스템에 적용되는 원리를 이용해서 원본 CSS를 수정하지 않고 적용하는 것을 말합니다. 그렇지만 Custom CSS는 워드프레스에서 기본 기능으로 제공하고 있지 않고 별도로 설치한 테마에서 제공을 하거나 테마에서 제공을 하지 않을 때는 플러그인에서 설치하면 됩니다. 플러그인으로는 20만명 이상이 사용하고 있는 Simple Custom CSS이 좋습니다.



좋은 테마 수정 습관


조금 전 원본 테마의 화일을 수정하는 것은 좋지 않은 방법이라 하였습니다. 테마를 변경해야 할 때는 스타일은 Custom CSS를 사용해서 변경하고, 소스 코드 수정을 할 때는 자식 테마를 만들어서 사용하는 방법을 권고합니다.
요즈음에는 유료 테마를 구매해서 설치하면 자식 테마를 샘플이나 XML 화일을 대부분 기본적으로 제공하기 때문에 쉽게 자식테마를 활용해서 테마를 수정할 수 있습니다. 이렇게 테마를 수정하는 것이 향후 시스템 유지보수에도 좋은 방법입니다.

좋은 테마 수정 습관으로, 테마를 수정할 때는 커스텀 CSS와 자식테마(Child Theme) 이 두 가지를 꼭 기억하면 되겠습니다. 


워드프레스의 꽃, 테마


워드프레스를 가장 돋보이게 하는 것 중의 하나는 테마입니다. 워드프레스가 전세계 CMS 시장을 석권하는데 있어서 테마가 일조 한 것을 부인하는 사람은 없습니다. 워드프레스의 테마를 설치해 본 사람은 몇 번의 클릭으로 웹사이트가 완성되는 것을 체험한 뒤에 놀라움을 금치 못하곤 합니다. 어찌보면 노력없이 큰 선물을 받은 것 같은 생각을 느끼게 하기도 합니다. 그래서 혹자는 워드프레스 테마는 쉽다고 합니다. 그렇지만 워드프레스 테마는 처음에는 쉬워보이지만 결코 만만하지는 않습니다.


- 대표적인 유료 테마, 아바다 Avada -




일반적으로 워드프레스 초급자에게 테마는 쉽게 보이지만 워드프레스가 조금 숙달된 중급자만 되더라도 테마는 어려운 관문임을 깨닭게 됩니다. 테마를 아무것도 변경하지 않고 그냥 쓴다면 쉬울지는 몰라도, 테마 기본 세팅에서 자신의 입맛에 맞게 수정을 하려면 테마의 구조를 이해해야 하고 때로는 HTML/CSS 뿐아니라 PHP 프로그래밍이나 데이터베이스에 대한 기본 지식이 있어야 수월하게 테마를 다룰 수 있기 때문입니다.


- 아바다 패션 Avada Fashion -




워드프레스 구조 및 구성 요소 세 가지


테마 구조를 이해하기 위해서 먼저 워드프레스의 구성을 이해해야 합니다. 워드프레스는 크게 세 가지로 구성됩니다. 첫째, 워드프레스 코어. 둘째, 테마. 세째, 플러그인 입니다. 코어는 워드프레스 제작사에서 만들어낸 시스템을 구동하는 핵심 모듈이며 테마는 주로 디자인을 당당하고 플러그인은 추가적으로 붙일 수 있는 어댑터성(Adapter) 프로그램을 말합니다.

코어는 워드프레스를 구동하는 시스템이기 때문에 사용자나 개발자가 변경할 일은 많지 않습니다. 사용자가 주로 다루는 부분은 테마와 플러그인입니다. 테마와 플러그인을 일종의 레고 블록과 같습니다. 사용자의 입맛에 맛게 자신이 원하는 디자인의 테마와 원하는 기능의 플러그인을 찾아서 코어에 붙여서 사용하면 되기 때문에 레고 블록처럼 자유롭게 조합 및 해체가 가능합니다.

아래 그림을 보면 워드프레스의 구조를 이해하기가 수월합니다. 워드프레스 코어는 운영체제와 웹서버, 데이터베이스 기반 위에 설치되게 됩니다. 테마와 플러그인은 레고 블럭과 같이 이해하면 쉽습니다.


워드프레스 코어는 확장성을 위해서 중요한 역할을 담당합니다. 코어는 커스텀 포스트 타입 API를 제공하기 때문입니다. 만약 플러그인을 수정하거나 개발하는 개발자가 코어의 커스텀 포스트 타입 API를 따르지 않고 이른바 PHP 날코딩으로 프로그램을 한다면 그 플러그인을 거의 1회성 프로그램으로 전락하게 됩니다. 플러그인이 업데이트 되면 적용한 플러그인이 동작하지 않을 경우가 많기 때문입니다. 또한 개발자가 변경되어도 문제는 발생합니다. 커스텀 포스트 타입을 따르지 않고 개발한 프로그램은 다른 개발자가 수정하기에도 쉽지는 않습니다. 그래서 1회성 프로그램이 되어 폐기될 확률이 높은 것입니다.

이렇게 커스텀 포스트 타입을 따르지 않고 개발한 프로그램은 문제 발생시 웹사이트의 골치 거리가 될 가능성이 많습니다.


워드프레스 템플릿 하이러키


워드프레스 테마 구조에 대해서 깊이 공부하고자 한다면 워드프레스를 구성하는 PHP 프로그램의 구성을 알아보는 것이 좋습니다.
워드프레스가 실행될 때 home.php, index.php 화일을 시작으로 대표적으로 아래 화일들이 실행됩니다. 
front-page.php
single.php
page.php
category.php
tag.php

실제로는 include 되어서 이보다 훨씬 많은 php 화일과 html, css, script 화일들이 실행됩니다. 소스에 대해서 분석을 해서 깊이 공부하고 자하는 사용자나 개발자는 반드시 아래 워드프레스 공식 개발자 가이드를 참고하는 것이 좋습니다.




+ Recent posts