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

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

Advertisements
wordpress 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의 서포트 페이지를 확인해보자.

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

  1. 멋진 포스트입니다.^^ Loop 기능에 CSS 정의가 불가한 것이 조금 아쉽죠.
    Display Posts Shortcode에 Custom CSS 정의 꼼수가 없을까 하고 한참 연구(?) 한 적이 있는데 실패했습니다.
    단지 블록에 대한 css 정의만 가능한 정도라는 것으로 결론지었는데, Loop만 아니라면 CSS 정의도 일정 부분 가능한 것 같습니다.
    템플릿이 가능하니 CSS 불러와서 사용하는 방법도 활용방안의 하나가 될 것 같습니다.

    1. 우선 방문해주셔서 감사합니다. ^^
      Wordpress.com 블로그는 커스터마이징이 상당히 제한적인데, 그나마 이런 방법이라도 있어서 다행이다 싶습니다.
      그래서 css만으로 좀 더 커스터마이징을 할 수 있는 방법이 있을까 고민해봤는데, 제 실력으로는 무리더라구요. WordPress.com 블로그에서도 좀 더 디자인을 다양하게 할 수 있도록 Shortcode에 인수를 더 다양하게 해줬으면 하는 바람이 있습니다.

      ps. 템플릿을 이용해서 css를 불러와서 사용하는 방법도 있나요? 그건 어떻게 해야 하나요?

      1. 특별한 기능이 아니라, 포스트나 페이지에서 글 작성 시 (일반적으로)콘텐츠 입력 영역 아래에 Writing Helper 메타박스가 있을 것입니다. 그것을 이용한다는 것입니다. 별 거 아니에요. ㅎ

        아주 간단한 예를 들어,

        콘텐츠를 나눔고딕 아니면 맑은고딕으로 표현하고 싶다면 Text 모드에서 페이지 또는 포스트 하나를 아래와 같이 작성합니다.

        여기에 글을 등록합니다.

        그리고 제목을 적당히 “한글 폰트 CSS 템플릿”으로 입력하고 저장합니다.

        새로운 글을 작성할 때

        Writing helper 메타박스에서 위의 제목이 있는 페이지 또는 포스트를 선택하여 불러오면 제목과 소스가 그대로 들어오겠죠. 제목은 변경하고 내용은 “여기에 글을 등록합니다.” 부분에 작성합니다.

        폰트를 예로 들었는데, 여러가지 경우가 필요할 때 만들어 불러와서 사용하면 나름의 활용이 되지 않을까 해서요. ^^

      2. 아. 이런 식으로 하면 글에 css를 적용할 수 있겠네요. 몇가지 템플릿을 미리 만들어놓고, 필요할 때마다 불러와서 쓰면 될거구요. 간단하지만 정말 유용한 팁이네요. 감사합니다. ^^

  2. 워드 프레스를 처음 하는 데 글 목록을 만들기 위해 이것 저것보고 있는데
    사용법을 잘 모르겠어요// 활성화를 시키면 대체 어디서 글 목록을 만들수 있다는거죠?

    1. 새 페이지를 만드신 후 원하시는 글목록의 형태를 정하신 후 알맞은 Shortcode를 입력한 후 저장합니다.
      그 후 그 페이지에 들어가면 글목록이 원하시는 형태로 보여질겁니다.
      혹시 글목록이 어떤 모양으로 나오는 지 궁금하시면 제 블로그의 우측 사이드바에 있는 “『Blog』 카테고리 글모음”을 눌러보세요.

      지금 블로그에 들어가보니 설치형 워드프레스군요. 그렇다면 제가 쓴 글의 팁을 이용하기보다는, “List category posts“와 같은 플러그인을 이용하시는 것이 좋을 것 같습니다. 혹시 현재 젯팩을 쓰고 계시고, 추가로 다른 플러그인을 설치하는 것을 싫어하신다면 젯팩에서 “숏코드 임베드” 모듈을 활성화한 다음에 제가 쓴 글의 팁을 이용하셔도 됩니다.

  3. 좋은 정보 정말 감사합니다. 네이버 블로그처럼 글제목만 목록으로 보여주는 기능을 찾아 헤매고 있었습니다. 검색을 해도 대부분 설치형 워드프레스 관련 내용만 나와서… 많은 도움 되었습니다.

  4. 안녕하세요.
    워드프레스를 만들고 있는데, 우측에 카테고리를 선택하면 제가 원하는 모양으로 출력되지 않아서 변경하려고 합니다.
    처음엔 간단하게 list만 나오게 하려고 카테고리 에디트에 들어가봤는데
    내용에 대한 편집은 없고 name, slug, Description 만 있네요. Description 에 숏코드를 넣었더니 숏코드 자체가 나오던데..
    kalkin7님은 카테고리 선택했을 때 포스트들이 나오는 것 같던데, 어떤식으로 변경하셨나요?

    1. WordPress.com에서 우측의 카테고리 또는 글목록 위젯의 항목을 클릭했을 때 포스트 제목만 리스트 형식으로 나오게 하는 것을 불가능합니다.
      전 그래서 그냥 Shortcode를 이용해서 카테고리 별로 글목록 페이지를 만들고 그 페이지들을 메뉴에 등록시키는 식으로 활용중입니다.

  5. 안녕하세요. 덕분에 display posts shortcode를 잘 적용했습니다. 궁금한점 하나는 이 플러그인을 적용했을 때 글제목 앞에 동그란 점이 나오게 하고 싶은데 어떻게 하면 되는지 궁금합니다.(현재 위젯으로 코드를 넣어 사용중입니다)

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중