WordPress.com 개인 플랜과 .blog 도메인

wordpress-com-plans

WordPress.com에 개인(Personal) 플랜이 추가됐다. 가격은 1년에 35.88달러이고 원화로 환산하면 4만원 조금 넘는다. 위의 이미지를 살펴보면 알겠지만, 기존 무료 사용자에게 제공되던 기능에서 추가된 것은 사용자 정의 도메인 네임, 이메일 및 실시간 채팅 지원, 워드프레스 광고 제거뿐이다. 유료 사용자에게 당연히 제공되어야할 이메일 및 실시간 채팅 지원 기능을 제외한다면 결국 사용자 정의 도메인 네임워드프레스 광고 제거 기능만이 추가될 뿐이다.

사실 이 플랜이 나온지는 좀 됐다. 하지만 개인적으로 CSS를 편집할 수 있는 ‘고급 디자인 사용자 정의’ 기능을 제공하지 않아서 별로 관심을 가지지 않았었다. 그러나 얼마전에 ‘.blog’ 도메인이 나오면서 이 플랜을 유용하게 생각할만한 사람들도 있겠구나 하는 생각이 들었다.

WordPress.com의 ‘사용자 정의 도메인 네임’ 기능은 단순히 도메인을 연결하게 해주는 기능이 아니다. 무료로 도메인 하나를 제공해주기도 한다. 즉, WordPress의 유료 플랜을 쓰면 도메인 하나를 무료로 얻을 수 있는 것이다.

그런데 새로 나온 ‘.blog’ 도메인은 처음 나와서 그런지 가격이 비싸다. 대충 검색을 해보니 20달러 초중반에서 30달러까지 하는 것으로 보인다. 따라서 WordPress.com에서 블로그를 계속 운영할 생각을 가지고 있고, 또 ‘.blog’ 도메인을 가지고 싶은 사람들에게 새로 나온 ‘개인 플랜’은 좋은 선택이 될 수 있다. 물론 도메인은 자신의 소유가 되므로 WordPress.com에서 다른 블로그로 이전하더라도 계속 그 도메인을 사용할 수 있다.

나온지 얼마되지 않은 도메인이니만큼 아직 선점되지 않은 좋은 도메인들이 많을 것이다. .com 이나 .net 도메인에 자기가 원하는 도메인이 선점되어 있어서 아쉬워했던 사람들은 이 기회에 WordPress.com에서 마음에 드는 .blog 도메인을 얻어서 블로그를 운영해보는 것은 어떨까?

Advertisements

WordPress.com 무료 사용자도 폰트 설정이 가능해졌다

이제 무료 사용자도 Wordpress.com에서 폰트 변경이 가능해졌다.

WordPress.com 은 꽤 괜찮은 블로그 플랫폼이다. 안정적이고 편리하며 수익구조가 잘 갖춰져 있고 사용자가 많아서 갑자기 망해버릴 가능성이 적은 좋은 서비스다. 하지만 단점도 많다. 그 중에서 한국 사용자들에게 가장 걸림돌이 될 수 있는 것은 바로 폰트 변경이 불가능하다는 것이다. 정확히는 유료 사용자에게만 폰트 변경 기능을 제공한다. 영어권 사용자에게는 폰트 변경이 안 된다는 것이 대단한 단점이 되지 않을 수도 있다. 기본 폰트도 훌륭하기 때문이다. 하지만 한국 사용자에게는 그렇지 않다. 우리나라 사람들은 대부분 윈도우즈를 쓰고 있고, 윈도우즈용 브라우저는 기본 폰트가 모두 굴림으로 되어 있다. 그 때문에 방문자들은 내 블로그를 굴림 폰트로 보게 된다.

Google-Gulim
굴림 폰트의 압박

그리고 굴림 폰트는 폰트의 크기를 키우면 정말 처절할 정도로 못생겼다. 블로그의 경우 블로그 이름이나, 글제목의 폰트 크기가 큰 편이므로 굴림 폰트로 보면 아주 못생겨 보이게 된다. WordPress.com 블로그 운영자가 굴림 폰트로 블로그가 보여지는 것을 막으려면 이전에는 유료 구독해야만 했다. 하지만 이제는 무료 사용자도 폰트의 선택이 가능해졌다.

기본적인 몇 가지 폰트만 선택할 수 있고, 한글 폰트도 따로 없다. 하지만 이전에 무료 사용자가 폰트를 전혀 선택할 수 없었던 것에 비하면 훨씬 나아진 것이다. 아래의 스크린샷에서 선택한 Source Sans Pro나 Noto Sans와 같은 폰트는 한글을 포함하고 있으므로 이 폰트들을 선택하면 한글 사용자도 굴림 폰트보다 더 예쁜 폰트를 볼 수 있다. 웹폰트를 사용해서 방문자의 컴퓨터에 선택한 폰트가 설치되어 있지 않아도 상관 없다.

Wordpress.com-font-change
테마 사용자 정의의 폰트 항목

이제 WordPress.com에서 기본적인 폰트 설정까지 가능해졌다. 전에도 언급했던 것처럼 난 WordPress.com은 어떤 다른 블로그보다 자신을 글을 오래 보존하기 좋은 장소라고 생각한다. 이번 기회에 온라인 상에 자신의 글을 써서 오랫동안 남기고 싶어서 블로그를 시작하는 사람들이 WordPress.com에 블로그를 만들게 됐으면 하는 바람이다. 아마 글 쓰는 공간으로는 아주 만족스러울 것이다.

Intergalactic 테마로 교체

테마를 Intergalactic 테마로 교체했다. 테마의 분위기가 바뀐만큼 블로그의 분위기도 바꿔봐야겠다.

intergalacticlg theme crop-2

오랜만에 테마를 교체했다. WordPress.com에서는 css 수정이 유료이기 때문에 테마를 교체할 때 제약 사항이 많다. 내 맘대로 테마를 수정할 수가 없어서 기본 css에서도 예쁘게 보이는 테마를 선택해야만 한다.

그런데 워드프레스 테마들 대부분이 영어 폰트에 기준이 맞춰져 있어서, 한글이 적용되도 예쁘고, 또 동시에 내가 좋아하는 디자인의 테마를 찾기는 쉽지 않다.

그래서 오랜시간동안 The Journalist1 라는 테마를 사용했고 꽤 만족하면서 썼다. 하지만 오래 쓰다보니 좀 식상한 느낌이 들었고, 또 반응형을 지원하지도 않아서 테마를 바꿔보기로 했다. 그 후 몇가지 테마를 사용해봤지만 그리 만족스럽지 않았다.

그런데 이번에 새로 추가된 Intergalactic 테마가 한글이 적용되도 꽤 예쁘게 적용되는 것 같아서 이 테마를 적용해봤다.

이 테마는 사이드바가 평소에는 감춰져 있는 것이 특징이다. 우상단에 메뉴 버튼을 클릭해야 사이드바가 나온다. 개인적으로 One Column 형태의 테마를 좋아해서 마음에 든다.

또한 이 테마는 특성이미지(Featured Image)를 적극적으로 사용한 테마다. 그래서 특성이미지를 적용하지 않으면 상당히 심심해진다. 난 이전에 이미 대부분의 글에 특성이미지를 적용해 놓아서 크게 무리없이 테마를 적용할 수 있었다.

사실 예전에 사용하던 The Journalist 테마만큼 깔끔한 느낌은 아니긴 하다. 하지만 그보단 좀 더 현대적인 느낌을 주고, 덜 딱딱한 느낌을 주는 것은 마음에 든다.

예전에는 웬지 블로그에 딱딱한 글만 올려야 할 것 같은 느낌이 들었는데, 이 테마를 적용하고 보니 그런 느낌도 덜 느끼게 되는 것 같다.

난 메인 블로그를 따로 운영하고 있다. 그래서 이 블로그에는 글을 쓸 일이 많지 않다. 하지만 메인 블로그에는 뭔가 제대로 된 글을 올려야할 것 같은 부담감이 드는 반면에 이 블로그에는 그런 부담감이 좀 덜하다.

그래서 이제부터는 이 블로그에는 그리 부담가지지 않고 아무렇게나 글을 올려볼 생각이다. 그런 의미에서 블로그의 부제도 ‘Just Write’라고 바꿔봤다. 부제대로 이 블로그에 편하게 글을 쓰려고 노력해봐야겠다.


  1. 참고로 The Journalist 테마는 현재 WordPress.com에서 삭제되었다. WordPress.com에서는 시간이 지나면 테마를 삭제하기도 하나보다. 

WordPress.com에서 예쁘게 소스 코드 삽입하기

Wordpress.com에는 플러그인을 설치할 수 없기 때문에, Syntax Highlighting 기능을 사용할 수 없다고 생각하는 사람들이 많다. 하지만 Wordpress.com에서 제공하는 Shortcode를 이용하면 Wordpress.com 블로그에서도 Syntax Highlighting 기능을 사용할 수 있다.

워드프레스 블로그에 소스 코드 삽입하기

설치형 워드프레스를 사용하는 사람들이 소스 코드를 블로그에 삽입할 때는 대부분 Syntax Highlighting 기능을 추가하는 플러그인을 이용한다. 그래서 많은 사람들이 가입형 워드프레스에는 Syntax Highlighting 기능이 없다고 생각하곤 한다. 하지만 WordPress.com에도 Syntax Highlighting 기능이 있다. 다만 에디터에 툴바를 통해서 삽입하는 형태가 아니다보니 많은 사람들이 잘 모르고 있을 뿐이다. 아주 간단한 팁이지만 오늘은 WordPress.com에서 소스 코드를 예쁘게 삽입하는 방법을 소개해보려 한다.

WordPress.com에서 Shortcode로 소스 코드 삽입하기

가입형 워드프레스인 WordPress.com은 보안 문제 때문에 대부분의 HTML 코드를 막아 놓았다. 그래서 유튜브등의 비디오도 유튜브에서 제공하는 삽입 코드로 동영상 삽입이 불가능하다. WordPress.com에서는 그 대안으로 상당수의 shortcode를 제공해서 shortcode로 여러가지를 할 수 있도록 해 놓았다. 소스 코드를 삽입할 때도 마찬가지다. 소스 코드를 삽입할 때는 [code]라는 shortcode를 이용한다. [code] shortcode는 다음과 같은 식으로 사용한다.

[code] shortcode 사용법
[code language="언어 파라미터"]
소스 코드

[/code]

[code] shortcode 예시
[code language="css"]
#button {
font-weight: bold;
border: 2px solid #fff;
}

[/code]

#button {
    font-weight: bold;
    border: 2px solid #fff;
}

WordPress.com [code] Shortcode 언어 파라미터

WordPress.com에서 지원하는 언어는 다음과 같다. 만약에 언어 파라미터를 지정하지 않으면, 기본으로 “text”로 지정되며 Syntax Highlighting 기능이 적용되지 않는다.

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

WordPress.com [code] Shortcode 옵션 설정

[code] Shortcode 에 몇가지 파라미터를 추가함으로써, 소스 코드가 표현되는 모습을 바꿔주는 것이 가능하다. 아래 목록들이 WordPress.com [code] Shortcode 에서 지원하는 옵션 파라미터들이다.

  • autolinks (true/false) : [기본설정: ture] 코드안의 모든 URL을 클릭 가능할 수 있게 만든다.
  • collapse (true/false) : [기본설정: false] 이 파라미터가 ‘ture’로 설정되면 페이지가 로딩될 때 코드 박스가 접혀져 있게된다. 방문자가 코드를 보려면 클릭해야 한다. 코드가 길 때 유용한 옵션이다.
  • firstline (number) : [기본설정: 1] 코드 왼쪽에 행번호의 시작 숫자를 지정한다.
  • gutter (true/false) : [기본설정: ture] 이 파라미터가 ‘false’로 설정되면 행번호가 나오지 않는다.
  • highlight (comma-seperated list of numbers) : [기본설정: 없음] 숫자를 설정하면 그 슷자에 해당하는 행이 강조된다. “4,7,19” 처럼 행을 콤마로 구분해서 여러 행을 지정할 수 있다.
  • htmlscript (true/false) : [기본설정: false] 이 파라미터가 ‘ture’로 설정되면 HTML/XML 부분이 강조된다. 예를 들어 PHP와 HTML이 섞여있는 경우에 유용하다. 이 옵션은 특정 언어에서만 동작한다.1
  • light (true/false) : [기본설정: false] 이 파라미터가 ‘true’로 설정되면 행번호와 툴바가 나오지 않는다. 이 옵션은 삽입할 코드가 한 줄이나 두 줄일 때 유용하다.
  • padlinenumbers (true/false/integer) : [기본설정: false] 이 파라미터는 행번호의 자리수를 지정한다. 이 파라미터를 ‘true’로 설정하면 모든 행번호의 자리수가 가장 큰 행번호의 자리수로 통일된다. 즉, 17행짜리 코드라면 ‘1’은 ’01’로, ’10’은 ’10’으로 표시된다. 이 파라미터를 ‘false’로 설정하면 행번호의 자리수가 그대로 나온다. 즉, 1행은 ‘1’로 10행은 ’10’으로 표시된다. 이 파라미터를 숫자로 지정하면 소스코드가 몇행인지와는 상관없이 행번호의 자리수를 지정된 숫자만큼으로 표시한다.
  • title (string) : [기본설정: 없음] 코드 블락의 제목을 설정한다. ‘collapse’ 파라미터를 ‘ture’로 설정했을 때 특히 유용하다.

WordPress.com [code] Shortcode 옵션 예시

1. “collapse” 파라미터와 “title” 파라미터를 적용 (클릭해야 소스 코드가 보인다.)
[code language="css" collapse="ture" title="collapse와 title 파라미터 적용"]

#button {
    font-weight: bold;
    border: 2px solid #fff;
}

2. “firstline” 파라미터, “htmlscript” 파라미터, “highlight” 파라미터를 적용
[code language="php" firstline="5" htmlscript="true" highlight="14, 18"]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>WordPress.com Code Example</title>
</head>
<body>
    <h1>WordPress.com Code Example</h1>

    <p>This line is highlighted.</p>

    <p><?php echo 'Hello World!'; ?></p>
 
    <p>This line is highlighted, too.</p>
 
    <p>This line is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long.</p>
 
    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>
 
    <p><a href="http://wordpress.com/">WordPress.com</a></p>
</body>
</html>

3. “padlinenumbers” 파라미터를 적용
[code language="css" padlinenumbers="10"]

#button {
    font-weight: bold;
    border: 2px solid #fff;
}

마크다운을(Markdown) 사용할 때 소스 코드 삽입하는 방법

WordPress.com에서는 현재 마크다운을 정식으로 지원하고 있다. 마크다운으로 글을 쓸 때도 위에서 소개한 [code] Shortcode를 그대로 사용 가능하다. 그리고 추가로 GFM(GitHub Flavored Markdown) 스타일로 소스 코드를 삽입하는 것도 가능하다. GFM(GitHub Flavored Markdown) 스타일로 소스 코드를 삽입 방법은 다음과 같다.

※ GFM(GitHub Flavored Markdown) 스타일 소스 코드 삽입 방법

```언어 파라미터
소스코드
```

※ GFM(GitHub Flavored Markdown) 스타일 소스 코드 삽입 방법 예시

```css
#button {
    font-weight: bold;
    border: 2px solid #fff;
}
```
#button {
    font-weight: bold;
    border: 2px solid #fff;
}

마크다운을 사용할 때 이렇게 GFM(GitHub Flavored Markdown) 스타일로 소스 코드를 삽입할 수 있기는 하지만 [code] Shortcode를 이용할 때처럼 옵션을 설정하는 것이 불가능하다는 단점도 있다. 그러나 마크다운으로 글을 자주 쓰고, 다른 곳에도 같을 글을 올리는 경우가 많다면 WordPress.com에서 제공하는 Shortcode를 쓰는 것보다는 GFM(GitHub Flavored Markdown) 방식으로 소스 코드를 삽입하는 것이 더 좋을 수 있을 것이다.

※ 이 글은 WordPress.com Support페이지의 ‘Posting Source Code’를 참조했다.


  1. 어떤 언어에서만 가능한지에 대해서는 WordPress.com Support 페이지에도 설명하고 있지 않다. 

WordPress.com 블로그에서 Display Posts Shortcode로 글목록을 마음대로 보여주기

Wordpress.com 블로그에서 “Display Posts Shortcode” 를 이용하면 글목록을 커스터마이징해서 출력하는 것이 가능하다. 이 글에서는 그것을 이용해서 글제목만 출력하는 방법, 특정 카테고리나 태그에 해당하는 글의 목록만 출력하는 방법, “Display Posts Shortcode” 를 활용한 전면페이지 만드는 방법등에 대해서 설명해본다.

WordPress.com에서 제공하는 글목록

Wordprss.com에서 기본적으로 제공하는 글목록의 종류는 세가지이다. “카테고리별 글목록”, “월별 글목록”, “태그별 글목록” 이 그 세가지이다. 이렇게 기본적으로 제공되는 글목록들은 위젯 기능을 통해 사이드바에 넣을 수도 있고, 메뉴에 넣는 것도 가능하다.

하지만 이 글목록 기능에는 단점이 한가지 있는데, 그것은 바로 커스터마이징이 불가능하다는 것이다. 이런 것이 특히 한국 사람들에게는 불편하게 생각될 수 있는데, 그 이유는 한국 블로그들의 글목록과 워드프레스 스타일의 글목록에 차이가 있기 때문이다.

Wordpress.com 블로그 글목록
▲ WordPress.com 블로그의 글목록

티스토리 블로그 글목록
▲ 티스토리 블로그의 글목록

위에서 보는 것처럼 워드프레스의 글목록 페이지는 테마의 모양을 그대로 가지고 간다. 만약에 테마가 글제목만 보여주도록 되어있다면, 글목록 페이지에서도 글제목만 보여주고, 테마가 제목과 요약, 썸네일 이미지등을 함께 보여주도록 되어 있다면, 글목록 페이지에서도 그 모두를 보여준다.

반면에 네이버나 티스토리등의 한국 블로그에서는 테마의 모양과 상관없이 글목록 페이지에서는 글제목만 보이도록 되어있다. 물론 설정에 따라서 글제목이 나열된 다음에, 그 목록에 해당하는 모든 글이 펼쳐져서 보여지도록 할 수도 있긴 하다.

어쨌든 한국 블로그들이 글목록 페이지를 보여주는 방식은, 글목록 페이지를 마음대로 편집할 수 없게 하기 때문에 사람에 따라 아쉬운 부분이 될 수도 있다. 하지만 글제목만 한꺼번에 보여지는 것은 블로그 방문자들이 어떤 글이 있는지 빨리 확인하고 그 글을 볼 수 있게 해주기도 하기 때문에 편리한 것이 사실이다.

그래서 워드프레스 블로그를 방문하는 한국인들은 카테고리나 태그 글목록 페이지에 들어갔을 때 꽤 불편함을 느낄 수 있다. 제목만 빠르게 훑어보고 자기가 보고 싶은 글을 찾고 싶은데 그렇게 하지 못하기 때문이다.

이런 경우 설치형 워드프레스에서는 플러그인을 이용하거나, 직접 테마를 수정해서 얼마든지 마음대로 커스터마이징이 가능하지만, WordPress.com에서는 그것이 불가능하다. Wordprss.com에서는 년간 사용료를 지불함으로써 사용할 수 있는 것은 css 편집이나 폰트 설정 정도 뿐이고, 테마 자체를 뜯어고치는 것은 불가능하게 되어 있기 때문이다.

Display Posts Shortcode 를 사용해서 글목록 페이지 만들기

wordpress.com에서도 이런 문제점을 인식하고 있는지, 여러가지 Shortcode를 제공해줘서, 일정정도의 커스터마이징을 할 수 있도록 해놓았다. 예를 들면, wodpress.com에서는 보안상의 문제로, 유튜브나 비메오등에서 제공하는 동영상 삽입 코드는 동작하지 않는데, 그 대신 유튜브나 비메오의 동영상 페이지 주소를 그대로 입력하거나 Shortcode를 사용해서 동영상을 삽입할 수 있도록 해놓았다.

그리고 글목록 페이지를 커스터마이징 할 수 있는 Shortcode도 있는데, 오늘 소개할 “Display Posts Shortcode” 다. “Display Posts Shortcode” 는 말 그대로 블로그의 글목록을 글이나 페이지에 뜨도록 할 수 있는 Shortcode 다.

이 “Display Posts Shortcode”를 적용하면 위에서 나왔던 워드프레스의 글목록 페이지를 다음과 같은 모양으로 만들 수 있다.

Display Posts Shortcode를 이용한 글목록 페이지
▲ Display Posts Shortcode를 이용해서 만든 글목록 페이지

Display Posts Shortcode 사용법

우선 “Display Posts Shortcode”의 사용법은 워드프레스 Support 페이지에 자세히 나와있다. 그래서 이 글에서는 간단하게 글목록 페이지를 만드는 것에 대해서 설명하려고 한다.

Display Posts Shortcode 인수와 그 용법 설명

  • author
    • 특정 저자의 글목록을 출력한다.
    • 기본값: 없음
  • category
    • 지정된 카테고리에 해당하는 글목록을 출력한다. (콤마를 통해서 여러 카테고리의 글목록을 표시하도록하는 것이 가능함)
    • 기본값: 없음
  • date_format
    • “include_date” 인수의 값이 “true”일 때, “날짜 표시 형식”을 지정하는 역할을 한다. 더 자세한 내용은 WordPress Codex의 시간 및 날짜 사용자 정의을 참조하면 된다.
    • 기본값: ‘(n/j/Y)’ (n은 “1-12″형식의 월, j는 “1-31″형식의 일, Y는 “1999”형식의 년을 나타낸다)
  • id
    • 글의 ID를 지정해서 지정된 글목록만 출력한다. (콤마를 통해서 여러 개의 글목록을 표시하도록하는 것이 가능함)
    • 기본값: 없음
  • image_size
    • 특성 이미지(featured image)의 크기를 지정한다. 특성 이미지를 설정하지 않은 글은 이미지가 출력되지 않는다. 이미지 사이즈는 “설정 ⇒ 미디어”에 지정된 『작은 사진(썸네일)(thumbnail), 중간크기(medium), 최대 크기(large)』의 사이즈대로 표현된다.
    • 기본값: 없음
  • include_date
    • 이 인수의 값이 “ture”면 글제목 옆에 글작성일이 표시된다. 기본값은 “(7/30/12)”와 같은 형태지만, ‘date_format’ 인수를 통해서 조정이 가능하다.
    • 기본값: 없음 (즉, 날짜가 나오지 않음)
  • include_excerpt
    • 이 인수의 값이 “ture”면 글의 요약글(excerpt)이 함께 표시된다.
    • 기본값: 없음 (즉, 요약글이 나오지 않음)
  • offset
    • 글목록에서 제외할 글의 수를 지정한다. 이 때 주의할 것은 글목록의 가장 위에서부터 제외된다는 점이다. 즉, 기본설정대로 한다면 가장 최근글부터 제외된다.
    • 기본값: 0
  • order
    • 정렬방식을 지정한다. “DESC”로 지정하면 “내림차순”으로, “ASC”로 지정하면 “오름차순”으로 정렬된다.
    • 기본값: DESC
  • orderby
    • 어떤 인수를 이용해서 글을 정렬할 지 지정한다. 가능한 인수가 어떤 것이 있는 지는 이 링크의 글을 참조하면 된다.
    • 기본값: date
  • post_parent
    • 이 인수의 값이 “current”면 현재 페이지의 하위 페이지의 목록을 출력하고, 값이 특정 페이지의 ID인 경우에는 그 페이지의 하위 페이지의 목록을 출력한다.
    • 기본값: 없음
  • post_status
    • 지정된 글상태인 글의 목록만 출력한다.
    • 기본값: publish
  • post_type
    • 글의 종류를 지정해서 지정된 포스트만 출력한다. post(게시글), page(페이지) 두가지 중 하나를 선택할 수 있다.
    • 기본값: post
  • posts_per_page
    • 한 페이지에 얼마나 많은 글을 보여줄지 지정한다.
    • 기본값: 10
  • tag
    • 지정된 태그에 해당하는 글목록을 출력한다. (콤마를 통해서 여러 태그의 글목록을 표시하도록하는 것이 가능함)
    • 기본값: 없음
  • wrapper
    • 글목록이 어떤 종류의 HTML로 출력될지를 지정한다. 순번이 없는 리스트(ul), 순번이 있는 리스트(ol), 그리고 div(div)중에 하나로 지정할 수 있다. 이 때 div로 지정하면 글목록 앞의 블릿 표시가 나타나지 않는다.
    • 기본값: ul

예시

  1. 전체글목록 (글제목과 날짜를 표시하고 날짜는 “년/월/일” 형태로 표시. 정렬은 기본값대로 날짜로 내림차순 정렬됨)
    [display-posts include_date="true" date_format="Y/m/d" posts_per_page="100"]

  2. 『Blog』 카테고리 글목록 (글제목과 날짜를 표시하고 날짜는 “년 월 일” 형태로 표시. 정렬은 날짜로 오름차순 정렬됨)
    [display-posts category="Blog" include_date="true" order="ASC" date_format="Y년 F j일" posts_per_page="100"]

  3. 『Wordpress.com』 태그 글목록 (글제목과 날짜를 표시하고 날짜는 “년 월 일” 형태로 표시. 정렬은 글제목으로 내림차순 정렬됨)
    [display-posts category="Blog" include_date="true" orderby="title" date_format="Y년 F j일" posts_per_page="100"]

  4. 『Blog』 카테고리 글목록 (글제목과 날짜를 표시하고 날짜는 “년 월 일” 형태로 표시. 정렬은 날짜로 오름차순 정렬됨) – 폰트 크기 수정 (댓글의 @Veteran님 의견을 참조했습니다.)
    <div style="font-size:16px;">
    [display-posts category="Blog" include_date="true" order="ASC" date_format="Y년 F j일" posts_per_page="100"]
    </div>

특히 세번째로 예시를 든 태그 글목록은 또다른 응용이 가능하다. 예를 들어 특정 글들에 “notice”와 같은 태그를 지정해서 공지글의 목록만 보여지게 할 수도 있고, 방문자가 꼭 봐줬으면 하는 글에 “featured”와 같은 태그를 붙여서 그 글들만 보여주는 것도 가능하다.

응용법

만약에 css 편집이 가능하면 다른 응용법도 생각해볼 수 있다. 워드프레스에서는 전면페이지(Frontpage)를 설정하는 것이 가능하다. 그것은 페이지를 하나 만든 후 “설정 ⇒ 읽기”에서 전면페이지 표시 항목에서 설정이 가능하다. 그 항목을 정적인 페이지로 설정하고, 전면페이지를 만들어놓은 페이지로 설정하면, 블로그에 접속할 때 그 페이지가 처음으로 뜨게 된다.

이 기능을 이용하면 블로그를 좀 더 다채롭게 꾸밀 수 있는데, WordPress.com에서는 테마 자체를 편집하는 것을 막아놓았기 때문에, 커스터마이징에 한계가 있다. 하지만 css를 편집하는 것이 가능하다면, “Display Posts Shortcode”를 사용해서 어느정도는 자신이 원하는 디자인의 전면페이지를 만드는 것도 가능할 것이다. 아래 스크린샷은 브라우저의 개발자도구를 이용해서 css를 조금 수정한 것이다. 아래와 같은 식으로 전면페이지를 만들면, 전면페이지에 분류별로 최신글목록을 몇개씩 보여주는 것도 가능하고, 태그 글목록을 이용해서 방문자가 꼭 봐줬으면 하는 글목록을 보여주는 것도 가능할 것이다.

"Display Posts Shortcode" 로 꾸면 전면 페이지
▲ Display Posts Shortcode를 이용해서 꾸민 전면 페이지

한계점과 해결 방법

“Display Posts Shortcode”는 Shortcode 하나당 100개까지의 글밖에 불러오지 못한다. 따라서 글이 많아지는 경우 목록의 아래부분부터 나오지 않게 된다. 하지만 “offset” 인수를 이용면 어느정도는 해결이 가능하다. “offset”을 이용하면 일정 개수의 글을 뛰어넘어서 그 다음글부터 목록으로 보여주므로, “Display Posts Shortcode” 2개를 사용해서 하나는 그대로 쓰고, 하나는 “offset=”100″” 인수를 설정해서 쓴다면 두 개의 Shortcode를 써서, 중간에 여백이 생기는 단점이 있기는 하지만, 모든 글을 표시하는 것이 가능해진다.

WordPress.com 에서의 Shortcode의 활용

WordPress.com에서는 보안성의 이유로 제한되어있는 것이 상당히 많다. 하지만 그런 불편을 최소화하고, 오히려 더 쉽게 글을 작성할 수 있게 하기 위해서 여러가지 방법을 마련해 놓았다. 그 중에서 Shortcode를 잘 사용할 수 있게 된다면 좀 더 풍성한 블로그를 만들 수 있을 것이다. 여러가지 Shortcode를 좀 더 잘 활용하고 싶다면 WordPress.com의 서포트 페이지를 확인해보자.

Ghost 블로그 사용기

Ghost는 새로운 블로그 플랫폼이다. Ghost는 다른 블로그 플랫폼들이 기능을 늘려가면서 CMS(Content Management System)화 되어가는 것과 달리 블로그 기능에 촛점을 맞춰서 개발된 블로그 플랫폼이다. 그래서 기능은 그리 많지 않지만, 블로그 본연의 목적인 글쓰기에 있어서는 상당히 편리하다. 이 글에서는 Ghost를 얼마간 써보면서 느낀점을 정리해보려고 한다.

Ghost라는 블로그 플랫폼이 새로 나와서 테스트 삼아 잠깐 써보고 있는 중이다. Ghost를 쓰면서 느끼는 점들을 몇가지 써보고자 한다.

계속 “Ghost 블로그 사용기” 읽기

WordPress.com 마크다운 공식 지원

Wordpress.com에서 2013년 11월 19일부터 정식으로 마크다운(Markdown)을 지원하기 시작했다. 마크다운이 무엇인지, 그리고 어떻게 Wordpress.com에서 마크다운을 이용해서 글을 작성할 수 있는 지에 대해서 설명해본다.

WordPress.com 마크다운 공식 지원 시작

마크다운(markdown)은 간단한 마크업 언어로, 이메일 상에서 일반 텍스트로 문장 구조를 표기하던 관례를 규칙으로 만든 문법이다. 따라서 배우기 무척 간단하고, 마크업 언어의 특성상 좀 더 구조화된 글을 쓰는데 도움이 된다.

다음 스크린샷이 워드프레스의 에디터에서 마크다운을 쓰는 모습이다.

markdown-in-text-editor

그리고 다음 스크린샷이 Reddle이라는 테마에서 위의 스크린샷에서 작성한 글이 보여지는 모습이다.

markdown-example-in-reddle

마크다운으로 글 쓰기

마크다운을 이용하면, 많은 학습 없이도, 그리고 마우스를 이용하거나 단축키를 이용하는 것 없이, 빠르게 링크를 추가하거나 리스트를 만들거나 하는 기본적인 글쓰기 작업들을 빠르게 할 수 있다.

예를들어, 어떤 단어나 구절을 이탤릭체로 만들고 싶다면 그 앞과 뒤에 별표를 추가하면 된다. 즉, *강조* 라고 입력하면 강조와 같이 보여진다. 또 어떤 단어나 구절을 굵을 글씨로 표현하고 싶다면 이번에는 별표를 2개를 써주면 된다. 그러면 **굵은 글씨**가 굵은 글씨와 같은 형태로 보여질 것이다.

이처럼 마크다운 문법은 상당히 간단한 편이다. 따라서 많은 학습이 필요없이 좀 더 빠르게, 그리고 좀 더 구조적으로 글을 쓸 수 있도록 도와준다.

다만 사진을 삽입하는 문법이 너무 간단해서, 마크다운으로는 왼쪽이나 오른쪽으로 정렬하는 것조차 불가능하다. 이처럼 멀티미디어를 많이 삽입해서 글을 작성하는 사람들에게는 마크다운이 더 불편할 수도 있다. 반면에 텍스트 위주로 글을 쓰는 사람들에게는, 키보드에서 손을 뗄 필요가 거의 없어지므로 마크다운으로 글을 작성하는 것이 매우 편리하게 느껴질 것이다.

워드프레스에서 사용하는 마크다운 문법은 기본적인 마크다운 문법에 유용한 기능들이 조금 더 추가되어 있는 것이다. 따라서 원래 마크다운 문법을 알고 있더라도 다음 링크를 참조해서 워드프레스에서 제공하는 마크다운 문법을 숙지하는 것이 좋을 것이다.

WordPress.com에서 마크다운 기능을 활성화하기

마크다운 기능을 활성화하려면 우선 대시보드로 들어가서 설정 → 쓰기로 들어간다. 그러면 다음 스크린샷처럼 마크다운을 활성화할 수 있는 항목이 있다. 그곳에 체크하면 된다.

Wordpress.com-Enable-Markdown-Writing

댓글에서도 마크다운을 사용할 수 있는데, 그러려면 추가적인 설정이 필요하다. 역시 설정 → 토론으로 들어가서 다음처럼 설정하면 된다.

Wordpress.com-Enable-Markdown-Comment

WordPress.com 에디터에서 마크다운 문법 사용하기

설정에서 마크다운 기능을 활성화 했다면, 글을 쓸 때 마크다운을 사용하는 법은 매우 간단하다. “새 글 쓰기”버튼을 눌러서 에디터창으로 들어가서 마크다운 문법을 사용해서 글을 작성하면 된다. 원래 에디터 우측 상단에 있는 “Text” 버튼을 누르면 HTML 태그를 이용해서 글을 쓸 수가 있는데, 마크다운으로 글을 쓰면 “비주얼”모드로 글을 작성하든, “Text”모드로 글을 작성하는 보여지는 것은 똑같다. 다만 이미지를 삽입하거나 할 때 직접 주소가 뜨는 것이 마크다운으로 편집하기 편하기 때문에, “Text”모드를 사용하는 것이 여러모로 편하다.
Wordpress.com-Editor-Text

하지만 워드프레스의 에디터에서 마크다운으로 글을 작성하는 것이 아직까지는 좀 불편하다. 우선 앞에서 설명한 대로 마크다운으로 글을 작성하면, 글이 어떻게 보일지 확인하는 것이 힘들다. HTML로 글을 작성한다면, 비주얼 모드를 통해서 쉽게 글이 실제로 어떻게 보이는 지 볼 수 있지만, 마크다운으로 글을 쓰면, 임시글로 저장 후 미리보기로 봐야 글이 실제로 어떻게 보일지를 알 수 있다.

또한 이미지 삽입이나, 링크 삽입등이 모두 기존 에디터에 맞춰져 있다. 따라서 툴바를 통해서 이미지를 삽입하거나 링크를 삽입하는 것이 꽤 불편하다. 예를 들어 툴바를 통해 이미지를 삽입하면, 마크다운 문법인 ![Alt](이미지 주소) 형태로 이미지가 삽입되는 것이 아니라. HTML 태그인 <img src="이미지 주소" alt="" /> 와 같은 형태로 이미지가 삽입된다.
마크다운은 기본적으로 HTML과 혼용해서 쓸 수 있도록 설계되어 있지만, 그래도 좀 아쉬운 부분이다. 하지만 이제 처음으로 지원하는 것이니만큼 부족한 점이 있는 것은 당연할 것이다. WordPress.com은 쉬지않고 꾸준히 개발을 이어나가고 있으므로, 시간이 지나면서 더욱 더 편하게 마크다운을 쓸 수 있게 되기를 기대해본다.