사이드바 포스트 목록 위젯에서 제목 길이 조정하기

워드프레스 사이드바는 주로 위젯(widget) 영역이죠. 워드프레스에서는 각종 위젯을 사용하여 사이드바를 구성하는 게 일반적인데요. 이때 위젯 중에서도 가장 많이 사용하는 위젯이 아마도 글 목록을 표시하는 위젯일 것입니다. “최신 글”이나 “인기 글” 같은 글 목록은 사이드바에 추가되는 단골 위젯이죠.

글목록 숏코드

사이드바에 위젯을 추가할 때 흔히 사용하는 방법 중에 숏코드를 쓰는 방법이 있습니다. Display Posts 같은 플러그인이 대표적인 예죠.

Display Posts는 저희 WordPress 가이드에서도 몇 번 소개해 드린 적이 있는데요.

페이지에 포스트 목록 추가하기

카테고리별 포스트 목록 보여주기

오늘은 이 위젯의 출력 내용을 변경하는 방법에 대해 소개하려 합니다. 특히 글 제목의 글자수를 조정하는 방법을 다뤄 보겠습니다.

“최근 글” 위젯

아래 그림에서 보면 우측 사이바 영역에 “최근 글” 위젯이 보입니다. 이 부분은 Display Posts 숏코드를 사용하여 표시한 것인데요.

아래와 같이 텍스트 위젯 속에 숏코드를 넣어 표시하는 방법을 사용했습니다.

Display Posts는 아주 간단한 플러그인이지만 완성도가 상당히 높은 숏코드 플러그인으로 자체 홈페이지에서 자세한 문서도 제공하고 있죠. 그래서 홈페이지에 나온 문서와 튜토리얼만 따라하면 왠만한 문제는 다 해결됩니다.

제목 글자수 변경하기

여기서 우리는 “최근 글” 위젯에 표시된 글 제목의 글자수를 변경하려고 합니다. 더 정확하게는 글자 수가 너무 긴 제목의 경우 문자열의 일정 부분에서 글자수를 잘라 버리고 나머지는 “…” 문자를 뒤에 붙여 마무리하려구요.

Display Posts 문서를 이리저리 뒤져 봅니다. 어디 “title_length” 같은 속성값이 있나 뒤져 보지만 아무래도 없는 것 같습니다. 아쉽게도 마땅한 숏코드 속성값을 찾을 수가 없군요.

이럴 땐 어떻게 해야 할까요?

아웃풋 필터(Output Filter)

정말로 없을까요? 아닙니다. 없는 게 아니라 못찾은 겁니다. Display Posts 문서에 보면 “The Output Filter”라는 문서가 있습니다. 이 문서를 보면 제목의 글자수를 조정할 수 있는 방법이 있을 것도 같네요.

Display Posts는 위젯에 출력되는 최종 출력값을 조정할 수 있는 display_posts_shortcode_output 이라는 필터를 제공합니다.

이 필터를 사용하여 제목의 글자수를 한번 조정해 보겠습니다. 다음과 같이 말이죠.

function my_dps_output( $output, $original_atts, $image, $title, $date, $excerpt, $inner_wrapper, $content, $class, $author, $category_display_text ) {
    preg_match( '/(<a.+?>)(.*?)(<\/a>)/', $title, $matches);
    $title = $matches[1] . mb_substr($matches[2], 0, 10) . '...' . $matches[3];
    $output = '<' . $inner_wrapper . ' class="' . implode( ' ', $class ) . '">' . $image . $title . $date . $author . $category_display_text . $excerpt . $content . '</' . $inner_wrapper . '>';
  return $output;
}
add_filter( 'display_posts_shortcode_output', 'my_dps_output', 10, 11 );

조금 복잡해 보이나요? 별거 아닙니다. 그냥 제목 태그($title)를 가져와서 제목 길이를 줄인 다음 다시 붙여 넣는 코드입니다. mb_substr($matches[2], 0, 10) 부분에서 길이를 조정하니, 여기서 원하는 길이로 바꾸면 됩니다.

위 코드를 테마의 functions.php 파일 같은 곳에 두면 이제 위젯의 글자수가 조정된 것을 확인할 수 있습니다. (여기서는 글자수를 10글자로 제한했습니다만 글자수는 원하는 대로 변경하면 됩니다)

물론 이 방법 말고도 Display Posts에는 Template Parts 라는 기능을 제공하며, 이 기능을 활용해도 가능합니다만, 굳이 “닭 잡는 데 소 잡는 칼” 쓸 일은 없을 듯 하여 생략합니다. 관심있는 분들은 한번씩들 도전해 보시길 바랍니다.

CSS 스타일링

굳이 이렇게 코드를 추가하는 방법 말고는 없냐구요? 아! 물론 있습니다. CSS 스타일로 길이를 조정하는 방법입니다.

CSS의 text-overflow 속성값을 적용하면 텍스트 문자열을 줄임말로 표시할 수 있습니다.

.display-posts-listing li {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

아래는 위 CSS 코드를 적용한 위젯입니다.

어라? 이렇게 간단한 방법 놔두고 지금껏 왜 굳이 그렇게 ‘먼길’을 돌아 왔냐구요? 글쎄요. 경우에 따라서는 돌아왔던 그 길이 좀더 도움이 되는 길일 수도 있음을 나중에 알게 될 때도 있지 않을까요? 정도로만 해두죠! 🙂