워드프레스 Onepress 테마를 적용한 블로그에서는 현재 읽고 있는 글의 이전글과 다음글로 바로 이동할 수 있는 포스트 내비게이션이 없어 불편한 경우가 있습니다. 이 글에서는 워드프레스 Onepress 테마에 이전글 다음글 포스트 내비게이션을 추가하는 방법에 대해 알아보겠습니다.
워드프레스 Onepress 테마에 이전글 다음글 포스트 내비게이션을 추가하는 방법
Onepress 테마는 제가 줄곧 사용하고 있는 테마로, 간결하고 빠른 속도가 장점이지만 일부 아쉬운 부분이 있는 테마입니다. 예를 들어, 시리즈로 포스팅 된 글을 읽고 이전 글이나 다음 글을 계속 읽기 위해서는 현재 읽고 있는 페이지를 빠져나가 목록으로 이동한 후, 이전 글 또는 다음 글을 클릭해야 하는 번거로움이 있습니다. 이러한 불편함을 해결하기 위해 제가 운영하고 있는 블로그의 Onepress 테마에 이전글, 다음글 포스트 내비게이션을 추가하였습니다. 이 글에서 그 과정을 알아보겠습니다.
아래 화면은 제 블로그에 포스팅된 글 중 하나로, 하단에 ‘이전 글’ 또는 ‘다음 글’을 읽을 수 있는 포스트 내비게이션이 없어 포스트 간 이동에 불편함이 있었습니다.
그래서 화면 가장 하단에 ‘이전 글’ 과 ‘다음 글’ 링크를 추가하여 포스트 간 이동을 편하게 할 수 있도록 포스트 내비게이션을 추가하였습니다.
지금부터 Onepress 테마에 포스트 내비게이션을 추가해 보도록 하겠습니다. 우리가 추가할 포스트 내이게이션의 조건은 아래 2가지 입니다
- 화면 하단의 태그 아래 추가
- ‘이전 글’은 왼쪽 정렬, ‘다음 글’은 오른쪽 정렬
포스트 내비게이션을 추가하기 위해서는 먼저 Onepress 테마의 single.php 파일을 수정해야 합니다. 아래 화면과 같이 워드프레스 관리자 화면에서 ‘외모’ → ‘Onepress 테마’ → 오른쪽 사이드에서 ‘single.php’를 클릭합니다.
다음의 코드를 아래 화면과 같이 삽입한 후, ‘파일 업데이트’를 클릭합니다.
<div class="post-navigation">
<div class="nav-previous"><?php previous_post_link('%link', '◀ 이전 글: %title'); ?></div>
<div class="nav-next"><?php next_post_link('%link', '다음 글: %title ▶'); ?></div>
</div>
다음으로, post-navigation, nav-previous, nav-next 클래스에 대한 CSS 코드를 추가하도록 하겠습니다.
워드프레스 관리자 화면에서 ‘외모’ → ‘추가 CSS’ 를 클릭하여 아래 화면으로 이동합니다.
‘추가 CSS’의 맨 밑에 다음의 코드를 삽입한 후, ‘공개’를 클릭합니다.
.post-navigation {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.nav-previous, .nav-next {
flex: 1;
}
.nav-previous {
text-align: left;
}
.nav-next {
text-align: right;
}
이전글과 다음글 포스트 내비게이션 추가를 위한 single.php 수정과 CSS 코드 추가가 완료되었습니다. 이제 적용한 결과를 확인해 보겠습니다.
아래는 포스트 내비게이션을 추가한 결과 화면으로, 하단에 원하는 데로 ‘이전 글’과 ‘다음 글’의 링크가 삽입되었습니다.
오늘은 워드프레스 Onepress 테마에 이전글 다음글 포스트 내비게이션을 추가하는 방법에 대해 알아보았습니다. 인터넷에서 찾아보니 포스트 내비게이션을 제거하는 방법이 꽤 있더군요. 저랑 생각이 다른 분들이 많은 것 같습니다. 혹시 저와 같이 Onepress 테마를 사용하면서 포스트 내비게이션이 필요하신 분들이 있다면, 이 글을 참고하여 적용해 보시기 바랍니다.