워드프레스 관련 글 목록 표시하기 (GeneratePress 테마)

이 블로그에 현재 사용 중인 GeneratePress 테마에는 관련 글 리스트를 표시하는 옵션이 제공되지 않습니다. 관련 글 목록 표시 방법은 다양합니다. 관련 글을 표시하는 플러그인을 사용하면 간단합니다. 관련 글 플러그인으로 원하는 레이아웃으로 글을 표시할 수 없는 경우에는 후크를 사용하여 코드를 추가할 수 있습니다. 아래에서는 플러그인을 사용하지 않고 연관 글을 표시하는 방법과 플러그인을 사용하여 연관 글을 표시하는 방법에 대해 설명합니다.

아래 내용은 제너레이트프레스 테마를 기준으로 설명되어 있지만 아스트라, Neve 등 다른 테마에도 적용이 가능합니다.

[ 이 글은 코드를 최신 버전에 맞게 수정하여 2023년 9월 29일에 재발행되었습니다. ]

워드프레스 관련 글 목록 표시하기

워드프레스 관련 글 목록 표시하기 - GeneratePress 테마

플러그인을 사용하여 관련 글 리스트를 표시하는 방법은 "GeneratePress 테마에 관련 글 리스트 표시하는 방법"을 참고해보시기 바랍니다. WP Show Posts라는 플러그인을 사용하여 각 포스트 하단에 관련 글 리스트를 표시하는 방법을 설명합니다.

직접 코드를 만들어보고 싶은 경우 다음 글을 참고해볼 수 있습니다.

예시로 다음 그림과 같이 티스토리 블로그에서 사용되는 관련 글 기능처럼 표시하는 방법을 간략히 살펴보겠습니다.

워드프레스 관련 글 목록 표시하기 (GeneratePress 테마) 3

기본적으로 "워드프레스에서 동일 카테고리 내의 다른 글 표시하기"에 사용된 코드와 유사합니다.

이 방법은 GeneratePress뿐만 아니라 다른 테마에서도 활용이 가능합니다. 대신 아래에 설명하는 Elements에 추가하는 방법 대신 해당 테마 파일(예: content.php)에 코드를 직접 추가하면 됩니다.

GeneratePress 테마에서 관련 글 목록 표시하기 (사용자 코드)

여기에서는 GeneratePress의 유료 버전에 제공되는 Elements를 사용하여 관련 글 코드를 후크를 통해 추가하는 방법을 살펴보겠습니다. 무료 버전을 사용하는 경우 차일드 테마를 만드시고 자식 테마 내의 함수 파일(funtions.php)에 훅을 추가할 수 있습니다.

외모(또는 테마 디자인) > Elements로 이동한 다음 Add New Element (새 엘리먼트 만들기)를 클릭하여 새로운 Element를 만들도록 합니다.

워드프레스 GeneratePress 테마에서 관련 글 목록 표시하기

Element 편집 화면이 표시되면 엘리먼트 이름을 지정하고 다음 코드를 추가합니다.

<!-- Related Posts Section -->
<div class="related-posts">

    <?php 
    $categories = get_the_category();
    
    // Check if the post has categories
    if (!empty($categories) && !is_wp_error($categories)):

        // Get the ID of the primary category (first category in the list)
        $primary_category_id = $categories[0]->term_id;

        // Display the primary category name
        ?>
        <h4>
            <?php echo esc_html($categories[0]->name); ?> 카테고리의 다른 글
        </h4>

        <?php
        // Define the arguments for the related posts query
        $query_args = array(
            'cat'            => $primary_category_id,
            'post_type'      => 'post',
            'post__not_in'   => array(get_the_ID()),
            'posts_per_page' => '5',
            'orderby'        => 'rand'
        );

        $related_cats_post = new WP_Query($query_args);

        // Check if there are any related posts
        if ($related_cats_post->have_posts()): 
        ?>
            <!-- Display the list of related posts -->
            <ul>
                <?php while ($related_cats_post->have_posts()): $related_cats_post->the_post(); ?>
                    <li>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </li>
                <?php endwhile; ?>
            </ul>

            <?php 
            // Restore the original post data
            wp_reset_postdata();
        endif; 
    endif;
    ?>

</div><!-- End of Related Posts Section -->

※이전 코드에서 에러를 수정했습니다. 또한, 여러 개의 카테고리가 하나의 포스트에 지정된 경우를 고려하도록 코드를 변경했습니다.

위의 코드는 같은 카테고리의 글 5개를 랜덤하게 표시할 것입니다.

상기 코드는 이 글을 작성할 당시에는 잘 작동했습니다. 만약 잘 작동하지 않는다면 위의 코드 대신 다음 코드로 테스트해보시기 바랍니다.

<!-- Related Posts Section -->
<div class="related-posts">

    <!-- Display the Category Name -->
    <h4>
        <?php 
        $categories = get_the_category();
        if (!empty($categories)) {
            echo esc_html($categories[0]->name);
        }
        ?> 
        카테고리의 다른 글
    </h4>

    <?php 
    // Define the arguments for the related posts query
    $query_args = array( 
        'category__in'   => wp_get_post_categories(get_the_ID()), // Using get_the_ID() directly
        'post_type'      => 'post',  // Hardcoded 'post' post type
        'post__not_in'   => array(get_the_ID()),
        'posts_per_page' => '5',
        'orderby'        => 'rand'
    );

    $related_cats_post = new WP_Query($query_args);

    // Check if there are any related posts
    if ($related_cats_post->have_posts()): 
    ?>
        <!-- Display the list of related posts -->
        <ul>
            <?php while ($related_cats_post->have_posts()): $related_cats_post->the_post(); ?>
                <li>
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </li>
            <?php endwhile; ?>
        </ul>

        <?php 
        // Restore the original post data
        wp_reset_postdata();
    endif; 
    ?>

</div><!-- End of Related Posts Section -->

모든 카테고리 글을 표시하고 싶은 경우 'category__in' => wp_get_post_categories($post->ID), 라인을 다음 라인으로 대체합니다.

'category__in'   => $cat_ids,

랜덤하게 표시하고 싶은 않은 경우 'orderby' => 'rand' 라인을 삭제하면 됩니다.

위의 코드에서 'post__not_in' => array(get_the_ID())는 현재 글을 제외시키는 기능을 합니다("How we exclude current post form related posts" 참고).

위의 코드에는 썸네일(특성 이미지)을 표시하는 코드는 포함되지 않았습니다. 썸네일을 표시하고 싶은 경우 "현재 카테고리의 관련 글(Related Posts)을 표시하는 방법"에 사용된 코드를 참고할 수 있습니다.

Settings (설정) 탭에서 Hookgenerate_after_content를 선택하고 Execute PHP (PHP 실행)를 체크하여 활성화합니다.

GeneratePress 테마에 Elements를 사용하여 관련 글 목록 표시하기

그리고 Display Rules (표시 규칙) 탭을 클릭하고 Location (위치)글 > All 글을 선택합니다.

워드프레스 GeneratePress 테마 후크 사용하기

GeneratePress 테마의 Elements에 대한 자세한 내용은 "GeneratePress 테마 후크 사용하기"를 참고해보시기 바랍니다.

다음으로, CSS를 사용하여 레이아웃을 적절히 변경하도록 합니다. 예를 들어, 다음과 같은 코드를 외모(또는 테마 디자인) > 사용자 정의하기 > 추가 CSS에 추가하거나 차일드 테마 내의 style.css 파일에 추가할 수 있습니다.

/* 관련 글 */
.related-posts {
    margin-top: 30px;
    border: 1px solid #ccc;
    padding: 10px 10px 3px 10px;
}

.related-posts ul * {
    font-size: 0.9rem;
}

.related-posts h4 {
    font-weight: 550;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.related-posts ul {
    margin-bottom: 8px;
}

이제 글을 살펴보면 글 하단에 연관 글 리스트가 표시될 것입니다.

숏코드로 추가하는 방법

워드프레스 알림판에서 PHP 코드를 추가할 때 에러가 발생하는 경우가 있을 수 있습니다. 예를 들어, 코드를 추가할 때 "Special Characters must be escaped" 오류가 발생하는 경우가 드물지만 있는 것 같습니다. GeneratePress 테마 자체에서는 이런 에러가 발생하지는 않습니다. 서버 세팅에 문제가 있거나 보안 규칙(방화벽 규칙) 때문에 경우 이런 오류가 발생하지 않나 생각됩니다.

이 경우 혹(hook)을 이용하여 코드를 만들어 테마 함수 파일에 직접 추가할 수 있습니다. 이 방법이 어려운 경우 숏코드로 추가하는 것도 가능합니다.

다음과 같은 코드를 차일드 테마 내의 함수 파일(functions.php)에 추가하도록 합니다. FTP/SFTP를 통해 웹 서버에 접속하여 /wp-content/themes/차일드테마/functions.php 파일을 편집할 수 있습니다. 블루호스트 등 cPanel 환경을 제공하는 경우에는 파일 관리자(File Manager)를 통해 파일을 수정할 수 있습니다.

function related_posts_shortcode() {
    ob_start(); // Start output buffering to capture the content

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

    echo '<div class="related-posts">'; // Start the container here

    // If the post has categories
    if (!empty($categories) && !is_wp_error($categories)) {
        // Consider the first category as the "primary" category
        $primary_category_id = $categories[0]->term_id;

        // Display the first category name
        echo '<h4>' . esc_html($categories[0]->name) . ' 카테고리의 다른 글</h4>';

        // Define the query arguments
        $query_args = array(
            'cat' => $primary_category_id,
            'post_type' => 'post',
            'post__not_in' => array($post_id),
            'posts_per_page' => '5',
            'orderby' => 'rand'
        );

        $related_cats_post = new WP_Query($query_args);

        // Check if there are any related posts
        if ($related_cats_post->have_posts()):
            ?>
            <ul>
                <?php while ($related_cats_post->have_posts()): $related_cats_post->the_post(); ?>
                    <li>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </li>
                <?php endwhile; ?>
            </ul>
            <?php
            // Restore original Post Data
            wp_reset_postdata();
        endif;

    }

    echo '</div>'; // End the container here

    return ob_get_clean(); // Return the captured content and stop output buffering
}


// Register the shortcode
add_shortcode('related_posts', 'related_posts_shortcode');

그러면 다음과 같은 쇼트코드를 관련 글을 표시할 곳에 추가하면 됩니다.

[related_posts]

GP Premium의 Element를 이용하여 훅(Hook)으로 추가하는 경우에는 다음 그림과 같이 숏코드를 입력하고 Execute Shortcodes 체크란을 선택하여 활성화하도록 합니다.

워드프레스 관련 글 목록 표시하기 (GeneratePress 테마) 4

Display Rules 탭에서는 글 - All 글에 표시되도록 설정하도록 합니다.

만약 코드를 추가할 때 에러가 발생하는 경우 여기에서 플러그인을 다운로드하여 설치하시고, 관련 글 리스트를 표시할 곳에 [related_posts] 숏코드를 추가하시기 바랍니다.

플러그인 사용하기

위의 코드를 사용했을 때, 만약 동일 카테고리 내의 글이 표시되지 않고 전체 카테고리 글이 표시된다면 GeneratePress 포럼 게시글 "Related/ Popular Posts widget"에 제시된 방법을 사용해볼 수 있습니다.

GeneratePress 포럼 게시글에서 고객 담당자가 제시하는 방법은 GeneratePress 테마에 관련 글 리스트 표시하는 방법 글에서 소개하는 WP Show Posts 플러그인을 사용하는 것으로, 숏코드를 다음과 같은 형식으로 추가하면 됩니다.

[wp_show_posts id="123" settings="taxonomy=category&tax_term=current"]

외모 > Elements에서 Element를 만들 때, Hookgenerate_after_content로 지정하고 Execute Shortcodes 옵션을 체크하도록 합니다.

동일 카테고리 글 리스트 표시

그리고 Display Rules > Location에서는 글 > 모든 글을 선택하도록 합니다.

다른 플러그인

워드프레스에는 다양한 관련 글 플러그인이 있습니다. 많이 사용되는 플러그인으로 YARPP – Yet Another Related Posts Plugin, Contextual Related Posts 등이 있습니다. 유료 플러그인으로는 WordPress Infinite Related Next Post Manager가 있습니다.

마치며

아바다 (Avada)뉴스페이퍼 (Newspaper)와 같은 일부 테마에는 개별 포스트 하단에 관련 글 리스트를 표시하는 옵션을 제공합니다. 그런 경우에는 테마에서 제공하는 기능을 사용하면 편리합니다.

관련 글을 표시하는 기능이 없는 경우 플러그인을 사용하거나 테마 파일 내에 직접 코드를 추가하는 방법으로 연관 글을 표시할 수 있습니다.

참고

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

16개 댓글

    1. 관련 글을 표시하는 플러그인을 설치하면 쉽게 썸네일을 넣을 수 있습니다.

      다음 글에서 소개하는 플러그인을 참고해보세요:

      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/

      플러그인을 사용하지 않을 경우에는 다음 글에서 제시하는 코드를 참고해보세요:

      https://www.thewordcracker.com/intermediate/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90%EC%84%9C-%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC%EB%B3%84%EB%A1%9C-%EA%B4%80%EB%A0%A8-%EA%B8%80-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0/

      최신 버전에서 제대로 작동하려면 코드를 약간 수정해야 할 수도 있습니다.

  1. 워드님 위에 따라하던 도중에 Execute PHP (PHP 실행) 여기 박스 체크하는 곳이 Unable to execute PHP as DISALLOW_FILE_EDIT is defined. 이런 에러가 나와있는데 왜 그런걸까요?

    1. 이 부분은 보안 설정과 관련이 있는데요, 다음 글을 참고해보세요.

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%85%8C%EB%A7%88-%ED%8C%8C%EC%9D%BC-%ED%8E%B8%EC%A7%91%EA%B8%B0%EA%B0%80-%ED%91%9C%EC%8B%9C%EB%90%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EA%B2%BD%EC%9A%B0/

      wp-config.php 파일에 추가된 다음 라인을 삭제하면 됩니다. 하지만 보안적인 측면에서는 그리 바람직하지는 않습니다.

      define('DISALLOW_FILE_EDIT',true);

      1. 해당부분 주석처리를 통하여 만들어서 글을 뜨게 끔 사용은 해뒀습니다만 , 또 문제가 발생했습니다. 처음에 디스플레이 선택할때
        generate_after_content 이걸 선택하라 하셨는데 아무리 전체 선택해도 제가 원하는 위치에 안들어가는데 혹시 글 내용쓰고 맨 아래 태그가 써있고 그 다음 아래에 관련글이 삽입되더군요. 관련글이 태그 위에 무조건 포스팅의 마지막 부분에 삽입되는 것은 어떤걸까요?

      2. generate_after_content는 본문 콘텐츠 뒤(after content)에 추가하게 됩니다. 태그 아래에 해당 콘텐츠가 삽입됩니다. 후크 위치는 다음 글의 이미지를 참고해보세요.

        https://www.thewordcracker.com/intermediate/generatepress-%ED%85%8C%EB%A7%88-%ED%9B%84%ED%81%AC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/

        현재로서는 tag 위에 위치하고 싶다면 javascript를 사용하여 뒤로 보내는 방법을 고려할 수 있습니다. 또는, 태그를 제거하는 것도 고려해보세요.

  2. 위에 방법대로 해서 연관 글이 나오게 했습니다.

    하지만그 기본설정 때문인가 그 위에 같은 카테고리의 글 2개가 추가로 나오는 상황이 발생했습니다.

    GP 사용자정의에서 레이아웃 부분을 확인해봐도 끄는 곳을 못찾겠는데

    혹시 도움을 얻을 수 있을까요?

  3. 안녕하세요. GeneratePress 테마를 사용하고 있고, 관련글(Related Posts)을 글 아래쪽에 표시하는 것을 하고 싶어서 이글에 올라와 있는대로 해 보았는데, 잘 되지를 않네요. 여기 코딩 내용과 방법 관련해서, 버전이 업그레이드 되면서 적용이 안되는 내용이 있는 것일까요?
    Element 편집 화면에서 위에 본문에 있는 코딩 소스를 넣으면 일단 에러가 많이 발생합니다.
    "Special characters mout be escaped : [ < ]."

    1. "Special characters must be escaped" 에러가 표시되는 이유는 모르겠습니다. 구글링해보았지만 이런 에러는 매우 드문 것 같습니다. 이 문제가 서버 방화벽/보안 규칙 때문에 발생하는지 체크해보시겠어요? 그리고 wordfence와 같은 보안 플러그인이 활성화되어 있다면 비활성화한 후에도 테스트해보시겠어요?

      코드는 약간의 오류가 있어서 수정했습니다.

    1. 해당 코드는 이 글을 작성할 당시에는 잘 작동했습니다. 수정된 코드를 함께 올렸습니다. 수정된 코드로도 한 번 테스트해보시겠어요?

      1. 안녕하세요.
        뭐가 문제인지 동일하네요.
        플러그인이 사용해야 하나보네요. 플러그인 추가하면 사이트가 점점 무거워지는것 같아 코드로 구현할 수 있는것은 그냥 하려고 했는데 아쉽네요. 혹시 운영자님도 GP 사용하시는것 같은데 문제 없이 잘 되나요?

        제 사이트가 이상한지...
        이것뿐만 아니라 css 코드를 포스트에서 보여주기 위해 block 안에 code 를 넣었는데 css 가 적용되어 버리는 오류가 나오고 있습니다. 이것도 원인을 못찾고 있는 중입니다.

      2. 다른 플러그인을 모두 비활성화한 후에 한 번 테스트해보시기 바랍니다.

        코드는 블록 에디터(구텐베르크)의 "코드" 블록으로 표시할 수 있습니다.

댓글 남기기

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