디자인은 크게 돋보이지 않지만 기본 구성에 충실한 워드프레스 테마로

• 테마 옵션
• 댓글에 댓글 달기 지원(댓글을 일정 개수로 쪽을 나눠보여줄 수 있는 기능은 미지원)
• 로고 PSD 파일 제공
• 특집글 슬라이드 쇼(특집 글이 하나 뿐일 때는 고정)
• TimThumb을 이용한 자동 섬네일 크기 조정(사용자정의필드를 이용해 섬네일로 사용할 그림 파일 경로 지정)
• 125×125 크기 광고 영역
• 댓글이 많이 달린 글 위젯
• 글쓴이 정보 출력
• 소셜 북마킹 지원
• 연관 글(분류 최근 글) 출력 기능 내장
• 첫 화면에 네 개 분류의 최근글을 보여주는 기능

등이 눈에 눈에 띕니다. 트위터 최근글을 불러와 보여주는 기능이 내장되어 있지만 오류가 있어 블로그 날개 영역 자체가 뜨지 않는 문제가 있는데요. 테마 옵션(Appearance > cleanPRESS options) > Twitter Options > Twitter Count)에서 Disabled로 선택해두시면 날개 영역의 다른 위젯은 정상적으로 출력됩니다.

Posts 확장기능을 내장하고 있기 때문에 이 확장 기능이 설치되어 있는 곳에서는 해당 확장기능을 비활성화시키거나 테마의 functions.php에서 Limist Posts 확장 기능 코드만 삭제해주셔야 사용할 수 있습니다.

• cleanPRESS 테마 소개
• cleanPRESS 테마 미리보기
• cleanPRESS 테마 내려받기

섬네일

사용자정의필드를 이용해 각 글의 섬네일로 사용할 그림 파일의 경로를 지정해줍니다. 필드의 이름은 thumb, 값은 그림 파일의 전체 경로로 해서 사용자정의필드를 추가해주시면 됩니다. 섬네일의 크기는 TimThumb를 이용해 필요한 크기에 맞게 자동으로 크기가 조정됩니다.

글을 작성하실 때 그림 파일 올리기 도구로 그림 파일을 올린 후 ‘연결할 주소 > 파일 주소(Link URL > File URL)’를 선택하셔서 해당 주소를 복사해 전체 경로로 사용하시면 한결 편리합니다.

특집 글

테마를 활성화시킨 후 블로그 상단에 특집 글을 보여주고자 한다면 테마 옵션에서 Featured Articles를 Enabled로 둔 뒤 특집 글에 보여줄 분류(category)의 주소(slug)와 글 수를 지정합니다. 예컨대 분류 이름이 한글이며, 주소(slug)가 korean이라면 테마 옵션의 Featured Articles Category에 korean을 입력해주시면 됩니다. 분류 주소를 잘 모르시겠다면 관리자 화면에서 글 > 분류(Posts > Categories)로 이동해 확인하세요.

분류 최근 글

분류 최근 도 특집 글과 마찬가지로 테마 옵션(Recent from Category)에서 사용 여부 설정 후 보여줄 글의 개수와 각각의 분류의 주소(slug)를 입력해주시면 됩니다.

포스트 옵션

테마 옵션의 포스트 옵션(Post Options)에서는 낱글(single post) 화면에 보여줄 부가 요소를 설정할 수 있습니다. 글쓴이 소개 란에는 ‘사용자 > 내 정보 (Users > Your Profile)’의 ‘자기 소개(Biographical Info)’에 입력한 내용과 작성한 글 수가 보여집니다.

<p>
  I wrote a total number of <b><?php the_author_posts(); ?></b> articles on
  <a href="http://dpxmag.com" title="Digital Pixel Magazine Index">Digital Pixel Magazine</a>.
</p>

작성한 글 수를 보여줄 때 아래 그림에서 보듯 ‘on Digital Pixel Magazine’으로 테마 제작자의 블로그 주소로 연결된 이름이 붙는데요. cleanPRESS 테마 디렉토리의 includes에서 author.php 파일을 열어 본인의 블로그 주소와 이름으로 변경해주시면 됩니다.

점심 무렵에 트위터에서 스매싱매거진에서 올린 새로운 워드프레스 테마 소식을 접하고 사이트에 방문했다가 테마 디자인이 깔끔해서 바로 설치해봤습니다.

Glassical 테마는 WP PageNavi 확장기능을 설치만 하면 쉽게 사용할 수 있도록 스타일과 함께 미리 정의되어 있으며, 댓글에 댓글 달기(계단형 댓글, threaded or nested comments)를 사용할 수 있도록 준비되어 있습니다. 단, 댓글을 일정 개수로 쪽을 나누어 볼 수 있도록 준비되어 있지는 않습니다. 위젯은 블로그 상단 로고 오른쪽 영역과 날개(sidebar) 영역에 사용할 수 있으며, 하위 분류(sub category)를 상위 분류와 구분되도록 해두었습니다.

• Glassical 테마 소개
• Glassical 테마 미리보기
• Glassical 테마 내려받기

로고

글꼴 지원은 되지 않지만 테마 전체 레이아웃을 담은 PSD 파일을 제공하기 때문에 로고 수정이 손쉽습니다. PSD 파일을 열어 로고 내용을 바꾼 다음 logo.png로 저장해서 계정에 올린 후 style.css에서 #header .logo a의 width와 height 값을 변경된 logo.png 크기에 맞게 수정해주시면 됩니다.

로고를 눌렀을 때 이동할 블로그의 주소가 하위 디렉토리를 가리킨다면 header.php 파일을 열어 <div class="logo">아래의 <a href="/">에서 빗금 앞에 <?php bloginfo('url'); ?>을 입력해 로고를 눌렀을 때 올바른 블로그 주소로 이동될 수 있도록 해줍니다.

<div>
  <a href="<?php bloginfo('url'); ?>"></a>
</div>

Cufon

Cufon으로 다른 글꼴(NEVIS)로 대체되는 H1~H6까지의 제목 태그가 적용된 곳의 한글이 나타나지 않는데요. 해당 스크립트를 사용하지 않고자 할 때에는  footer.php 파일을 열어 아래 태그에서부터 </body> 앞의 코드를 모두 삭제하시면 됩니다. 이 스크립트를 사용하지 않으면 한글은 정상적으로 나타납니다.

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/cufon-yui.js">

WP PageNavi

페이지 이동을 1, 2, 3 숫자로 쉽게 할 수 있도록 해주는 WP PageNavi 확장기능을 활성화시키면 바로 사용할 수 있도록 준비되어 있는데요. index.php에는 적용되어 있지만 category.php와 archive.php, search.php, tag.php 파일에는 워드프레스 기본 페이지 이동 방식을 택하고 있습니다. 때문에 해당 템플릿 파일로 보여지는 페이지에도 WP PageNavi 확장기능을 사용하려면 각 템플릿 파일을 열어 아래 코드를 <?php endwhile; ?>아래에 아래 코드를 넣어 주시면 됩니다.

<?php if(function_exists('wp_pagenavi')) : wp_pagenavi(); else : ?>
  <div class="paging">
    <div class="prev">
      <?php next_posts_link('Previous Posts') ?>
    </div>
    <div class="next">
      <?php previous_posts_link('Next Posts') ?>
    </div>
  </div>
<?php endif; ?>

위 코드는 WP PageNavi 확장기능이 활성화되어 있을 때에는 WP PageNavi 확장기능이 제공하는 1, 2, 3 숫자로 페이지를 탐색할 수 있도록 해주며, 없을 때에는 Previous Posts/Next Posts 방식으로 이전 글과 다음 글을 탐색할 수 있도록 해줍니다. 코드를 넣어 주실 때 기존에 있는 <div class="paging">으로 묶인 태그는 삭제해주시면 됩니다.

광고

두 곳에 광고를 삽입하기 쉽도록 준비되어 있습니다. 블로그 상단 부분은 위젯을 이용할 수 있도록 정의되어 있기 때문에 위젯 설정에서 Header Ad에 Text 위젯을 추가해 광고 코드를 넣어 주시면 되며, 사이드바의 경우에는 템플릿 파일을 열어 아래 코드를 찾아 삭제하신 뒤 광고 코드를 추가 해주시면 됩니다.

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad-300-250.jpg" />

Drenched는 지난 4월과 10월에 각각 소개했던 Centric과 LeanMagazine 테마를 제작한 ChicQ의 또 다른 작품으로 단순하며 깔끔한 매거진 스타일의 테마입니다. 기능적인 면에서는 눈에 띄는 점이 없습니다. 위젯을 쉽게 사용할 수 있도록 해두지 않아 불편함 점도 있습니다.

테마가 워드프레스 2.7판 이전에 나온 것이다보니 댓글에 댓글 달기(계단형 댓글, Threaded comments)와 댓글 쪽 나눔(Paged comments) 기능을 사용할 수 있도록 준비되어 있지도 않습니다. 하지만 깔끔하면서도 무게감 있는 디자인은 매력적입니다. 아래에서는 간략히 테마 사용법에 대해 설명합니다.

• Drenched 테마 소개
• Drenched 테마 미리보기
• Drenched 테마 내려받기

필요 확장기능

Drenched 테마는 페이지 이동을 쉽게하기 위해 WP Page Numbers 플러그인을 사용합니다. 관리자 화면에서 확장기능 추가로 검색해 설치하신 다음 설정 > Page Numbers로 이동해 마음에 드시는 테마만 선택해주시면 됩니다.

블로그 이름과 설명

블로그 이름과 설명을 블로그의 일반 설정(Settings > General)에서 설정해둔 값을 끌어와 사용할 수 있도록 정의되어 있지 않기 때문에 header.php 파일을 열어 집적 입력해줘야 됩니다.

<div id="header">
  <h1><a href="<?php bloginfo("url"); ?>">Drenched Theme</a></h1>
  <h2>Premium Theme Live Preview!</h2>
</div>

header.php 파일을 열어 위 코드를 찾은 뒤 Dreanched Theme에 블로그 이름을, Premium Theme Live Preview!에 블로그에 대한 짧은 설명을 입력해줍니다. 또는 앞으로 블로그에서 설정한 내용이 곧 바로 반영될 수 있도록 아래 코드로 각각 대체해주셔도 됩니다.

<h1><a href="<?php bloginfo("url"); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>

섬네일

이 테마에서 사용하는 섬네일의 크기는 두 가지인데요. 첫째는 일반 글의 요약 옆에 나타나는 것이고, 다른 한 가지는 특집 글(featured posts)에 사용되는 조금 더 큰 크기의 섬네일입니다. 섬네일은 사용자정의필드(Custom Fields)를 이용해 섬네일로 사용할 그림 파일의 경로를 지정합니다.

두 가지 섬네일 모두 필드의 이름은 img, 값은 그림 파일의 전체 경로를 입력해주시면 됩니다. 단, 일반 글 용 섬네일의 크기는 210×180, 특집 글 용은 400×250 픽셀입니다.

미디어 설정(Settings > Media)에서 섬네일과 중간 크기 그림의 크기를 이 두 크기에 맞추어 두고 사용하시면 조금 더 편리합니다. CSS로 지정된 크기로 맞춰 주기 때문에 섬네일로 사용할 그림 파일의 크기를 꼭 정확히 맞출 필요는 없습니다.

특집 글

Drenched 테마는 특정 분류(category)의 글이 눈에 잘 띄는 화면 상단에 300×250 픽셀 크기의 광고와 함께 둘 수 있도록 준비되어 있습니다. 반드시 사용해야 되는 것은 아니며, 사용을 원할 경우 functions.php에서 아래 코드를 찾아 ‘featured’를 삭제하고 특집 글을 담아 둘 분류의 주소(slug)를 입력해줍니다. 예컨대, 워드프레스 테마라는 분류가 있으며, 이 분류의 주소(slug)가 wp-theme이라면 wp-theme을 입력해주시면 됩니다.

$featured_catname = "featured";

특집 글로 사용할 글은 사용자정의필드에 이름은 img, 값은 400×250 픽셀 크기의 섬네일로 사용할 그림 파일의 경로로 입력해 주셔야 됩니다.

특집 글의 섬네일 오른편에 있는 공간은 광고를 위해 준비해둔 것으로 300×250 픽셀 크기의 애드센스 광고 단위의 코드를 붙여 넣거나, 걸어 둘 그림의 경로를 featured.php 파일을 열어 지정해주시면 됩니다.

<!-- 300x250 ad -->
<div>
  <img src="http://ythv.info/images/300x250_img.jpg" />
</div>

사이드바

사이드바가 워드프레스 관리자 화면에서 쉽게 위젯을 추가하거나 뺄 수 있도록 정의되어 있지 않아 편하지 않습니다. 만약 사이드바에서 인기글과 동영상, 꼬리표 모음 위젯은 그대로 사용하고 나머지 영역은 관리자 화면에서 쉽게 위젯을 추가할 수 있도록(widgetized) 하시려면 아래 코드를 functions.php에 추가 해준 뒤 sidebar.php 파일을 이어지는 설명을 따라 수정하시면 됩니다. 아래 방식대로 하면 사이드바 영역을 세 개로 나누어 sidebar1, sidebar2, sidebar3 으로 등록되어 각각의 영역에 위젯을 쉽게 추가할 수 있게 됩니다.

if ( function_exists('register_sidebar') )
  register_sidebars(3, array(
    'before_widget' => '<div id="%1$s">',
    'after_widget' => '</div>',
    'before_title' => '<h4>',
    'after_title' => '</h4>',
    'name' => 'Sidebar %d'
  )
);

코드는 functions.php 파일에서 <?php 아래에 추가해주시면 됩니다. 다음 sidebar.php 파일을 열어 아래 코드를 <?php wp_tag_cloud();?></ul></div> 아래에 추가해줍니다.

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(1)) : ?>
<?php endif; ?>

다음 두 번째 사이드바 시작 영역을 지정해주기 위해 <div class="left">태그 다음에 아래 코드를 추가해줍니다.

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(2)) : ?>

두 번째 사이드바의 끝나는 영역을 지정해주기 위해 <?php endif; ?>를 <?php wp_meta(); ?></ul></div> 다음에 추가해줍니다.

이제 세 번째 사이드바 영역의 시작을 알리기 위해 <div class="right"> 다음에 아래 코드를 추가해줍니다.

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(3)) : ?>

끝나는 영역은 sidebar.php 파일에서 맨 아래에 있는 </div> 앞에 <;?php endif; ?>를 추가해주면 됩니다.

사이드바에서 사용되지는 않았지만 Drenched 테마의 functions.php 파일을 보면 최근 댓글을 보여주는 u_get_recent_comments 함수를 정의해두고 있습니다.

& 워드프레스 2.9

대부분의 테마에서 글마다 섬네일을 사용하기 위해 사용자정의필드(Custom Fields)를 사용해야 됐는데요. 워드프레스 2.9판에 글 대표그림(Post thumbnail)을 지정할 수 있는 기능과 간단한 그림 편집 기능, 그리고 대표그림(thumbnail)을 테마에서 사용할 수 있도록 몇 가지 함수가 추가되었기 때문에 워드프레스 2.9판이 공개되고 나면 매번 사용자정의필드를 추가해 섬네일을 지정하는 불편함이 조금은 덜하지 않을까 싶습니다.

아래 그림처럼 댓글 입력 창 아래에 작성 중인 댓글을 미리 보여주는 플러그인입니다. 텍스타일 플러그인을 설치해 댓글 입력창에도 텍스타일 구문을 사용할 수 있도록 해두었거나 댓글을 작성할 때 XHTML을 자주 사용하는 경우에 유용합니다.

플러그인은 활성화시키면 별도의 설정 과정 없이 곧 바로 블로그에 적용됩니다.

글(포스트만)에 추천 버튼을 넣어주는 플러그인입니다. 추천 버튼의 디자인은 아래 그림과 같으며, 더하기 모양의 버튼대신 원하는 글로 바꿔 추천 기능을 이용할 수 있으며, 에이젝스를 이용해 추천했을 때 화면을 새로고치지 않고도 추천이 반영됩니다. 추천은 쿠키를 사용 중인 브라우저에서는 1회만 가능하도록 설정되어 있습니다.

사용법

기능이 간단한 만큼 사용법도 간단합니다. 플러그인을 활성화시킨 후 Settings -> I Like This로 이동해 제이쿼리 프레임워크를 사용할 것인지, 추천 버튼을 그림으로 할 것인지 글자로 할 것인지, 모든 글에 자동으로 추천 버튼을 삽입할 것인지만 선택해주면 됩니다.

제쿼리 프레임워크를 Enabled로 두면 설치된 워드프레스의 wp-includes/js/jquery/디렉토리에서 jquery.js 파일을 불러오게 됩니다. 만약 다른 플러그인이나 현재 사용 중인 테마에서 이 파일을 사용하고 있다면 Disabled을 선택하면 됩니다.
자동으로 버튼을 글에 넣을 경우 추천 버튼이 자동으로 블로그 첫 화면과 아카이브페이지, 검색결과 페이지, 낱글의 본문 하단에 들어가게 됩니다. 만약 원하는 위치에 넣고 싶으시다면 Automatic display의 체크를 해제한 뒤 아래 코드를 현재 사용 중인 테마의 템플릿 파일이 넣어 주시면 됩니다. 예를 들어, 낱글 하단에만 추천 버튼을 넣고 싶으시다면 single.php 파일을 열어 the_content() 함수 아래에 아래 코드를 추가해주시면 됩니다.

<?php if(function_exists(getILikeThis)) getILikeThis('get'); ?>

하지만 각 글의 추천을 집계해 인기 글을 추려낸다는지하는 연계된 기능이 없기 때문에 현재로서는 특별히 매력이 있는 플러그인은 아닙니다.

프로그램이 본문 내용을 분석해 자동으로 태그를 달아주는 것은 폭소노미(Folksonomy) 본래 취지에는 어긋나지요. 그렇지만 태그를 다는 것 자체를 귀찮아하는 사용자 분들 중에서는 자동으로 태그를 달아주는 기능을 사용하기도 합니다. Auto-tags도 이름에서 알 수 있듯 자동으로 태그를 달아주는 기능을 하는 플러그인입니다. 하지만 영문으로 작성된 내용에서만 자동으로 단어를 뽑아서 해당 글의 태그로 달아주기 때문에 한글로만 글을 작성하는 경우에는 무용합니다.

글 수정 기록(revisions) 삭제에서부터 데이터베이스 백업까지 워드프레스의 전반적인 관리도구로 사용할 수 있는 GD Press Tools 플러그인에도 Yahoo Term Extraction API을 이용해 자동으로 태그를 달아주는 기능이 있습니다. Auto-tags와 GD Press Tools의 자동으로 태그를 달아주는 기능의 차이라면, Auto-tags는 야후 뿐만 아니라 Tagthe.net의 API를 이용해 자동으로 태그를 달아준다는 점과, GD Press Tools는 자동으로 태그를 달아줄 범위를 글의 고유번호(ID)를 이용해 지정하면 백그라운드에서 작업을 하지만 Auto-tags는 플러그인을 활성화시킨 후부터 글을 저장할 때 해당 글에만 자동으로 태그를 달아준다는 점입니다.

플러그인 사용법은 간단합니다. 플러그인을 활성화시킨 후 설정(Settings)에서 Auto tags plugin으로 이동해 위 그림에서 보듯 각 글에 자동으로 달아 줄 태그의 수만 입력해주면 됩니다.

블로그 관리자 화면 내에서 파비콘으로 사용할 그림 파일을 올리면 자동으로 16×16 픽셀 크기의 파비콘을 생성해주는 플러그인입니다. 생성된 파비콘은 곧 바로 블로그에 적용되며, 이전에 올렸던 그림 파일은 아래 그림에서 보듯 크기가 변경된 채로 저장되어 있기 때문에 언제든 다시 사용하거나 삭제시킬 수 있습니다. 파비콘 변환기는 플러그인을 활성화시키면 추가된 메뉴 탭을 선택해 이용할 수 있습니다.

만약 그림 파일이 올라가지 않는다면 Favicon Generator 플러그인 디렉토리의 uploads 디렉토리의 권한을 755로 변경해주세요.

플러그인을 비활성화 후에도 블로그에 적용했던 파비콘을 계속 사용하시려면 Favicon Generator 플러그인 디렉토리 내에 있는 favicon 파일을 계정의 최상위 디렉토리(Root Directory)로 옮겨 주시면 됩니다.