홈페이지 블로그를 운영하신다면, 블로그에서 본문 하단에 나오는 연관 글의 유용함을 아시고 계실 겁니다. 연관 글 표시는 사이트 방문자가 다른 콘텐츠를 추가적으로 경험하도록 유도하여서 사이트 체류 시간과 SEO 최적화에 도움을 줄 수 있는 아주 유용한 기능입니다. 그 중에서 GeneratePress 테마 연관 글을 추가하는 방법은 매우 다양하게 있는데요. 그 중에서 쉽고 간편하게 Elements 기능을 이용한 연관 글 추가 방법에 대해 설명드리도록 하겠습니다.
GeneratePress 테마 연관 글이란?
연관 글(Related Posts)은 웹사이트 방문자가 현재 읽고 있는 글과 비슷한 주제나 카테고리의 다른 글을 읽을 수 있도록 추천하고 유도하는 기능을 가지고 있습니다. 현재 본문이 끝난 후, 독자가 흥미를 가질 법한 연관 글을 보여줌으로써 사이트 이탈률을 낮추고, 체류시간은 더 높이는 효과가 있습니다. 이것을 통해 더 많은 페이지뷰를 확보하고 사용자 행동을 유발할 수 있다는 점이 있습니다.
GeneratePress 테마 연관 글의 이점
- 사이트 체류 시간 증가
구글, 네이버, 다음과 같은 검색 엔진은 방문자의 사이트 체류 시간을 해당 웹사이트에 대한 사용자의 만족도와 관련되 긍정적인 요소로 판단하기에, 체류 시간이 증가하는 것은 매우 좋은 현상입니다. 연관 글이 있으면 방문자가 곧바로 나가지 않고 다른 글도 읽어볼 가능성이 높아지기에 상대적으로 체류 시간이 증가하는 긍정 효과가 있습니다.
특히나, 체류 시간이 증가하면 검색 엔진 순위에 영향을 미치는 SEO 점수도 높아지기에 연관 글 설정은 매우 유용합니다.
- 사이트 이탈률 감소
사이트 이탈률(Bounce Rate)은 방문자가 한 페이지만 보고 나가는 비율을 말합니다. 이탈률이 높으면 검색 엔진으로부터 사이트 자체의 매력도가 낮다고 판단될 가능성이 높습니다. 연관 글을 추가하면 방문자가 다른 글을 클릭함으로써 이탈률을 감소시킬 수 있습니다. 또, 방문자의 더 깊은 탐색을 유도하여 특정 주제에 대해 더 높은 만족도를 느끼게 합니다.
- 주제에 대한 전문성 및 신뢰성 확보
특정 정보를 찾기 위해 접속한 블로그에서 유용한 글을 보고 만족감을 느껴서 어느 순간 나도 모르게 다른 연관 글도 다 봐버린 경험 한 번쯤 있지 않으신가요? 그러면서 블로그 작성자에 대해 탐색해보고 구체적으로 블로그 사이트에 대한 정보를 수집하기도 합니다. 이처럼 블로그에 체류하는 시간이 많아지면 많아질 수록 해당 블로그 운영자에 대한 전문성과 신뢰성이 높아지는 경향이 있습니다.
연관 글 기능을 통해 동일 주제에 대한 포스트들이 많이 있다면, 자연스럽게 내가 운영하고 있는 사이트의 권위와 전문성을 높일 수 있습니다.
GeneratePress 테마 연관 글 추가하는 방법
그러면 이제 GeneratePress 테마 연관 글 추가는 GeneratePress Premium의 Elements 기능과 플러그인 사용을 통해 설정할 수 있습니다. 참고로, GeneratePress 무료 버전은 이 Elements 기능을 제공하지 않기에, GeneratePress Premium 버전이 필요하다는 점 말씀드립니다.
GeneratePress 테마 유료 버전에 대한 자세한 설명과 이용은 아래 글을 참고해보시면 좋습니다.
연관 글 기능 설정은 GeneratePress 테마 제작자의 WP Show Posts 라는 플러그인을 이용해야 합니다.
1.WP Show Posts 플러그인 설치 및 설정

워드프레스 관리자 페이지에서 플러그인 > 새로 추가 탭에 들어가 ‘WP Show post’를 검색하여 위와 같은 플러그인을 설치하고 활성화합니다. 해당 플러그인은 GeneratePress 테마의 제작자가 만든 플러그인으로 8만 개 사이트에서 다룬로드되었으며, 사용자 평가도 좋은 편입니다.

WP Show Posts 플러그인의 활성화가 되면, 글 아래 WP Show Posts가 뜨게 됩니다.

여기서 Add New 버튼을 누르면 위와 같이 화면 전환이 이루어집니다. 이 화면에서 관련 설정을 합니다. 해당 플러그인은 쉽게 설명하면 글을 추출해서 페이지에 보여주는 기능을 합니다.
Posts에서는 어느 글을 보여줄 것인지 그 조건을 설정할 수 있고, Columns, images, Content 등 연관 Post가 보여질 형식에 대한 설정을 할 수 있습니다. 각 항목마다 설정을 해보도록 하겠습니다.
- Posts

Posts에서는 Taxonomy를 category로 설정해줍니다. category로 설정을 하면 연관 글을 같은 카테고리의 글을 추출하여 표시하게 됩니다. 가장 무난한 설정이라 볼 수 있습니다.
post_tag는 연관된 글을 더 잘 보여준다는 점이 있지만, 글 작성 시에 tag 설정을 더 정확하게 해야 합니다. 그리고 tag로 설정하게 되면 서버에 부하를 더 주기에 처음 설정 시에는 category를 고르는 것이 좋겠습니다.

그리고 Posts per page는 페이지에 표시할 연관 글의 개수인데요. 3개에서 4개 정도가 가장 적절합니다.
Pagination 옵션을 체크하게 되면, 같은 카테고리 글이 9개 있다면, 보이지 않는 나머지 글은 2,3(페이지 번호)를 보여주어 다음 글을 볼 수 있게 합니다.
- Columns

Columns은 한 줄에 보여줄 항목의 개수를 설정합니다. 3개의 글을 보여줄 것이기에 Columns는 3으로 설정하고 여백(Columns gutter)은 2em으로 그대로 둡니다.
- images

연관 글로 보여질 Post의 썸네일 이미지에 대한 설정을 합니다. Images에 체크 해제하면 썸네일은 보이지 않고 글만 보이게 할 수 있습니다.
이미지 사이즈는 300 x 250 로 무난하게 설정합니다. 이미지 정렬은 중앙, 이미지 아래에 글이 오도록 설정합니다.
Above title이 이미지가 글 제목 위이고 Below title이 글 제목 아래입니다.
- Content

제목과 이미지 외 본문 글 표시와 관련된 사항을 설정하는 탭입니다. 이미지와 글 제목만 보여준다면 None으로, 글 본문의 일부를 보여주고 싶다면 Excert를 선택하고 Excert Length(보여줄 본문의 길이)를 설정합니다. 그리고 Title element는 h4 또는 h5로 설정하는 것이 좋습니다.
나머지 설정은 기본으로 두어도 무방합니다.
- Meta

Meta 탭은 글의 작성자, 글의 발행날짜 등을 표시할 수 있도록 합니다. 하지만, 필수적인 정보들이 아니기에 모두 체크 해제합니다. 여기까지 다 완료를 하면 공개 버튼을 누릅니다.

우측을 보면 Usage에서 Shortcode와 php 함수문을 볼 수 있는데요. 이것은 이후의 Hook 설정에 필요하므로 복사를 해둡니다.
2.GP Preminum의 Hook 설정하기
연관 글 설정을 완료하였다면, 이제 GeneratePress 테마 연관 글 설정을 하려면 Elements의 Hook 설정을 마지막으로 완료해야 합니다.
참고로 GeneratePress Preminum의 Elements기능에 대한 추가적인 정보는 아래 공식 문서를 확인하시기 바랍니다.

워드프레스 관리자 페이지의 외모 > Elements 메뉴에 들어갑니다. Add New Element 버튼을 클릭하여 새로운 요소를 Type은 Hook으로 추가해줍니다.

제목을 위와 같이 입력한 후, Hook의 위치는 generate_after_content로, 사용한 코드 종류에 따라 Shortcodes, PHP 중 하나에 체크합니다. 그리고 복사한 PHP 코드를 content에 붙여넣습니다.
- Display Rules

글 표시로는 글 – All 글로 설정합니다. 표시를 제외할 것은 페이지로 설정합니다.

공개 버튼을 누른 뒤, 연관 글이 잘 표시되는지 글 페이지로 가서 확인을 해봅니다. 그러면 연관 글들이 위와 같이 잘 표시가 되는 것을 확인할 수 있습니다. 만약, 여기서 레이아웃이나 글꼴, 글자크기 등이 마음에 들지 않다면 CSS 코드를 이용하여 디자인을 다시 설정해볼 수 있습니다.
이 추가 CSS 코드로 커스터마이징하는 방법은 추후 정리해보도록 하겠습니다.
GeneratePress 테마 연관 글 사용 시 유의점
마지막으로 GeneratePress 테마 연관 글 설정 시 유의사항 몇 가지를 정리하며 글을 마치겠습니다.
- 연관 글의 수: 너무 많으면 방문자가 혼란을 느낄 수 있으니 3~5개가 적절합니다.
- 페이지 로딩 속도: 연관 글은 페이지 로딩 속도에 영향을 주기에, 썸네일 이미지는 최적화하거나 캐시 플러그인응 사용해 성능을 유지합니다.
- 디자인: 연관 글의 위치나 디자인이 사용자 경험을 저해하지 않는 선으로 설정합니다. 위치는 보통 본문 다음에 오는 것이 적절합니다.