Home »

GeneratePress hook으로 관련 글 목록 만드는 방법

04/28/2025

블로그 글 본문에 같은 카테고리 글 목록이 있으면 방문자는 조금 쉽게 다른 글에 접근해 읽을 수 있다. 네이버 블로그라면 메뉴·글 관리에서 ‘목록 열기’를 하면 되고 티스토리는 ‘카테고리 글 더보기’ 플러그인을 설정하면 된다.

워드프레스는 자체적인 설정 메뉴가 따로 없는데 (테마에 따라 지원할 수 있음) 플러그인을 사용하거나 코드를 구현하는 방법을 통해 설정하면 된다.

지금 이 블로그는 GeneratePress 테마 프리미엄 버전을 적용 중인데 프리미엄에서 지원하는 Elements – hook 기능을 이용해 직접 관련 글 코드를 추가하였다. 같은 GP 테마를 적용 중이라면 아래 코드를 참고해서 관련 글 목록을 추가할 수 있다.

* GP 테마 프리미엄 라이센스 키 적용 후 Module에서 Elements 활성화가 필요하다.

관련 글 목록 만드는 방법

설정을 위해 워드프레스 대시보드 – Elements – Add New Element 버튼을 클릭한 다음, 엘리먼트 타입을 hook으로 해서 Create를 진행하자.

화면이 열리면 위에서부터 순서대로 진행하면 된다.
– Element의 이름 입력
– 관련 글 목록 코드 입력
– Hook : 해당 목록을 적용할 블로그 내 위치를 지정한다.
(Generate_after_do_template_part를 선택하면 본문 글 영역 아래 적용되는데, 원하는 위치에 따라 문구 선택이 달라질 수 있다.
– Execute PHP : 항목을 체크해야 한다.

코드는 아래 영역에서 복사 붙여 넣은 다음 hook 화면의 Display Rules로 이동하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<div class=“related-posts”>
 
    <h5>
    <?php
    $queried_category = get_queried_object();
    $categories = get_the_category();
    $current_post_id = get_the_ID();
 
    if (!empty($categories)) {
        $display_category = null;
 
        if (is_category() && !empty($queried_category–>term_id)) {
            $display_category = $queried_category;
        } else {
            foreach ($categories as $category) {
                if ($category–>parent != 0) {
                    $display_category = $category;
                    break;
                }
            }
            if (empty($display_category)) {
                $display_category = $categories[0];
            }
        }
 
        if ($display_category) {
            if ($display_category–>parent != 0) {
                // 서브 카테고리인 경우
                $parent_category = get_category($display_category–>parent);
                if ($parent_category) {
                    // 링크 적용
                    echo ‘<a href=”‘ . esc_url(get_category_link($parent_category–>term_id)) . ‘”>’ . esc_html($parent_category–>name) . ‘</a> » ‘;
                    echo ‘<a href=”‘ . esc_url(get_category_link($display_category–>term_id)) . ‘”>’ . esc_html($display_category–>name) . ‘</a> 카테고리의 다른 글’;
                } else {
                    // 부모가 없을 때
                    echo ‘<a href=”‘ . esc_url(get_category_link($display_category–>term_id)) . ‘”>’ . esc_html($display_category–>name) . ‘</a> 카테고리의 다른 글’;
                }
            } else {
                // 메인 카테고리일 때
                echo ‘<a href=”‘ . esc_url(get_category_link($display_category–>term_id)) . ‘”>’ . esc_html($display_category–>name) . ‘</a> 카테고리의 다른 글’;
            }
        }
    } else {
        echo ‘관련 글’;
    }
    ?>
</h5>
 
    <?php
    $category_id_to_query = 0;
 
    if (is_category() && !empty($queried_category–>term_id)) {
        $category_id_to_query = $queried_category–>term_id;
    } elseif (!empty($categories)) {
        foreach ($categories as $category) {
            if ($category–>parent != 0) {
                $category_id_to_query = $category–>term_id;
                break;
            }
        }
        if ($category_id_to_query == 0) {
            $category_id_to_query = $categories[0]–>term_id;
        }
    }
 
    if ($category_id_to_query != 0) {
        $query_args = array(
            ‘cat’            => $category_id_to_query,
            ‘post_type’      => ‘post’,
            ‘posts_per_page’ => 100, // 일단 많이 가져온다 (최대 100개, 필요시 조절)
            ‘orderby’        => ‘date’,
            ‘order’          => ‘DESC’, // 최신 글부터 나오게
        );
 
        $all_related_posts = new WP_Query($query_args);
 
        if ($all_related_posts–>have_posts()) :
            $posts_list = array();
            while ($all_related_posts–>have_posts()) : $all_related_posts–>the_post();
                $posts_list[] = array(
                    ‘ID’    => get_the_ID(),
                    ‘title’ => get_the_title(),
                    ‘link’  => get_permalink()
                );
            endwhile;
            wp_reset_postdata();
 
            // 현재 글 위치 찾기
            $current_index = array_search($current_post_id, array_column($posts_list, ‘ID’));
 
            // 주변 글 8개 가져오기
            $start = max(0, $current_index – 3);
            $related_posts = array_slice($posts_list, $start, 8);
 
            if (!empty($related_posts)) :
                ?>
                <ul>
                    <?php
                    foreach ($related_posts as $post_item) {
                        $is_current = ($post_item[‘ID’] == $current_post_id);
                        ?>
                        <li>
                            <a href=“<?php echo esc_url($post_item[‘link’]); ?>”>
                                <?php if ($is_current) : ?>
                                    <strong><?php echo esc_html($post_item[‘title’]); ?></strong>
                                <?php else : ?>
                                    <?php echo esc_html($post_item[‘title’]); ?>
                                <?php endif; ?>
                            </a>
                        </li>
                        <?php
                    }
                    ?>
                </ul>
            <?php endif;
        endif;
    }
    ?>
 
</div>
Colored by Color Scripter
cs

[코드 설명]
– 관련 글 목록은 최대 8개 표시
– 현재 글 제목은 관련 글 목록에서 진하게 표시되며 위 아래로 각 이전/다음 글 목록 표시
– 같은 카테고리 내 글 목록은 최신 작성 순서대로 표시 (위 → 아래)
– 메인 + 서브 카테고리 지정 글은 해당 서브 카테고리 글 목록 표시
– 서브 카테고리 지정이 안 된 글은 메인 카테고리 글 목록 표시

* 위 코드는 챗 – GPT(무료 버전)에게 여러 차례 질문 후 완성하였습니다. 코드 수정이 필요할 땐 GPT나 다른 AI에게 확인 해주세요.

Location을 Post – All Post로 하면 블로그 내 모든 포스팅에 적용된다. 만약 원하는 특정 페이지나 제외 페이지가 있다면 Location과 Exclude를 통해 추가하자.

코드 적용을 마치면 위처럼 관련 글 목록이 잘 표시된다. 참고로 서브 카테고리 지정 글 목록은 위처럼 [‘메인 > 서브’ 카테고리의 다른 글]로 나타나는데 메인과 서브 클릭 시 관련 전체 글 목록으로 이동한다.

이대로 사용하기에는 디자인이 아쉬우니 CSS를 추가해보았다.

디자인은 티스토리 ‘카테고리 글 더보기’와 비슷하게 진행했고 아래 CSS 코드를 추가하였다. 참고로 위 디자인은 GP 프리미엄 마케터 테마 적용 모습인데, 지금 적용한 테마나 취향에 따라 CSS 값을 수정하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Post Related Post */
div.related-posts {
background-color : #FFFFFF;
border-radius: 10px;
padding: 20px 20px;
padding-bottom: 2px;
}
div.related-posts h5 {
    font-weight: 600;
 color: #676767;
 padding: 10px 0 0 7px;
}
div.related-posts li {
  display: block;
    line-height: 35px;
  list-style: none;
  word-break: keep-all;
}
@media (max-width: 768px) {
div.related-posts li {
    line-height: 30px;
  margin-bottom: 5px;
    }
}
cs