워드프레스 GenetatePress 테마를 사용하는 경우 Blog 섹션에서 포스트 내비게이션(Post Navigation)을 활성화하면 개별 글 하단에 이전 글(Previous Post)과 다음 글(Next Post) 링크가 표시됩니다. Previous Post는 문자 그대로 이전 글(Older Post) 항목이고 Next Post는 보다 새로운 글(다음 글) 항목입니다. 이 Previous Post와 Next Post의 순서를 변경하는 것이 제게는 더 자연스러운 것 같아서 CSS를 사용하여 포스트 내비게이션의 이전 글 및 다음 글 항목의 순서를 바꾸고 밋밋한 기본 스타일도 변경했습니다.
다음 글에서는 다음 내용을 다룹니다.
- GeneratePress 테마에서 포스트 내비게이션 설정하기
- 포스트 내비게이션에 동일 카테고리 내의 항목만 표시되도록 하는 방법
- 이전 글/다음 글 항목 순서 변경
- 포스트 내비게이션 스타일 변경 방법
GeneratePress 테마에서 포스트 내비게이션(Post Navigation) 설정하기
GeneratePress 테마의 무료 버전에서는 이전 글/다음 글 링크가 기본적으로 표시되고 있으며, 표시 여부를 제어하는 옵션이 없습니다. GP Premium 사용자는 모양 (외모) » 사용자 정의 » Layout » Blog » Content » Single 탭에서 Display Post Navigation (포스트 내비게이션 표시) 옵션을 활성화하거나 비활성화하여 이전 글/다음 글 링크를 표시하거나 숨길 수 있습니다.
무료 GP 테마에서 포스트 내비게이션을 제거하려면 다음과 같은 커스텀 CSS 코드를 모양 » 사용자 정의 » 추가 CSS에 추가하면 됩니다.
/* How to Hide Post Navigation in the GeneratePress Theme on WordPress */
.site-main .post-navigation {
display: none;
}기본적인 CSS를 이해하면 다른 테마에서도 응용할 수 있을 것입니다.
포스트 내비게이션을 활성화하여 블로그 글 하단에 이전 글/다음 글 링크를 표시하면 웹사이트의 사용성과 사용자 참여도를 높이는 데 도움이 될 수 있습니다. 또한, 콘텐츠를 논리적인 순서로 구성하여 사용자들이 여러 부분으로 이루어진 글이나 주제별 시리즈를 쉽게 따라갈 수 있게 도와줍니다. 이러한 구조화된 탐색은 내부 링크를 개선하고 검색엔진이 다른 콘텐츠과의 관계를 이해하는 데 도움을 주어 SEO(검색엔진최적화)에도 유리하게 작용할 수 있습니다.
이전 글/다음 글 링크를 표시하지 않고 있다면 SEO 향상을 위해 표시하는 것을 고려해보시기 바랍니다. 콘텐츠 중복 때문에 꺼려질 수도 있지만, 포스트 내비게이션은 전체 콘텐츠와 비교하여 무시할 수 있는 분량이므로 문제가 되지 않을 것입니다.
동일 카테고리 내에서 이전 글/다음 글 표시하기
포스트 내비게이션의 이전 글/다음 글 항목을 동일 카테고리 내의 항목으로 제한하기를 원할수 있습니다. 그러면 개별 글 하단에 동일 카테고리의 글들이 제시되므로 방문자들이 클릭할 가능성이 높아질 것입니다.
GeneratePress 테마를 사용하는 경우 "Changing the output of nav-next & nav-previous (이전 글/다음 글 항목의 출력 변경하기" 글에 제시된 코드를 차일드 테마의 함수 파일에 추가하면 동일 카테고리 내의 항목들이 이전 글/다음 글 링크로 표시됩니다.
add_filter( 'generate_category_post_navigation', '__return_true' );제너레이트프레스 테마에서 이전 글/다음 글 순서 변경하기
GeneratePress 테마의 포스트 내비게이션은 이전 글(Prevous Post)와 다음 글(Next Post) 링크가 위의 그림과 같이 표시됩니다.
왼쪽에 최신 글(Newer Post)이, 오른쪽에 오래된 글(Older Post) 항목이 표시되는 것이 더 자연스럽지 않나 생각합니다. 최신 글 페이지 하단에 페이지네이션(Pagination)이 표시될 경우 숫자가 작을 수록 (왼쪽에) 최신 글들이 표시되는 것이 익숙하여 저는 제너레이트프레스 테마의 포스트 내비게이션에서 이전 글/다음 글 순서가 어색하게 느껴집니다.
그래서 저는 왼쪽에 신규 글(Newer Post)이, 오른쪽에 이전 글(Older Post) 항목이 표시되도록 바꾸었습니다. GeneratePress 포럼 글 "Change the post navigation order…"에 포스트 내비게이션 순서를 바꾸는 코드가 제시되어 있습니다. 하지만 해당 글의 코드를 테스트해보니 이전 글/다음 글 링크 자체는 바뀌지 않고 HTML 태그만 바뀌는 것 같았습니다.
저는 CSS로 포스트 내비게이션의 이전 글/다음 글 항목의 순서를 바꾸어 보았습니다. CSS 코드 예시를 네이버 카페에서 확인할 수 있습니다.
예시 1 스타일의 커스텀 코드를 추가하면 다음과 같이 포스트 내비게이션 항목 순서가 바뀌고 레이아웃 스타일도 조금 개선됩니다.
예시 2 스타일의 CSS 코드를 적용하면 이 워드프레스 블로그에서와 같이 포스트 내비게이션 레이아웃이 변경됩니다. 기본적인 CSS를 이해하시면 쉽게 응용할 수 있을 것입니다.
GeneratePress 테마는 심플하면서 빠르고 커스터마이징하기에 좋은 테마 같습니다. 빠른 속도 때문에 우리나라에서 GeneratePress 테마가 많이 사용되고 있습니다. 처음 시작하는 경우에는 무료 버전을 사용해도 괜찮습니다.
비슷한 테마로 Astra, OceanWP 등의 테마가 있습니다. GeneratePress 보다는 속도면에서는 빠르지 않지만 쉽게 퀄리티 높은 블로그나 뉴스 사이트 등을 만들고 싶은 경우 Newspaper 테마가 좋은 선택일 수 있습니다.
아스트라 테마에도 적용할 수 있나요? css를 공부하는 좋은 방법이 있을까요?
시간이 될 때 아스트라 테마의 포스트 내비게이션을 살펴보고 어떻게 응용하면 좋을지에 대하여 한 번 다루어보겠습니다. 기본적인 CSS는 그리 어렵지 않기 때문에 유뷰브로 공부하거나 책을 구입하여 공부할 수 있을 것입니다.
https://cafe.naver.com/wphomepage/16730