워드프레스 Onepress 테마에서 플러그인 없이 관련 글을 표시하는 방법

워드프레스 Onepress 테마는 간결하지만 필요한 기능이 부족한 경우가 많습니다. 그 중 하나가 글 하단에 관련 글이 표시되지 않는다는 건데요. 지금 읽고 있는 글과 관련된 글들이 하단에 표시되면 방문자의 체류 시간을 늘릴 수 있는 장점이 있습니다. 이 글에서는 Onepress 테마에서 플러그인 없이 관련 글을 표시하는 방법에 대해 알아보겠습니다.

워드프레스 Onepress 테마에서 플러그인 없이 관련 글을 표시하는 방법

몇 일 전, 워드프레스 블로그를 시작한 초기부터 사용하던 젯팩 플러그인을 삭제했습니다. 젯팩을 지금까지 사용했던 이유는 방문자 통계와 무차별 로그인 시도 제한 때문이었는데요. 방문자 통계는 WP Statistics 로, 무차별 로그인 시도 제한은 Loginizer 로 대체하여 더 이상 젯팩을 사용할 필요가 없어졌습니다.

그런데 젯팩 플러그인을 삭제한 후 예상치 못한 문제에 직면했습니다. 바로 포스팅된 글 하단에 표시되던 ‘관련 글 (Related Posts)’ 기능이 사라진 것입니다. 이유를 찾아보니 ‘관련 글’ 기능이 젯팩에서 제공된 것임을 알게 되었습니다. 그러나 단지 ‘관련 글’ 기능 때문에 젯팩을 다시 설치하는 것이 내키지 않아, 직접 코드를 추가하여 관련 글이 표시되도록 하였고, 이 글에서 그 과정을 자세히 알아보겠습니다.

오늘 설명 드릴 방법을 적용하면 아래와 같이 현재 읽고 있는 글의 하단에 ‘관련 글’ 이 표시됩니다.

Onepress 테마에서 플러그인 없이 관련 글을 추가하기 위해서는 Single.php 파일을 수정해야 합니다.

워드프레스 관리자 화면에서 ‘외모’ → ‘테마 파일 편집기’를 순서대로 클릭한 후, 화면 오른쪽에서 ‘single.php’ 파일을 편집할 수 있도록 선택합니다.

Onepress 테마에 플러그인 없이 관련 글을 표시하기 위해 single.php 파일에 필요한 코드를 삽입합니다

single.php 파일을 열고 <?php get_template_part( 'template-parts/content', 'single' ); ?> 을 찾은 후, 바로 밑에 아래 코드를 삽입하고 ‘파일 업데이트’를 클릭하면 바로 적용됩니다.

<div class="related-posts">

    <?php
    $current_post_id = get_the_ID();
    $current_post_categories = get_the_category($current_post_id);
    if (!empty($current_post_categories)) {
        $category_ids = array();
        foreach ($current_post_categories as $category) {
            array_push($category_ids, $category->term_id);
        }

        $args = array(
            'category__in' => $category_ids,
            'post__not_in' => array($current_post_id),
            'posts_per_page' => 3, // Change this number to display more or fewer posts
            'ignore_sticky_posts' => 1,
        );

        $related_posts_query = new WP_Query($args);

        if ($related_posts_query->have_posts()) {
            echo '<div class="related-posts-grid">';
            while ($related_posts_query->have_posts()) {
                $related_posts_query->the_post();
                ?>
                <div class="related-post">
                    <?php if (has_post_thumbnail()) {
                        the_post_thumbnail('thumbnail');
                    } ?>
                    <a href="<?php the_permalink(); ?>">
                        <div class="related-post-title"><?php the_title(); ?></div>
                    </a>
                    <div class="related-post-date"><?php echo get_the_date(); ?></div>
                </div>
                <?php
            }
            echo '</div>';
        } else {
            echo '<p>No related posts found.</p>';
        }
        wp_reset_postdata();
    }
    ?>
</div>

다음으로 ‘관련 글’이 표시되는 형태를 설정하기 위해 CSS 코드를 추가하도록 하겠습니다.

워드프레스 관리자 화면에서 ‘외모’ → ‘사용자 정의하기’ → ‘추가 CSS’ 를 순서대로 클릭한 뒤, 맨 아래에 다음 코드를 추가하고 ‘공개’를 클릭합니다. CSS 코드의 맨 마지막에 있는 display: none; 은 썸네일이 표시되지 않도록 하기 위해 추가한 것으로, 썸네일이 표시되게 하려면 해당 라인을 삭제하면 됩니다.

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.related-post {
    border: 1px solid #ddd;
    padding: 10px;
}

.related-post img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    display: none;
}

Onepress 테마에서 플러그인 없이 관련 글을 표시하기 위해 위와 같이 single.php 와 CSS에 코드를 추가하고 저장하면 ‘관련 글’ 기능이 바로 적용되며, 아래 그림과 같이 표시됩니다.

single.php와 CSS 코드를 추가하여 관련 글이 표시되로고 하였습니다

스마트폰 화면에서는 관련 글이 세로로 배열되어 아래와 같이 3줄로 표시됩니다.

single.php와 CSS 코드를 추가한 후, 스마트폰에서 관련 글이 표시되는 결과 화면입니다

오늘은 워드프레스 Onepress 테마에서 플러그인 없이 관련 글을 표시하는 방법에 대해 알아보았습니다. 플러그인을 사용하면 쉽게 ‘관련 글’을 표시할 수 있지만, 설치된 플러그인이 많아질수록 사이트 속도에 부정적인 영향을 주기 때문에 꼭 필요한 기능에 대해서만 적용하는 것이 좋습니다. 오늘 소개해 드린 방법은 간단한 코드 추가만으로도 동일한 효과를 얻을 수 있기 때문에, Onepress 테마를 사용하시는 분이라면 적용해 보셔도 좋을 것 같습니다.