관련 기사 표시하기

사이트 내 체류 시간을 늘리기 위해 표시 중인 기사와 관련된 기사로 이동할 수 있는 링크를 준비하는 것이 효과적이다. 따라서 ‘Yet Another Related Posts Plugin’이라는 플러그인을 이용해서 기사의 개별 페이지에 관련 기사(관련 글)을 표시한다.

  1. Yet Another Related Posts Plugin 플러그인 이용하기
    관련 기사를 표시하기 위해 서 ‘Yet Another Related Posts Plugin’이라는 플러그인을 설치하고 활성화한다.
  2. 관련 기사의 표시 확인하기
    개별 페이지를 열어 확인해 본다. 점수에 관한 설정은 ‘관련 옵션’에서 설정한다.
  3. 관련 기사의 자동 표시를 오프로 하기
    관련 기사 출력 장소를 변경하기 위해 [설정]-[관련 글(YARPP)]]을 선택하고 ‘당신의 사이트를 위해 옵션을 표시합니다’에서 ‘관련 글을 자동으로 표시하시겠습니까?’의 체크를 해제한다. 변경사항을 저장한다.
  4. 관련 기사 출력 지정하기
    자동 표시를 끄면 관련 기사의 출력을 템플릿 태그로 지정할 수 있다. content-single.php를 열고 관련 기사를 표시하고 싶은 장소에 <?php related_posts(); ?>를 추가한다. 포스트 작성일 아래에 표시하기 위해 <p class=”postinfo”>~</p> 아래에 추가한다. 또한 플러그인을 비활성화하면 <?php related_posts(); ?>가 적용되지 않기 때문에 에러가 난다. 따라서 <?php if(function_exixts(related_posts()):  ?>~<?php endif; ?> 사이에 입력해서 플러그인이 활성화된 경우에만 출력되도록 지정한다.
  5. 관련 기사를 <div>로 마크업하기
    관련 기사를 <div class=”related”><p>Related posts:</p><ol>~</ol></div>로 마크업해서 스타일시트에 디자인을 지정한다. [설정]~[관련 글(YARPP)]을 선택해서 ‘당신의 사이트를 위해 옵션을 표시합니다’에서 ‘전/후 관련 글’의 값을 변경한다. 여기에서는 시작 태그와 종료 태그를 위와 같이 지정한 후 저장한다.
  6. 관련 기사의 디자인 지정하기
    관련 기사의 디자인 설정을 sytle.css에 추가한다.
  7. 관련 기사가 없는 경우의 출력 지정하기
    관련 기사가 없는 경우에는 기본적으로 ‘No related posts’라고 출력되지만 여기에서는 아무것도 출력되지 않도록 한다. [설정]~[관련 글(YARPP)]을 선택해서 ‘당신의 사이트를 위해 옵션을 표시합니다’ 항목에서 ‘만약 결과가 없으면  기본 표시’의 값을 삭제한 후 변경사항을 저장한다.

content-single.php

<div class=”post”>
(생략)

<p class=”postinfo”>

<?php echo get_the_date(); ?>
</p>

<?php if(function_exists(‘related_posts’)): ?>
<?php related_posts(); ?>
<?php endif; ?>

</div>

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

“관련 기사 표시하기”에 대한 한개의 댓글

답글 남기기