워드프레스 관련 글 (Related Posts) 설정하는 방법

포스트 마지막 부분에 워드프레스 관련 글 (Related Posts) 설정 어떻게 하는지 궁금하신가요?

글 하단 부분에 포스트 주제와 비슷한 관련 글을 보여줌으로써 방문자가 또 다른 글을 읽게 하고, 구글 SEO 점수에 중요한 사이트 체류 시간이 늘어나는 효과를 기대할 수 있는데요.

먼저 관련 글을 설정했을 때 글 하단에 어떻게 보이는지 결과물을 보겠습니다.

만약 위와 동일하게 워드프레스 관련 글을 설정하고 싶었다면 잘 오셨습니다. 누구나 15분만 투자하면 위와 동일한 결과물을 만들 수 있으니 천천히 읽어봐주시기 바랍니다.

그럼 워드프레스 연관 글 설정하는 방법에 대해서 하나씩 알아보겠습니다.

관련 글 (Related Posts) 설정에 앞서…

지금 알려드리는 방법은 먼저 아래 플러그인과 테마를 설치해야 합니다.

제너레이트프레스 유료 테마 결제 및 설치 방법이 궁금하신 분은 아래 글을 참고하세요.

✅ 제너레이트프레스 (GeneratePress) 유료 테마 결제 및 설치 테마 적용 방법

자 그럼, 준비가 되신 분들은 다음 단계로 바로 넘어갑니다.

워드프레스 관련 글 설정하는 방법

워드프레스 관련 글 설정을 위해서는 리스트와 엘리먼트를 만들고, CSS를 추가하기만 하면 됩니다. 막상 해보면 그렇게 어렵지 않으니 아래 내용보시면서 하나씩 따라보시기 바랍니다.

WP Show Posts에서 리스트 만들기

1) WP Show Posts > Add New 버튼을 누릅니다.

Posts 항목의 설정 내용은 다음과 같습니다.

  • Post type : 포스트 타입 (포스트 / 페이지)
  • Taxonomy : 분류방법 (카테고리/포스트 태그/포스트 형식)
  • Terms : 카테고리명
  • Posts per page : 포스트 갯수
  • Shortcode : 숏코드 (중요!)

지금 설정한 내용은 워드프레스라는 카테고리의 3개의 포스트를 연관 글로 표시하겠다는 내용입니다. 지금 이 글을 보고 셋팅하시는 분은 본인의 워드프레스에 설정한 카테고리명이 보일겁니다.

리스트를 만들고 나서는 [su_highlight]Shortcode 값을 따로 복사[/su_highlight]하도록 합니다.

2) Columns 값을 설정합니다.

  • Columns : 세로열 갯수
  • Columns gutter : 세로열 사이 간격

3) Images 값을 설정합니다.

  • Images : 이미지 표시 여부
  • Image alignment : 이미지 정렬
  • Image location : 이미지 위치

연관 글의 이미지는 제목 위에 중앙 정렬로 보여주도록 설정하였습니다.

4) Content type 값을 설정합니다.

  • Content type : 콘텐츠 내용 표시 방법
  • Include title : 제목 포함
  • Title element : 태그

콘텐츠 내용은 보이지 않도록 하고, 제목을 포함하도록 설정합니다.

그리고 나중에 CSS를 통해 제목 크기를 조정하기 위해서 h3 태그를 선택합니다.

5) Meta 값을 설정합니다.

기본적으로 Include date 항목이 체크되어 있습니다. 저는 날짜를 포함하지 않도록 체크를 해제하였습니다. 만약 특정 메타 값을 넣고 싶다면 체크하면 됩니다.

지금까지 플러그인을 통한 연관 글 리스트 만들기가 마무리 되었습니다. 이제는 리스트를 추가하여 제너레이트프레스 엘리먼트를 만들도록 하겠습니다.

GeneratePress 엘리먼트 추가하기

1) 외모 > Elements > Add New Elements를 누릅니다.

엘리먼트 타입은 Hook를 선택합니다.

참고로 엘리먼트 메뉴는 제너레이트프레스 유료 버전에서만 사용 가능한 메뉴입니다. 그래서 서두에 제너레이트프레스 유료 테마 설치가 필요하다고 말씀드린 겁니다.

2) 엘리먼트 내용을 입력하고 Settings 값을 설정합니다.

앞서 리스트를 만들 때 따로 복사해놓은 Shortcode 값을 아래 형식에 맞춰서 엘리먼트 내용을 입력하면 됩니다. wp_show_posts id 값은 각자 다르니 본인 숏코드를 넣어야 합니다.

<div class="related-posts grid-containder">
<h2>관련 글</h2>
[wp_show_posts id="539"]
</div>

Settings 에서 관련 글이 표시되는 위치를 generate_after_content 를 선택하고 위에서 입력한 숏코드가 실행되도록 Execute Shortcodes를 체크합니다.

3) Display Rules 값을 설정합니다.

워드프레스 관련 글이 워드프레스 카테고리 글에만 보이도록 선택했습니다. 저처럼 특정 카테고리에만 보이도록 설정도 가능하고, 모든 글에 보이도록 설정도 가능합니다.

제너레이트프레스 엘리먼트 만들기도 끝났습니다. 이제 마지막으로 CSS 코드만 추가하면 됩니다.

관련 글 추가 CSS로 꾸미기

아래 CSS 코드를 복사해서 외모 > 추가 CSS에 붙여넣기 합니다.

/* 관련글 */
.related-posts {
background-color: #fff;
padding: 1.5em 0.5em 0.5em 0.5em;
margin-top: 3em;
box-shadow: 0px 0px 5px 0.2px rgba(1,10,0,0.33);
}

.related-posts h2{
BORDER-LEFT: #fcb900 7px solid;
padding: 2px 10px;
font-size: 22px;
font-weight:bold;
color: rgba(252, 185, 0, 1);
}

.related-posts h3{
font-size: 16px;
font-weight:bold;
}

.wp-show-posts-image{
border: 1px solid rgba(153, 153, 153, 1);	
}

.grid-container {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
padding-left: 0em;
padding-right: 0em;
}

그 동안 제 글을 읽어보신 분들은 익숙한 CSS 코드가 보이실 겁니다. CSS 코드 수정이 가능하신 분은 글자 크기, 색깔, 이미지 경계, 여백 등 을 본인 취향대로 수정하여 사용하면 됩니다.

글 마치며…

지금까지 워드프레스 관련 글 (Related Posts) 설정하는 방법에 대해서 알아봤습니다. 사실 저는 이 방법을 찾아서 적용하고, 정리하는데 2일 정도 시간이 소요되었습니다.

그러나 이 글을 보고 따라서 적용하신 분들은 오래 걸리지 않았을 거라고 믿습니다. 저와 비슷한 환경에서 워드프레스를 운영하시는 분들께 도움되었길 바라며 글 마치겠습니다.

답글 남기기