[워드프레스] Twenty Sixteen 테마 - 전체 글 내용 대신 요약문 표시하기

워드프레스의 2016년도 테마인 Twenty Sixteen은 무난한 레이아웃을 보여줍니다. 별다른 커스터마이징 없이 활용해도 괜찮은 블로그를 만들 수 있을 것 같습니다. 물론 커스터마이징을 통해 다양하게 활용이 가능하겠죠?

Twenty Sixteen 테마를 활용한 몇 가지 사이트입니다.

• Shakespeare Confidential
• YINKABOKINNI
• Three Hour Brunch Friend

Twenty Sixteen 테마의 블로그 페이지의 경우 요약문(Excerpt) 대신 전체 글 내용이 표시됩니다. 글이 긴 경우 블로그 페이지(혹은 전면 페이지)가 너무 길어져 방문자들이 글을 읽기가 쉽지 않을 것입니다.

Twenty Sixteen 테마의 아카이브 페이지(블로그 페이지, 카테고리 페이지 등)에서 개별 글의 전체 글 내용이 아닌 요약문만 표시하려면 다음과 같이 template-parts 폴더 내의 content.php 파일을 수정하면 됩니다.

content.php 파일에서 다음 부분을 찾습니다.

위의 내용을 다음 코드로 바꿉니다. 

<div class="entry-content">
<?php
if ( is_single() ) :
/* translators: %s: Name of current post */
the_content( sprintf(
__( 'Continue reading %s', 'twentysixteen' ),
the_title( '<span class="screen-reader-text">', '</span>', false )
) );

wp_link_pages( array(
'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
'after'       => '</div>',
'link_before' => '<span>',
'link_after'  => '</span>',
'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
'separator'   => '<span class="screen-reader-text">, </span>',
) );
else :

/* translators: %s: Name of current post */
the_excerpt( sprintf(
__( 'Continue reading %s', 'twentysixteen' ),
the_title( '<span class="screen-reader-text">', '</span>', false )
) );

wp_link_pages( array(
'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
'after'       => '</div>',
'link_before' => '<span>',
'link_after'  => '</span>',
'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
'separator'   => '<span class="screen-reader-text">, </span>',
) );
endif;
?>
</div><!-- .entry-content -->
// Reference: matrudev.com

그러면 다음과 같이 홈페이지(최신 글 표시 시), 블로그 페이지, 카테고리 페이지 등에 요약문이 표시됩니다.

썸네일(특성 이미지)이 지정되어 있으면 제목과 요약글 사이에 썸네일이 표시됩니다. 만약 썸네일의 폭이 100%가 아닌 경우에는 다음 CSS 코드를 사용하도록 합니다.

img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
width: 100%;
}

위의 그림에서 요약글의 길이를 조정하려는 경우에는 이 글을 참고해보시기 바랍니다.

참고:

• Attitude 테마로 워드프레스 무작정 시작하기
• Twenty Fourteen 테마 커스터마이징 — 헤더/푸터/사이드바 배경색 변경하기
• Twenty Fourteen 테마의 홈페이지/카테고리 페이지/검색 페이지에 요약글 표시하기