워드프레스 테마 만들기 시작점. style.css, index.php

 

	개요
	본 글은 워드프레스 테마를 단 2개의 파일(style.css, index.php) 로 직접 만드는 과정을 정리한다. 테마만들기 가장 기초 중의 기초에 해당한다.     테마를 직접 만들어 보는 목적은 워드프레스 체계의 골격을 명확히 이해하기 위함이다. 워드프레스 설치 후 기본제공 되는 테마 폴더를 열어보면 간단한 테마 임에도 파일들이 많아서 코드 분석 목적에서는 도움이 안된다.   테마를 직접 만드는 과정을 진행하면서 처음 부터 수십 개의 파일로 시작하지 않는다.    테마로 인식되기 위한 최소한의 상태에서 시작하여, 워드프레스의 동작을 살펴보고, 이후 점진적으로 코드들을 추가하면서 복잡한 요소까지 살펴볼 목적이다.   그 첫번 째 작업으로, 파일2개 만으로 우리의 테마를 만들어서 압축파일로 만들어서, 워드프레스에서 설치하여 테마를 선택가능하게 해두는 것까지 진행한다. 즉, 워드프레스에서 우리가 직접 만든 테마가 인식되게 하고 활성화 시켜서 시험해보는 과정까지를 정리한다.     즉, 아래 그림에 보이는 모습이 본 글에서 다루는 최종결과물이다.  워드프레스의 관리자 화면이고 좌측메뉴 -> 테마 를 클릭했을때 우 화면에 단순하게 생긴 igotit skeleton 테마가 보이며, 이 테마가 index.php 파일과 style.css 2개의 파일만으로 직접 만든 테마이다.      참조정보.   본 글의 모든 내용은 모두 워드프레스 codex http:/codex.wordpress.org/  에서 설명하는 것을 기반으로 한다.   codex 에서 설명하는 테마만들기 정보 보기 -> http://codex.wordpress.org/Theme_Development  (워드프레스에서 테마만들기 규칙을 구체적으로 설명하고 있다. )

 

  

	단계1. 워드프레스에서 테마로 인식되기 위한 최소 파일 2개 준비
	codex 에서 설명하는 테마의 필수파일 2개에 대한 설명글 -> http://codex.wordpress.org/Theme_Development#Basic_Templates 에 의함.   자신이 만든 테마가 워드프레스에서 테마로 인식되기 필수파일 2개. 은 style,css 와 index,php  2개 이다.   이 파일을 메모장 같은걸로 만들자.   참고: 파일을 메모장에서 저장할때 인코딩형식을 UTF-8 로 할 것. 메모장에서 인코딩선택방법 보기 -> http://igotit.tistory.com/84

 

 

 

	단계2. style.css 주석에 테마정보 작성.
	style.css 의 가장 앞부분에는 주석으로 테마정보를 기록하라고 되어있다. 이에 해당하는 codex의 설명 (http://codex.wordpress.org/Theme_Development#Theme_Stylesheet)   위 주조에서는 twenty thirteen 의 헤더부분을 보이고 있는데 이 내용을 자신의 style.css 에 복사하고, 자신이 만드는 테마에 관한 정보로 수정 기록하면된다.   본 글의 예에서는 아래 처럼 만들었다. 임의로 대충기록하면 된다.     /* Theme Name: igotit skeleton Theme URI: http://igotit.kr/ Author: igotit Author URI: http://igotit.kr Description: Theme Skeleton Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: skeleton Text Domain: igotitskeleton */

 

 

	단계3. index.php 내용작성.
	index.php 에는 웹에 보이기 처리를 하는 코드를 넣어야 정상이나, 지금 시작하는 시점엔 이것 마저도 코드 전혀 기록하지 않는다. html 태그도 기록하지 않는다.   아래 처럼 간단히 text 를 일단 기록하자. 웹에서 보일 내용이다.       테마 만들기 시험중. 테마명 igotit Skeleton

 

 

	단계4. 워드프레스에 테마 설치하기.
	이제 설치를 위하여 style.css, index.php 2개 파일을 압축파일로 만든다.  파일명은 테마명으로 하자 igotitskeleton.zip 으로 하였다.   이제, 워드프레스 관리자에서 좌측메뉴에서 -> 테마 -> 새로추가 클릭 -> 테마 업로드 클릭 하여 우리가 만든 테마압축파일 igotitskeleton.zip 을 선택하고, 지금설치하기 버튼 클릭한다. 정상적으로 설치되면 아래와 같은 설치성공했다는 화면을 보게된다.
	끝. - 가장 최소화된 파일2개(style.css, index.php) 로 직접 만든테마를  워드프레스에 등록시킴.

 

 

 

	설치된 테마 관련 둘러보기.
	가장 최소화 된 상태로 등록했음에도 관리자에서 보이는 화면은 구색을 갖추고 있다.   워드프레스의 테마선택창에 직접만든 테마가 보인다.   아래 붉은 박스에 우리가 추가한 테마가 보인다. 옆의 Twenty Fourteen 테마처럼 그림은 안보인다. 우리가 등록하지 않았으니까. 당연하다.     테마상세보기.   우리가 만든 테마의 상세보기도 지원된다. 우리가 style.css의 주석부분에 기록한 사항이 일부 보이고 있음을 알 수 있다.   테마 실시간 미리보기.   우리가 만든 테마의 실시간 미리 보기도 된다. 화면에는 index.php 에 기록했던 내용이 그대로 출력되고 있다. 그리고 왼쪽에 보이는 테마관련 설정부가 다른 테마처럼 위젯같은거 안보인다. 당연하다. 우리가 만든 테마는 달랑 style.css와 index.php 로 된 간단한 것이다.     위 화면의 왼쪽의 정적인 전면페이지 부분을 펼쳐보면 첫페이지에 보이는 사항을 선택부분도 살아있다. 그러나, 페이지를 선택한다고 해도 현재의 우리테마에선 웹에서 보이지 않는다.  지금 만들어둔 index.php 가 내에 이런 처리를 수행하는 코드가 작성되지 않았기 때문이다.     서버의 폴더를 살펴보면, 설치하고나서, 워드프레스운영중인 서버의 폴더를 보면 아래와 같다. theme 폴더내에, igotitskeleton 폴더가 자동으로 생성되어있고,  그 속에는 우리가 만들었던 2개의 파일 style.css, index.php 가 들어와있다.    활성화 하고 웹에서 보이는 모습. 우리가 만든 테마를 활성화 하고 웹에서 보이는 모습을 보면, 아래와 같이 단촐하다. 지금 화면에 보이는 것은 index.php가 보이는 중이다. 우리가 index.php 에 기록했던 텍스트가 그대로 보인다.    추가설명 : index.php 에는 아래와 같이 text만 기록했었고, php 코드도 없고 html 도 없었다.    테마 만들기 시험중. 테마명 igotit Skeleton   그럼에도 위 웹에서 보이는 모습은 index.php 에 기록한 text가 보인다. 코드도 아니고 html 도 아닌데 이게 왜보이는가? 이런 의문 가질 필요없다. 이는 php뿐만이 아니라, asp 도 이런 식으로 작동한다. 웹서버 측에서 index.php 를 처리할때 여기에 기록된 내용이 php 코드면 코드에 해당하는 처리를 하고 html 이면 html 처리를 해서 보이고, 이도 저도 아닌 text이면 text를 그냥 보이는 처리를 한다.

 

 

	정리, 이후 작업.
	정리.   본 글에서는 워드프레스 테마를 직접 만들기에 있어서, 가장 단순화된 시작점으로써  style.css와 index.php 파일 2개만 준비해두고, 이를 압축 하여 워드프레스에 테마로 설치하고,  관리자 화면에서 어떻게 보이는지 살펴보고 웹에서 보이는 모습까지 확인했다. style.css에 기록한 내용은  워드프레스에서 테마로 인식시키기 위한 필수 기록사항인 주석처리로 표현된 테마 정보만을 기록했다. index.php 에 기록한 내용은 php 코드나 html 태그도 없이, text만 기록하였다.   이후 작업.   index.php 부분 부터 코드 추가작업 하면서, 워드프레스로 방식으로 정상 작동하기 위한 가장 기본적인 사항만을 구현하면서 코드 골격 이해. css는 수정없이 계속 내버려둠.     여기서 만든 테마가 시험 적용중인 워드프레스 사이트 -> http://igotit.kr/theme-skeleton/

 

본 글은 "워드프레스 테마만들기" 시리즈 글 1편이며, 1편에 연결된 2편 보기.   워드프레스 테마만들기 2편. index.php 수정, 템플릿파일2개 추가 보기 -> http://igotit.tistory.com/122

 

관련글. - 워드프레스는 어떤 과정을 거쳐 테마의 템플릿(php 파일을 의미함)을 이용하여 웹에 보이게 하는지 그 절차를 간략히 살펴보자. 보기 -> http://igotit.tistory.com/121

 

본 글이 포함된 통합 정리 글   WordPress 활용정보 정리 : http://igotit.tistory.com/23

 

///85.