워드프레스(아스트라 테마 기준) 글 하단에 같은 카테고리 글 목록 자동으로 보여주는 방법

작성자:

워드프레스를 운영하다 보면, 방문자에게 비슷한 글을 자연스럽게 소개하는 게 매우 중요합니다.
이 글에서는 아스트라 테마에서 플러그인 없이, 글 하단에 자동으로 같은 카테고리의 다른 글 목록을 출력하는 방법을 소개합니다.

왜 같은 카테고리 글을 보여줘야 할까?

  • 페이지 체류 시간 증가
    → 독자가 관심 있는 글을 더 오래 탐색하게 함
  • SEO에 긍정적인 영향
    → 내부 링크 구조가 강화되고, 관련성 높은 콘텐츠 제공
  • 사용자 경험 개선
    → 블로그 탐색이 편해지고, 이탈률 감소

준비물: Astra 테마 + functions.php 접근 권한

플러그인 없이 코드 한 줄로 구현할 수 있으므로 속도에 부담도 없습니다.
모든 테마에서도 작동 가능하지만, Astra 테마 기준으로 안내드릴게요.

1단계: functions.php에 코드 추가

아래 코드를 복사하여
[모양] → [테마 파일 편집기] → functions.php**에 붙여넣습니다.
아래 그림으로 따라가서 빈공간에 붙여 넣기 하세요

function show_related_posts_by_category($content) {
    if (is_single() && in_the_loop() && is_main_query()) {
        global $post;
        $categories = wp_get_post_categories($post->ID);
        if ($categories) {
            $args = array(
                'category__in' => $categories,
                'post__not_in' => array($post->ID),
                'posts_per_page' => 5,
                'orderby' => 'date'
            );
            $related_posts = get_posts($args);
            if ($related_posts) {
                $content .= '<div class="related-posts-box"><h3>‘' . get_the_category()[0]->name . '’ 카테고리의 다른 글</h3><ul>';
                foreach ($related_posts as $related) {
                    $content .= '<li><a href="' . get_permalink($related->ID) . '">' . esc_html($related->post_title) . '</a></li>';
                }
                $content .= '</ul></div>';
            }
        }
    }
    return $content;
}
add_filter('the_content', 'show_related_posts_by_category');

붙여 넣기 하고 적용하면 아래와 같이 나옵니다.
하지만 조금 허전하죠? 좀 더 이쁘게 보이게 할려면 스타일 적용이 필요 합니다.


2단계: 스타일(Custom CSS) 적용 (선택)

글 하단의 목록이 더 깔끔하게 보이도록
[모양] → [사용자 정의하기] → 추가 CSS에 다음 코드를 입력하세요
아래 그림처럼 넣고 공개 하시면 됩니다.

.related-posts-box {
    border: 1px solid #ccc;
    padding: 15px;
    margin-top: 40px;
    background: #f9f9f9;
    border-radius: 8px;
}
.related-posts-box h3 {
    margin-top: 0;
    font-size: 18px;
    color: #333;
}
.related-posts-box ul {
    list-style-type: disc;
    padding-left: 20px;
}
.related-posts-box li {
    margin-bottom: 6px;
}
.related-posts-box a {
    color: #3366cc;
    text-decoration: none;
}
.related-posts-box a:hover {
    text-decoration: underline;
}

붙여 넣기 하면 아래와 같이 괜찮은 스타일로 입혀 집니다.


SEO에 도움이 되는 이유

  • 내부링크 자동 생성
    → 관련 콘텐츠가 서로 연결되며 검색엔진이 사이트 구조를 잘 이해함
  • 사용자 만족도 상승
    → 재방문율이 올라가고, 검색 순위에도 긍정적인 영향을 미침
  • 플러그인 불필요
    → 로딩 속도 향상 = SEO 최적화


마무리

이제부터는 글을 쓸 때 따로 관련 글을 붙이지 않아도,
자동으로 같은 카테고리 글 목록이 하단에 출력됩니다.
방문자는 더 많은 콘텐츠를 보게 되고,
블로그의 SEO와 체류 시간도 자연스럽게 개선됩니다.

궁금한 점이나 커스터마이징하고 싶은 부분이 있다면 댓글로 남겨주세요.

댓글 남기기

댓글 남기기