워드프레스 테마 만들기 1편 (워드프레스에 테마의 기본파일들)

1. 워드프레스 테마의 기본 파일들

워드프레스는 호출이 되면(사이트에 접속을 하면) 기본적으로 정해놓은 이름의 파일들을 찾게 된다.

때문에 워드프레스가 요구하는 이름으로된 몇몇 화일들을 만들어야 하는데 이것에 대해 알아보자

우선 워드프레스의 테마는 워드프레스가 설치된 폴더안에 wp-content/themes 안에 들어있다.

필자는 wordpress/wp-content/themes 폴더다.

themes 폴더안에 자기가 짓고싶은 테마 이름으로 폴더를 하나 만든 후 그안에 기본 파일들을 만들어 넣으면 워드프레스는 그것을 테마로 인식을 한다.심지어 내용이 아무것도 없는 이름뿐인 파일이라도 그걸 테마라고 생각한다.

아래는 워드프레스의 기본 파일에 대한 간단한 설명이다.

파일이름	내   용	구분
index.php	테마의 기본이 되는 스킨으로 반드시 있어야 한다.	필수
style.css	테마의 각종 꾸밈 스타일 시트를 담아 놓으며 특별히 이 파일의 상단 주석은 테마를 소개하는 정보로 활용 된다.	필수
header.php	로고나 메뉴등 홈페이지 상단에 공용으로 들어갈 부분의 디자인과 필요한 설정이 담긴다	준필수
footer.php	홈페이지 맨 하단에 공용으로 들어갈 부분의 디자인을 담는다 주로 주소나 연락처 카피라이트 등	준필수
page.php	만약 이 파일이 있으면 index.php보다 우선으로 로딩한다. 특정페이지만의 스킨이 된다.	필요시
front-page.php	첫 로딩시 가장 우선으로 로딩한다. 홈페이지의 최초 메인페이지에 해당하는 스킨이 되며, index.php, page.php 와 같이 있을때 이 둘보다 우선으로 로딩이 된다.	필요시
sidebar.php	사이드바의 디자인이 담기는 곳으로 주로 위젯등이 들어간다.	필요시
functions.psp	각종 사용자 정의함수를 넣는곳이다.	준필수

[표 1] 워드프레스의 기본 지정 파일들

사실 이거말고 더 있는데 일단 이것만 보고 넘어가자

위 파일들의 구분을 보면 중요도를 넣어 놨는데 사실 제대로 만들고자 한다면 전부 다 필요하고 중요한 파일들이다.

다만 필수를 제외하곤 필요에 따라 없어도 간단한 홈페이지는 만들 수 있다는 말이다.

1.1.  index.php : 가장 기본으로 있어야 하는 파일로 테마의 기본스킨이다 홈페이지의 레이아웃과 실질적인 컨텐츠의 내용을 이 안에서 어떻게 뿌려줄지 코딩을 하게된다.

1.2.  style.css : index.php와 마찬가지로 폴더를 테마로 인식하기 위한 가장 기본적인 파일이라 반드시 있어야 한다.

상단에는 워드프레스에서 지정한 형식의 주석을 달아주게 되는데 테마에대한 정보를 넣어주게 되고 이것은 워드프레스 관리화면에 테마 목록에서 테마에대한 정보로 표시가 된다, 그 밑으론 일반적인 스타일시트의 역할을 하는데, index.php가 뼈대라 한다면 여기선 살을 붙여주는 코딩을 한다.

1.3. header.php : 페이지의 상단에 공용을 표시될 부분만 따로 코딩해놓은 파일로 보통은 로고나 메뉴등을 넣게된다. 또한 여기에는 워드프레스가 기능하기위한 필수 설정값도 정의를 해주게 된다.

1.4. footer.php : 페이지의 하단에 공용으로 표시될 부분만 따로 코딩해놓은 파일로 보통은 회사주소나 연락처 등의 정보를 넣는다.

※ header.php 랑 footer.php는 반드시 있어야 하는건 아니다. 단순히 전체 코딩중 상하단 공용부분만 떼다가 파일로 만들어 놓은것이기 때문이다. 때문에 header.php랑 footer.php 의 내용을 index.php 상 하단에 통합헤 넣고 header.php랑 footer.php를 지워도 결과는 같게나온다

실제로 header.php와 footer.php없이 index.php 만으로 워드프레스 강좌를 한 글도 본적이 있다.

레이아웃을 보면 아래와 같다. 원래 통짜인걸 단순히 구역별로 나눠서 따로 저장한것이다.

[그림 1] 흔히 보는 일반적인 홈페이지의 레이아웃

1.5. front-page.php 는 홈페이지의 메인에 해당되는 스킨으로, 최초에 홈페이지에 들어갔을때 바로 보이는 화면을이다. 예를들어 각각의 메뉴에는 사이드바에 위젯들이 들어가는데, 메인페이지에선 위젯 없이 화면을 크게 쓰고 싶다거나 하는등의 메인페이지만 좀 다르게 꾸미고 싶은 경우에 쓰는  파일이다.

페이지를 뿌려주는 파일중에 우선순위가 가장 높다.

만약 블로그처럼 첫 페이지부터 최신 포스팅 내용이 보이게 하는게 끝이라면 따로 메인페이지 없이 index.php 하나만 있어도 될것이다.

1.6. page.php 파일은 게시판이나 블로그 처럼 계속 변하는것이 아닌 회사 소개 같이 정적인 페이지 등에 쓰이는 디자인 스킨이다 로딩 우선순위가 index.php보다 높고front-page.php 보단 낮기 때문에 front-page.php 없는경우 페인페이지를 대신할 수 있다.

우선순위의 상관관계는 아래 [표 2]와 같고 front-page.php 파일이 있으면 우선적으로 보여주고 없으면 page.php, 그것도 없으면 index.php를 를 찾아서 화면에 뿌려주게 된다.

 

front-page.php  >  page.php  > index.php

                                      [표 2] 스킨파일의 우선순위

이처럼  워드프레스는  필요한 페이지를 일정한 조건대로 불러오게 되는데 이걸 그림으로 표현하면 아래와 같다

[그림 2] 파일명으로 보는 레이아웃

실제로 각각의 파일명으로 봤을때 의 레아아웃이다

맨 좌측은 메인페이지로 이때 사이드바를 없앴다 헤더와 풋터는 공용으로 들어가기 때문에 헤더풋터 생각은 하지 않고 보라색 영역에 들어갈 내용만 생각해서 만들면 된다.이때 메뉴부분은 헤더부분에 넣게 되는데 여기서 회사 소개라던지 정적인 페이지 메뉴를 클릭하면 가운데 그림처럼 해당 스킨으로 로딩이 된다.

마지막은 컨텐츠를 눌렀을때 (게시판등) 나오는 스킨으로 여기엔 사이드바를 넣어서 위젯을 표시해주게 해놨다.

사실 header.php, footer.php, sidebar.php는 실제로 각각 보라색 상자의 파일에서 로딩하는 코드를 적어줌으로  상당하단에 해당 파일을 붙여준다. 즉 디자인은 각각이지만 그걸 붙이고 컨트롤 하는 파일들은 각각 보라색 상자안에 파일들 이라는 말이다.

1.7s. idebar.php는 위의 표 내용같이 주로 위젯 같은것을 담는다.

1.8. functions.php 화일은 각정 사용자 정의 함수를 넣는곳으로 제대로 워드프레스를 활용하려면 공부를 해야하는 부분이다.