베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

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

Last Updated: 2017년 1월 10일 | 8개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

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

워드프레스 4.7 버전에서는 2017년도 기본 테마인 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 -->

위의 부분을 아래와 같이 수정하도록 합니다.

<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 테마에서 전체 글 대신 요약문 표시하기 2

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

참고:



8 개 댓글

Leave a Comment

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

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

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

    응답
    • 안녕하세요?

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

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

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

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

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

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

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

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

    • 안녕하세요?

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

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

      응답