JetPack Related Posts Plugin

[워드프레스] 관련 글(Related Posts) 표시하기

개요

테마에 따라 단일 글 하단에 관련 글 목록을 표시하는 기능이 제공됩니다. 하지만 현재 이 블로그에 사용 중인 테마는 Pluto라는 테마인데, 이 기능을 찾을 수가 없네요. 사용 중인 테마에 Related Posts 관련 기능이 있는지는 테마 옵션에서 확인이 가능합니다.

Related Posts 플러그인

“관련 글”을 표시하는 기능이 없는 경우 플러그인을 사용하면 간단히 관련 글을 표시할 수 있습니다. 이런 플러그인으로 Contextual Related Posts, Related Posts for WordPress, Yuzo – Related Posts, Inline Related Posts 등 다양한 무료 플러그인이 있습니다. 2년 전에만 해도 마음에 드는 무료 플러그인이 별로 없었지만 요즘에는 괜찮은 플러그인도 간혹 있는 것 같습니다.

보다 정교한 기능과 깔끔한 레이아웃을 원하는 경우에는 유료 플러그인을 고려할 수 있습니다. Related Posts Pro for WordPress, WordPress Thumby Related Posts Widget 등이 사용자 평가가 괜찮은 유료 플러그인입니다.

JetPack(젯팩)의 Related Posts 플러그인

JetPack이 설치되어 있다면 별도의 플러그인을 설치할 필요 없이 JetPack > Settings(설정) 아래에서 Related Posts 플러그인을 활성화하면 됩니다. 그런 다음 설정 > 읽기에서 Related Posts 관련 설정을 할 수 있습니다.

JetPack Related Posts Plugin

별도의 플러그인을 설치하지 않고도 JetPack 내의 기능만으로 훌륭한 Related Posts 기능을 사용할 수 있습니다. 참고로 JetPack은 유용한 기능을 많이 제공하지만 무거운 플러그인입니다. 사이트에 많은 부담을 줄 수 있습니다. 그래서 저는 이 블로그에서는 JetPack을 삭제했습니다. 대신 다른 사이트에 JetPack을 설치하여 사용하고 있는데, 이 기능을 활성화했지만 제대로 표시가 되지 않네요. 약간의 검색을 통해 Minify 플러그인이 설치되어 있으면 이 기능이 제대로 작동하지 않는 것 같습니다. 어쩌면 캐시 플러그인과도 관계가 있을 것 같고요.

사용자 코드 만들기

플러그인을 사용하면 편리하고 간편하지만, 플러그인을 많이 사용하는 것은 사이트 속도에 악영향을 미치고 다른 플러그인이나 테마 등과의 충돌 문제도 발생할 수 있으므로 플러그인은 꼭 필요한 기능에 대해서만 사용하는 것이 바람직합니다.

인터넷에서 Related Posts 코드를 쉽게 검색할 수 있습니다. 그런 코드 중에서 마음에 드는 코드를 가지고 테마에 맞게 적당히 수정하여 나만의 “관련 글”을 만들 수 있습니다. 저는 이 글에 나와 있는 코드를 응용하여 개별 글 하단에 “Related Posts”를 표시했습니다.

Customized Related Posts

2%(어쩌면 20%) 부족한 느낌이 나지만 나름대로 어울리는 것 같습니다. CSS를 통해 세부적으로 레이아웃을 조정해줄 수 있습니다. elegantthemes 글에 나와 있는 코드를 약간 변경하여 포스트를 3개를 표시하도록 하고, 화면이 줄면 가로로 2개, 모바일에서는 세로로 2개가 표시하도록 조정했습니다. 이와 관련된 자세한 내용은 CSS media query(미디어 쿼리)를 참고해보시기 바랍니다.

그리고 array 부분에 ‘orderby’=>’rand’을 추가하여 글이 랜덤하게 표시되도록 바꾸었습니다. 그래서 수정된 부분만 여기에 적어보면:

foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>3, // 3으로 수정함
'caller_get_posts'=>1,
'orderby'=>'rand' // 추가됨
);

위와 같이 ‘orderby’=>’rand’를 추가했고 posts_per_page(페이지당 포스트 수)를 3으로 변경했습니다. 그리고 썸네일은 테마에 미리 정의되어 있는 썸네일을 사용했습니다.

the_post_thumbnail(array(150,100));

위 부분을 아래와 같이 미리 정의되어 있는 썸네일 이름으로 대체했습니다. 테마에 적당한 크기의 썸네일이 정의되어 있다면 그것을 그대로 사용하면 좋습니다. 아니면 다음과 같이 썸네일 크기를 직접 정의해주어도 됩니다.

function my_custom_thumbs()
{
add_image_size( 'related-post-medium', 200, 150, true );
}
add_action( 'after_setup_theme', 'my_custom_thumbs' );

위의 코드를 테마의 함수 파일에 추가하고 the_post_thumbnail(array(150,100)); 부분은 아래와 같이 수정하면 됩니다. (이 부분에 대한 내용은 이 글을 참고해보시면 도움이 됩니다.)

the_post_thumbnail('related-post-medium');

그리고 최종 코드를 single.php 또는 content.php 파일 등 적당한 파일을 찾아서 원하는 위치에 추가한 다음, CSS를 사용하여 레이아웃을 조정해주도록 합니다.

상황에 따라 적당한 방법으로 개별 글 하단에 관련 글(Related Posts)을 표시할 수 있습니다. 직접 코드를 만들어 추가하는 경우 사이트에 가장 적은 부담이 되어 속도면에서 유리합니다. 그리고 성취감도 느낄 수 있을 것입니다. 다음 글에서는 사이드바에 Featured Posts 위젯을 만들어 추가하는 방법을 설명해볼 예정입니다.



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.