[워드프레스] Twenty Fourteen 테마의 홈페이지/카테고리 페이지/검색 페이지에 요약글 표시하기

Last Updated: 2016년 01월 24일 댓글

워드프레스에 기본적으로 제공되는 테마 중 하나인 Twenty Fourteen은 특이한 형식으로 많은 사람들이 선호하는 것 같습니다. 개인적으로는 이런 형식은 별로 선호하지 않지만, Twenty Fourteen의 기본적인 레이아웃을 수정하고 컬러 등 여러 요소를 변경하면 나름대로 괜찮은 결과를 얻을 수 있을 것으로 생각됩니다.

Twenty Fourteen을 설치해보면 홈 페이지(전면 페이지)나 카테고리 페이지에 글 전체가 표시됩니다. 글 전체를 표시하는 대신 요약문(Excerpt)를 표시하려는 경우:

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

<?php if ( is_search() ) : ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php
the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyfourteen' ) );
wp_link_pages( array(
'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>',
'after'       => '</div>',
'link_before' => '<span>',
'link_after'  => '</span>',
) );
?>
</div><!-- .entry-content -->
<?php endif; ?>

위 부분을 다음 코드로 바꾸도록 합니다.

<?php if ( is_single() ) : // Only display full content for Single page ?>
<div class="entry-content">
<?php
the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyfourteen' ) );
wp_link_pages( array(
'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>',
'after'       => '</div>',
'link_before' => '<span>',
'link_after'  => '</span>',
) );
?>
</div><!-- .entry-content -->
<?php else : ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php endif; ?>

그러면 카테고리 페이지나 전면 페이지(블로그 아카이브 페이지)에 글 전체가 아닌 요약글이 표시됩니다. (요약글 길이를 조정하는 방법은 여기를 참고하세요.)

하지만 모바일에서는 요약문 부분(혹은 글 전체 부분)이 표시되지 않습니다. 그 이유는 entry-summary 요소가 모바일에서 표시되지 않도록 display:none 속성이 적용되어 있어서 그렇습니다. 스타일시트 파일에 다음 라인을 추가하면 모바일에서도 요약문이 표시될 것입니다.

@media screen and (max-width: 400px) {
.entry-summary {
display: inline!important;
}
}

참고로 이런 작업을 하는 경우 차일드 테마(자식 테마)를 만들어서 하는 것이 좋습니다. 그렇지 않으면 테마를 업데이트하면 변경 사항이 사라지게 됩니다.

이외에 Twenty Fourteen에서 설치할 만한 전용 테마로 Fourteen Extended라는 플러그인이 있습니다. Beta 테스트 버전이지만 이 플러그인을 사용하여 레이아웃을 어느 정도 조정할 수 있습니다. 이 플러그인을 설치하면 외모 > 사용자 정의하기 아래에 레이아웃을 조정할 수 있는 (예: 컨텐츠 영역 너비 조정, 왼쪽 사이드바 제거 등) 몇 가지 옵션이 추가됩니다.

Twenty Fourteen Extended

그리고 Fourteen Colors라는 플러그인도 유용하게 사용할 수 있습니다. 이 플러그인을 설치하면 배경색을 조정할 수 있습니다.

Fourteen Colors Plugin

참고:

 


댓글 남기기

Leave a Comment