워드프레스 테마 TweetSheep는 시원한 색상의 2단 레이아웃에 FeatureMe 플러그인을 이용한 Featured Posts, 125×125 배너 이미지를 쉽게 삽입할 수 있는 테마 옵션 기능이 돋보입니다. 오밀조밀한 구성보다 큼직하고 시원한 느낌의 테마를 선호하시는 분들께서 사용해보시면 괜찮을 듯 합니다. TweetSheep 워드프레스테마 제작자의 라이브 데모 사이트에서 블로그에 테마를 적용한 모습을 확인해보세요.
아래 그림은 제가 TweetSheep 워드프레스 테마를 블로그에 적용해본 것으로 왼쪽은 블로그 메인 페이지, 오른쪽은 포스트 페이지(single post)입니다. 조금 더 큰 스크린샷을 원하시는 분은 Blog Main과 Single Post를 각각 클릭해보세요. 그림을 보시면 애드센스 광고가 블로그에 삽입되어 있는데, 이는 이 WordPress Theme에서 기본 지원하는 기능으로 구글 애드센스의 퍼블리셔 아이디만 입력해서 출력한 결과입니다. 사용하지 않아도 무관합니다. 그리고 메인 페이지는 Reading Settings > Blog pages show at most를 3으로 설정된 상태에서 각각의 포스트를 More tag(<!– more –>)로 끊어줘서 각각의 포스트의 내용이 일부만 보여지도록 한 것입니다.
워드프레스 2.8판 이상을 사용하시는 분은 Add New Themes를 이용해 TweetSheep 워드프레스 테마를 블로그에서 바로 검색해서 설치하시고, 테마에 필요한 플러그인도 설치해서 사용하시면 됩니다. (플러그인 내려받기) 아래에서는 이 테마의 특징과 사용법에 대해 간략히 설명하겠습니다.
워드프레스 테마 TweetSheep의 특징
테마를 블로그에 적용하는 방법을 알아보기 전에 간략히 Theme의 특징을 살펴보겠습니다.
- 서브 페이지를 드롭다운 메뉴로 처리
- FeatureMe 플러그인을 이용한 Featured Posts
- 커스텀 필드를 이용해 Featured Posts의 썸네일 표시
- 테마 옵션으로 원하는 만큼 125×125 배너 이미지 사이드바에 추가
- 테마 옵션에 구글 애드센스 퍼블리셔 ID 기입만으로 미리 정의된 위치에 애드센스 광고 게재
- 워드프레스 Other comment settings 이용 가능
워드프레스 2.7판에 댓글의 쓰레딩 기능이 추가 됐는데 이전에 나온 테마 중에서는 워드프레스의 Discussion Settings > Other comment settings에서 댓글에 댓글을 달아 한 덩어리로 묶어주는 기능과 한 페이지 보여줄 댓글 수를 제한하는 페이징 기능을 사용할 수 없는 것도 많습니다. 반면 TweetSheep 워드프레스 테마는 워드프레스 관리자 화면에서 Other comment settings을 이용해 댓글에 댓글 달기와 Depth, 페이지당 보여줄 댓글 수와 정렬 방식 등을 설정할 수 있습니다.
이 테마에서 가장 눈에 띄는 건 구글 애드센스 퍼블리셔 ID만 입력하면 자동으로 블로그 첫화면과 포스트, 댓글 영역에 300×250, 468×60 광고 단위를 삽입해주는 기능입니다. 그런데 클릭 가능 영역이 본래 애드센스 광고 단위보다 넓습니다. ‘Ads by Google’ 영역을 제외한 모든 영역에서 클릭가능합니다. 해외 사이트 중에서 이렇게 애드센스 광고 단위를 이용하는 경우를 여러번 봤는데, 문제는 이런 방식이 구글 애드센스의 이용약관에 위배되는 것인지 아닌지가 확실하지 않다는 것입니다. 때문에 이 내용이 확인되기 전까지는 TweetSheep 워드프레스 테마에 기본 설정된 방식으로 애드센스를 이용하는 것을 권하지 않습니다. 혹 약관 위반으로 계정을 박탈당할 수도 있으니까요.
워드프레스 테마 TweetSheep 블로그에 적용
테마를 블로그에 적용하기 위해 테마 활성화 후 플러그인 설치와 설정, 그리고 몇 가지 테마 옵션 등에 대해 알아보겠습니다. 테마는 FeatureMe, WP-PageNavi, WP-GBCF 이렇게 세 개의 플러그인을 이용합니다. 하지만 블로그에서 이메일로 블로그 운영자에게 메일을 보낼 수 있는 기능을 추가해주는 WP-GBCF는 꼭 필요한 플러그인이 아니라 선택사항입니다. 이 플러그인을 이용해 Contact 페이지를 만들어서 사용할 수도 있지만 꼭 그렇게 할 필요는 없다는 뜻입니다. 필요하지 않다고 생각하시면 WP-GBCF는 사용하지 않으셔도 됩니다. 아래 글에서는 세 개의 플러그인을 모두 사용한다고 가정하겠습니다.
작업을 진행하기에 앞서 필요한 플러그인을 내려받기 하신 후 압축을 해제한 뒤 각각의 폴더를 /wp-content/plugins 디렉토리로 올린다음 모두 활성화시키세요.
워드프레스 테마 TweetSheep의 Featured Posts 설정
테마를 처음 활성화시키면 Featured Posts 영역이 비어있을 것입니다. Featured Posts는 FeatureMe 플러그인과 썸네일을 추가할 경우에는 커스텀필드를 이용하게 됩니다. 썸네일은 필수가 아니라 선택이지만 썸네일이 있는게 보기에는 낫습니다. 우선 Featured Posts에 보여줄 포스트를 선택한 후 포스트 편집 화면으로 넘어갑니다. Edit Post 화면 하단에 있는 ‘This is a really cool entry, Feature it!’에 체크 후 포스트를 업데이트시키면 해당 포스트가 Featured Posts에 등록됩니다. 그런데 FeatureMe 플러그인을 설치할 때 featureme.php 파일만 플러그인 디렉토리에 추가한 경우에는 체크 후에 포트스 업데이트를 시키면 체크가 풀리게 되는 문제가 있습니다. 하지만 이 문제는 FeatureMe 플러그인을 계정에 올릴 때 featureme.php 파일을 담고 있는 폴더 전체를 올리게 되면 발생하지 않습니다.
썸네일 추가하고자 할 때에는 Featured Posts에 등록시킬 포스트의 커스텀 필드(custom field)에 이름(name)은 thumbnail, 값(value)은 썸네일로 사용할 이미지의 절대경로(예, http://fantasyamplifier.com/nod.png)를 입력해 커스텀필드를 추가해주시면 됩니다. 썸네일로 사용되는 이미지의 기본 크기는 161×107 픽셀입니다.
Featured Posts에 등록시킬 수 있는 포스트의 수와 자동으로 다음 포스트로 전환되는 시간 설정은 TweetSheep 테마의 functions.php 파일을 열어 수정할 수 있습니다.
- define(‘FEATURED_SPEED’, 5); // seconds
- define(‘FEATURED_POSTS’, 5); // copunt
Featured Posts에 나타나는 포스트는 최신순으로 나타납니다. 곧 ‘feature it’에 가장 최근에 체크한 포스트가 1번이 되고, 그 이전에 등록한 포스트는 2번이 되는 것이죠.
워드프레스 테마 TweetSheep의 테마 옵션 설정
테마를 활성화시키면 TweetSheep Options 메뉴가 추가되며 Main Settings와 125×125 Ads 두 가지 옵션이 있습니다. Main Settings를 선택하면 아래 그림처럼 트위터와 애드센스 퍼블리셔 ID를 입력하는 칸이 있습니다. 트위터 ID를 입력하면 Featured Posts 오른쪽에 있는 Follow me 새 그림을 클릭했을 때 해당 트위터 계정으로 이동하게 됩니다.
구글 애드센스 퍼블리셔 ID는 애드센스 계정에 접속했을 때 ‘Publisher ID: pub-’뒤에 따라오는 숫자입니다. ID를 입력하면 블로그 메인 페이지에서는 글 상단에 468×60 크기의 광고가 하나씩 붙게 되며, 포스트 페이지(single post)에는 상단에 300×250크기의 광고가 하단과 댓글 영역에는 468×60크기의 광고가 각각 하나씩 이렇게 총 3개의 광고가 붙게 됩니다. 두 가지 크기의 광고 단위의 기본 색상은 아래와 같습니다.
만약 색상을 변경하고 싶으시다면 functions.php 파일을 열어 theme_google_300_ads_show와 theme_google_468_ads_show 코드 아래에 있는 색상 값을 변경해주시면 됩니다. 하지만 앞서 말씀드렸듯 광고 클릭 영역이 원래 애드센스와는 다르게 적용되어 있기 때문에 이용약관에 위배될 수 있습니다. 사용하지 않을 것을 권합니다.
테마 옵션 두 번째는 사이드바에 노출시킬 125×125 픽셀 크기의 배너 이미지를 설정하는 125×125 Ads입니다. 사이드바에 노출시킬 배너 이미지의 개수를 정하고, 각각의 배너 이미지의 경로와 클릭했을 때 이동할 URL을 입력해 저장시키시면 됩니다.
블로그에 Contact 페이지를 추가하기
WP-GBCF 플러그인을 이용해 블로그에 Contact 페이지를 추가하는 방법을 알아보겠습니다. 이 플러그인을 이용해 콘택트 페이지를 추가하면 아래와 같은 페이지가 추가됩니다. 메일을 보내는 방문자의 메일 주소로 사본을 보내는 기능과 스팸방지와 특정 IP 차단 기능과 충실한 도움말 등 여러모로 무척 마음에 드는 플러그인입니다.
플러그인이 활성화되면 Contact Menu 탭이 추가되는데 Configuration을 선택해 아래그림처럼 간단한 설정만 해주면 사용할 수 있습니다. 아래 그림에서 Your form page URL에는 추가한 Contact 페이지의 경로를 입력해주면 됩니다. 그리고 Form possession은 개인이면 Contact me 단체면 Contact us처럼 출력해주기 위한 설정으로 개인이면 Personal을 단체면 orginization을 선택해주시면 되며, Time offset은 이용 중인 서버에 설정된 시간과 이용자의 로컬 타임과 시차를 맞추어 주는 것으로 국내 웹호스팅 서비스를 이용하신다면 0을 입력하시면 됩니다.
이렇게 설정을 해준 뒤 Contact 페이지를 열어 HTML 편집 모드에서 <!–gb_contact_form–> 를 넣어 준 뒤 저장하면 Contact 페이지에 이메일 전송 기능이 추가됩니다.
WP-PageNavi 플러그인은 ‘페이지 이동을 편리하게 해주는, WP-PageNavi‘ 글을 참고하세요.
워드프레스 테마 TweetSheep 기본 설정 사항 변경하기
트위터를 사용하지 않는 분이시라면 Featured Posts 오른쪽에 있는 트위터 링크 이미지가 불필요할텝니다. 그래서 트위터 이미지가 아닌 아래 그림철머 RSS 피드 링크 이미지를 넣는 방법에 대해 살펴보겠습니다. (피드 구독 아이콘 이미지가 필요하신 분은 내려받기하세요. 배경 있는 이미지 파일, 투명 배경 이미지 파일)
먼저 트위터 새 이미지를 대신할 이미지 파일을 TweetSheep 테마의 images 디렉토리에 올립니다. 그리고 header.php 파일을 열면 아래와 같은 코드가 있습니다. button_twitter.png를 방금 올린 이미지 파일의 이름으로 바꿔줍니다. 그 후 이미지 태그 앞에 있는 a href=”" 에 코드를 지우고, 본인 블로그의 피드 주소를 적어준 뒤 저장합니다.
bloginfo('template_url')?>;/images/button_twitter.png" alt=""
이렇게 피드 구독 이미지를 추가하게 되면 블로그 상단에 있는 구독 버튼과 기능이 중복되는데, 해당 이미지를 사용하지 않으시려면, header.php파일에서 <div id=”header_rss”>에서 </div>까지 태그를 삭제하시면 됩니다. 아니면 다른 이미지로 교체하셔도 되겠습니다.
125×125 배너 이미지는 꼭 광고 이미지를 넣어야 되는 것은 아니니 다른 용도로 사용하셔도 괜찮을 듯 합니다.
- Theme Name
- TweetSheep
- Version
- 1.3
- Author Homepage
- webdesignlessons.com