매거진 스타일 테마, BranfordMagazine theme

BranFord Magazine Theme는 제가 현재 사용하고 있는 테마로 사용한지는 한달 반쯤 됐습니다. 제법 인기있는 무료 워드프레스 테마인데 몇 가지 특징을 꼽는다면,

• 블로그 메인(index.php) 상단에 적용한 탭메뉴(tabbed section)
• 서브페이지(page)의 드롭다운 메뉴
• 기본 페이지(page)템플릿 외에 3가지 페이지 템플릿 파일 제공
• 로고 이미지 PSD 파일 제공
• 썸네일을 자동생성시키지 않고 커스텀 필드(Custom Field)를 이용
• 특정 카테고리의 최근글을 보여줄 수 있는 사이드바 기능
• 현재 포스트와 같은 카테고리의 다른 글을 보여주는 사이드바의 ‘More from~’
• 노출시키지 싶지 않은 카테고리를 쉽게 숨길 수 있는 사이드바의 ‘Browse Categories’
• 검색결과 카테고리 페이지 등에서의 Excerpt의 활용

등이 특징인데 무엇보다 마음에 드는 점은 PHP와 CSS 등을 몰라도 수정이 쉽다는 점입니다. 특히 페이지용 템플릿 파일을 이용해 블로그 메인을 꾸미거나 특정 카테고리의 글을 따로 떼어내어 보여주기 쉽다는 점이 마음에 듭니다.

테마 제작자인 Michael Oeser의 블로그 der-prinz.com에서 Live Demo를 확인할 수 있으니 한 번 둘러보세요. 마음에 드시면 오른쪽 링크로 바로 내려 받아 사용하시면 되겠습니다. (BranfordMagazine Theme Download) 아래에서는 간단하게 테마 사용법에 대해 설명하겠습니다. 테마 레이아웃에 손을 대지 않고 그대로 사용한다는 가정하에 설명합니다.

FantasyAmplifier.com

블로그 로고 수정

블로그 이름은 기본 이미지 파일을 이용하게 되어 있습니다. BranfordMagazine 테마 스타일 그대로 이미지로 블로그 이름을 나타내고 싶으실 때에는 테마 제작자가 제공하는 PSD 파일을 이용해 수정해서 사용할 수 있습니다. 테마를 내려받은신 뒤 압축을 풀면 stuff 폴더가 있습니다. 그 폴더 안에 있는 BranfordMagazineLogo.psd 파일을 이용해 수정하시면 되는 것이지요. 로고 이미지의 크기는 변경하지 않고 텍스트만 바꿔 동일한 이름으로 저장하셨다면 업로드한 BranfordMagazine 테마 디렉토리에서 image > backgrounds 디렉토리에 올려주시면 됩니다.

만약 이미지가 아닌 글자로 블로그 이름을 나타내고자 하실 때에는 header.php 파일을 열어 아래 코드에서 ‘bloginfo(‘name’) 앞에 있는 두 개의 슬래시 기호(//)를 제거해주시면 됩니다. 블로그 설명 또한 나타내고 싶으시다면 그 아래에 ‘bloginfo(‘description’) 앞에 있는 두 개의 슬래시를 지워주시면 됩니다.

<div><a href="<?php echo get_option('home'); ?>/"></a></div>

단 이렇게 블로그 이름을 이미지가 아닌 글자로 나타내고자 하실 때에는 블로그 이름 뒤 배경으로 깔린 블로그 로고가 나타나지 않게 하기 위해 style.css 파일을 열어 아래 코드에서 ‘background: url(images/backgrounds/bg_branding.png) no-repeat;’ 을 전체 삭제해주셔야 됩니다. 로고 영역의 가로세로 길이도 이곳에서 width, height 값을 조정해 변경하시면 됩니다. 블로그 이름과 설명은 워드프레스 관리자 화면 > Settings > General에 입력하신 내용이 출력됩니다.

#branding {/*where the logo sits*/
width:625px;
height:100px;
padding-bottom:15px;
background:url(images/backgrounds/bg_branding.png) no-repeat;}

워드프레스는 home.php라는 이름의 템플릿 파일이 없을 경우 index.php 템플릿 파일로 블로그 첫화면을 구성하게 됩니다. BranfordMagazine의 index.php는 위 그림처럼 블로그 날래(sidebar) 영역을 제외하고 본다면, 본문을 크게 세 구역으로 나눌 수 있습니다. 세 구역에 원하는 카테고리의 글이 출력될 수 있도록 하기 위해 index.php 템플릿 파일에 카테고리 ID를 입력하는 방법에 대해 살펴보겠습니다.

ui.tabs.php 템플릿 파일 수정

A 영역의 탭메뉴는 원하는 만큼 탭을 넣을 수 있습니다. 하지만 탭 전체 가로 크기보다 크지 않는 게 보기에 좋을 것이므로 3~4개 정도가 적당할 듯 합니다. 탭메뉴 수정은 ui.tabs.php을 이용해 합니다. 파일을 열어보면 아래와 같은 코드가 보일 것입니다. 비순차항목(ul) 안에 있는 <li>~</li>가 각각 하나씩 탭 메뉴의 이름이 됩니다. 필요한 만큼 삭제 또는 추가하시면 됩니다. 탭을 늘리실 때에는 ‘href=”#fragment-숫자’에서 숫자는 순차적으로 증감하도록 바꾸시면 됩니다.

<div id="container-4"><ul>
<li><a href="#fragment-1">Lead Article</a></li>
<li><a href="#fragment-2">Recent Posts</a></li>
</ul></div>

아래 쪽으로 이동하면 아래와 같은 코드가 보일 것입니다. 이 곳에서 첫번째 탭에 보여 줄 카테고리를 지정합니다. ’showposts=숫자’에서 숫자는 보여질 글의 개수인데 1로 두는 게 편합니다. ‘cat=숫자’에서 숫자는 첫 번째 탭에 보여질 카테고리 ID입니다. 카테고리 ID는 블로그 관리자 화면에서 Posts > Categories로 이동해 카테고리 이름이나 카테고리 이름 아래에 있는 ‘Edit’에 마우스 커서를 가져가시면 브라우저 상태표시줄에 ‘cat_ID=숫자’로 나타납니다. 원하는 카테고리의 ID를 찾으셔서 넣어 주시면 되겠습니다.

// Lead Story module beginsquery_posts(’showposts=1&cat=1′);

첫 번째 탭에 보여질 카테고리 이름을 설정하기위해 위에서 입력한 카테고리ID와 동일한 ID를 입력하시면 됩니다. 하지만 만약 첫 번째 탭에 보여질 글을 별도의 카테고리로 관리하실 경우 해당 카테고리의 ID를 입력해주시면 됩니다. 제 경우는 ‘Lead Articles’이라는 카테고리를 생성해두고 첫 번째 탭에 걸어 두고 싶은 글이 있을 때 해당 글을 본래 카테고리와 함께 ‘Lead Articles’이라는 카테고리에도 다중 등록했습니다. 예컨대 이 글은 워드프레스 테마 카테고리로 발행하지만 블로그 첫 화면 탭에 걸어 두고 싶을 때에는 ‘Lead Articles’ 카테고리도 함께 선택해서 저장하는 것이죠.

// this is where the name of the Lead Story category gets printed
wp_list_categories(’include=1&title_li=&style=none’);

최신글을 보여주는 두 번째 탭에서는 보여줄 최신글의 수만 지정하면 됩니다. 아래 코드에서 ‘limit=숫자’에 보여주고 싶은 최신글 개수를 입력하시면 됩니다.

wp_get_archives('type=postbypost&limit=7');

세 번째 네 번째 탭은 ‘About this theme’과 ‘Importnat!’ 이 탭이 필요하지 않다면 사용하실 필요는 없습니다. 사용하지 않으실 생각이시라면 ui.tabs.php 파일에서 <!– ABOUT –>에서부터 <!– END IMPORTANT –> 코드 전체를 삭제해주시면 됩니다. 저는 한동안 세 번째 탭에는 WP-PostRating 플러그인을 이용해 별점이 높은 글을 노출시키도록, 네 번째 탭에는 태그 클라우드를 출력하도록 사용했습니다.

index.php 템플릿 파일 수정

A 영역에 노출시킬 기본 카테고리 설정을 마쳤다면 이제 B와 C 영역에 보여줄 카테고리 설정을 하기 위해  index.php 파일을 수정할 차례입니다. 우선 2단 중 왼쪽 단(B 영역) 카테고리 설정에 대해 알아 보겠습니다. index.php 파일을 열어 아래 코드를 찾은 뒤 ’showposts=숫자’에서 숫자에 보여줄 글의 개수를, ‘cat=숫자’에서 보여줄 카테고리의 ID를 입력합니다. 간단하게 왼쪽 단 설정을 끝낼 수 있습니다.

// “Featured articles” module begins
query_posts(’showposts=3&cat=7′);

오른쪽 단은 기본 여러개의 카테고리 글을 보여줄 수 있도록 되어 있습니다. 왼쪽 단에 보여줄 카테고리의 ID를 ‘array(숫자, 숫자, 숫자, 숫자)’에서 각 숫자에 대입합니다. 예컨대 3개의 카테고리 글을 오른쪽 단에 보여지게 설정한다고 할 경우 각각의 카테고리 ID가 1, 2, 3이라면 ‘array(1, 2, 3)’으로 입력하시면 됩니다.

// enter the IDs of which categories you want to display
$display_categories = array(3,4,5,6);

왼쪽 단과 오른쪽 단은 글의 일부를 보여주는 방식을 취하는데 그 방법이 다릅니다. 왼쪽 단은 글 시작부분에서 약 20단어를 끌어와 보여주도록 기본 설정되어 있는 반면, 오른쪽 단은 excerpt를 출력해주도록 하고 있습니다. 글을 작성할 때 excerpt 칸을 채웠다면 해당 내용이 나오게 되고, 그냥 비워뒀을 경우에는 포스트 시작부분에서 약 55단어를 끌어와 보여주게 됩니다. 제 경우에는 excerpt에 내용을 채워 사용하기 때문에 문제가 되지 않지만 혹 왼쪽과 오른쪽 단의 글자수를 조절하고 싶으신 분은 왼쪽 단의 경우는 index.php 파일에서 아래 코드에 있는 20이라는 숫자를 이용해 단어수를 수정하시면 됩니다.

the_content_rss('', TRUE, '', 20);

만약 오른쪽 단 역시 왼쪽 단처럼 글자수를 조절하고 싶으시다면 the_excerpt() 함수 대신 왼쪽 단에 쓰인 the_content_rss()를 사용하시면 되겠습니다.

커스텀 필드(Custom Field)로 메인에 사용될 썸네일 삽입

위 과정을 마치면 블로그 메인에서 본문 영역에 노출될 카테고리는 다 지정한 것입니다. 그런데 앞서 BranFordMagazine은 커스텀 필드(Custom Field)를 이용해 썸네일을 넣어 준다고 소개했습니다. 자동으로 썸네일을 생성시키면 물론 편한 점도 있지만, 본문에 삽입된 이미지가 없을 경우 썸네일이 생성되지 않으며(일반적인 경우) 본문에 삽입된 이미지가 있다고 해도 썸네일을 보여주고 싶은대로 제어하기 힘듭니다. 또한 썸네일의 해상도 등도 일괄처리 되기 때문에 불필요하게 파일 사이즈가 늘어날 수 있습니다.

반면 커스텀 필드를 이용할 경우 조금 귀찮을 수 있으나 외부 이미지 파일을 썸네일로 지정할 수도 있으며, 원하는 대로 출력시킬 수가 있습니다. 그리고 썸네일을 사용하지 않아도 블로그 레이아웃은 그대로 살아 있기 때문에 썸네일은 필수가 아니라 선택 사항이 됩니다.

Custom Fields

블로그 메인에 사용될 썸네일을 한 곳에서 일괄관리하는 방식이 아닙니다. 개별 포스트마다 사용할 썸네일을 지정해주는 방식입니다. 그렇기 때문에 현재 블로그 메인에 등록한 카테고리에서 최신글에만 썸네일로 사용할 이미지를 지정해주시면 됩니다. 블로그 메인 페이지의 A, B, C 이 세 영역은 각각 다른 커스텀필드 Name을 사용합니다. 구분을 해야하니까요.

• 첫 번째 탭 영역의 커스텀 필드 Name은 leadimage
• 왼쪽 단에 사용할 커스텀필드 Name은 featuredarticleimage
• 오른쪽 단에 사용할 커스텀필드 Name은 rightcolimage

입니다. 물론 이 커스텀필드 이름은 변경할 수도 있습니다. 하지만 지금은 기본 설정을 통해 설명하겠습니다. 블로그 본문 영역의 가로 크기를 변경하지 않았다면, 각각의 썸네일 이미지의 크기는 대략 아래와 같습니다. (단위는 픽셀입니다.)꼭 아래 크기를 사용해야 되는 것은 아닙니다, 특히 세로 길이는.

• leadimage: 300×200
• featuredarticleimage: 255×88
• rightcolimage: 75×75

BranfordMagazine 테마의 index.php 파일로 블로그 메인을 꾸릴 경우 사용하게 되는 썸네일은 기본 3곳입니다. A, B, C 구역이지요. 만약 첫 번째 탭 영역에 워드프레스 테마 카테고리의 글이 보여지도록 설정했다면, 워드프레스 테마 관련 글을 쓸 때 커스텀 필드에에서 Enter New를 눌러 Name에 ‘leadimage’를 입력하고 첫 번째 탭 영역에 보여줄 썸네일 이미지의 절대경로를 Value 칸에 입력한 뒤 Add Custom Field 버튼을 눌러 커스텀 필드에 추가시킵니다. 커스텀 필드 이름은 처음에는 직접 입력해줘야 하지만 한 번 사용하고 나면 커스텀 필드 이름 목록에 저장되기 때문에 다음 번부터는 -select-를 눌러 이름을 쉽게 선택해 사용할 수 있습니다.

썸네일로 사용할 이미지의 절대 경로를 입력해야 된다고 말씀드렸는데 ‘http://fantasyamplifier.com/img/thumbnail.png’처럼 썸네일로 사용할 이미지의 전체 경로를 입력해주시면 된다는 뜻입니다. 포토샵을 사용하신다면 이렇게 매번 썸네일로 사용할 이미지의 크기에 맞게 잘라 사용하는 것이 어렵지 않겠지만 귀찮기는 할 것입니다. 그때 이용해볼 수 있는 방법 중 하나는 워드프레스에서 생성하는 기본 이미지 파일의 썸네일과 중간 크기 이미지 파일이 크기를 BranfordMagazine 테마에 사용하기 쉽도록 설정을 변경해주는 것입니다. 예를 들면, 첫 번째 탭과 왼쪽 단에 동일한 크기의 썸네일을 사용한다면 이를 Settings > Media로 이동해 Medium size 크기를 그에 맞게 변경시키고, 오른쪽 단에 썸네일로 사용할 이미지의 크기는 Settings > Media에서 Thumbnail size에 입력해서 사용하는 것이죠.

Add an Image

이렇게 크기를 지정하고 나면 워드프레스로 이미지를 업로드 시키게 되면 그에 맞는 크기의 이미지가 생성되기 때문에 해당 파일 주소만 가져와서 썸네일로 사용할 수 있습니다.  Add an image를 통해 이미지를 업로드하면 위 그림처럼 업로더 창 아래에서 Size 옵션을 통해 삽입할 이미지의 크기를 선택할 수 있습니다. 이때 썸네일이나 중간 크기를 선택해 이미지를 삽입한 다음 다시 이미지 수정 버튼을 클릭해 이미지 경로를 복사해 이를 BranfordMagazine 테마의 메인 페이지에 사용할 썸네일의 절대 경로로 사용할 수 있습니다. 본문에 이미지가 필요 없다면 해당 이미지는 삭제하셔도 되겠습니다.

직접 썸네일로 사용할 이미지를 크기를 매번 포토샵과 같은 도구를 이용해 변경해서 계정에 업로드 시키실 수도 있고, 아니면 위와 같은 방법을 사용하실 수도 있으실 텝니다.

사이드바 설정

BranfordMagazine 테마는 기본 두 개의 사이드바가 설정되어 있습니다. Regular sidebar와 tmpl_featured-page.php 템플릿을 페이지에 사용할 경우 함께 사용할 수 있는 Featured Page Textwidgets이 나머지나입니다. Regular sidebar만 사용해도 충분하기 때문에 블로그 관리자 화면에서 Appearance > Widgets 으로 이동해 Regular sidebar에 원하는 위젯을 끌어다 꾸미시면 됩니다. 그렇지만 워드프레스의 위젯 추가 기능을 이용하지 않고 BranfordMagazine 기본 설정대로 이용하고 싶으실 때에는 아래처럼 간단하게 sidebar.php 파일을 열어 카테고리 등 기본 설정을 해주시면 됩니다.

sidebar.php 파일을 열면 is_single()과 is_home()이 보이실 텐데 is_single() 아래에는 개별 포스트를 보여줄 때 적용할 설정을, is_home()은 블로그 메인 등에 보여지게 됩니다. 아래 코드는 개별 포스트를 보여줄 때 사이드바에 현재 보여지고 있는 글과 같은 카테고리 최신글을 보여주는 기능을 합니다. 여기서 설정하는 것은 보여질 글 개수를 지정하는 것입니다. ‘numberposts=숫자’에서 보여줄 포스트 개수를 입력합니다.

$posts = get_posts(’numberposts=10&category=’. $category->term_id);

블로그 메인 페이지에 사용될 사이드바 상단에 보여줄 카테고리의 이름이 출력되도록 해주는 코드입니다. ‘include=숫자’에서 숫자에 원하는 카테고리 ID를 입력해주시면 됩니다.

// this is where the name of the News (or whatever) category gets printed
wp_list_categories(’include=1&title_li=&style=none’);

바로 아래에 있는 코드에서는 사이드바 상단에 보여줄 카테고리 ID와 글수, 최근 글에서 몇 개의 글을 건너 띄고 보여줄 것인지를 지정합니다. ‘cat=숫자’에 카테고리 ID를, ’showposts=숫자’에는 보여줄 카테고리의 글 수를, ‘offset=숫자’에는 해당 카테고리의 최신 글에서 건너띌 포스트 개수를 입력합니다. offset의 경우 조금 설명이 애매한데요. 예를 들면 블로그 메인에서 아래쪽 왼쪽 단에 워드프레스 테마 카테고리의 최신 글이 2개가 보여지도록 설정했을 때, 사이드바 상단에 워드프레스 테마 최신글을 2개 건너 띄고 3번째 글부터 제목을 출력할 경우 offset=2 라고 설정하면 됩니다.

query_posts('showposts=5&offset=1&cat=1');

아래로 조금 더 내려가면 블로그의 카테고리를 보여주는 코드가 있습니다. 아래 코드에서 ‘exclude=숫자’에 특정 카테고리의 ID를 입력하면 카테고리는 생성되어 있지만 사이드바 카테고리 목록에는 노출되지 않습니다. 노출시키고 싶지 않은 카테고리가 다수일 경우에는 쉼표로 구분해주시면 됩니다. ‘exclude=2, 12, 4, 5, 532′ 처럼 말이지요.

wp_list_categories('orderby=name&hide_empty=1&title_li=&exclude=7');

이 코드 아래에는 광고 이미지를 삽입할 수 있도록 리스트를 만들어 두고 있습니다. 만약 애드센스 코드를 삽입하신다면 Ads & Sponsors라고 보이는 곳에서 <li>~</li>안에 있는 코드를 지우고 애드센스 코드를 <li>~</li>사이에 넣어 주시면 됩니다. 블로그 사이드바 기본 설정은 이 정도로 마칠 수 있습니다.

위 그림은 BranfordMagazine 테마에 기본 제공되는 템플릿 중 tmpl_3-column-page 를 적용해 만든 페이지입니다. 이 템플릿과 다른 두 개의 템플릿은 블로그 메인 설정을 하실 수 있으면 별 무리 없이 설정을 변경해서 사용하실 수 있기 때문에 따로 설명을 하진 않았습니다.

제가 이 테마를 5월 1일부터 사용했는데, 아는 것도 없고 게으르다보니 아직 수정을 다 하지 못했습니다. 그렇지만 현재 제가 사용하고 있는 파일이 필요하신 분이 있으신 듯 해서 블로그 메인, 싱글 포스트, 워드프레스 페이지에 사용하는 스타일시트와 템플릿 파일을 압축해서 올려 드립니다. 파일은 애드센스 광고 코드와 애널리틱스 트래킹 코드만 삭제하였기 때문에 현재 제가 사용하고 있는 것과 동일합니다.

열어 보시면 얘가 아직 수정을 안 끝냈구나하는 걸 아실 수 있으실 텝니다. 특히 스타일시트가 엉망입니다. 그렇지만 워드프레스 사용하시는데 조금이나마 도움이 되었으면 합니다. 필요하신 분은 아래 링크를 클릭하시면 됩니다.

FantasyAmplifier.com

조금 설명을 드리자면 저는 현재 header, footer를 여러 개의 나누어 사용하고 있습니다. 현시점에서는 사실 footer까지 나눌 필요는 없는데 이 테마를 사용하는 중간에 사용했던 어떤 스크립트를 필요한 곳에만 사용하기 위해서 나누었습니다. 그리고 앞으로 특정 스크립트를 사용해 트래킹을 하거나 할 때에도 필요한 곳에만 사용하기 위해서 하나만 사용하지 않고 여러 개로 나누어 사용하고 있습니다.

header-single.php 템플릿 파일에서 meta name=”keywords”와 meta name=”description” 부분은 커스텀 필드를 이용해 개별 포스트에 메타 정보를 추가하는 기능을 합니다. 워드프레스는 개별 포스트에 대한 메타 키워드나 설명문을 추가하는 기능이 배제되어 있습니다. 물론 여러 플러그인을 통해 이 기능을 추가할 수 있는데 현재 저는 커스텀 필드를 이용해 메타 정보를 추가하고 있습니다.

연관 글

1. 전업 워드프레스 테마 디자이너 ChiQ의, Centric Theme
2. 레이아웃 변경이 쉬운 테마 Arras Theme
3. Brownie Wordpress Theme
4. YouAre.com에서 만든 테마 YouAre Theme
5. Gabfire.com의 SmallMagazine 워드프레스 테마