워드프레스: 현재 카테고리의 관련 글(Related Posts)을 표시하는 방법

이전 글에서 다양한 방법으로 워드프레스에서 관련 글(연관 글)을 표시하는 방법을 살펴보았습니다. 경우에 따라 사용 중인 테마에서 관련 글 기능을 제공할 수 있습니다. 현재 사용 중인 이 블로그의 테마인 Pluto에서도 관련 글 기능을 제공하고 있습니다. 그리고 아바다 등의 주요 인기 테마에서도 관련 글을 표시할 수 있는 기능을 제공합니다.

Avada의 관련 글 기능
Avada의 관련 글 기능

업데이트: 이 블로그에는 뉴스페이퍼 테마를 거쳐 현재 GeneratePress 테마가 적용되어 있습니다.

아래의 코드는 아직도 잘 작동할 것 같지만, 오래 되어 작동하지 않을 수도 있습니다. 보다 최신 방법으로 다음 글에서 소개하는 방법을 이용해보시기 바랍니다.

워드프레스: 현재 카테고리의 관련 글(Related Posts)을 표시하는 방법

테마에서 관련 글 기능이 제공되지 않거나 마음에 들지 않으면 플러그인을 설치하여 관련 글 기능을 구현할 수 있습니다. 또 다른 방법으로 직접 코드를 테마 소스에 추가하는 것도 가능합니다.

직접 코드를 만들어 연관 글 기능을 구현하고자 하는 경우 다음 두 글을 참고할 수 있습니다.

카테고리 기준으로 관련 글을 표시하려는 경우 위의 두 번째 글에 소개된 방법을 응용할 수 있습니다. 저는 위의 두 글을 조합하여 새롭게 만들어 최근까지 사용해왔습니다.

현재 카테고리의 관련 글(연관 글) 표시하기

다음 코드를 적절한 파일(예: single.php 또느 single-content.php - 테마에 따라 다름)의 적당한 위치에 추가하도록 합니다. 싱글 포스트(글) 파일에서 본문 바로 아래에 표시되도록 할 수 있습니다. 원하는 경우 후크를 사용하여 추가하는 것도 가능할 것입니다. (후크를 사용하여 단일 글 맨 아래에 표시하는 방법은 "워드프레스 글 끝부분(글 하단)에 사용자 컨텐츠 추가하기" 글을 참고해보시기 바랍니다.)

<div class="relatedposts">
<h3>Related posts</h3>
<?php
$args = array(
'posts_per_page' => 3, // How many items to display - 표시할 항목 개수
'post__not_in'   => array( get_the_ID() ), // Exclude current post - 현재 글 제외
'no_found_rows'  => true, // We don't need pagination so this speeds up the query - 쿼리 속도 높임
'orderby'=>'rand' // 랜덤하게 표시하기 위해 추가됨. 삭제하면 랜덤하게 표시되지 않음
);

$cats = wp_get_post_terms( get_the_ID(), 'category' );
$cats_ids = array();
foreach( $cats as $wpex_related_cat ) {
$cats_ids[] = $wpex_related_cat->term_id;
}
if ( ! empty( $cats_ids ) ) {
$args['category__in'] = $cats_ids;
}
// Query posts
$wpex_query = new wp_query( $args );

// Loop through posts
foreach( $wpex_query->posts as $post ) : setup_postdata( $post ); ?>

<div class="relatedthumb">
<a rel="nofollow" href="<?php echo esc_url( urldecode(get_permalink()) ); ?>"><?php the_post_thumbnail('pluto-top-featured-post'); ?><br />
<?php the_title(); ?>
</a>
</div>

<?php
// End loop
endforeach;

// Reset post data
wp_reset_postdata(); ?>
</div>

위에서 the_post_thumbnail('pluto-top-featured-post')은 새롭게 정의한 썸네일 크기를 표시하는 부분인데요, 이미 적절한 크기가 정의되어 있으면 적절히 수정하면 됩니다. 만약 적절한 크기가 정의되어 있지 않으면 다음 코드를 테마의 함수 파일(functions.php)에 추가하도록 합니다. 숫자를 변경하에 썸네일 크기를 변경할 수 있습니다("워드프레스 썸네일 크기 조정" 참고). 단, Pluto 테마에서는 아래 코드가 이미 추가되어 있으므로 추가하지 않도록 합니다.

function custom_thumbs()
{
add_image_size( 'pluto-top-featured-post', 200, 150, true );
}
add_action( 'after_setup_theme', 'custom_thumbs' );

그리고 style.css에 다음과 같은 코드를 추가합니다.

/* Related posts - 관련 글*/
@media only screen and (min-width : 784px) {
.single .relatedposts .relatedthumb {
display:inline-block;
width: 32%;
vertical-align: text-top;
padding-right: 5px;
padding-left: 5px;
}

.single .relatedposts {
padding: 0px 50px 50px 50px;
}
.single .relatedposts .relatedthumb img {
padding-bottom: 7px;
}

.single .relatedthumb a {
font-size: 1.22em;
}
} /* for pc */

@media only screen and (min-width : 522px) and (max-width : 783px) {
.single .relatedposts .relatedthumb {
display:inline-block;
width: 48%;
vertical-align: text-top;
padding-right: 5px;
padding-left: 5px;
}

.single .relatedposts {
padding: 0px 35px 35px 35px;
}
.single .relatedposts .relatedthumb img {
padding-bottom: 7px;
}

.single .relatedposts > .relatedthumb:first-of-type {
display: none;
}

.single .relatedthumb a {
font-size: 1.22em;
}
} /* for medium */
@media only screen and (max-width : 521px) {
.single .relatedposts .relatedthumb {
display:inline-block;
width: 98%;
vertical-align: text-top;
padding-right: 5px;
padding-left: 5px;
}

.single .relatedposts {
padding: 0px 20px 35px 20px;
}
.single .relatedposts .relatedthumb img {
padding-bottom: 7px;
}

.single .relatedposts > .relatedthumb:first-of-type {
display: none;
}

.single .relatedposts > .relatedthumb:first-of-type + div {
margin-bottom: 15px;
}

.single .relatedthumb a {
font-size: 1.22em;
}
} /* for mobile */

코드를 적절히 구미에 맞게 수정하시기 바랍니다. 그러면 다음과 같이 글 아래에 Related Posts가 표시됩니다.

Customized Related Posts

위의 코드는 이 블로그의 현재 테마인 Pluto에서만 사용되었기 때문에 다른 테마에서는 레이아웃이 제대로 표시되지 않을 수도 있습니다. 그런 경우 CSS 코드를 테마에 맞게 적절히 수정해주시기 바랍니다.

같은 태그의 글을 관련 글(연관 글)로 표시하는 방법

태그를 기준으로 Related Posts를 만들고자 하는 경우에는 맨 위의 코드 앞부분을 다음 코드로 교체하면 됩니다.

<div class="relatedposts">
<h3>Related posts</h3>
<?php
$args = array(
'posts_per_page' => 3, // 표시할 항목
'post__not_in'   => array( get_the_ID() ), // 현재 글 제외
'no_found_rows'  => true, // We don't need pagination so this speeds up the query - 쿼리 속도를 높이기 위해 페이지나움 필요 없음
'orderby'=>'rand' // 랜덤하게 표시
);

$cats = wp_get_post_terms( get_the_ID(), 'category' );
$cats_ids = array();
foreach( $cats as $wpex_related_cat ) {
$cats_ids[] = $wpex_related_cat->term_id;
}
if ( ! empty( $cats_ids ) ) {
$args['category__in'] = $cats_ids;
}
// Query posts
$wpex_query = new wp_query( $args );

... (이하 동일)

CSS 코드는 동일합니다. 이 작업을 수행하기 전에 차일드 테마(자식 테마; 하위 테마)를 만들어 수행하시기 바랍니다. 자식 테마 만드는 방법은 이 글을 참고해보세요.

참고


12개 댓글

  1. wp show posts 플러그인을 사용해서
    관련글 출력하는것까지 성공했는데,
    카테고리 관련된 글만 나오게 설정은 안되나요?
    이것저것 만져봤는데 제대로 작동되는건 랜덤형식? 밖에 안되네요..

    1. 안녕하세요, HEO님. WP Show Posts 플러그인을 사용할 경우에 현재 카테고리 글만 표시되도록 하는 방법에 대해서는 별도의 글을 통해 정리해보겠습니다.

  2. 안녕하세요 알려주신대로 적용해보려고하는데 잘 안되서 질문드립니다. 현재 generatepress무료버전 사용하고있는데 single.php가 어디있는지 모르겠습니다ㅜ 테마파일편집기에는 style.css랑 functions.php 밖에 없어서요.

    1. 우선 테마 편집기는 사용하지 않는 것이 보안 상 바람직합니다.

      https://cafe.naver.com/wphomepage/508

      차일드 테마가 설치되어 있는 것 같네요. 차일드 테마를 어떻게 활용하는지에 대해 익혀보시기 바랍니다.
      https://cafe.naver.com/wphomepage/145

      GeneratePress 테마의 경우 다음 글을 참고하여 관련 글을 표시할 수 있습니다.

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B4%80%EB%A0%A8-%EA%B8%80-%EB%AA%A9%EB%A1%9D-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0/

      1. 네 감사합니다 차일드테마글은 잘 읽어봤습니다
        그런데 generatepress테마에서는 썸네일을 적용한 관련글 표시는 안되는 건가요?ㅜ

      2. the_post_thumbnail 함수를 사용하면 될 것 같은데요.

        https://developer.wordpress.org/reference/functions/the_post_thumbnail/

        다음 글의 내용도 참고해보세요:

        https://www.thewordcracker.com/intermediate/how-to-adjust-the-size-of-thumbnail-images-in-wordpress/

        이런 내용이 어려우면 WP Show Posts와 같은 플러그인을 사용하시기 바랍니다.

        https://avada.co.kr/generatepress-%ED%85%8C%EB%A7%88%EC%97%90-%EA%B4%80%EB%A0%A8-%EA%B8%80-%ED%91%9C%EC%8B%9C/

  3. "아바다 등의 주요 인기 테마에서도 관련 글을 표시할 수 있는 기능을 제공합니다." 에 관하여 질문드립니다.
    현재 아바다테마를 사용하고 있고 ①그래픽 관련 ②먹거리 ③책소개 등 카테고리를 3개 만들었습니다.
    제가 필요한 것은 예를 들면 '③책소개 카테고리' 페이지에 들어가면 먼저 책소개에 관한 최신글 몇 개 보이게 하고 (관련글 목록 - 이것은 이미 만들어 놓고 잘 실행하고 있음) 그 아래에 책소개 관련글만 쭉 나오게 만들고 싶어요.
    이런 것도 가능할까요? 현재상황은 관련글 목록에 나오는 최신글을 클릭하면 다른 페이지로 이동하여(최신글 보기 페이지) 거기서 글을 보여 줍니다.

    '아바다에서 관련 글을 표시할 수 있는 기능'이 어떤 건지, 제가 필요로 하는 것이 해결될련지, 궁금해요. 또한 기능을 사용하려면 어디에 들어가서 어떻게 해야하는지 모르겠어요.
    아바다 기능도 제가 요구하는 문제해결이 될 수 없으면 어떤 플로그인을 사용하거나 이나 소스를 편집해야 하나요? 그런데 소스편집에는 초보라서 자신이 없어요ㅠㅠ.

    1. 안녕하세요, firekim님.

      관련 글은 보통 포스트 하단에 해당 포스트가 속한 카테고리 등을 기준으로 관련된 글을 표시하는 기능입니다.

      아바다 (Avada) 테마에서는 워드프레스 관리자 페이지 > Avada > Options > 블로그 > 블로그 싱글 포스트에서 관련 글 기능을 활성화/비활성화할 수 있습니다.

      https://www.screencast.com/t/K39LhfKN

      원하는 대로 카테고리를 만들려면 아바다 카테고리 레이아웃을 만들어야 합니다. 아바다 테마의 경우 최신 버전에서 카테고리 템플릿을 대시보드 내에서 만들 수 있습니다. https://www.thewordcracker.com/basic/%ec%95%84%eb%b0%94%eb%8b%a4-%ed%85%8c%eb%a7%88-%eb%a0%88%ec%9d%b4%ec%95%84%ec%9b%83-layout/ 글을 참고해보세요.

      그러면 최신 글과 관련 글을 표시하는 코드를 직접 만들어서 테마 함수 파일에 넣어야 합니다. 숏코드로 표시하도록 만들어서 숏코드를 이용하여 아바다의 커스텀 레이아웃 섹션에 추가하시면 될 것입니다. 초보자인 경우 쉽지 않은 작업일 것입니다.

  4. 질문을 해도 되는건지 모르겠는데...ㅠㅠ related post를 해당 페이지마다 제목을 바꿔줄수 있을까요? 전시사이트 작업중인데 각 전시마다 해당 작가들이 따로 있는 상황이라서요. 작가들 페이지에 들어가면 하단에 related exhibition으로 표시하고 싶고, 전시페이지에 들어가면 related artist로 표시하고 싶어서요 혹시 방법이 있을까요?

    1. 안녕하세요?
      블로그를 방문해주셔서 감사합니다.
      어떤 식으로 작가들의 글과 전시 글들을 올리는가에 따라서 다르게 구현될 것 같습니다.
      코딩이 필요한 부분이고요.

      1. 최대한 코딩을 안하려다 보니.... 역시 그런 꼼수는 없는것이겠죠..원래 custom fields를 활용하려고 했는데 어렵더라구요. ㅠㅠ 그래서 단순히 태그와 related post로 해보려던 것인데.... 어려운것 같습니다

댓글 남기기

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