close this form

NAME

E-MAIL

TELEPHONE

CAPTCHA CODE
captcha

SUBJECT

MESSAGE

ABOUT | NEWS & EVENT | PORTFOLIO WORDPRESS TIP
close this form

NAME

E-MAIL

TELEPHONE

CAPTCHA CODE
captcha

SUBJECT

MESSAGE

ABOUT | NEWS & EVENT | PORTFOLIO WORDPRESS TIP
close this form

RECENT

highlight

anatomy-wordpress출처: http://yoast.com

테마는 어떻게 구성되어 있을까?
요즘 시중에 판매되는 테마들을 뜯어보면 그 구조가 너무 복잡해서 파악하기가 힘들다. 게다가 대부분 요소별로 쪼개서 조합하는 형식으로 제작하기 때문에 더 그렇다. 하지만, 테마의 구성 요소를 최소한으로 줄여놓고 보면 의외로 간단하다. 워드프레스 테마가 되기 위한 최소한의 구성을 알아보자.

  • style.css
  • header.php
  • footer.php
  • index.php
  • functions.php

이 5개의 파일만 있으면 일단 워드프레스는 테마로 인식한다.
재밌는것은 index.php, header.php, footer.php, functions.php 이 내용없이 비어 있어도 일단 테마로 인식한다는 것. style.css에 테마의 이름과 설명만 채워 넣으면 일단은 테마 목록에 새 테마를 등록시킬 수 있다. 게다가 “screenshot.png”과 같이 스크린샷을 추가하면 목록에 이미지까지 보여진다. 스크린샷은 240*180px이 최적(wordpress.org에서는 600*450을 추천하고 있다)이며 같은 비례로 넣으면 된다. 목표를 정하고 기운 내자는 의미로 테마의 이름과 스크린샷을 걸어놓고 시작하는 것도 좋을 것 같다. 자, 다섯 개의 기본 구성요소들의 어떤 역할을 하는지 알아보자.

style.css

요녀석은 테마의 전체 스타일을 전담한다. 디자인과 밀접한 관련이 있는 녀석이다. 레이아웃에서부터 글꼴, 글씨크기, 색상, 바탕색상 등… 최근에는 그림자나 그라데이션도 귀돌림(모서리를 둥굴게 만드는 것) 등의 표현을 이녀석 하나로 끝낼 수 있다.

style.css에는 테마와 관련된 기본정보가 들어간다. 테마명과 간단한 설명, 버젼, 만든이 등이 들어간다. 이미지와 함께 보여지길 원한다면 screenshot 이라는 이름의 이미지를 테마 폴더 안에 만들어 넣으면 된다.

themeinfo테마 관리 메뉴에서 테마정보가 보여지는데 이 내용은 style.css의 제일 상단에 입력된 내용이다.

style.css에 포함되는 테마정보의 예

header.php와 footer.php

hbf

글로 따지면 머릿말과 꼬릿말에 해당한다. 대부분의 블로그는 상단과 하단이 동일하게 반복되고 가운데 몸통, 즉 컨텐츠 부분만 바뀌는 경우가 많은데 header.php 에는 컨텐츠와 상관없이 반복되는 상단부의 내용이 담기고 footer.php 에는 하단부의 내용이 담긴다. 편의상 상중하로 설명했지만 계획하기에 따라 header와 footer의 위치는 다를 수 있다. 중요한 것은 각 웹페이지의 구성 중 반복되는 구간을 정해서 두 군데에 나눠 담는다는 점이다.

주로 header에는 사이트 로고나 관련 이미지, 그리고 메뉴와 사이트명이 들어가고 footer에는 copyright 등이 포함된다.

index.php

Template_Hierarchy워드프레스 템플릿의 구성도(출처: http://codex.wordpress.org/Template_Hierarchy)

반복되는 구간을 정하고 나면 남는 것은 컨텐츠 부분이다. 워드프레스 템플릿에서 home.php, single.php, page.php, archive.php, category.php 등은 index.php를 세분화 한 것이다. 웹사이트 첫화면(home.php)이나 개별 글(single.php), 분류 형식(archive.php나 category.php)에 대한 레이아웃이 없을 경우, index.php의 형식으로 보여지게 된다는 얘기다. 다시말해, 각 페이지별로 구성을 달리하려면 index.php 외에 해당 형식을 추가하면 된다는 얘기다.

index.php는 위에서 보는 것처럼 interior 라는 ID 안에 컨텐츠와 구성을 담고 다른 페이지에서도 반복되는 header와 footer를 불러와서 페이지를 완성한다.

functions.php

여기에는 테마에서 작동될 추가 기능을 설정하게 된다. 마치 플러그인처럼 테마에 탑재될 기능들이 이곳에 담긴다. 예를 들어, jQuery 플러그인을 활용한다던가 워드프레스의 메뉴 기능에 대한 환경 설정, 위젯 설정, 썸네일 크기나 별도로 자동 생성할 이미지 사이즈 설정 등 테마의 기능 및 환경 설정을 담당한다.

Related Posts

  • 워드프레스 관리와 개발에 대한 오해워드프레스 관리와 개발에 대한 오해 디자이너, 개발자 없이 내가 원하는 웹사이트를 직접 만든다? 워드프레스에 대한 관심을 한 줄로 요약하면 "디자이너, 개발자 없이 내가 원하는 웹사이트를 직접 만든다" 인 것 같다. 워드프레스에는 테마라는 것이 존재하고 애초 […]
  • 네이버 라인 LINE 공유 버튼 추가하기네이버 라인 LINE 공유 버튼 추가하기 http://www.youtube.com/watch?v=r3MPBc9a5YI&feature=share&list=PLtlGeM3V8z23IqJdU1gHJE3O0SCIXnrpt 국내에서는 카카톡의 열기 때문인지 […]
  • 테마를 변경할 수 없도록 설정하기테마를 변경할 수 없도록 설정하기 기업이나 단체의 웹사이트를 워드프레스 구축할 경우, 테마를 변경하는 일은 거의 없다. 웹사이트의 레이아웃이 바뀌어버리기 때문에 관리자가 여러명일 경우 오히려 테마를 변경할 수 없도록 고정해두는 것이 안전하다. 혹시나 누군가 […]
  • Pingback: Wordpress Theme 만드는 법 | ChanceMoon's Blog()

  • 마군

    감사합니다. 잘보고 갑니다 ^^

  • River Song

    일반인이 테마 만드는건 진짜 어려운거 같아요ㅠㅠ

    • 아키텍

      네, 맞습니다. 워드프레스는 디자인 도구가 아닙니다. 테마라는 기성품을 골라서 바로 글을 쓰는데 간편한 도구죠.

%d 블로거가 이것을 좋아합니다: