WP홈페이지 제작 - underscoreS

워드프레스는 설치 후 테마 적용만으로 홈페이지를 만들 수 있습니다. 물론 그 이후의 작업이 더 어려워지기도 하지만 적용한 테마의 디자인 및 기능을 벗어나지 않고 그대로만 사용한다면 이만큼 쉬운 홈페이지 제작법은 없으리라고 생각됩니다(덕분에 홈페이지 제작을 더 우습게 보고 제작가격을 후려치려는 싸장님들도 많아진 것도 사실입니다. 그럴때면 그냥 "그냥 직접 공부해서 만드세요~" 라고 말해주고 싶습니다).

그런데 이 워드프레스라는 것이 외쿡 것이라 국내의 실정(?) 또는 일반인들이 생각하는 홈페이지와는 서로 괴리가 있는 경우가 많은 편인데, 아마 큰 이유가 디자인 스타일도 국내의 그것과는 좀 다른 편이고 큼직큼직한 그리드 기반의 레이아웃은 아기자기하고 꽉꽉 채워져있는 듯한 국내의 웹디자인과는 좀 달라서가 아닌가 싶습니다.
그나마 요즘의 세계화 기조 덕분일까... 몇몇 큰 기업의 이벤트 홈페이지, 블로그, 관공서 홈페이지 등의 디자인들이 그리드 기반 레이아웃으로 조금씩 바뀌어져 가고는 있는 상황이라서 이 부분은 나아지고 있는 편입니다.

어쨌든 워드프레스로 홈페이지 제작을 할 때 '이미 만들어져 있는 테마'를 사용하지 않는다면 결국 직접 만들어야 합니다.
워드프레스 관련 서적을 보신 분들은 알겠지만 style.css와 index.php 두 개의 파일이 테마를 만드는 최소한의 구성요소이고 이 외에도 codex.wordpress.org 를 참조하여 필요한 파일들을 만들어가야 하는 것... 등등 생각할 것도 많고 할 일도 많습니다.

그런데 친절하게도 워드프레스 측에서 일종의 테마 제작틀을 제공하고 있습니다. 보통 "스타터(starter) 테마"라고도 하는데 힘들고 귀찮은 테마 파일 제작과정을 건너 뛸 수 있게 해 주고 또한 프로그램에 대한 지식이 많이 없는 웹디자이너 또는 퍼블리셔도 워드프레스를 사용한 간단한 홈페이지를 직접 만들 수 있게 해 줍니다. 즉, 스타터 테마를 사용하면 (어느정도)자신만의 테마를 만들 수 있다는 것입니다.

"_S" 언더스코어스(underscoreS)를 다운 받습니다.
http://underscores.me/

스타터테마 언더스코어스

페이지에 입력란이 있는데 적당한 이름을 넣습니다. 너무 길게 넣으면 나중에 소스 수정할 때 번거로우니까 영문자 2~3자로 하는 것이 편합니다. 본인은 "aca" 로 했습니다. 이 문자는 이제 만들어질 테마의 이름이기도 하고, 내부 소스의 함수(function)명 앞에 접두어처럼 붙게 됩니다. 예를 들면 "aca_functionname" 이런 식으로 함수명이 만들어집니다.

우측의 [Generate] 버튼을 클릭하면 사용자의 컴퓨터로 압축파일 하나가 다운로드 됩니다. 저의 경우는 "aca.zip" 파일이 다운로드 되었습니다. 이제 이 파일을 적당한 곳에다 압축을 풀면 테마 파일들이 생긴 것을 확인할 수 있습니다. 이 파일들이 워드프레스에서 제공하는 기본 테마의 동작 파일들이라고 봐도 과언은 아닐 것입니다...(라고 생각합니다). 

_S 테마 압축 파일

 

이 테마 파일을 워드프레스 관리자에서 테마로 등록합니다. 외모 - 테마 - 새로 추가 (또는 새 테마 추가하기)를 통해서 할 수 있습니다. 테마가 설치되면 테마 리스트에 새로 등록된 테마가 보일 것입니다. 이미지 부분이 없는 것은 screenshot.png 파일이 아무런 내용이 없는 투명한 png 파일이기 때문입니다.

워드프레스 테마 화면

테마 파일 업로드 설치

등록된 _S 테마

 

컴퓨터에 저장되어 있는 테마 파일의 압축을 풀고 생성된 파일들 중에서 screenshot.png 파일을 포토샵 등의 이미지 프로그램을 사용하여 수정한 후 FTP 프로그램을 사용하여 테마폴더에 업로드 합니다.
제가 사용하는 카페24의 경우 
/home/hosting_users/호스팅유저명/www/워드프레스설치디렉토리/wp-content/themes/aca
에 aca 테마가 설치된 상태입니다.

_S 테마 압축 풀기

테마 썸네일 이미지 screenshot.png

썸네일 제작 및 저장

 

관리자 - 외모 - 테마 페이지를 보면 비어있던 aca 테마의 이미지가 수정된 이미지로 바뀐 것을 확인 할 수 있습니다. 이제 aca 테마를 활성화 시켜 봅니다.

_S 테마 썸네일 등록 확인

_S 테마 활성화