카테고리 보관물: Wordpress

워드프레스 twentytwelve 테마 첫페이지에 글 일부만 나오도록 설정

얼마전부터 블로그에 깔끔의 미를 자랑하는 twentytwelve를 사용하고 있다. 그런데 그동안 불편하다고 느꼈던 것이 블로그 첫페이지에서 글의 전부가 다 출력되어서 쓸데없이 스크롤이 길어지고 한눈에 최근글을 보기가 힘들었다.

물론 블로그를 방문하는 사람들은 대부분 검색 유입이다보니 첫페이지를 볼 일이 그다지 많지는 않겠지만, 그전에 다른 블로그 서비스를 이용할때도 최신글의 일부와 썸네일이 출력되는 스타일에 익숙하다보니 불편하게 느껴졌다.

몇번 단순히 첫페이지에 글의 일부를 출력하는 방법을 찾았을때는 대부분의 tip이 테마의 index.php 등을 열어서 the_content()라는 코드를 the_excerpt()로 고치라는 것이 대부분이었는데, 이상하게도 이 테마의 php 파일을 열어보면 이미 그 부분이 the_excerpt() 라고 되어있어서 문제를 알수가 없었다. 그러던 와중에 이 글을 발견!!

screenshot
깔끔함을 자랑하는 공식 테마 중 하나 twentytwelve

*Display Excerpts in Twenty Twelve Theme (댓글이 114개나 달려있는걸 보니 나처럼 어려움을 겪고 있는 워드프레스 초보들이 많았던 모양)

영어로 쓰여있는 글이라 간략하게 요약하자면,

1. content.php 파일을 열어서 33번째 줄을 찾는다.

<?php if ( is_search() ) : // Only display Excerpts for Search ?>

원래는 검색시에만 일부를 출력하게 되어있는 것을 다음과 같이 고친다.

<?php if ( is_search() || is_home() ) : // Display Excerpts for Search and Homepage ?>

 

2. 썸네일을 140×140 사이즈로 리사이징하는 코드를 functions.php에 아래와 같이 추가한다.

<?php

// Add 140x140 image size 
add_image_size('excerpt-thumbnail', 140, 140, true);

 

3. 썸네일을 출력하는 코드를 content.php에 추가한다.

<div class="entry-summary">

34번째줄에 있는 위 코드 아래에 다음과 같이 추가.

    <!-- Adds the 140x140 thumbnail/featured image -->
        <div class="excerpt-thumb">
            <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
            <?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>
            </a>
        </div>

여기까지 하고 나면 첫페이지에 대표이미지로 설정된 이미지가 글 제목 위에 나오는 것을 볼 수 있는데 이것을 출력하도록 되어있는 코드를 삭제해야함. (content.php의 18번째줄의 아래 코드를 삭제)

<?php the_post_thumbnail(); ?>

 

4. 글이 짤린 부분에 […] 대신에 링크된 Continue Reading로 변경하기. functions.php에 아래의 코드를 추가해준다.

// Remove the ... from excerpt and change the text
function change_excerpt_more()
{
  function new_excerpt_more($more)
    {
    // Use .read-more to style the link
      return '<span class="continue-reading"> <a href="' . get_permalink($post->ID) . '">Continue Reading »</a></span>';
    }
  add_filter('excerpt_more', 'new_excerpt_more');
}
add_action('after_setup_theme', 'change_excerpt_more');

팁을 올려주신 블로거님께 땡큐베리감사!

 

*추가Tip

첫페이지 뿐만 아니라 Tag, Category, Archive 페이지에서도 동일하게 글의 일부만 발췌해서 출력하려면 위에서 고쳤던 contents.php의 33번째 줄에 몇가지 코드를 더 추가해주면 된다.

<?php if ( is_search() || is_home() || is_tag() || is_archive() || is_category() ) : // Display Excerpts for Search, Homepage, Tag, Category and Archive ?>