워드프레스 블로그에 가장 적합한 테마 GeneratePress 테마에 한가지 아쉬운 점은 경쟁상대인 OceanWP 테마나 Astra 테마와 달리 연관 글 기능을 직접적으로 지원하지 않는다는 점입니다.
연관 글 기능이 없는 점은 한번 고민을 해 볼 필요가 있습니다.
바로 속도에 연관이 되기 때문입니다.
즉 블로그의 속도를 위해서는 연관 글 기능을 설정하지 않는 것이 좋다라는 것입니다.
이 점 때문에 판매중인 워드프레스 블로그 SEO & 애드센스 설정 끝내기 책에도 연관 글 기능을 위한 플러그인 활용에 대한 부분을 추가하지 않았습니다.
연관 글 기능을 애드센스의 일치하는 광고로 대체했습니다만 3월 부터 이제 일치하는 광고는 더 이상 블로그의 다른 글들을 보여주지 않고 광고(멀티플렉스 광고)들로만 노출이 되게 변경이 된다고 합니다.
블로그의 속도 저하를 감수하더라도 방문자의 체류시간을 늘려줄 수 있으며, 전면 광고에 도움이 되는 연관 글 기능에 대해 고민을 하다 결국 추가하는 방법에 대해 설명을 하기로 하였습니다.
GeneratePress 테마 무료 버전에서는 활용이 불가능하며 유료 버전인 GP Premium의 Hook 기능이 필요합니다. 또한 연관 글 기능 설정은 연관 글 플러그인이 아닌 GeneratePress 테마 제작자의 WP Show Posts 라는 플러그인을 활용할 것입니다.
GeneraPress 테마(GP Premium)에 연관 글 설정하기
WP Show Posts 플러그인 설치 및 설정
플러그인 새로 추가 메뉴에서 ‘wp show post’라고 검색을 하면 위와 같이 WP Show Posts 라는 플러그인을 확인할 수 있습니다.
GeneratePress 테마의 제작자가 제작한 플러그인이며, 그나마 서버 부하에 적은 영향을 미친다는 평을 받고 있습니다.
지금 설치 버튼을 클릭한 이후 바로 활성화를 시켜줍니다.
WP Show Posts 플러그인이 활성화 되면 위와 같이 WP Show Posts 라는 메뉴가 추가됩니다.
Add New List 버튼을 클릭하면 위와 같은 화면으로 전환이 됩니다.
이 화면에서 관련 설정을 하게 됩니다.
WP Show Posts 플러그인은 쉽게 설명하면 글을 추출해서 보여주는 플러그인입니다.
어떻게 추출을 할 것인지 설정을 합니다.
Post 메뉴에서 설정해야 할 것은 바로 Tqxonomy 항목입니다.
가장 무난하게 설정할 수 있는 것은 category 입니다.
Category로 설정을 하면 같은 카테고리의 글을 추출하게 되며 만약 Post_tag를 설정하면 같은 tag로 지정된 글들을 추출하게 됩니다.
일단 tag로 추출하는 것이 서버에 더 부하를 주기에 Category로 설정을 하겠습니다.
tag 추출이 더 연관 된 글을 보여줍니다만 이 경우 글을 작성 시에 tag 설정에 이 부분을 고려해야 합니다. 그래야 연관 글 노출이 잘 됩니다.
Post 메뉴에서는 위와 같이 설정을 하였습니다.
글을 카테고리 기준으로 추출을 하며 한번에 3개의 글을 보여주게 설정했습니다.
가장 밑에 Pagination은 만약 6개의 글을 추출하고 3개의 글만 보여준다면 밑에 Pagination(페이지 번호)를 보여 주어 다음 글들을 볼 수 있게 할 수 있습니다만.. 필요 없기에 옵션을 체크하지 않습니다.
이번에는 Columns 메뉴 설정을 하겠습니다.
한 줄에 3개 항목을 보여줄 것이기에 Columns는 3을 설정하고 여백(Columns gutter)은 2em으로 설정을 합니다.
이미지 메뉴에서 이미지에 대한 설정을 합니다.
만약 이 곳에서 가장 위의 Images 옵션을 체크하지 않으면 썸네일 없이 글의 리스트만 볼 수 있습니다.
일단 위와 같이 설정을 해 봅니다.
이미지의 크기는 모바일에서 잘 볼 수 있는 300 x 250 사이즈로 하였으며 이미지 정렬은 중앙, 그리고 이미지는 글의 제목 위에 위치하도록 하였습니다.
Content 메뉴는 위와 같이 설정을 합니다.
연관 글에는 이미지와 글 제목만 보여줄 것이기에 Content Type에는 None으로 설정을 하였습니다.
만약 글의 일부를 보여주고 싶다면 Excert를 선택하고 밑의 Excert Length를 통해 글자수를 조절할 수 있습니다.
Title Element는 헤딩태그 부터 Span, P 까지 설정이 가능합니다.
이 곳에서는 P 로 설정을 해보겠습니다.
그외 부분은 위 이미지와 같이 설정 합니다.
Meta 메뉴에는 Meta 관련 설정을 할 수 있습니다.
글의 발행일, 글의 작성자 등을 표기할 수 있습니다만 여기에서는 아무것도 체크를 하지 않겠습니다.
가장 마지막 메뉴인 More Settings 에서는 특별히 건드릴 필요는 없습니다.
그냥 기본 값으로 두면 됩니다.
위 이미지의 오른쪽 밑출 친 부분은 지금까지 설정한 것에 대한 숏 코드와 PHP 문을 얻을 수 있습니다.
숏 코드 또는 Php 문 은 Hook 설정에 필요하니 메모장 같은 곳에 복사를 해 둡니다.
GP Premiun의 Hook 설정 하기
이제 설정한 WP Show Posts를 활용하여 GeneratePress 테마(GP Premium)의 Hook 설정을 합니다.
워드프레스 대시보드의 메뉴 외모 > Elements 항목에 들어갑니다.
그 이후 Add New Element 버튼을 클릭하면 위와 같은 화면을 보게 됩니다.
이 곳에서 위와 같이 제목을 정한 이후 Hook의 위치는 generate_after_content 로 설정을 합니다.
PHP 문을 활용할 것이기에 Execute PHP의 옵션을 선택하였습니다.
그리고 WP Show Posts 플러그인에서 얻은 PHP 문을 복사 붙이기 합니다.
<?php if ( function_exists( 'wpsp_display' ) ) wpsp_display( XXX ); ?>위와 같은 PHP 문이며 뒤에 XXX는 숫자로 표기됩니다.
각자 얻는 PHP 문의 숫자는 다릅니다.
Display Rules 메뉴에 들어가면 위와 같이 설정을 해줍니다.
노출될 위치는 글로 설정을 하며 페이지는 제외를 시킨다고 설정을 했습니다.
유저(사용자) 설정은 필요없기에 생략을 합니다.
지금까지 설정을 하였다면 글 밑에 위와 같이 연관 글이 표시되는 것을 확인할 수 있습니다.
보기 좋지 않기에 추가적인 설정을 해보겠습니다.
Hook 설정에서 위와 같이 Div를 활용해서 설정을 해주었습니다.
<div class="wpsp-related-posts1 grid-container">
<h5>연관 글</h5>
<?php if ( function_exists( 'wpsp_display' ) ) wpsp_display( XXX ); ?>
</div>연관 글 제목은 H5 헤딩태그를 활용하였으며, H6나 H4로 변경을 해도 좋기는 합니다만 H5가 가장 적합해 보입니다.
워드프레스 대시보드 메뉴의 외모 > 사용자 정의하기 > 추가 CSS 로 들어갑니다.
그리고 이 곳에서 아래 코드를 복사 붙여넣기 해줍니다.
.wpsp-related-posts1 {
background-color: #fff;
padding: 24px 20px 10px 20px;
margin-top: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}그리고 발행함 버튼을 클릭하여 연관 글 설정을 마무리 합니다.
이렇게 설정을 마무리하면 위와 같이 연관 글이 노출되는 것을 확인할 수 있습니다.
아주 이뻐지지는 않았습니다만 충분히 봐줄만 합니다.
Hook 설정 시에 위 이미지와 같이 Execute PHP 항목의 선택 옵션이 비활성화 되어 있는 경우가 있습니다.
‘Unable to execute PHP as DISALLOW_FILE_EDIT is defined.’ 라고 표기가 되는데 보통 이 경우는 보안을 위해 웹호스팅 업체에서 PHP 문의 실행을 막아놓은 경우입니다.
이런 경우는 WP Show Posts 플러그인에 얻을 수 있는 숏코드를 활용하면 됩니다.
<div class="wpsp-related-posts1 grid-container">
<h5>연관 글</h5>
[wp_show_posts id="XXX"]
</div>위와 같이 코드를 삽입한 이후 하단의 Execute Shortcodes 항목을 선택하면 됩니다.
WP Show Posts 플러그인을 이용한 연관 글 설정
지금까지 WP Show Posts 플러그인과 GeneratePress 유료 테마인 GP Premium에서 활용할 수 있는 Hook 기능을 이용하여 연관 글 설정을 해보았습니다.
WP Show Posts 플러그인의 활용도는 글 하단의 연관 글 외에 이미지를 비활성화 시키고 글 중간에 연관 글 리스트를 글에 맞게 숏코드를 생성해서 삽입할 수도 있을 것입니다.
이 보다 더 서버에 부하를 적게 줄 수 있는 연관 글 설정 방법을 찾게되면 추가 포스팅을 하도록 하겠습니다.
GeneratePress 테마의 제작자와 WP Show Posts 플러그인의 제작자는 동일인입니다.
아쉽게도 앞으로 WP Show Posts 플러그인은 GeneratePress의 또 다른 유료 버전에 해당하는 GP Block와 병합을 한다고 합니다.
현재까지 연관 글 설정에 문제는 없어 보입니다만 앞으로 문제가 생길 수도 있을 듯 합니다.
