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

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

이 글은 오래되어 아래에서 소개하는 방법이 최신 워드프레스 버전에서 작동하지 않을 수 있습니다. 대신 "워드프레스 관련 글 목록 표시하기 (GeneratePress 테마)"에서 소개하는 방법을 이용해보시기 바랍니다.

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 등이 사용자 평가가 괜찮은 유료 플러그인이 있었지만 지금은 업데이트가 안 되고 방치되고 있습니다. 다른 플러그인으로 WordPress Infinite Related Next Post Manager가 있습니다.

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

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

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

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

사용자 코드 만들기

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

인터넷에서 Related Posts 코드를 쉽게 검색할 수 있습니다. 그런 코드 중에서 마음에 드는 코드를 가지고 테마에 맞게 적당히 수정하여 나만의 "관련 글"을 만들 수 있습니다.

이전 테마(Pluto)에서는 Divi 블로그에 나와 있는 코드를 활용해보았습니다.

다음 코드를 테마에 따라 적절한 파일(예: single.php 또는 content.php)에 추가합니다.

<div class="relatedposts">
<h3>Related posts</h3>
<?php
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);

if ($tags) {
$tag_ids = array();
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'=>4, // Number of related posts to display, 표시할 관련 글 개수
'caller_get_posts'=>1
);

$my_query = new wp_query( $args );

while( $my_query->have_posts() ) {
$my_query->the_post();
?>

<div class="relatedthumb">
<a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
<?php the_title(); ?>
</a>
</div>

<?php }
}
$post = $orig_post;
wp_reset_query();
?>
</div>

보통 루프가 끝나는 지점에 추가하면 됩니다. 현재 이 블로그에 사용 중인 Divi 테마에서는 single.php 파일에서 </article> 아래의 endwhile(<?php endwhile; ?>) 다음에 추가하면 됩니다.

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

그런 다음과 비슷한 적절한 코드를 추가합니다. CSS 코드는 자식 테마를 만든 다음에 자식 테마 내의 style.css 파일에 추가하도록 합니다.

.single .relatedposts .relatedthumb {
display:inline-block;
width: 32%;
}

CSS 코드를 적절히 조정하면 다음과 비슷한 모양으로 관련 글이 표시됩니다.

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를 사용하여 레이아웃을 조정해주도록 합니다.

또는 How to add WordPress Related Posts Without Plugins(플러그인을 사용하지 않고 관련 글을 워드프레스에 추가하는 방법)이라는 글에 소개된 코드를 가지고 테스트해볼 수도 있을 것 같습니다(테스트는 해보지 않았음).

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

참고


6개 댓글

  1. 1. 젯팩 위젯 중에 trending posts와 popular posts가 있던데 어떻게 다른지 모르겠어요.
    2. 젯팩이 무겁다 해서 어떤 플러그인이 가장 로딩을 힘겹게 하나 찾으려고 P3 플러그인을 설치해서 돌려봤더니 바로 그 플러그인이 가장 무겁고 젯팩은 거의 무시해도 될 정도라 오히려 그 플러그인을 빼버렸던 적이 있어요.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.