[워드프레스] 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 -->

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

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

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

업데이트: 코드 개선

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

<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 -->

참고:


8개 댓글

  1. 도움 받고 갑니다.
    코드 중에 wp_link_pages() 호출 부분은 중복이라서 if-else 구문 밖으로(아래로) 빼도 될 것 같네요.
    감사합니다.

  2. 아.. 특성이미지 설정을 해주니 썸네일이 보이네요 ^^;

    그런데 특성이미지를 설정하면, 해당 이미지가 제목 상단부에 너무 크게
    노출이 됩니다 ㅜㅜ 게시글에 아주 큰 사이즈의 이미지가.. 안보이게 하는 방법은 없을까요?

    1. 안녕하세요?

      Customizer를 살펴보니 별도로 Featured Image를 제어하는 옵션은 없네요.

      이 경우 CSS를 통해 없애거나 직접 소스를 수정해야 합니다.

      다음 CSS 코드를 추가해보시기 바랍니다.
      .single-featured-image-header,
      .home .post-thumbnail {
      display: none;
      }

      차일드 테마를 만든 경우 차일드 테마 폴더 내의 style.css에 추가하여 테스트해보시겠어요?

      1. 설명을 너무 잘해주셔서, 차일드 테마는 플러그인을 만들어서 잘 설치했습니다 ^^

        그리고 차일드 테마에 CSS 코드를 붙여넣기 했는데
        메인화면의 썸네일까지 가려지더라구요~
        저는 본문의 특성이미지만 보이지 않게 하고 싶었거든요!

        그래서 알려주신 CSS 코드에서
        .home .post-thumnail. 부분만 삭제하고 사용했더니
        메인화면에서는 썸네일이 보여지고,
        본문에서는 특성이미지가 가려졌습니다~

        아무것도 모르고 시작하는 워드프레스라서 걱정이 많이 되고
        어려운 부분도 많았는데 사이트 통해서 많은 도움 받고 있습니다
        감사합니다! ^^

  3. 알려주신 대로 잘 사용했습니다!
    그런데 저는 썸네일이 보이지 않는데.. 어떻게 설정해줘야 썸네일까지 볼 수 있을까요?

    1. 안녕하세요?

      이상하게 이 댓글은 눈에 띄지 않아 답장이 늦었습니다.
      위의 글을 업데이트했습니다.

      P.S. 아... 위에 따로 댓글을 달으셨네요. 아침부터 제가 정신이 없네요.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.