[워드프레스] Twenty Seventeen 테마에서 전체 글 대신 요약문 표시하기

워드프레스 4.7 버전에서는 2017년도 기본 테마인 Twenty Seventeen이 추가되었습니다. 이 테마는 이전 기본 테마와는 달리 헤더에 이미지나 동영상을 넣을 수 있도록 하여 더욱 동적인 사이트 구축이 가능해졌습니다.

Twenty Seventeen 테마에서 전체 글 대신 요약문을 표시하는 방법

전면 페이지에 최신 글을 표시하는 경우(설정 > 읽기에서 "최근 글" 설정) 글 목록에서 요약문이 표시되는 것이 아니라 전체 글이 표시됩니다. 물론 개별 글마다 "더보기 태그"를 추가하여 요약글이 표시되도록 할 수 있습니다. 하지만 여간 번거로운 일이 아닙니다.

이 경우 /wp-content/themes/twentyseventeen/template-parts/post/ 아래의 content.php 파일에서 다음 부분을 찾도록 합니다.

(이 작업을 하기 전에 반드시 차일드 테마를 만들어서 작업하시기 바랍니다. "원클릭으로 간편하게 차일드 테마 만들기" 글을 참고해보세요. 그리고 이 작업을 위해서는 FTP에 접속해야 합니다. FTP 사용법은 이 글을 참고해보세요. )

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

wp_link_pages( array(
'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
'after'       => '</div>',
'link_before' => '<span class="page-number">',
'link_after'  => '</span>',
) );
?>
</div><!-- .entry-content -->

위의 부분을 아래와 같이 수정하도록 합니다. (※ 2023년 8월 업데이트: 아래의 "업데이트: 코드 개선"의 코드를 사용하시기 바랍니다.)

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

wp_link_pages( array(
'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
'after'       => '</div>',
'link_before' => '<span class="page-number">',
'link_after'  => '</span>',
) );
else :

the_excerpt( sprintf(
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
get_the_title()
) );

wp_link_pages( array(
'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
'after'       => '</div>',
'link_before' => '<span class="page-number">',
'link_after'  => '</span>',
) );
endif;
?>
</div><!-- .entry-content -->

저장하고 사이트를 다시 로드해보면 아래 그림과 같이 요약문이 표시됩니다.

오홋! 썸네일까지 표시되네요. 썸네일이 표시되지 않으면 개별 글에 대하여 "특성 이미지"를 설정해주시면 됩니다(참고). 이상의 간단한 과정을 통해 최근 글 목록에 전체 글 대신 요약문을 표시할 수 있습니다. 요약문 길이를 조정하는 방법은 이 블로그에서 검색해보시면 찾을 수 있습니다.

업데이트: 코드 개선

코드를 개선하고 주석을 추가했습니다.

<div class="entry-content">
  <?php
    // Check if the current view is a single post view
    // 현재 뷰가 단일 포스트 뷰인지 확인
    if ( is_single() ) :

      // Display the full content of the post and add a "Continue reading" label for screen readers
      // 포스트의 전체 내용을 표시하고 스크린 리더용 "계속 읽기" 레이블을 추가
      the_content( sprintf(
        __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
        get_the_title()
      ));

      // If the post content is divided into multiple pages, display the page links
      // 포스트 내용이 여러 페이지로 나뉘어 있다면 페이지 링크를 표시
      wp_link_pages( array(
        'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
        'after'       => '</div>',
        'link_before' => '<span class="page-number">',
        'link_after'  => '</span>',
      ));

    else :

      // If it's not a single post, display the post excerpt
      // 싱글 포스트가 아닌 경우 포스트 요약글 표시
      the_excerpt( sprintf(
        __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
        get_the_title()
      ));

      // If the excerpt content is divided into multiple pages, display the page links
      // 요약글 내용이 여러 페이지로 나뉘어 있는 경우 페이지 링크 표시 (사용되지 않을 가능성이 큼)
      wp_link_pages( array(
        'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
        'after'       => '</div>',
        'link_before' => '<span class="page-number">',
        'link_after'  => '</span>',
      ));

    endif;
  ?>
</div><!-- .entry-content -->

참고:

• Astra 테마 페이지네이션 스타일을 커스터마이징하는 방법
• GeneratePress 테마: 페이지 등에 다른 레이아웃 요소 사용하기
• 초보 블로거에게 클라우드웨이즈(Cloudways)가 괜찮은 선택일까?