페이지네이션은 카테고리 아카이브 페이지 아래 있는 화살표와 숫자 버튼이다. GeneratePress 테마를 설치하면 기본적으로 추가되어 있기는 한데, 모바일에서 페이지를 넘기다 보면 아이콘이 화면 밖으로 벗어나는 문제가 있다.

PC에서는 상관 없겠지만, 화면 폭이 좁은 모바일에서는 벗어난 아이콘을 클릭할 방법이 없다. 그만큼 방문자의 가독성도 떨어지는 셈인데, Elements 설정에서 간단하게 해결할 수 있다.

대시보드 – Appearance – Elements의 아카이브 페이지를 열면 화면 왼쪽 리스트뷰 목록 맨 아래 페이지네이션 아이템이 있을 것이다. 여기서 Container와 Page Numbers를 한 번씩 선택해서 다음 옵션을 적용하자.

아이템 선택 후 화면 오른쪽 Block – Layout – Flex Layout – Flex Wrap 옵션의 Wrap을 활성화하고 저장하면 끝이다. (Container도 Page Numbers도 똑같이 적용)

저장을 마치고 모바일 화면을 확인하면 위처럼 화살표와 숫자가 자동 줄바꿈 되는 것을 확인할 수 있다. 만약 Container는 그대로 두고 Page Numbers만 Wrap을 활성화하면 화살표는 위아래가 아닌, 양쪽 옆으로 정렬된다.

* 처음 테마를 적용하면 화살표가 Previous/Next 문자로 되어 있을 텐데, 각 버튼 클릭 – Block – Settings – Open Library에서 화살표 Icon 선택 – Icon Display의 Show the icon by itself 버튼을 켜면 화살표만 보일 수 있다.

이어서 취향대로 CSS를 설정하고 페이지네이션 디자인을 마치면 된다.

/* Pagination */
a.page-numbers {
    padding: 9px 12px;
    border-radius: 3px;
	  border: 0px solid #000 !important;
	  background-color : #e0e0e0 !important;
}

/* Pagination Arrows */ 
.gb-text-d5df42d7, .gb-text-7163e3dc {
    border-radius: 3px;
	  border: 0px solid #000 !important;
	  background-color : #e0e0e0 !important;
}

/* Pagination Hover */
a.page-numbers:hover, 
.gb-text-d5df42d7:hover, 
.gb-text-7163e3dc:hover {
    background-color: #3a3a3a !important;
    color: #ffffff !important;         
    transition: all 0.2s ease;
}

/* Pagination Currunt number color */
.gb-query-page-numbers-e575c9e2 .page-numbers.current {
  color : #fff;
	background-color : #ff5b5b;
	border-radius: 3px;
}

클래스 이름은 위부터 페이지 숫자, 화살표, 마우스 올릴 때 Hover, 현재 클릭된 숫자이다. .gb-text-d5df42d7 같은 숫자, 화살표의 이름은 다를 테니 F12 개발자도구로 각 요소를 검사해서 정확한 이름을 넣거나, 아니면 AI에게 물어봐서 코드 수정을 하면 된다.

워드프레스 마스터 가이드