플러그인 없이 관련 글 목록 만드는 방법

플러그인 없이 관련 글 목록 만드는 방법

본문 글 하단에 같은 카테고리의 다른 글 목록이 있으면 방문자는 정보를 탐색하기 쉬워진다. 워드프레스 테마에 따라 다르겠지만, GeneratePress를 적용하면 아쉽게도 관련 글 목록 옵션이 없다.

이때 플러그인을 설치하는 방법이 있는데, 무료 버전에는 기능과 디자인 제한이 있거나 블로그도 무거워질 수 있어서 결국 플러그인 없이 기능을 추가하였다.


먼저 대시보드 – Appearance – Elements 이동 후 Add New Elements – Block Type으로 추가하자. 이후 원하는 카드형 글 목록을 만든 뒤 세부 디자인을 설정하면 된다.
(화면 왼쪽 Query 아래 Looper 선택 – 화면 오른쪽 Block 탭 – Setting(톱니)로 오면 가로 글 개수도 지정할 수 있다)

이때 직접 만드는 것은 번거로우니 기존 테마의 글 목록 컨테이너를 복사 – 붙여 넣는 것을 추천한다. 관련 내용은 Info 테마 Archive 페이지 설정 글의 복사 부분을 참고하자.


이어서 화면 왼쪽에서 관련 글 최상위 컨테이너 아래 Query를 선택하고 화면 오른쪽 Block 탭으로 온 다음, 위처럼 설정을 진행하자.

Inherit query from template : 버튼 해제
Post type : 페이지당 보일 글 수
Additional CSS Class : php 코드 생성을 위해 my-related-posts라고 입력


이후 Block 옆의 Element 탭으로 온 다음, Hook name에 원하는 위치를 지정하면 된다. 이 블로그에는 before_comments_container로 지정했는데, 본문 아래 댓글 영역 바로 위에 관련 글 목록이 나오고 있다. 단, comments 관련 위치를 설정할 때 블로그의 Discussion(댓글) 기능을 막으면 댓글 영역이 나오지 않으면서 관련 글 노출도 적용되지 않는다.

Element 페이지 저장을 마쳤다면 대시보드 – Appearance – Theme File Editor – GeneratePress Child theme – Theme Functions 탭으로 이동한 다음, 아래 코드를 붙여넣고 저장해 보자.


add_filter( 'generateblocks_query_loop_args', function( $query_args, $attributes ) {
    // 1. 클래스 이름 확인
    if ( ! empty( $attributes['className'] ) && strpos( $attributes['className'], 'my-related-posts' ) !== false ) {

        $current_post_id = get_the_ID();
        $categories = get_the_category($current_post_id);

    if ( ! empty( $categories ) ) {
        $cat_id = $categories[0]->term_id;

        // 2. 해당 카테고리의 모든 글 ID를 최신순(DESC)으로 가져옴
        $all_ids = get_posts( array(
            'category' => $cat_id,
            'posts_per_page' => -1, // 전체 목록 확보
            'orderby' => 'date',
            'order' => 'DESC',
            'fields' => 'ids',
        ) );

        $current_index = array_search( $current_post_id, $all_ids );

        if ( $current_index !== false ) {
            $total_count = count($all_ids);

            // 3. 현재 글 주변 6개를 찾기 위한 범위 계산
            // 현재 글 위치를 중심으로 앞뒤로 확장
            $start = $current_index - 3;

            // 범위가 리스트 시작점(최신글 쪽)을 벗어나면 0으로 고정
            if ($start < 0) $start = 0;

            // 범위가 리스트 끝점(오래된글 쪽)을 벗어나면 뒤에서부터 7개 확보 (현재글 포함이므로)
            if ($start + 7 > $total_count) {
                $start = max(0, $total_count - 7);
            }

            // 4. 계산된 범위에서 7개를 자른 후, 현재 글만 제외하여 딱 6개 만듦
            $temp_ids = array_slice($all_ids, $start, 7);
            $related_ids = array_diff($temp_ids, array($current_post_id));

            // 다시 한 번 6개인지 확인 (글 개수가 아주 적을 경우 대비)
            $related_ids = array_slice(array_values($related_ids), 0, 6);
        } else {
            $related_ids = array_slice($all_ids, 0, 6);
        }

        // 5. 최종 결과 적용
        $query_args['post__in'] = !empty($related_ids) ? $related_ids : array(0);
        $query_args['orderby'] = 'post__in'; // 코드에서 계산한 최신순 정렬 그대로 유지
        $query_args['posts_per_page'] = 6;
    }
}
return $query_args;

}, 10, 2 );

코드는 현재 글을 기준으로 전후 글이 3개씩 나오도록 했고, 앞뒤로 글이 3개보다 적을 때도 알아서 숫자를 계산하도록 설정을 했는데, 블로그 적용 후 수정이 필요하면 AI 질문 후 고쳐서 사용하면 된다.

워드프레스 마스터 가이드

Leave a Comment