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

댓글 남기기
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

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

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

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

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

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

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

related posts in tistory compressor - 워드프레스 관련 글 목록 표시하기 (GeneratePress 테마)

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

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

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

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

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

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

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

<!-- 관련 글 -->
				<div class="related-posts">
				<h4><?php $categories = get_the_category();
echo esc_html( $categories[0]->name ); ?></span> 카테고리의 다른 글</h4>
<?php 
$post_id = get_the_ID();
    $cat_ids = array();
    $categories = get_the_category( $post_id );

    if(!empty($categories) && is_wp_error($categories)):
        foreach ($categories as $category):
            array_push($cat_ids, $category->term_id);
        endforeach;
    endif;

    $current_post_type = get_post_type($post_id);
    $query_args = array( 

        'category__in' => wp_get_post_categories($post->ID),
        'post_type'      => $current_post_type,
        'post__not_in' => array(get_the_ID()),
        'posts_per_page'  => '5',
	'orderby' => 'rand'

     );

    $related_cats_post = new WP_Query( $query_args );

    if($related_cats_post->have_posts()):
         while($related_cats_post->have_posts()): $related_cats_post->the_post(); ?>
            <ul>
                <li>
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                 
                </li>
            </ul>
        <?php endwhile;

        // Restore original Post Data
        wp_reset_postdata();
     endif; ?>
</div><!-- 관련 글 -->

위의 코드는 같은 카테고리의 글 5개를 랜덤하게 표시할 것입니다. 모든 카테고리 글을 표시하고 싶은 경우 '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;
}

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

마치며

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

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

참고



댓글 남기기

Leave a Comment