Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

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단 테마! ^^ 기본 테마에서 찾다니! 기분이 좋습니다. 이상입니다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (7개)

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

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

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

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

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

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

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

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다