워드프레스 GeneratePress 플러그인 없이 관련글 추가방법

워드프레스 GeneratePress 플러그인 없이 관련글 추가방법

by
노랗 목차 보이기

GeneratePress 무료 버전으로 관련 글 표시하기

워드프레스에서 빠른 테마를 지원하는 GeneratePress 무료버전을 사용하고 있는데 포스팅 하단에 관련글을 표시하고 싶은 경우 다양한 플러그인을 제공하고 있습니다. 그리고 저 같은 경우 또 다른 관련 포스트 플러그인(YARPP) 플러그인을 통해 유사한 관련 포스팅이 표시되게 하고 있는데 이렇게 별도의 플러그인을 사용하지 않고 관련글을 추가하는 방법이 필요한 분들을 위해 내용을 정리해보았습니다.

플러그인 이름주요 기능장점단점
Yet Another Related Posts Plugin (YARPP)글 제목, 태그, 카테고리를 기반으로 관련 글 표시
위젯과 숏코드 제공		높은 커스터마이징 가능
유사도 알고리즘으로 정확한 관련 글 표시		대규모 사이트에서 성능 저하 가능
설정이 다소 복잡
Contextual Related Posts본문 내용과 제목을 기반으로 관련 글 표시
썸네일 포함된 레이아웃 지원
캐싱 기능 내장		본문 콘텐츠 기반으로 정확도 높음
성능 최적화를 위한 캐싱 제공		일부 테마와 호환성 문제
썸네일 설정이 다소 번거로움
Related Posts for WordPress단순한 인터페이스로 카테고리와 태그를 기반으로 관련 글 표시
썸네일, 텍스트 기반 레이아웃 지원		가벼운 플러그인으로 성능 저하 적음
초보자도 쉽게 사용 가능		고급 커스터마이징 부족
일부 복잡한 설정은 지원되지 않음
Inline Related Posts본문 내부에 관련 글을 표시
특정 위치에 관련 글 삽입 가능
클릭률(CTR) 향상 도구로 설계		본문 내 삽입으로 사용자 참여 증가
직관적인 설정 및 빠른 설치 가능		본문 레이아웃 변경 필요
글의 흐름에 방해가 될 가능성 있음
WordPress Related Posts태그, 카테고리, 제목을 기반으로 관련 글 추천
캐싱 시스템 내장
썸네일과 텍스트 표시 옵션 제공		빠른 속도와 쉬운 설정
다양한 스타일의 관련 글 레이아웃 제공		업데이트가 다소 느릴 수 있음
Jetpack Related PostsJetpack 모듈 중 하나로 관련 글 표시
서버 측에서 작업하여 사이트 성능 저하 방지		서버 측 작업으로 성능에 영향 적음
추가 설정 없이 간단히 활성화 가능		Jetpack 설치 필요
커스터마이징 제한적
Similar Posts카테고리, 태그, 포스트 ID를 기반으로 관련 글 표시
여러 옵션을 통해 표시 조건 설정 가능		세부적인 조건 설정 가능
단순 텍스트 기반으로 빠른 로딩		썸네일 및 시각적 커스터마이징 부족
Related Posts Thumbnails썸네일 기반의 관련 글 표시
사용하기 쉬운 인터페이스와 미리보기 제공		시각적으로 매력적인 썸네일 레이아웃
초보자도 쉽게 설치 및 설정 가능		제목 기반으로만 관련성 계산
큰 규모의 사이트에서 느려질 수 있음

우선 기존의 Jetpack을 사용하면서 관련글 기능을 사용했는데 지금은 WP Rocket 사용하면서 제트팩 기능과 중첩되느게 많아 비활성화하다보니 관련글 플러그인이 별도로 필요한 상황이 되었습니다.

1. 구텐베르크의 “카테고리 글 목록” 블록 사용하기

워드프레스의 기본 구텐베르크 블록 에디터를 사용하여, 관련 글을 특정 카테고리나 태그로 자동 표시하는 방법입니다.

  1. 글 편집 페이지로 이동
    • 포스트 작성/수정 화면에서 구텐베르크 에디터를 엽니다.
  2. 블록 추가
    • 포스팅 하단으로 스크롤한 뒤, “+” 버튼을 눌러 새로운 블록을 추가합니다.
    • 검색창에 “쿼리 루프”(Query Loop)를 입력하고 선택합니다.
  3. 쿼리 루프 설정
    • 쿼리 루프는 워드프레스의 글을 자동으로 가져오는 블록입니다.
    • 설정 옵션에서 “카테고리 필터”나 “태그 필터”를 사용하여 현재 포스트와 동일한 카테고리 또는 태그의 글을 표시하도록 설정합니다.
    • 표시할 글의 개수(예: 3개)와 레이아웃을 선택합니다.
  4. 디자인 조정
    • 블록 설정에서 글 제목, 썸네일, 발행 날짜 등 표시 항목을 조정합니다.

해당 블록은 사용자가 직접 글을 추가할 필요 없이 자동으로 관련 글을 가져오며, 레이아웃도 간단히 변경할 수 있습니다.

2. GeneratePress의 “Element” 기능 활용 (프리미엄이 아닌 경우에도 가능)

GeneratePress 테마의 기본적인 PHP 단축 코드를 활용하는 방법으로, 약간의 HTML 삽입만으로 해결할 수 있습니다.

  1. 외모 > 사용자 정의 > 위젯으로 이동:
    • 블로그 포스트 하단에 사용할 수 있는 위젯 영역을 추가합니다.
    • 아래 코드를 복사해 HTML 위젯에 붙여넣습니다.
<div class="related-posts">
  <h3>관련된 글</h3>
  <ul>
    <?php
      $categories = get_the_category();
      if ($categories) {
          $first_category = $categories[0]->term_id;
          $args = array(
              'category__in' => array($first_category),
              'post__not_in' => array(get_the_ID()),
              'posts_per_page' => 3, // 표시할 관련 글 개수
          );
          $related_posts = get_posts($args);
          foreach ($related_posts as $post) : setup_postdata($post);
              echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
          endforeach;
          wp_reset_postdata();
      }
    ?>
  </ul>
</div>

저장 후 페이지를 새로고침하면 하단에 “관련된 글” 목록이 표시됩니다.

3. 워드프레스의 기본 위젯 활용

카테고리와 태그를 사용해 관련 글을 표시하는 가장 쉬운 방법입니다.

  1. 외모 > 위젯으로 이동합니다.
  2. “최근 글” 위젯을 추가합니다.
    • 조건: 현재 페이지와 같은 카테고리의 글을 표시하려면, “카테고리”를 기준으로 글을 정리하세요.
    • 이 방법은 완벽히 자동화되지는 않지만, 시각적으로 간단한 관련 글 표시를 구현할 수 있습니다.

4. 테마 커스터마이저를 활용한 방법

GeneratePress의 사용자 정의 옵션에서 포스팅 하단에 콘텐츠를 추가할 수 있습니다.

외모 > 사용자 정의 > 추가 CSS에서 다음 CSS를 추가합니다.

.related-posts {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
}
.related-posts h3 {
    margin-bottom: 10px;
}
.related-posts ul {
    list-style: none;
    padding: 0;
}
.related-posts li {
    margin: 5px 0;
}
.related-posts li a {
    text-decoration: none;
    color: #0073aa;
}
.related-posts li a:hover {
    text-decoration: underline;
}

    플러그인을 사용하지 않고 관련 글을 표시하려면, 구텐베르크의 “쿼리 루프” 블록을 활용하는 방법이 가장 간단합니다.
    이를 통해 관련 글을 자동으로 표시할 수 있어 초보자도 손쉽게 사용할 수 있습니다.

    만약 위 방법으로 관련글이 포스팅 하단에 표시되지 않는다면 올바른 PHP 코드는 위젯 영역에서 작동하지 않습니다.

    워드프레스 위젯은 HTML, CSS, JavaScript만 지원하며, PHP 코드는 실행되지 않습니다. PHP 코드를 사용하려면 functions.php 파일에 추가하거나 코드 스니펫 플러그인을 사용하는 방식으로 접근해야 합니다.

    PHP 코드를 사용하여 관련 글 표시하기 (functions.php에 추가)

    워드프레스 관리자 대시보드에서 외모 > 테마 파일 편집기로 이동 후 functions.php 파일을 열고 아래 코드를 추가합니다.

    function generatepress_related_posts($content) {
    if (is_single()) { // 단일 포스트 페이지에서만 작동
        global $post;
        $categories = get_the_category($post->ID); // 현재 글의 카테고리 가져오기
        
        if ($categories) {
            $first_category = $categories[0]->term_id;
            $args = array(
                'category__in' => array($first_category),
                'post__not_in' => array($post->ID),
                'posts_per_page' => 3, // 표시할 관련 글 개수
            );

            $related_posts = new WP_Query($args);

            if ($related_posts->have_posts()) {
                $content .= '<div class="related-posts">';
                $content .= '<h3>관련된 글</h3>';
                $content .= '<ul>';
                while ($related_posts->have_posts()) {
                    $related_posts->the_post();
                    $content .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
                }
                $content .= '</ul>';
                $content .= '</div>';
                wp_reset_postdata();
            }
        }
    }
    return $content;
}
add_filter('the_content', 'generatepress_related_posts');

    이 코드는 단일 포스트 페이지의 본문 내용 하단에 관련 글을 자동으로 추가하며 같은 카테고리에서 최대 3개의 관련 글을 표시합니다.

    또한 add_filter('the_content', 'generatepress_related_posts');는 포스트 본문 내용에 관련 글을 추가하는 역할을 합니다.

    CSS로 스타일 조정 (선택 사항)

    외모 > 사용자 정의 > 추가 CSS로 이동하여 아래 코드를 추가합니다.

    .related-posts {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.related-posts h3 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}
.related-posts ul {
    list-style: none;
    padding: 0;
}
.related-posts ul li {
    margin-bottom: 8px;
}
.related-posts ul li a {
    text-decoration: none;
    color: #0073aa;
}
.related-posts ul li a:hover {
    text-decoration: underline;
}

      위젯을 사용해야 한다면?

      위젯에서 PHP 코드를 실행하려면 플러그인을 추가로 설치하거나 functions.php를 활용하여 위젯에 동적으로 내용을 삽입해야 합니다.

      1. PHP 코드를 실행하는 플러그인 설치

      • Insert PHP Code Snippet 또는 Code Snippets 플러그인을 설치합니다.
      • 플러그인에서 PHP 코드를 추가한 후, 생성된 숏코드를 위젯에 삽입하면 됩니다.

      2. 사용자 정의 위젯 생성 (functions.php 활용)

      PHP 코드를 활용한 사용자 정의 위젯을 추가하는 방법은 약간 복잡하므로, 플러그인을 사용하는 것이 더 쉬운 대안입니다.만약 조금 더 기능 확장이 필요하다면, GeneratePress의 위젯이나 HTML을 활용하거나 테마 옵션을 사용하여 포스트 하단에 직접 관련 글을 추가하는 방법도 고려해 보세요.

      Leave a Comment