테마 만들기
워드프레스 테마는 전문적인 웹디자이너만 만들 수 있는 것이 아닙니다. 이제 갓 HTML을 배우기 시작한 웹?초보자들도 얼마든지 만들 수 있습니다. 복잡하게 만들자면 시간이 걸리겠지만 구조가 간단한 테마는 HTML?코드만 입력할 줄 알아도 시작할 수 있습니다. CSS도 그리 많이 필요하지 않습니다. 이번 장에서는 HTML과?기초적인 CSS를 이용해 단순한 구조의 테마를 만들어봅니다. 간단한 테마를 처음부터 끝까지 직접 코딩해서?만들면 HTML과 CSS에 대해 이해할 수 있을뿐더러 PHP로 만들어진 워드프레스의 템플릿 파일과 템플릿?태그에 대해서도 이해할 수 있기 때문에 나중에 이미 만들어진 테마를 수정해서 사용하는 데 도움이 됩니다.
워드프레스 테마는 간단하게 만들자면 아래처럼 index.php 파일에 템플릿 태그 몇 개와 style.css 파일에 테마?이름만 선언해주면 됩니다. 이것은 워드프레스에서 자랑하는 세상에서 가장 간단한 테마입니다.
위와 같이 하더라도 데이터베이스에서 콘텐츠를 가져와 웹브라우저 화면에 표시합니다. 메뉴도 나오고 글목록, 블로그롤, 페이지 링크 등 필요한 것은 다 나타납니다. 그만큼 워드프레스 테마는 단순하다는 의미인데 보기 좋게 만들기 위해 많은 파일들이 필요한 것입니다.?테마를 만드는 첫 번째 단계는 우선 HTML로 뼈대를 만들고 CSS로 요소를 배치하는 것입니다. 그런 다음?HTML의 콘텐츠 부분에 워드프레스 템플릿 태그를 삽입하면 기본적인 테마가 완성됩니다.
이 장에서는 우선?간단한 테마를 만들어보고 다음 장에서는 워드프레스의 기본 테마인 Twenty Eleven을 기초로 자식 테마를 만들어 전혀 새로운 테마를 만들겠습니다. 또한 트위터 부트스트랩을 이용해 더욱 쉽고 빠르게 레이아웃을 만들고 버튼과 아이콘을 삽입해 멋진 테마를 만들 것입니다. 다음 장의 내용을 이해하려면 이번 장의 내용을 이해하는 것이 중요합니다. CSS의 기초가 있어야 하고 템플릿 구조를 알아야 이해할 수 있기 때문입니다. CSS에?자신이 있는 분은 템플릿 태그를 이용해 템플릿 파일 만드는 과정만 봐도 됩니다.
이번 장은 두 가지 내용으로 구성돼 있는데 바로 기초적인 CSS와 템플릿 파일 만들기입니다. CSS는 다음 장에도 계속 나오지만 기초적인 레이아웃을 위한 지식을 기반으로 웹페이지를 만들고 이 웹페이지에 워드프레스?템플릿 태그를 삽입해서 테마를 만듭니다. 템플릿 파일 만들기는 워드프레스의 테마를 이해하는 데 필요한 과정이며, 다음 장에서는 기본 테마를 기준으로 테마를 수정하는 작업이 나옵니다. 이번 장에서 만든 테마를 사용할 수도 있지만 실제 웹사이트에서 사용할 수 있는 여러 가지 기능이 포함된 테마를 사용하는 것이 좋습니다. 구성 내용을 보면 다음과 같습니다.
웹 프로그래밍 언어
웹페이지를 만드는 데 필요한 프로그래밍 언어에 대해 알아봅니다. 워드프레스는 PHP 언어로 만들어졌지만 테마를 만들기 위해 PHP를 직접 사용하는 것은 아니고 PHP로 만들어진 템플릿 태그를 HTML과 CSS로?만들어진 웹페이지에 삽입하면 됩니다. 그러므로 주로 알아야 할 HTML과 CSS에 대해 살펴봅니다.
HTML
웹페이지의 뼈대를 구성하는 각종 HTML 태그에 대해 알아보고 특히 HTML5의 새로운 태그인 의미 요소의?역할에 대해 알아봅니다.
HTML5와 CSS를 이용한 레이아웃
CSS는 웹페이지의 레이아웃을 만드는 데 필요한 언어로서 HTML과 CSS를 이용해 테마의 기본 레이아웃을?만듭니다.
워드프레스 테마 구조
워드프레스가 여러 개의 테마 파일 중 어떤 파일을 선택해서 웹페이지를 표시하는지는 템플릿 계층구조에?의해 결정됩니다. 이 템플릿 계층구조를 이용하면 원하는 디자인의 템플릿 파일을 만들어 블로그에 나타낼?수 있습니다. 또한 워드프레스 설치 폴더의 내용과 테마를 만드는 데 필요한 최소 구성요소인 템플릿 태그와 템플릿 태그로 구성된 템플릿 파일에 대해 알아봅니다.
템플릿 파일 만들기
HTML5와 CSS로 만들어진 테마의 기본 레이아웃을 분리해 템플릿 파일로 만들고 각종 템플릿 태그를 배치해 데이터베이스에서 데이터를 불러오는 작업을 합니다. 이때 하나의 index.php 파일에서 여러 개의 템플릿 파일이 파생되는 과정이 진행됩니다.
Font Awesome 폰트 아이콘 삽입하기
다음 장에서 다룰 트위터 부트스트랩을 이용해 레이아웃 및 각종 아이콘과 버튼을 삽입하기 위한 전 단계로서 폰트아이콘을 사용하는 방법을 알아봅니다. 아이콘은 보통 투명 이미지(PNG 파일)를 사용하지만 폰트로 만들어진 아이콘을 사용하면 아이콘의 색상은 물론 크기까지 자유롭게 바꿀 수 있습니다.
