블로그 본문 글 아래 이전/다음 글로 가는 버튼이 있으면 방문자는 다른 글로 이동하는 것이 편해지고 블로그 내 체류시간 증가에도 도움 된다. GeneratePress 테마를 이용하면 Post Navigation 기을 이용해서 이전 글 다음 글 버튼을 손쉽게 만들 수 있다.
* GeneratePress 테마 프리미엄 버전에서 적용될 수 있습니다.
1. Elements Type 설정
먼저 워드프레스 대시보드 – Elements 메뉴 이동 – Add New Element 버튼을 누른 다음 타입을 Block으로 선택하고 생성해야 한다.
이후 화면 오른쪽 Element 탭의 Block Element 옵션 중 Element Type을 Hook에서 Post Navigation으로 변경하면 된다.
이후 바로 아래 Templates 이름을 클릭하면 관련 목록 몇 가지를 볼 수 있는데 원하는 양식을 선택하자. 사실 백지 상태에서 버튼 디자인도 가능하지만, 기존 양식을 사용하면 시간을 크게 줄일 수 있어서 좋다.
생성된 이전/다음 글 버튼의 제목과 배경 그림이 조금 허전한 것 같지만, 블로그에 적용하면 글 제목과 대표 이미지가 정상 출력 된다.
또한 디자인은 그대로 써도 되겠지만, 취향에 따라 세부 디자인을 조정하는 것도 좋다.
2. 버튼 디자인하기
이 글에서는 예시로 이전 글(Previous)와 다음 글(Next) 아이콘을 버튼 양 끝에 붙여보는 방법을 알아보려고 한다. 먼저 Previous에 해당하는 컨테이너 블록을 선택하면 전체 영역이 활성화된다.
화면 오른쪽 Block 탭으로 온 다음, Spacing – Padding 항목에서 동일 값 링크를 해제하고 (링크 아이콘 클릭) Top과 Left의 값을 0으로 변경하였다.
그 결과, 컨테이너 블록 안에 들어있는 Previous 아이콘과 글 제목 요소 모두 왼쪽 위에 바짝 붙어버렸다.
화면 왼쪽 블록 목록에서 글 제목 블록을 선택한 다음, 조금 전 컨테이너에서 제거한 Padding Top과 Left 수치를 40px씩 주면 이를 해결할 수 있다.
Padding 값 입력 후 Previous 아이콘만 버튼 왼쪽 위에 붙고, 제목은 다시 제자리로 돌아온 모습이다. 제목 위의 여백이 많다고 느끼면 Padding-top 수치를 40px보다 적게 넣으면 된다.
이어서 오른쪽 버튼의 Next(다음 글) 아이콘을 오른쪽에 붙여보겠는데 컨테이너 선택 – 화면 가운데 목록 창에서 Align Text를 Left → Right으로 변경할 수 있다.
왼쪽 이전 글 버튼과 대조적으로 다음 글 버튼 아이콘과 글 제목이 오른쪽에 정렬되었다. 이제 Next 아이콘을 버튼 꼭대기에 붙여보자.
먼저 다음 글 버튼을 포함한 컨테이너를 클릭한 다음,
조금 전 이전 글 아이콘과는 다르게 Padding Top과 Right 값을 0으로 주면 된다.
글 제목 블록을 선택하고 조금 전 컨테이너에서 값을 제거한 Padding Top과 Right을 40px로 설정하면 위처럼 깔끔하게 정렬된 제목을 볼 수 있다. (글 제목만 버튼 왼쪽에 정렬하려면 제목이나 바로 위 컨테이너 블록 선택 – Align Text를 Left로 하면 된다)
추가로 네모난 아이콘 끝을 둥글게 하려면 Border-Radius로 이동한 다음 원하는 수치를 입력하면 된다. 숫자가 클수록 둥근 영역이 커지는데 2~20px 사이면 적당하다고 본다.
– 이전 글 : Bottom Right
– 다음 글 : Bottom Left
설정을 마치면 위처럼 버튼 둥글기가 잘 적용된 것을 볼 수 있다. 디자인을 마쳤다면 본문 글 아래로 위치만 지정하면 된다.
3. 버튼 위치 지정하기
화면 맨 아래에 있는 Display Rule에서 Location에 정확한 위치를 지정해야 블로그에 적용할 수 있다. Add Location Rule 버튼을 누른 다음 Post를 선택하면 All Posts가 세팅되는데 그대로 화면 위 저장 버튼을 누르면 된다.
블로그 페이지로 오면 본문 글 바로 아래 이전/다음 글 버튼이 잘 적용되었다. 버튼 사이즈와 간격 조정이 필요하면 다시 Element 페이지로 이동 후 Sizing과 Padding 값을 조정하면 작업을 마칠 수 있다.
끝으로 팁이 하나 있는데 이 글에서 만든 ‘이전/다음 글 버튼’과 앞서 만든 ‘관련 글 목록’의 Element 타입이 Post Navigation으로 같다. 그러면 굳이 Element 페이지를 두 개 만들 필요 없이, 이미 만든 페이지를 열고 나머지 요소만 추가하면 된다.
만약 이미 따로 만들었다면 최상위 컨테이너 요소를 복사한 다음, 다른 요소 페이지에 붙여 넣으면 위처럼 한 페이지에서 두 개 요소를 관리할 수 있다.
관련 글
