워드프레스 테마 관리

13. 테마

워드프레스의 테마는 테마에 따라서 설정방법이 모두 다릅니다. 테마에 따라서 위젯도 다르고 메뉴 항목이 없을 수도 있습니다. 기본테마인 Twenty-Eleven은 메뉴의 “외모” 항목에서 코드 수정을 하지 않고 테마를 변경할 수 있지만 대부분의 테마들은 별도의 항목을 추가해서 다양한 설정을 할 수 있도록 하고 있으며 특히 유료 테마의 경우는 아주 복잡한 설정까지 포함돼 있습니다. 이것은 제1장에서 알아보았듯이 블로그는 블로그 글의 주제에 따라서 그에 맞는 테마를 사용해야 하고 사용자의 취향에 따라서 원하는 테마가 다양해서 그에 맞는 설정이 필요하기 때문입니다.

유료 테마든 무료테마든 사용자의 마음에 드는 테마를 찾기는 어렵고 찾았다 하더라도 설치하고 보면 설정화면에서 설정하거나 코드를 직접 수정해야 원하는 모양이 나오게 됩니다. 다음 장 부터는 기본 테마를 바탕으로 자식테마(Child Theme)를 만들어서 php 코드를 추가하거나 스타일시트를 수정하여 원하는 테마를 만들어가는 과정이 나옵니다. 전 단계로서 테마관리에 대해 관리자화면에서 할 수 있는 것은 알아두면 다음 장에서 테마 수정 시 도움이 됩니다. 또한 테마 수정을 하지 않더라도 관리자 화면에서 일부나마 수정하는 방법은 알아두는 것이 좋습니다.

워드프레스 버전이 3.4로 업데이트 되면서 기본테마가 Twenty-Twelve(2012)로 변경될 예정이었지만 현재 개발완료가 안돼서 2012년 11월 경에 3.5버전으로 업데이트되면서 추가될 예정이고 현재 베타버전을 사용할 수는 있습니다. 기본 테마는 다양한 기능이 기본적으로 갖춰져 있어서 이를 수정하여 사용하도록 권장하고 있습니다. 그래서 처음 모양은 단순하지만 원하는 대로 디자인을 변경할 수 있습니다. 테마의 디자인 변경은 파일을 직접 변경하면 나중에 업데이트 시 모두 원상 복구되므로 자식테마를 만들어 이 자식테마를 대상으로 변경하는 것이 좋습니다. 자식테마는 기본테마를 부모테마로 하여 만들어지며 수정하는 내용만 추가하면 자식테마의 내용이 우선 적용되므로 파일관리가 쉽습니다.

 

13-1. 테마 관리

주 메뉴–>외모–>테마관리를 선택하면 테마를 관리 화면이 나타납니다. 워드프레스 3.4버전에서 두드러지게 바뀐 점은 테마를 실시간으로 미리 보기하면서 수정할 수 있다는 것입니다. 이 화면의 상단에는 현재 설치되어 활성화된 테마가 있고 테마 소개 내용 아래에 여러 가지 링크 메뉴가 있습니다. 이곳의 메뉴는 주 메뉴에 있는 것과 같고 “사용자 정의하기” 링크를 클릭하면 별도의 화면에서 테마의 실제 화면을 보면서 수정할 수 있는 화면이 나타납니다.

그 아래의 “존재하는 테마들”에는 설치는 돼 있지만 활성화되지 않는 테마들이 존재합니다. 활성화가 안됐어도 각 테마의 하단에 있는 “실시간 미리보기” 링크를 클릭하면 활성화된 테마처럼 미리보기 하면서 테마를 수정할 수 있습니다. 이 링크를 클릭하여 수정해봅니다.

화면 좌측에서 제목의 오른쪽에 있는 세모 아이콘을 클릭하면 설정할 수 있는 화면이 나타납니다. 테마 이름이 나온 곳은 테마의 소개에 대한 내용입니다. “사이트 제목과 태그라인”은 주 메뉴의 일반 설정에서 나오는 사이트 제목과 태그라인을 수정할 수 있습니다. 색상과 레이아웃은 주 메뉴의 테마옵션 항목에서 설정하는 것과 같은 내용이 나옵니다. “헤더이미지”와 “배경 이미지”는 주 메뉴의 헤더와 배경에서 설정하는 내용의 일부가 있습니다. “내비게이션”은 블로그 화면에 메뉴가 여러 개 있는 경우 선택할 수 있습니다. “정적인 전면 페이지”는 주 메뉴의 읽기 설정에서 전면 페이지 설정에 관한 내용입니다.

이처럼 테마 관리에서 사용자 정의하기 화면은 테마 설정 부분을 한곳에 모아서 간단한 설정을 할 수 있도록 만든 화면이며 테마에 따라서 설정할 수 있는 항목이 다릅니다.

 

Advertisements

블로그 – 무엇을 쓸 것인가?

안녕하세요. 베누시안입니다. 제가 요즘 워드프레스에 관한 책을 만드느라고 하루에 한번 이상은 웹디자인에 관한 정보를 꼭 올리곤 했는데 몇개월째 글을 자주 못올리고 있습니다. 댓글에 답변도 제대로 못하고 있는 상황이죠. 이제 반정도 완료돼서 워드프레스 테마 만들기에 관한 내용이 남았지만 아주 내용이 많아서 2, 3개월은 더 있어야 완성될 듯 합니다. 그 이후로는 많은 웹디자인 정보를 여러분께 전달해 드리도록 하겠습니다.

다음은 제가 만들고 있는 워드프레스 책(제목 아직 미정) 3장 내용의 일부입니다. 각 장 별로 3개까지는 제 나름대로 블로그에 게재해도 좋다는 허락을 받아 올리는 것입니다.

1 . 무엇을 쓸 것인가?

1-1 블로거는 인터넷 콘텐츠의 주 생산자

블로그에 글을 올리는 것은 다양한 소셜 네트워크 서비스 중에서도 가장 어려운 일에 속합니다. 트위터나 페이스북 같은 소셜 네트워크 서비스는 글 내용이 길지 않고 맞춤법이 틀리거나 특별한 내용이 아니더라도 무엇이든 올릴 수가 있죠. 즉, 내용이나 형식에 구애 받지 않는 장점이 있습니다. 단점이라면 한번에 그치는 글이라는 점입니다. 글이라고는 할 수 없고 쪽지에 불과해서 시간이 지나면 효력이 상실되는 내용의 글입니다. 그만큼 글의 수도 많아서 일일이 찾아보기도 어렵고 인터넷 검색도 힘듭니다.

 

블로그의 시작은 인터넷이 시작한 것과 같다고 해도 과언이 아닙니다. 인터넷에서 자신을 알리고 싶어하는 본능이 HTML로 홈페이지를 만들게 됐고 더 효율적인 방법으로 블로그 프로그램이 만들어졌습니다. 웹 2.0은 공유라는 개념을 도입했고 이때부터 소셜 네트워크 서비스가 발전하기 시작했습니다. 웹 2.0 플랫폼이 나오기 전에는 정보는 정보 전달자와 수요자가 별개였지만 이후로는 정보의 전달자가 수요자를 겸하고 있습니다. 즉, 내 정보를 전달하고 남의 정보도 얻는 정보의 공유가 시작된 것입니다. 21세기의 주된 정보 전달자는 뉴스 미디어가 아닌 바로 일반인입니다.
세계 최대의 검색엔진인 구글은 블로그를 아주 좋아합니다. 우리나라 포털의 검색엔진도 마찬가지지만 검색어에 따라 광고가 우선 나오기도 합니다. 검색엔진이 블로그 글을 좋아하는 이유는 수많은 사람들이 올리는 글이 다양하고 신선하기 때문입니다. 구글에서 검색해서 나오는 글의 우선순위는 대부분 블로그의 글들입니다. 웹디자인이나 워드프레스에서 필요한 정보는 구글만 통하면 다 해결됩니다. 단 영어로 된 정보가 대부분이라는 것이 흠입니다.

1-2 콘텐츠의 생산

구글 검색을 해보면 검색어에 가장 적절한 정보가 높은 순위로 나타나서 두 페이지 정도만 봐도 대부분 원하는 결과를 찾을 수 있습니다. 하지만 국내 검색엔진은 그렇지 않습니다. 정보도 부족하고 좋은 정보라 해도 높은 순위에 있는 경우가 드물어서 한참을 찾아야 합니다. 정보의 전달자로서 국내 블로그는 아직 부족한 점이 많습니다. 정보의 종류는 많지만 높은 순위를 차지하고 많은 블로거들이 택하는 주제가 맛집이더군요. 맛집 소개에 관한 글이 이렇게 많은 것을 보면 우리나라는 먹는 데 소비를 많이 하는 것 같습니다. 더 다양하고 깊이 있는 정보가 필요하다고 봅니다.

정보의 전달자로서 블로거는 자신이 잘할 수 있고 잘 알고 있는 전문적인 정보를 글로 표현하는 것이 가장 좋은 방법입니다. 이보다 쉬운 방법은 없겠지만 대부분의 사람들은 전문 지식이 없습니다. 전문 지식을 갖고 있는 사람이 한국에서 블로그에 글을 올리는 일은 드뭅니다. 바쁘기 때문이기도 하지만 전문적인 정보를 공유하기 싫어한다고나 할까요. 이런 점에서 외국 블로그를 살펴보면 참 대단하다는 생각이 듭니다. 고급 정보가 무료라는 게 의심스러울 정도입니다.

그렇다면 어떤 글을 어떻게 올려야 좋을지 궁금해집니다. 제 경우에는 웹디자인을 위해 가장 먼저 포토샵을 시작했고 그다음에 PHP, CSS, HTML5, 자바스크립트(제이쿼리) 등 웹디자인과 관련된 분야를 넓혀 나갔습니다. PHP를 공부하던 중 워드프레스와 드루팔, 익스프레스엔진 등 PHP로 만들어진 콘텐츠 매니지먼트 시스템(CMS) 프로그램을 알게 됐습니다. 여러 가지를 하다 보니 어느 하나 전문적으로 잘하는 것은 없습니다만 이런 공부를 하면서 알게 된 지식을 정리해서 블로그에 올리는 것은 잘합니다.

 

이처럼 자신이 전문적으로 잘 알지 못해도 내가 관심이 있거나 취미로 하고 있는 일을 정리해서 블로그에 올리면 좋은 글이 됩니다. 글을 작성하면서 정보의 정확성을 위해 더 찾아보고 확인한 정보를 올리려는 책임감으로 인해 지식은 깊이를 더하게 됩니다. 내 글을 누군가 보고 정보로 삼으려면 글을 대충 올려서는 안 되기 때문이죠. 취미가 직업이 된다면 이보다 좋은 직업이 없습니다. 취미를 살려서 깊이 있는 공부를 하다 보면 직업이 됩니다.

 

내 블로그의 글을 모아서 책을 만든다고 생각하고 글을 쓰면 블로그 글은 원고가 됩니다. 사실 티스토리에 블로그를 만들어 포토샵에 관한 글을 쓰면서 PDF로 책을 만들 계획이었습니다. 포토샵은 제가 경험한 분야 중에서 가장 잘 아는 분야이기 때문입니다. 포토샵 관련 글이 200개를 넘다 보니 더는 쓸 내용이 없어서 그다음으로 잘 아는 CSS와 워드프레스에 대해 글을 쓰기 시작했습니다. 6개월 정도 쓰고 나서 다른 분야로 넘어가려고 했더니 계획에 차질이 생겼습니다.

CSS와 워드프레스 글을 본 분들이 의뢰가 들어오기 시작한 것이죠. 그래서 포트폴리오 소셜 네트워크 서비스 디자인을 담당하게 됐고 출판사에서는 워드프레스에 관한 책을 만들자는 제안이 들어왔죠. 취미로 시작한 포토샵을 발전시켜서 웹디자인을 공부하게 됐고 이제는 직업이 됐습니다. 밤새도록 작업해도 싫증이 안 나는 일이 직업이 됐으니 이보다 좋은 직업은 없으리라 생각합니다.

이 책을 보시는 여러분들도 잘 할 수 있는 것에 대한 글을 만들어 블로그에 올려보세요. 방문자가 들어와 보고 좋아할 겁니다. 그러면 더 좋은 글을 쓸 힘이 납니다. 글재주가 없다고요? 저는 글을 잘 쓰지 못해서 원고를 작성해서 출판사에 보내면 모든 게 수정돼서 돌아옵니다. 처음엔 당황스럽고 이런 사람이 책을 만들 수 있을 것인가, 라는 의문이 들고 용기가 안 났지만 한편으로는 이런 생각도 들더군요. “나는 글을 쓰는 사람이 아니라 정보를 전달하는 사람이다. 정보 전달은 글 쓰는 능력이 없어도 된다”고 말이죠. 맞는 얘기죠?

워드프레스 템플릿 계층구조(Template Hierarchy)

워드프레스의 테마 폴더 안에는 여러 개의 파일이 있지만 사용하는 파일이 상황에 따라서 다릅니다. 이것은 사용자가 지정하는 것이 아니라 워드프레스가 알아서 파일을 지정합니다. 폴더안에 front-page.php 파일이 있으면 워드프레스는 이것을 웹페이지 초기화면으로 나타나도록 합니다. 이파일이 없으면 그다음 단계인 page.php파일을 초기화면으로 사용합니다. 만약 이것도 없다면 index.php파일을 초기화면으로 사용합니다. 이처럼 테마 폴더 안에 어떤 파일이 있느냐에 따라서 사용되는 파일이 달라지는 것을 템플릿 계층구조라고 합니다.

마찬가지로 카테고리 목록을 선택했을 때 category.php파일을 우선 사용하고 이 파일이 없으면 archive.php를 사용하며 최종적으로 index.php파일을 사용합니다. 그러므로 가장 근본이 되는 파일은 index.php파일입니다. 아래의 그림은 워드프레스닷오그의 코덱스 페이지(http://codex.wordpress.org/Template_Hierarchy)에서 볼 수 있는 템플릿 계층 구조의 이미지입니다.

코덱스 페이지는 워드프레스 테마제작과 관련된 모든 내용이 망라돼 있으며 아주 상세한 설명이 있습니다.

하나의 테마를 만들기 위해서 위 그림과 같이 많은 파일이 필요한 것은 아닙니다. 복잡한 웹사이트를 만들면 파일이 많아질 것이고 블로그가 아닌 웹사이트를 만들면 수십개의 Page가 필요할 수도 있습니다. 그중에서 어떤 파일이 먼저 나타나도록 할 것인지 설계해야합니다. 페이지는 글(포스트)이 나타나는 페이지를 의미할 수도 있지만 2장에서 본 것처럼 글이 아닌 About 페이지나 Contact 페이지 등 글이 아닌 내용이 나타나는 장소를 의미합니다.

페이지의 계층구조는 다음과 같습니다.

custom template – front-page.php처럼 사용자 정의된 페이지가 최우선적으로 나타납니다.

page-{slug}.php – 관리자 화면에서 페이지를 만들고 슬러그를 추가한 경우 이런 형태로 파일을 만들면 custom template이 없는 경우 우선적으로 나타납니다.

page-{id}.php – 마찬가지로 관리자 화면에서 페이지를 만들 때 페이지 아이디가 나타나도록 만들고 이 아이디가 추가된 파일을 만들면 위의 파일들이 없을 때 우선적으로 나타납니다.

page.php – 위 파일들이 없을 때 우선적으로 나타나는 페이지입니다.

index.php – 위 파일들이 없을 때 나타나는 페이지가 됩니다.

시험삼아 파일이름을 front-page.php으로 하고 내용을 “초기화면”이라고 넣고 파일을 만들어 기본테마인 Twenty-Eleven 폴더에 넣고 블로그 초기화면에서 보면 “초기화면”이라는 글자만 나타난 화면을 볼 수 있습니다. 이처럼 템플릿 계층구조는 워드프레스가 파일의 계층구조를 정해놓고 순서에 의해 나타나도록 하고 있습니다. 이 Front-page에 다른 글로 이동할 수 있도록 글 목록이나 이미지들을 조합하여 원하는 내용의 웹페이지를 만들면 관문역할을 하는 페이지가 됩니다.

템플릿 파일과 태그

워드프레스의 테마를 구성하는 파일을 템플릿 파일이라고 합니다. 템플릿이란 원하는 디자인을 만들기 위해서 기본적인 내용이 이미 만들어진 파일을 의미합니다. 한글로 “형판”이라고 번역할 수 있습니다. 그래픽 디자인을 위해서 포토샵 템플릿 파일을 구매해서 디자인을 하면 빠르게 디자인 할 수 있듯이 웹디자인을 위해서도 템플릿을 사용하면 웹사이트를 빠르게 구축할 수 있습니다. 워드프레스에서 템플릿은 이와 비슷한 의미가 담겨있지만 테마를 구성하는 파일을 의미합니다. 그러니 스타일시트 파일도 템플릿에 속합니다.

워드프레스에서 태그는 세가지 의미로 사용됩니다. 우선 HTML페이지를 만들기 위한 HTML 태그가 있고, 글의 키워드를 추출하여 방문자로 하여금 관련된 글을 볼 수 있도록하는 글 태그가 있으며, 세번째로 템플릿 파일에 사용되는 php 코드인 템플릿 태그입니다. 이런 태그의 의미는 “중요한 것”으로 함축될 수 있습니다. 태그의 원래 의미는 이름표입니다. 공항에서 수하물을 맡길 때 이름표를 붙여주죠. 이것을 태그라고 합니다. 옷에도 태그가 있고 남자가 군대를 가면 태그(인식표)를 달고 다닙니다. 이처럼 태그는 구성요소중 “중요한 무엇”을 의미합니다.

템플릿 태그는 단순한 코드가 아니라 어떤 정보를 담고 있습니다. 이 태그를 적재적소에 붙여넣으면 원하는 정보를 데이터베이스에서 가져와 보여줍니다. HTML의 <title></title> 태그 사이에 <?php bloginfo(‘name’); ?>라는 템플릿 태그를 사용하면 블로그 이름을 나타낼 수 있습니다. 이처럼 워드프레스에 사용되는 파일이나 코드는 레고블록으로 집을 짓거나 비행기를 만들 수 있는 것처럼 조립하여 사용할 수 있도록 돼 있습니다. 그러니 프로그래밍 언어인 php를 몰라도 되는 것입니다.

PHP 코드 블록

워드프레스는 기본적으로 php 프로그래밍 언어를 사용하기 때문에 템플릿 태그도 php로 돼 있습니다. Php 코드는 다음과 같은 구조로 돼 있으며 어느 하나라도 빠지면 에러가 발생합니다.

<?php 템플릿_태그_이름(‘매개변수’); ?>

Php 코드의 시작은 <?php로 시작하고 ?>로 끝이 납니다. 이부분을 코드블럭이라고 하며 이 안에 들어가는 것은 기본적으로 함수이며 글자와 글자 사이튼 밑줄(underscore)을 사용합니다. 함수는 괄호를 갖고 있으며 이 괄호 안에 매개변수를 사용할 수도 있습니다. 함수를 사용하지 않을 경우는 php에서는 echo라는 명령어를 사용하여 이 명령어 다음에 나오는 글자를 표시하도록 하지만 워드프레스의 템플릿 태그는 내용을 표시할 경우라도 echo를 사용하지 않고 템플릿 태그 자체에 내용을 표시하도록 설정돼 있습니다. 함수나 명령어 다음에는 명령이 끝났다는 의미로 세미콜론( ; )을 사용합니다. 이부분을 빠트려도 나오기는 하지만 꼭 입력하도록 합니다.

위와 같이 워드프레스에서 php의 함수를 사용하므로 워드프레스에서 정해진 템플릿 태그만 사용할 수 있는 것이 아니라 php의 기본 함수도 사용할 수 있습니다. 날짜를 나타낼 때는 다음과 같이 php의 기본 함수를 사용합니다. 이것은 템플릿태그가 아닙니다.

<?php echo date(“Y/m/d”); ?>

위 코드는 php의 기본 함수로 오늘 날짜를 표시하기 위해서 echo라는 명령어를 사용했습니다. 워드프레스는 고유의 함수인 템플릿 태그를 사용하는데 다음과 같이 echo를 사용하지 않고 함수만 있어도 날짜가 표시되며 이것은 오늘날짜가 아니라 글 발행일자입니다.

<?php the_time(‘F jS, Y’); ?>

이처럼 워드프레스에서만 사용할 수 있는 함수인 템플릿 태그는 다른 php 함수와 구별하기 위해서 the라는 영어의 정관사를 삽입하기도 합니다. 이러한 고유의 함수는 워드프레스 코어 파일에 정의돼 있습니다. 이처럼 워드프레스에서 정의된 고유의 함수뿐만 아니라 php의 기본 함수도 사용할 수 있어서 다양한 표현이 가능합니다.