산뜻한 워드프레스 테마 Glassical

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

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" />

연관 글

1. Drenched 워드프레스 테마
2. WooThemes가 7월에 내놓은 무료 워드프레스 테마, Mainstream
3. 워드프레스 테마 Ecopress
4. PremiumWP.com의 무료 워드프레스 테마, The Stars
5. Michael Hutagalung의 Arthemia 워드프레스 테마