Tag: wordpress

반년 만에 블로그 테마를 변경했다. 고해상도 디바이스가 많아져서 그런지 요즘 대부분의 블로그 테마들이 큰 서체 사이즈와 넓은 레이아웃으로 많이 나오고 있다. 반년 정도 사용한 hamingway 테마로 변경했을 때에도 비슷한 테마를 여럿 적용해봤는데 그나마 한국어 컨텐츠가 괜찮은 가독성으로 보여 hamingway 테마를 선택했었다.

이 테마를 오래 사용하다보니 불편한 점도 있었다. 대다수의 테마에서 공통적으로 느껴지는 부분인데 스크롤을 내려가며 컨텐츠를 읽다보면 sidebar가 있던 공간이 계속 공백으로 남아있기 때문에 균형감 없는 레이아웃으로 글을 읽게 된다. 또한 영어로 작성된 컨텐츠는 모든 브라우저에서 단어를 분리해 행 전환이 되는 단어 분리(word-break)가 발생하지 않지만 아직까지 CJK언어권의 단어 분리 옵션은 일부 브라우저만 지원한다.¹ 이런 상황과 맞물려 좁은 컬럼과 큰 서체의 사용은 한국어 문서의 가독성을 많이 떨어뜨리게 된다.

이번 테마는 roots.io의 Sage를 기반 테마로 사용해서 레이아웃, 서체, 행간과 자간 등을 변경해서 만들었다. 이 기반 테마는 bootstrap으로 구성되어 있는데 dist 되어있는 minified css를 활용하는 것이 아니라 bower로 전체 코드를 받아와 less를 직접 사용할 수 있는 장점이 있다. 테마의 구조가 직관적인 편이고 gulp를 이용한 빌드 및 watch 설정이 이미 다 되어 있기 때문에 기존에 있던 많은 starter theme과는 다르게 번거로운 작업이 필요하지 않았다.

one column으로 강제되어 있지만 2-column으로도 사용 가능
영문은 ubuntu, 국문은 나눔바른고딕 기본으로 사용
기본 서체의 크기를 키우고 행간과 자간을 한국어에 맞게 조절
포스트 제목 아래에 headline을 삽입할 수 있도록 custom field 추가
포스트 하단에 author box 추가
테블릿 이하 해상도에서 서체 크기 조정

Ubuntu는 웹폰트로 추가되어 있는 반면 나눔고딕은 그렇지 않다. 나눔바른고딕은 웹폰트로 사용하기에 아직 무거운 느낌이고 기본 서체를 사용해도 그렇게 못봐주는 느낌은 아니라서 해당 폰트가 설치되어 있을 때만 나오고 그 외에는 애플고딕이나 바른고딕으로 출력된다.

아직 어색한 부분이나 변경해야 하는 부분이 많이 있지만 차차 수정할 생각으로 일단 적용했다. 해당 테마는 GitHub에서 받을 수 있으며 테마를 설치할 때에도 의존성 설치 및 빌드 과정이 요구되어 bower, npm 등을 구동할 수 있어야 한다. 로컬에서 작업한 후 gulp build로 모든 파일을 컴파일해서 올리는 방법도 가능하다. 자세한 설치 방법은 Sage README에서 확인할 수 있다.

Firefox는 CJK 언어를 위해 word-break: keep-all 을 지원하며 IE도 비슷한 방식으로 단어 분리를 방지할 수 있다. ↩

워드프레스에서 유지보수를 위해 사이트를 일시적으로 차단할 경우가 있다면 유지보수 모드(Maintenance mode)를 활용할 수 있다.

사용자로서 워드프레스를 이용하게 될 때에는 이 모드를 보게 되는 일이 거의 없다. 만약 보게 된다면 워드프레스 플러그인, 테마, 코어를 업데이트 하는 도중에 사이트에 접속하게 되는 경우다. 설치 과정을 눈여겨 본 사용자라면 유지보수 모드를 켜고 설치 과정이 진행된 후 완료 되면 다시 유지보수 모드가 해제되는 것을 확인할 수 있다.

만약 업데이트 중에 페이지를 벗어나게 된다면 유지보수 모드가 해제되지 않아 사이트가 닫힌 상태로 유지된다. 이럴 때에는 직접 유지보수 모드를 직접 해제해야 한다.

워드프레스 웹사이트에서 다음과 같은 화면을 본다면 유지보수 모드가 켜져있는 상태다.

유지보수 모드 켜고 끄기

유지보수 모드는 워드프레스 최상위 폴더에 .maintenance라는 이름으로 빈 텍스트 파일을 생성하면 활성화 된다. 유지보수 모드를 끄려면 이 파일을 지우면 된다.

유지보수 페이지 변경하기

유지보수 페이지를 좀 더 친절하게 변경하고 싶다면 wp-content/maintenance.php 파일을 만들어 해당 내용을 작성하면 된다. 기본적으로 출력되는 유지보수 페이지는 503 Service Unavailable 를 반환한다는 사실을 참고하자.

<?php
  $protocol = $_SERVER["SERVER_PROTOCOL"];
  if ( 'HTTP/1.1' != $protocol && 'HTTP/1.0' != $protocol )
    $protocol = 'HTTP/1.0';
  header( "$protocol 503 Service Unavailable", true, 503 );
  header( 'Content-Type: text/html; charset=utf-8' );
  header( 'Retry-After: 600' );
?>
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>Haruair.com 점검중</title>
</head>
<body>
  <h1>현재 웹사이트 점검중입니다. 잠시 후에 다시 접속해주시기 바랍니다.</h1>
</body>
</html>

WordPress에는 기본적으로 Links라는 포스트 타입이 존재했었는데 WordPress 3.5 에서 제외되었다고 한다. 대부분의 사용자가 거의 이용하지 않는 기능이 되다보니 이런 결정을 내리지 않았나 싶다.

그 이전 버전 사용자는 업그레이드 하더라도 해당 기능이 계속 유지되지만 신규로 설치한 경우는 다음과 같은 Links 항목을 관리자 화면에서 찾을 수 없다. 이 Links 항목을 보여주는 Link Widget(Blogroll) 또한 존재하지 않는다.

티켓 #21307에서 논의된 결과로 Link Manager 플러그인으로 분리되었고 3.5 이후 버전에서는 해당 플러그인을 설치해 사용할 수 있다.

Press This는 워드프레스 2.6에서 Press It를 대체하기 위해 나온 기능 중 하나로 워드프레스에 내용을 공유할 수 있도록 돕는 북마클릿 기능이다. 이 북마클릿을 이용하면 어느 웹페이지도 간편하게 스크랩해 자료를 모으거나 해당 컨텐츠를 인용해 포스팅하는데 활용할 수 있다. 그 외에도 언제든 작성할 내용이 생각나거든 북마클릿만 눌러 간편하게 메모할 수 있는 편리한 기능 중 하나다.

설치하기

관리자 메뉴 중 Tools > Available Tools에서 Press This 섹션을 찾을 수 있다. 설명대로 Press This 버튼을 bookmark bar에 끌어다 놓으면 설치가 끝난다. (drag and drop)

(Scrapbook 플러그인을 설치하면 똑같은 페이지에 Scrap This 버튼이 생겨난다. 이 버튼으로 북마클릿을 만들면 Post가 아닌 Scrap으로 수집할 수 있다.)

활용 방법

저장하려고 하는 페이지에서 북마크바에 끌어다 놓았던 북마클릿을 실행하면 작은 에디터 창이 나타난다. 바로 포스트 하거나 카테고리, 태그 등을 이용해 분류할 수도 있다. 인용하고 싶은 구절이 있다면 해당 영역을 드래그 한 후 북마클릿을 누르면 아래와 같이 간편하게 인용할 수 있다.

트위터, 페이스북, pocket 전부 관리되지 않는 스크랩 자료로만 가득 차는 기분이 들어서 워드프레스에서 수집할 수 있도록 작은 플러그인을 만들었다.

플러그인은 scrap이라는 포스트 타입을 생성해주며 일반 포스트와 동일하게 category와 tag를 지원한다. 추가적으로 워드프레스에서 post에서 사용할 수 있는 함수를 비슷하게 쓸 수 있도록 이름만 바꿔서 같이 넣었다. 기본적인 widget도 포함하고 있다.

~~플러그인은 gist 에서 받을 수 있으며 소스코드도 확인 할 수 있다.~~

2014년 10월 7일 업데이트: 플러그인을 GitHub 리포지터리로 옮기고 bookmarklet을 활용할 수 있도록 Scrap this를 추가했다. 다운로드는 여기에서, 코드는 github에서 확인할 수 있다.

이 블로그와 같이 scrap archive를 만들기 위해서는 해당 테마에 새로운 포스트 타입과 taxonomy를 위한 페이지를 생성해야 하며 생성할 때 the_tag()와 같은 함수들을 the_scrap_tag()와 같이 변경해줘야 한다.

archive.php -> archive-scrap.php, taxonomy-scrap_category.php, taxonomy-scrap_tag.php
single.php-> single-scrap.php
sidebar.php -> sidebar-scrap.php

물론 생성하지 않아도 출력은 되지만 약간 다르게 나오는 부분들이 있다. (원래는 자동으로 뿅 되야 하는데 대충 만들어서… 추후 버전을 기약하며.)

이 플러그인을 위한 특정 Permalink를 사용하려면 Custom Post Type Permalinks 플러그인을 활용할 수 있다.

평소에 짧은 메모를 많이 적는 편이다. 맥에서 메모를 위해 사용할 수 있는 다양한 도구가 많이 있긴 하지만 완제품인 어플리케이션을 내 취향대로 수정해 사용할 수 없는 부분이 가장 불편하다. 손에 딱 맞는, 쉽게 사용할 수 있는 프로그램을 찾아야하는데 그게 말처럼 쉽지 않다. 그래서 내 경우에는 오래 전부터 로컬에 나만 접근 가능한 워드프레스를 만들어 글쓰기 도구로 활용하고 있다.

다양한 플러그인을 사용할 수 있고, 외부에 노출될 위험이 없으며, 추후 외부 공개로 전환하기에도 간편하다.¹ 만약 마크다운으로 작성하고 싶다면 일반 워드프레스를 사용하는 것과 동일하게 플러그인을 설치하면 완료된다. 특히 워드프레스가 지속적으로 업데이트 되고 있는 것도 큰 장점인데 각각의 글 변경사항을 관리해주는 부분, Just write 기능 등 글을 관리하는데 있어 유용하다. 물론 태그나 카테고리, 기간별 아카이빙 등 기본적인 기능들도 큰 도움이 된다. 워드프레스를 설치할 수 있는 환경은 MAMP라는 앱을 사용하면 쉽고 간편하게 진행 할 수 있다.

MAMP 설치하기

MAMP는 Mac을 위한 Apache, MySQL, PHP로 맥에서 웹서버를 구동해주는 앱이다. 일반적으로는 각각 설치하고 세팅해야 하는 번거로움이 있는데 MAMP는 단지 버튼 하나만 누르면 끄고 켤 수 있도록 돕는다.

MAMP를 공식 사이트에서 내려받는다.

MAMP Website

내려받은 MAMP를 설치한다. 설치에는 980MB 정도를 요구한다. 내려받은 파일을 실행해 설치한다. ²

MAMP Install

설치가 완료되면 MAMP를 실행한다. 실행하면 MAMP PRO를 실행할 것인가 물어보는데 Check for MAMP PRO when starting MAMP 체크를 해제하고 Launch MAMP 클릭한다. MAMP PRO는 서버 관리에 있어 더 편리한 도구를 많이 제공하는데 지금은 MAMP면 충분하다.

MAMP Management Panel

이제 MAMP 관리 페널인데 버튼이 3개 있다. 우측에 Start Servers 버튼을 누르면 서버가 실행되고 서버 관리 웹페이지가 뜬다.

MAMP Admin Webpage

데이터베이스 생성하기

워드프레스를 설치하기에 앞서 워드프레스의 데이터가 저장될 공간인 데이터베이스를 추가해야 한다. 위에서 본 서버 관리 웹페이지에 상단 메뉴에서 Tools > phpMyAdmin을 클릭한다.

phpMyAdmin

상단에 Databases 탭을 클릭, Create database 밑에 Database name에 wordpress를 입력하고 오른쪽 Create 버튼을 클릭한다. (다른 데이터베이스명을 사용해도 상관없다)

Create a database

워드프레스 설치하기

wordpress website

워드프레스 웹사이트에서 워드프레스를 내려받는다. 영어 또는 한국어 등 자신이 선호하는 버전을 설치하면 된다.

Apache Tab

내려받은 파일을 MAMP 안에 htdocs 폴더에 넣고 압축을 푼다. htdocs 폴더 경로는 /Application/MAMP/htdocs 인데 MAMP 관리 패널에서 Preferences… > Apache 탭으로 들어가 화살표 버튼을 누르면 MAMP 폴더가 나타난다. 거기 htdocs 폴더를 열어 거기에 받은 파일을 넣자.

다음으로 wp-config.php 파일을 내려받아 압축 해제한 폴더 안에 넣는다. wp-config.php는 앞에서 추가한 데이터베이스와 워드프레스를 연결하기 위한 정보가 들어있는 파일이다. MAMP의 기본 아이디와 비밀번호, 앞서 데이터베이스명을 미리 입력해둔 파일이라 해당 위치에 잘 넣기만 하면 된다. (만약 위에서 생성한 데이터베이스 이름이 wordpress가 아니라면 이 파일을 열어 수정해야 한다.)

여기까지 모두 완료되면 http://localhost:8888/wordpress 를 인터넷 주소창에 입력해 접속한다. 사이트명, 아이디, 비밀번호 등을 등록하는 절차를 걸쳐 워드프레스를 사용할 수 있게 된다.

Welcome to wordpress

아이디를 생성하고 로그인하면 이제 워드프레스를 로컬 환경에서 사용할 수 있게 된다.

Wordpress main page

MAMP에서 아파치 설정을 해주면 동일한 네트워크 내에서 접속 가능한 형태로도 사용 가능하다. ↩

중간에 관리자 권한을 위해 비밀번호를 입력하게 된다. ↩

WordPress에서 제공하는 클래스인 WP_Query는 wordpress의 컨텐츠(Post, Page, Custom content etc.)를 쉽게 불러 사용할 수 있도록 도와준다. Widget이나 테마 등에서 컨텐츠 목록을 제공할 필요가 있을 때 편리하게 사용할 수 있다.

<?php    
// The Query
$the_query = new WP_Query( $args );

// The Loop
while ( $the_query->have_posts() ) {
    $the_query->the_post();
    echo '<li>' . get_the_title() . '</li>';
}

자세한 내용은 WordPress에서 제공하는 WP_Query 문서에서 확인할 수 있다.

WP_Query에서는 데이터를 가져올 때 array의 형태로 properties를 추가해 활용한다. 한 페이지에서 WP_Query를 여러번 사용할 수도 있는데 이런 경우, 재사용성을 높이기 위해 이전의 설정들이 저장되어 의도하지 않은 데이터가 출력될 때가 있다. 그런 경우를 위해 설정을 초기화 하는 함수인 wp_reset_postdata()가 제공된다.

<?php    
// The Query
$the_query = new WP_Query( $args );

// The Loop
while ( $the_query->have_posts() ) {
    $the_query->the_post();
    echo '<li>' . get_the_title() . '</li>';
}
wp_reset_postdata();

$new_query = new WP_Query( $new_args );

wp_reset_postdata()를 사용했는데도 입력한 properties가 무시되는 등 의도한 대로 동작하지 않는 경우가 있다. 이 경우는 WP_Query 클래스에서 포스트를 가져올 때 pre_get_posts hook을 실행하는데 이 포인트에 query 결과를 조작하는 action이 등록되어 있을 가능성이 높다.

이 hook을 잘못 건들면 대다수의 플러그인과 테마에서 문제가 발생할 수 있기 때문에 만지지 않는걸(should not) 권장한다. Woo Commerce와 같은, 규모가 큰 플러그인은 구현 편의를 위해 이 hook을 사용해 개발하는 경우가 있다. 즉, WP_Query가 제대로 동작하지 않는다면 다른 플러그인이나 테마에서 pre_get_posts를 조작하고 있는지 확인해야 한다.

<?php

wp_reset_postdata();

global $evil_class;
remove_action( 'pre_get_posts', array( $evil_class, 'inject_get_posts' ) );

// The Query
$the_query = new WP_Query( $args );

// The Loop
while ( $the_query->have_posts() ) {
    $the_query->the_post();
    echo '<li>' . get_the_title() . '</li>';
}

// Recover
wp_reset_postdata();
add_action( 'pre_get_posts', array( $evil_class, 'inject_get_posts' ) );

WordPress에 내장되어 있는 메뉴(Menu)는 이미 쓸만한 class명이 이미 다 붙어 있어 사실 딱히 수정이 필요가 없는 편이다. 예를 들면 현재 활성화 된 메뉴는 .current-menu-item 라든가, 해당 메뉴가 연결된 포스트의 타입을 .menu-item-object-page 식으로 이미 선언되어 있다. 하지만 디자인으로 인해 마크업을 추가하거나 변경해야 하는 경우가 간혹 있는데 그럴 때는 Walker 클래스를 사용해 변경할 수 있다.

Walker는 WordPress에서 트리 형태와 같이 상속이 있는 데이터 구조를 다루기 위해 사용되는 클래스이며, 자세한 내용은 WordPress의 Walker 항목을 참고하도록 한다. 문서가 조금 조잡한 감이 있는데 구글에서 검색해보면 더 자세하게 풀어서 작성한 포스트도 꽤 많이 있으므로 참고하자.

일반적으로 템플릿에서 메뉴를 불러오기 위해서 wp_nav_menu() 함수를 사용한다.

<div class="nav-wrapper">
<?php wp_nav_menu( array('menu' => 'Global Nav' )); ?>
</div>

이때 wp_nav_menu()를 통해 생성되는 메뉴는 walker 파라미터가 지정되어 있지 않기 떄문에 기본값인 Walker_Nav_Menu 클래스를 사용해 생성하게 된다. 즉, Walker_Nav_Menu 클래스를 상속하는 새 클래스를 작성한 후에 walker 파라미터에 지정해주면 원하는 형태의 마크업으로 변경할 수 있게 된다.

다음의 예시는 다중 하위 메뉴에서 나타나는 ul.sub-menu를 div.sub-menu-wrapper로 한번 더 감싸주기 위한 클래스다. 기존 Walker_Nav_Menu 클래스에서 정의된 메소드를 오버라이딩해서 div를 추가한다.

<?php
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {

        function start_lvl( &$output, $depth = 0, $args = array() ) {
                $indent = str_repeat("\t", $depth);
                $output .= "\n$indent<div class=\"sub-menu-wrapper\"><ul class=\"sub-menu\">\n";
        }

        function end_lvl( &$output, $depth = 0, $args = array() ) {
                $indent = str_repeat("\t", $depth);
                $output .= "$indent</ul></div>\n";
        }

}

Walker_Nav_Menu는 wp-includes/nav-menu-template.php에 선언되어 있으며, 오버라이딩 하고 싶은 메소드를 위와 같은 방식으로 본 클래스의 메소드 내용을 참고해 작성하면 된다.

위와 같이 작성한 클래스를 현재 사용하고 있는 템플릿의 functions.php에 선언해주고 wp_nav_menu() 함수에서 해당 walker를 참조하도록 추가한다.

<div class="nav-wrapper">
<?php wp_nav_menu( array('menu' => 'Global Nav', 'walker' => new Custom_Walker_Nav_Menu )); ?>
</div>

그러면 앞서 작성한 클래스를 참고해 새로운 마크업 메뉴를 생성하게 된다.

버전 2.1에서 제안된 Walker 클래스들은 앞서 이야기한 바와 같이 트리 구조의 데이터를 직접 파싱하는 형태로 구성되어 있다. 자료형과 마크업이 아직도 유기적인 상태라서, 부모 메소드를 실행한 후 결과를 처리하거나 하는 방식으로 작업할 수 없다. 그로 인해 다소 지저분하고 기존 내용을 반복적으로 작성해야 하는 번거로움이 여전히 있는데 최근 버전에서 Walker로 처리되는 데이터 구조가 많아지고 있어 조만간 리펙토링이 진행될 것으로 보인다.

관리자 패널에 계속 떠있었는데 방치해두다가 오늘 업데이트를 진행했다.

새로운 미디어 매니저

기존 미디어 매니저는 사실 여러장 이미지 첨부하기가 불편해 별도의 플러그인을 사용하고 있었는데 디자인과 인터페이스가 개선되었다.

새로운 기본 테마

현재 블로그에 적용되어 있는 Twenty Twelve가 기본 테마로 등록되었다.

레티나 디스플레이 대응

관리자 Dashboard가 레티나 디스플레이를 대응한다. 내 경우에는 앱을 더 많이 사용하기 때문에 큰 차이는 없을듯.

자연스러워진 사용자 경험

접근성 측면에 여러가지 기능이 업데이트 된 모양이다. 컬러픽커도 개선이 된 모양. 사실 기존 컬러픽커는 답답한 면이 좀 있었는데 개선된 모양이다.

개발 관련

개발쪽에서는 상당히 큰 규모의 업데이트. 메인이 될만한 업데이트가 좀 있었다. user와 comment에 관한 query 클래스가 추가되었고 멀티 사이트를 위한 메소드, Post object, Image editing API 등이 추가 되었다고. 그리고 Underscore와 backbone js가 기본 라이브러리로 추가 탑재되었다. backbonejs 의 경우는 어떤식으로 wp에서 활용되게 될지 궁금하기도, 기대되기도 한다. 그리고 앱 사용자가 확실히 늘어서 그런지 XML-RPC API가 켜진게 기본값이 되었다고.

전통과 역사가 살아 숨쉬는(?) 워드프레스는 기존의 레거시도 많이 있긴 하지만 매 업데이트마다 레거시를 걷어내는데 총력을 기울이면서도 워드프레스에 최적화된 메소드와 클래스를 내놓는 모습이 보기 좋다. 업데이트 때 마다 크레딧을 꼭 보는 편인데 한두명도 아닌 수십명이 함께 작업하는 모습이 영화같다. 한국어권에서도 이런 아름다운 오픈소스 문화 속에서 성장해 문화를 대표하고 선도하는 멋진 녀석들이 쏟아져나오길 올해도 기대를 해본다.

오랜만에 wp 사이트에 들어가서 좋은 테마 없나 찾자마자 튀어나온 새로운 테마 Twenty Twelve. 2012년 9월부터 제공했는데 여태껏 보지 못했다니 내가 너무 소홀했나보다.

이전 Twenty Eleven 과 같이 Responsive Design이 적용되어 있으며 테스트해본 결과 상당히 Twenty Eleven에 비해 훨씬 깔끔하고 이쁘다. 기본 글꼴도 Open sans로 설정되어 미려함을 더해준다.

Twenty Eleven에 Open Sans를 적용해 썼었는데 글꼴 자체가 이런 깔끔한 분위기에 더 맞는듯 하다. 오랜만에 정말 제대로 설레는 테마가 나온듯!

내려받기는 아래의 링크에서 가능하며 wp 대시보드에서도 당연히 바로 설치 가능하다.

http://wordpress.org/extend/themes/twentytwelve

Tag: wordpress

블로그 테마 변경

워드프레스 유지보수 모드 (Maintenance mode)

유지보수 모드 켜고 끄기

유지보수 페이지 변경하기

WordPress에서 Links 사용하기

워드프레스 북마클릿 Press This 활용하기

설치하기

활용 방법

Scrapbook – 스크랩을 위한 워드프레스 플러그인

OSX에 나만을 위한 워드프레스 설치하기

MAMP 설치하기

데이터베이스 생성하기

워드프레스 설치하기

WP_Query를 사용할 때 Properties가 제대로 동작하지 않는다면

WordPress Menu 마크업 변경하기

워드프레스 3.5 업데이트

새로운 미디어 매니저

새로운 기본 테마

레티나 디스플레이 대응

자연스러워진 사용자 경험

개발 관련

새로운 테마로 변경 Twenty Twelve

색상을 바꿔요