[워드프레스] 젯팩 관련 글 표시 개수를 바꾸는 방법

🕓2018.10.15 📈4

워드프레스 필수 플러그인인 젯팩(JetPack)의 기능 중 하나인 관련 글(Related posts) 기능은 특별히 신경쓰지 않아도 자동으로 특정 포스트와 관련이 있는 포스트를 보여주어 굉장히 유용합니다.

그런데 이 기능은 표시할 관련 포스트의 개수를 지정할 수가 없어 조금은 아쉽더라구요. 그래서 직접 관련 글의 개수를 조정 할 수 있는 방법을 찾아 정리해 봅니다.

(해당 내용은 사용중인 테마의 functions.php 파일과 style.css 수정해야 합니다.)

할 일

관련 글 기능의 표시할 포스트 개수를 조정하기 위해서는 젯팩 내장 함수의 일부 옵션을 수정해야 합니다.

뿐만 아니라 관련 글 기능은 기본 3개를 표시 하기 때문에 한 행에 3개의 포스트를 표시 하도록 기본적으로 스타일링 되어 있습니다. 따라서 4개의 포스트를 표시하려 할 경우 첫 행에 3개의 포스트가 표시 되고 나머지 1개 포스트는 다음 행에 표시 됩니다. 4개의 포스트를 표시 하고 싶다면 가로세로 2개씩 총 4개의 포스트를 표시하면 좋겠죠?

우리는 이 두가지의 문제를 해결해야 합니다.

functions.php

먼저 젯팩 관련 글 기능이 표시할 글의 개수를 바꿔야합니다. 다행히도 이는 젯팩에서 잘 제공하고 있는데, jetpack_relatedposts_filter_options 라는 내장 함수에 필터를 걸어 개수를 조정할 수 있습니다. 그 방법은 아래와 같습니다.

function my_jp_related_num( $options ) {
	$options['size'] = 4; // 관련 글 기능이 표시 할 포스트 개수
	return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'my_jp_related_num' );

style.css

사실 개수 변경은 비교적 간단합니다만, 문제는 스타일의 수정 부분입니다. 은근 손댈게 많아요. 아래 예제의 스타일링 코드들을 적절하게 수정하여 style.css 파일에 추가하면 됩니다.

(여기서는 총 4개의 포스트를 2*2 로 표시하는 방법을 예시로 합니다.)

개별 포스트 크기 수정

원래는 개별 포스트 1개당 크기가 33% 로 설정되어 있습니다. 우리는 한 행에 2개의 포스트를 표시하고 싶으니까 하나의 크기를 50%로 설정합니다.

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { width: 50%; }

한 행당 표시 포스트 개수 수정

기본적으로 한 행에 총 3개의 포스트를 표시하기 위해 젯팩은 3n+4 번째 포스트의 clear 속성이 both 로 지정되어 있습니다. 이를 해제하고 2n+1 번째 포스트의 clear 속성을 both 로 지정해야 합니다.

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), 
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) 
	{ clear: none; }

jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(2n+1),
jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(2n+1)
	{ clear: both; }

이미지 크기 수정

이제 총 4개의 포스트가 2*2 의 형태로 표시 됩니다. 그런데 뭔가 좀 이상하죠? 관련 글의 썸네일 이미지가 조금 작게 표시 됩니다. 이 이미지 크기를 키우기 위해 아래 스타일을 추가 합니다.

img.jp-relatedposts-post-img { width: 100%; }

이제야 모든 작업이 끝이 났습니다.

위 코드는 본인의 상황에 맞게 잘 수정해서 사용해야 합니다.

예를들어 한 줄에 3개씩 총 6개의 포스트를 표시하고 싶다면 스타일 수정은 필요없이 개수만 6개로 늘리면 됩니다. 만약 8개의 관련글을 표시 하고 싶다면 개수를 8개로 늘리고 5, 9, 13 번째 포스트가 행의 첫번째에 오도록 하기 위해 4n+1 번째 포스트의 clear 속성을 both 로 지정해야겠죠?

참고자료

Customize Related Posts – JetPack support

할 일