워드프레스 관련 글 플러그인: Contextual Related Posts

워드프레스에서는 관련 글을 표시하는 다양한 플러그인이 있습니다. Contextual Related Posts는 업데이트가 활발히 이루어지고 있고, 카드 레이아웃으로 관련 글 항목을 표시하므로 관련 글 항목들을 세련된 스타일로 표시할 수 있습니다.

이 글에서는 Contextual Related Posts 플러그인을 설치하고 세팅하는 방법에 대하여 살펴보겠습니다.

워드프레스 관련 글 플러그인: Contextual Related Posts

워드프레스용 관련 글 플러그인으로 YARPP – Yet Another Related Posts Plugin이 많이 사용되고 있습니다. 이 플러그인은 현재 10만 개가 넘는 사이트에 설치되어 있고 무난한 포맷으로 관련 글을 표시합니다.

또 다른 플러그인으로 WP Show Posts가 있습니다. 이 플러그인은 현재 8만 개가 넘는 사이트에 설치되어 있지만 1년 이상 업데이트가 이루어지지 않고 있습니다. 그러나 최신 워드프레스 버전과 GeneratePress 테마를 비롯한 대부분의 테마에서 잘 작동합니다.

색다른 스타일로 관련 글을 표시하고 싶은 경우 Contextual Related Posts 플러그인을 고려할 수 있습니다. 이 플러그인을 사용하면 아래 그림과 같이 카드 레이아웃으로 연관 글들을 나열할 수 있습니다.

위와 같이 나열하는 방법에 대하여 간단히 살펴보겠습니다.

CRP 플러그인 설치

이 무료 플러그인은 플러그인 » 플러그인 추가에서 "Contextual Related Posts"를 검색하여 설치할 수 있습니다.

설치하고 활성화하면 Never miss an important update (중요한 업데이트를 놓치지 마세요) 페이지가 표시됩니다. Skip 버튼을 누릅니다.

CRP 플러그인 설정

이 플러그인을 활성화하면 설정 » Related Posts에서 설정할 수 있습니다.

General 탭

General 탭의 "Automatically add related posts to"은 관련 글 리스트가 자동으로 표시될 포스트 타입을 지정합니다. Posts만 체크합니다.

또는, GeneratePress 테마의 훅(Hook)을 사용하여 연관 글을 배치하고 싶은 경우에는 체크를 모두 해제하고 다음 PHP 코드를 사용하여 연관 글 목록을 원하는 곳에 표시할 수 있습니다.

<?php if ( function_exists( 'echo_crp' ) ) { echo_crp(); } ?>

자동으로 추가하는 경우에는 콘텐츠 하단에 표시되며 사용자가 위치를 조정할 수는 없습니다. 하지만 대부분의 경우 자동 추가 옵션을 사용하면 무난할 것 같습니다.

모바일에서 관련 글을 표시하지 않으려는 경우 Disable on mobile devices 옵션을 체크하도록 합니다.

AMP 플러그인을 설치한 경우 AMP 페이지에 관련 글을 표시하지 않으려면 Disable on AMP pages 옵션을 활성화합니다.

Performance 탭

Performance 탭에서는 성능(속도) 관련 설정을 할 수 있습니다.

Efficient Content Storage and Indexing (ECSI) 섹션에서는 Tools 탭을 클릭하여 ECSI 테이블을 생성할 수 있습니다. ECSI는 관련 콘텐츠를 빠르게 조회할 수 있도록 최적화된 전용 데이터베이스 테이블을 생성하는 방식으로, 게시물이 많거나 방문자가 많은 사이트에서 성능을 크게 향상시켜준다고 합니다. 만약 ECSI 테이블을 생성하려는 경우 DB 백업을 한 후에 진행하면 좋을 것 같습니다.

이 기능을 사용하려면 MariaDB 버전 10.7.1이 권장됩니다. 체크해보니 카페24의 경우 MariaDB 버전이 10.6.17이고 클라우드웨이즈의 경우 이 보다 조금 높은 10.6.21 버전이 사용되고 있네요. MariaDB 버전이 10.7.1이 아니더라도 플러그인이 작동하지만, 데이터베이스를 업그레이드하면 더 나은 성능이 가능하다고 합니다.

캐시 문제가 발생하는 경우가 아니라면 Cache posts only와 Cache HTML output 옵션은 기본 설정(활성화)을 그대로 사용하면 될 것 같습니다.

List Tuning 탭

이 탭에서는 표시할 포스트 개수, 정렬 방식 등을 지정할 수 있습니다.

Number of posts to display에서 표시할 글 개수를 지정할 수 있습니다. Order posts 옵션에서는 정렬 방식을 지정할 수 있습니다.

• By relevance - 관련성이 높은 글을 먼저 표시
• Randomly - 랜덤하게 표시
• By date - 날짜순 정렬

HTML 캐싱이 활성화된 경우에는 Randomly 옵션이 작동하지 않습니다. 랜덤하게 글을 표시하고 싶은 경우에는 Performance 탭에서 HTML 캐싱을 비활성화하시기 바랍니다. (또한, 캐시 플러그인에서도 이 옵션이 활성화되었다면 비활성화하여 테스트해보세요.)

경험상 랜덤하게 표시하는 기능은 캐시 플러그인이 활성화된 경우에는 제대로 작동하지 않을 가능성이 높고 페이지 로딩 속도를 느리게 할 수 있는 것 같습니다.

Output 탭

Heading of posts는 관련 글 목록의 소제목을 표시하는 텍스트를 입력합니다. 기본적으로 다음과 같은 HTML 코드로 되어 있습니다.

<h2>Related Posts:</h2>

H2 태그를 사용할 경우 해당 테마에서 설정된 H2 헤딩 스타일이 적용될 수 있습니다. 저는 자체적으로 스타일을 지정하기 위해 테스트로 다음과 같이 입력해 보았습니다.

<div class="crp-related-articles"><span>인기 글</span></div>

스타일은 CSS로 지정이 가능합니다.

만약 요약문을 표시하고 싶은 경우에는 Show post excerpt 옵션을 활성화하고 Length of excerpts (in words) 옵션에서 요약문 길이(단어수)를 지정할 수 있습니다.

Thumbnail 탭

이 탭에서는 썸네일 관련 설정을 할 수 있습니다.

스타일 탭에서 Rounded thumbnail 옵션을 선택한 경우 이 탭의 Location of the post thumbnail 옵션은 무시됩니다.

썸네일 사이즈와 썸네일 폭(너비)/썸네일 높이 설정은 해당 사이트의 상황에 맞게 적절히 선택하시기 바랍니다.

이 플러그인은 반응형에서는 어색하게 대응하는 것 같습니다. 모바일 기기에 맞게 설정하는 경우에는 PC에서 어색할 수 있고, 데스크톱을 기준으로 설정하는 경우에는 모바일 기기에서 어색하게 표시될 수 있습니다.

이 문제를 해결하려면 PC에 맞게 썸네일 크기와 개수를 설정하고, CSS를 사용하여 모바일에서는 1열로 표시되도록 하는 방법을 시도할 수 있습니다. 스타일 탭에서 커스텀 CSS를 추가할 수 있습니다. (이와 관련된 예시 코드를 아래의 Styles 탭에서 확인할 수 있습니다.)

Styles 탭

이 탭에서는 관련 글 스타일을 지정하고 사용자 CSS 코드를 입력할 수 있습니다.

Related Posts style은 기본적으로 Rounded thumbnails로 설정되어 있습니다. 이 옵션을 이용하면 관련 글 항목들이 카드 스타일로 표시됩니다.

Custom CSS에서는 사용자 CSS 코드를 추가할 수 있습니다. 아래는 소제목 스타일과 모바일에서의 썸네일 크기 등에 대한 예시 코드입니다.

.crp-related-articles span
 {
    line-height: 19px;
    display: inline-block;
    padding: 7px 12px 4px;
    background-color: #222;
    color: #fff;
    font-size: 1.2em;
}

.crp-related-articles {
    line-height: 1;
    margin-top: 30px;
    margin-bottom: 26px;
    border-bottom: 2px solid #222;
    font-weight: 600;
}


/* 모바일: 767px 이하 */
@media (max-width: 767px) {
	.crp_related.crp-rounded-thumbs img {
		max-width: 100% !important;
	}
}

마치며

이상으로 워드프레스에서 관련 글을 카드 스타일로 나열하는 Contextual Related Posts 플러그인에 대하여 살펴보았습니다.

글을 작성할 때 특성 이미지의 비율이 일정하지 않으면 관련 글에 표시되는 썸네일 크기가 일정하지 않아서 보기가 좋지 않을 수 있습니다. 특성 이미지들의 가로/세로 비율(종횡비)를 가능하면 동일하게 유지하면 좋습니다.

참고

• 워드프레스 관련 글 목록 표시하기 (GeneratePress 테마)
• 워드프레스 GeneratePress 테마 썸네일 크기 문제 해결 방법
• 워드프레스로 쉽게 랜딩 페이지 만들기 (feat. 엘리멘터, GeneratePress, Divi)