기사의 제목과 요약문 표시하기

기사의 본문 대신에 요약문(개요)을 표시하면 여러 목록을 간단명료하게 표시할 수 있고 기사의 대략적인 내용도 전달할 수 있다. 여기에서는 카테고리 페이지에 기사의 제목과 요약문을 목록으로 작성해서 표시한다. 별도의 템플릿으로 작성한다.

  1. 기사를 요약한 내용 입력하기
    기사의 요약문은 편집화면에서 입력할 수 있다. 모든 기사의 요약문을 입력할 필요는 없다.
  2. WP Multibyte Patch 플러그인 활성화하기
    ‘요약’을 입력하지 않은 기사의 경우 본문의 일부가 추출되어 표시된다. 단, 본문을 한글로 입력할 경우 제대로 추출되지 않는 문제가 발생한다. 이런 문제를 해결하기 위해 WP Multibyte Patch 플러그인을 설치한 후 활성화한다.
  3. 사용자정의 파트 템플릿 작성하기
    카테고리 페이지는 content.php를 이용해서 기사의 내용을 표시하기 때문에 톱페이지와 마찬가지로 기사의 제목과 본문이 목록으로 표시된다. 이것을 기사의 제목과 요약문으로 표시되도록 사용자정의로 지정한다. 따라서 content-excertpt.php라는 새로운 사용자정의 파트 템플릿을 작성해서 테마 폴더로 업로드한다.
    또한 content-excertpt.php는 기사의 제목과 본문을 출력하는 content.php를 기초로 작성하기 때문에 content.php의 소스를 모두 복사해 둔다.
  4. 사용자정의 파트 템플릿 로딩하기
    카테고리 페이지를 생성하는 category.php를 열고 content.php 대신에 content-excertpt.php를 로딩하도록 지정한다. <?php get_template_part(); ?>의 파라미터에 excerpt를 추가해서 ‘content’, ‘excertp’라고 지정한다. 이렇게 수정하면 content-excertpt.php가 로딩되지만, 단지 content.php의 소스를 복사한 상태이기 때문에 카테고리 페이지의 표시는 변하지 않는다.
  5. 기사의 요약문 표시하기
    content-excertpt.php를 열고 기사의 요약문을 표시하도록 지정한다. 본문을 출력하는 <?php the_content(); ?>를 <?php the_excerpt(); ?>로 수정하면 요약문이 출력된다. 여기에서는 특성 이미지를 출력하는 <?php the_post_thumbnail(); ?>도 삭제한다.
  6. 생략기호 변경하기
    기사 편집화면에서 요약을 입력하지 않은 기사를 확인하면 문장 끝에 […]라는 기호가 삽입되어 있다. 이것은 본문의 일부를 추출했기 때문에 문장이 전부 표시되지 않았다는 것을 의미한다. 이 기호를 …로 변경하기 위해 function.php에 설정을 추가한다. (생략 기호가 제대로 표시되지 않는 경우 아래의 ‘TIP. 요약문의 글자 수 지정하기’를 참조하기 바란다.)
  7. ‘계속 보기’ 링크 추가하기
    요약문 아래에 ‘계속 보기’ 링크를 표시하고 기사의 개별 페이지로 이동할 수 있도록 한다. content-excerpt.php를 열고 <?php the_excerpt(); ?> 다음에 링크 설정을 추가한다. 이때 개별 페이지의 URL은 <?php the_permalink(); ?>로 출력한다. 또한 스타일시트에서 디자인을 하기 쉽도록 <p class=”more”>~</p>로 마크업한다.
  8. ‘계속 보기’ 링크의 디자인 지정하기
    ‘계속 보기’ 링크의 디자인을 지정해서 회색 사각형 모양의 선으로 표시한다.

->TIPS 요약문 끝에 줄 바꿈을 넣지 않고 링크 추가하기

기사의 요약문은 <?php the_excerpt(); ?>를 이용해서 <p>~</p>로 마크업해서 출력된다. 따라서 예제와 같은 형태로 ‘계속 보기’ 링크를 추가한 경우 링크는 <p>~</p>의 바깥쪽에 추가되기 때문에 요약과 링크 사이에는 반드시 줄 바꿈이 들어간다. <p>~</p>의 안쪽에 링크를 추가해서 줄 바꿈을 넣지 않고 표시하기 위해서는 앞의 7.8 설정 대신 function.php에 다음과 같이 설정을 추가한다.
이렇게 수정하면 요약의 <p>~</p> 사이에 링크가 추가되고 줄 바꿈 없이 요약문 뒤에 표시된다. 추가한 링크으 글꼴 크기를 한 포인트 작게 하기 위해 다음과 같이 스타일시트를 지정한다.

->MEMO

이 과정에서 오류 표시가 나면 function.php의 소스 중에서 get_permalink($post->ID) 부분을 get_permalink()로 수정한다.

->TIPS 요약문 글자 수 지정하기

기사의 본문으로부터 요약문을 자동 생성하는 경우 WP Multibyte Patch 플러그인은 110문자를 추출한다. 이 문자 수를 변경하기 위해서는 function.php에 설정을 추가한다. 여기에서는 30문자를 추출하도록 지정한다.

기사의 요약문을 확인하면 본문으로부터 30문자가 추출되어 표시된다. WP Multibyte Patch 플러그인을 비활성화시키면 문자 수가 제대로 추출되지 않는다.(WP Multibyte Patch 플러그인은 일본어를 기준으로 만들어진 플러그인이기 때문에 한글로 작성된 요약문을 추출할 때 설정 값을 표준보다 적은 값으로 지정한다. 예를 들어 return 30;을 return 15;로 지정한다.

사용자정의 파트 템플릿 로딩하기

category.php

<?php get_header(); ?>

<!– 콘텐츠 –>
<div id=”content”>
<p class=”title”><?php single_cat_title(); ?></p>

<?php if(have_posts()): while(have_posts()):
the_post(); ?>
<?php get_template_part(‘content’,‘excerpt’​); ?>
<?php endwhile; endif; ?>

<?php get_template_part(‘pagenation’); ?>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

content-excerpt.php

기사의 요약문 표시하기

변경전

<div class=”post”>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<p class=”postcat”><?php the_category(‘ ‘); ?></p>

<?php the_post_thumbnail(); ?>
<?php the_content(); ?>

<p class=”more”><a href=”<?php the_permalink(); ?>”>계속 보기</a></p>

<p class=”postinfo”>
<?php echo get_the_date(); ?>
</p>
</div>

변경 후

<div class=”post”>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<p class=”postcat”><?php the_category(‘ ‘); ?></p>

<?php the_excerpt(); ?>

<p class=”more”><a href=”<?php the_permalink(); ?>”>계속 보기</a></p>

<p class=”postinfo”>
<?php echo get_the_date(); ?>
</p>
</div>

‘계속 보기’ 링크 추가하기

<div class=”post”>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<p class=”postcat”><?php the_category(‘ ‘); ?></p><?php the_excerpt(); ?>

<p class=”more”><a href=”<?php the_permalink(); ?>”>계속 보기</a></p>

<p class=”postinfo”>
<?php echo get_the_date(); ?>
</p>
</div>

생략 기호 변경하기

function.php

<?php

(생략)

//요약의 생략기호
function my_excerpt_more($more) {
return ‘…’;
}
add_filter(‘excerpt_more’, ‘my_excerpt_more’);

?>

function.php

요약문 끝에 줄 바꿈을 넣지 않고 링크 추가하기, 요약문의 글자 수 지정하기

<?php

(생략)

//요약문 끝에 ‘계속 보기’ 링크를 추가
function my_more_link($excerpt) {
return $excerpt . ‘ <a href=”‘. get_permalink($post->ID) . ‘” class=”more”>[계속 보기]</a>’;
}
add_filter(‘wp_trim_excerpt’, ‘my_more_link’);
//요약문의 글자수
function my_excerpt_mblength($length) {
return 30;
}
add_filter(‘excerpt_mblength’, ‘my_excerpt_mblength’);

?>

출처: 바꾸면서 배우는 워드프레스 디자인

답글 남기기