Twenty Eleven 테마(유동형 레이아웃, 1단 가능)로 블로그 스킨 변경한 후 커스터마이징 했습니다

,

[2013-10-19 추가] 2012년 2월의 테마 변경 이후 2013년 9월에 다시 테마를 변경했다. 관련글은 ‘블로그 리뉴얼 – 마법 나무 테마’다.

——

블로그 스킨을 변경했습니다.

심플한 걸 추구하기 때문에 사용하지 않을 줄 알았는데 워드프레스 기본 테마의 최신 버전인 Twenty Eleven 테마를 선택했습니다.

선택의 이유는 단 하나였습니다. 이게 유동형 레이아웃(fluid layout : 반응형 웹디자인의 한 요소)이더라고요.

그리고 제 취향에 맞게 1단형으로 설정을 할 수 있다는 걸 최근에야 알게 됐습니다. 저는 사이드바가 없는 걸 좋아하거든요. 그래야 읽는 맛이 나죠. 본문 읽을 때 사이드바가 옆에 있으면 걸리적거려요. (테마 디자인 > Theme Options > Default Layout)

예전 hybrid 테마는 반응형도 유동형도 아니었습니다. 그래서 모바일로 들어오는 경우에는 글자 크기만 좀 키워주는 수준으로 제가 커스터마이징해 뒀더랬습니다.

이제는 유동형 레이아웃이니 크게 신경쓰지 않아도 모바일에서 레이아웃이 깔끔하게 나옵니다. 맨 아래 부분이 가장 맘에 들어요. 데스크탑에선 3단인데, 모바일로 들어오면 1단으로 변하거든요.

커스터마이징1 – 최상단 이미지 제거

가장 먼저 한 것은 최상단에 나오는 이미지를 제거해 버린 것입니다. 저는 설치형 블로그를 사용하고 있고, 큰 이미지는 트래픽을 잡아먹으니까요.

header.php 의 82번째 줄을 주석처리하고, 빈 값으로 바꿔치기해 주면 됩니다.

//$header_image = get_header_image();
$header_image = '';

커스터마이징2 – 글씨 크기

그리고 모바일에서도 그렇고, 데스크탑에서도 그렇고 글씨 크기가 좀 작더라고요. 그래서 좀 키웠습니다. 사이즈에 % 단위를 사용했더라고요. 아마도 유동형이라? 여튼간에 그래서 규칙을 잘 따라 줬습니다.

style.css 의 26번 줄에 있는 글씨크기를 100%에서 103%로 키웠습니다.

font-size: 103%;

커스터마이징3 – Better WordPress Minify 플러그인 설치

이건 테마 커스터마이징은 아니지만, 여튼간에 테마를 바꾸니까 그 전에 압축 전송 설정을 해 놓은 게 풀리면서 오후 5시에 트래픽 초과가 됐습니다. 그래서 부랴부랴 압축 전송 플러그인을 설치했죠. 이놈은 설치만 하면 모든 걸 알아서 처리해 주더라고요.

다만, 또 다른 플러그인인 Syntax Highlighter MT에서 사용하는 js와 css는 압축을 못하길래 그건 그냥 cloud에서 가져다 사용하는 것으로 따로 커스터마이징했습니다.

stxhighlightmt.php 의 49번째 줄을 이렇게 변경하면 됩니다.

$x = 'http://alexgorbatchev.com/pub/sh/current';

그러면 내 블로그에 있는 놈을 사용하지 않고 Code Syntax Highlight 3 에서 제공하는 클라우드에서 파일을 가져다 사용하게 됩니다.

커스터마이징4 – 웹폰트 사용

웹폰트도 적용해 봤습니다. 인용문(blockquote)을 귀여운 글씨체인 혜움블루스카이로 해 봤습니다. 모빌리스 웹폰트 좋더군요.

인용문은 이렇게 귀여운 글씨체로 나옵니다. 모든 브라우저에서 가능합니다.

그리고 인용문은 이탤릭 처리돼 있는데, 획수가 많은 한글은 이탤릭을 사용하면 가독성을 심각하게 해치므로 풀어 줬습니다.

커스터마이징5 – 너비 조정

Twenty Eleven 테마를 1단으로 사용하니까 너비가 좀 좁더군요. 그냥 보긴 괜찮은데 코드를 보는 게 좀 많이 불편했습니다. 코드는 가로가 긴 경우들이 있으니까요. 그래서 너비를 200px 늘렸습니다.

/* One column */
.one-column #page {
	max-width: 890px;
}

원래는 690px인데 890px로 늘렸습니다.

커스터마이징6 – 검색을 구글 검색으로 변경

검색은 구글이 짱입니다. 원래는 구글 맞춤검색을 달아놨었는데 이번엔 그렇게 하지 않고, 그냥 검색을 하면 새 창을 띄우면서 구글에서 제 블로그를 검색하도록 했습니다. 그걸 위해서 searchform.php 를 통째로 변경했습니다.

<form method="get" id="searchform" action="http://www.google.co.kr/search" target="_blank">
	<label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
	<input type="text" class="field" name="q" id="s" placeholder="<?php esc_attr_e( '검색', 'twentyeleven' ); ?>" />
	<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
	<input type="hidden" name="sitesearch" value="mytory.net/archives/">
	<input type="hidden" value="/author/ /tag/ /date/ /category/" name="as_eq">
	<input type="hidden" value="blg" name="tbm">
</form>

각종 hidden input 값들이 보이실 겁니다. 참고해서 하시면 구글 검색을 띄우면서 검색을 하실 수 있습니다.

블로그에서 제공하는 기본 검색은 위젯으로 하단에 달아 뒀죠.

커스터마이징7 – 메타 정보 한글화

아무래도 영어보단 한글이 낫겠죠. 메타 정보들을 모두 한글화했습니다.

카테고리 Google Analytics | 태그 구글 아날리틱스 | 댓글쓰기

제 블로그 첫 화면의 목록에 모이는 위 정보가 메타정보입니다. 원래는 영어로 돼 있어요.

커스터마이징8 – Frontpage Manager 한글 최적화

이건 또 따로 쓸 생각인데, 여튼 Frontpage Manager 플러그인은 블로그 첫 화면을 최신글 목록으로 꾸며 주는 플러그인입니다. 그런데 이놈이 한글은 글자 수 자르는 것도 제대로 안 되고, ‘▶전문 보기’라고 더 보기 링크 텍스트를 넣어도 깨지기나 하고 골치가 좀 아팠습니다. 이번 기회에 다 수정을 봤죠.

일단 fp-manager.php의 192번째 줄을 주석처리하고, 한글을 처리할 수 있는 함수로 변경했습니다. (mb_strcut을 사용했습니다.)

//$final = FPManager::fix_html(substr($content, 0, $truncate), $ending);
$final = FPManager::fix_html(mb_strcut($content, 0, $truncate, 'utf-8'), $ending);

이거 말고도 좀더 한 것 같은데 기억은 안 나네요;;

만족스런 결과

그 결과 만족스런 블로그 디자인이 완성됐습니다. 앞으로도 디테일은 좀 고칠 테지만 한 1~2년은 이 테마로 가지 싶습니다. HTML5까지 대비돼 있는 테마라 신뢰가 갑니다.

아름다운 유동형 1단 테마! ^^ 기본 테마에서 찾다니! 기분이 좋습니다. 이상입니다.

카테고리 글 목록 👉

,

대표글

“Twenty Eleven 테마(유동형 레이아웃, 1단 가능)로 블로그 스킨 변경한 후 커스터마이징 했습니다”에 대한 7개의 응답

  1. 지금 테마를 아이폰에서 볼때도 유동형이 아니라 컴퓨터로 보는것처럼똑같은 결과를 얻으려면 어디를 수정해야되죠? 컴터건 아이폰이건 똑같은 디자인으로 보고싶어서여

    1. style.css를 열어서 찾아 보시면 아래와 같은 부분이 있을 겁니다.

      /* =Responsive Structure
      ----------------------------------------------- */
      
      @media (max-width: 800px) {
      
      (가운데는 생략)
      
      }
      
      
      /* =Print
      ----------------------------------------------- */
      

      여기서 /* =Responsive Structure 줄부터 /* =Print 바로 앞부분까지를 삭제하시면 됩니다.

  2. […] 워드프레스로 새 단장하기. Twenty Eleven의 사용자화 This entry was posted in 일기 and tagged 워드프레스 by solarview. Bookmark the […]

  3. […] Twenty Eleven의 사용자화, Twenty Eleven 의 이미지 바꾸기 […]

  4. 메타정보 한글화는 어떻게 하셨는지 물어봐도 될까요…??ㅎㅎ

    1. 저는 그냥 찾기 바꾸기로 해서 바꿨는데요, 나중에 보니까 한글화 해 놓은 게 있더라고요.
      http://innis.kr/wordpress/?p=2206
      여기 가 보시면 투웬티 일레븐 테마 한글화 파일이 있습니다. 활용을 어떻게 하는지는 검색해 보시면 나올 겁니다.

  5. […] 블로그는 처음에 텍스트큐브닷컴에서 시작했다가 그게 구글 블로거로 통합되면서 설치형 워드프레스로 옮겼다. 처음 사용한 테마는 하이브리드라는 심플한 테마였다. 다음으로는 기본 테마인 TwentyEleven을 사용했고, 그 다음엔 TwentyTwelve를 사용했다. 물론 내가 다소간 손을 봐서 사용했다. 그냥 쓰지는 않았다. 글을 찾아 보니 TwentyEleven 테마를 손본 건 기록이 남아 있다. […]

댓글 남기기