Divi 테마에서 숫자로 된 페이지 매김 내비게이션 사용하기

Elegant Themes의 Divi 테마에서 블로그 모듈이나 최신 글, 카테고리 등의 페이지 매김이 다음 그림과 같이 "과거 입력사항", "다음 입력사항"처럼 표시됩니다.

Divi의 기본 페이지 매김
Divi의 기본 페이지 매김 내비게이션

별로 마음에 드는 페이지 번호(Pagination) 형식은 아니네요. 이 페이지 매김 형식을 숫자로 바꾸고 싶은 경우에는 직접 코드를 만들어 추가하거나 플러그인을 사용할 수 있습니다.

아래의 내용은 Divi 테마뿐만 아니라 다른 테마에도 적용이 가능합니다. 뉴스페이퍼와 같은 테마에서는 자체적으로 페이지네이션을 제공하기도 합니다.

WP-PageNavi 플러그인을 사용하여 페이지 숫자 내비게이션 사용하기

가장 간단한 방법은 WP-PageNavi 플러그인을 사용하는 것입니다. (이외에도 WP-Paginate 등 여러 가지 플러그인이 있습니다.)

워드프레스 페이지 매김 플러그인

이 플러그인을 설치한 후에 워드프레스 관리자 페이지의 설정 > PageNavi에서 옵션을 지정할 수 있습니다.

PageNavi 설정
PageNavi Settings 페이지

원하는 대로 설정을 하도록 합니다. 원하는 경우 한글로 변경할 수 있습니다. 그리고 CSS로 레이아웃을 원하는 대로 바꿀 수 있습니다.

예를 들어, "Style The WordPress WP-PageNavi Post Navigation Plugin" 글에 소개된 CSS 코드를 사용하면 다음과 같이 페이지 매김 표시줄이 표시됩니다.

워드프레스 WP-Page 내비게이션 플러그인
워드프레스 WP-Page 내비게이션 플러그인.

참고로 Blog Module(블로그 모듈)에서 페이지 매김 내비게이션을 표시하려면 Show Pagination 옵션을 Yes로 설정하면 됩니다.

Divi 테마의 블로그 모듈 설정

사용자 코드를 사용하여 페이지 숫자 내비게이션으로 바꾸기

외부 테마를 사용하는 대신 직접 코드로 페이지 매김 기호를 넣으려면 테마 파일을 수정해야 합니다. 예를 들어, 글 표시 형식을 최신 글로 표시하도록 설정(설정 > 읽기에서 "전면 페이지 표시"를 "최신 글"로 지정)한 다음 코드를 함수 파일에 추가하도록 합니다. (반드시 차일드 테마를 만든 후에 작업하도록 합니다.)

function pagination_bar() {
global $wp_query;

$total_pages = $wp_query->max_num_pages;

if ($total_pages > 1){
$current_page = max(1, get_query_var('paged'));

echo paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => '/page/%#%',
'current' => $current_page,
'total' => $total_pages,
));
}
}
// Source: Elegant Themes

그런 다음 다음 코드를 루프가 끝나기 바로 전(“endif” 문 다음에, 그러나 “endwhile” 앞에)에 추가하도록 합니다.

<nav class="pagination">
<?php pagination_bar(); ?>
</nav

그러면 이전 글, 다음 글 링크 대신 다음 그림과 비슷한 페이지 숫자 내비게이션이 표시됩니다.

워드프레스 페이지 숫자 내비게이션
워드프레스 페이지 숫자 내비게이션

CSS를 통해 레이아웃 스타일을 적절히 조정하도록 합니다.

이 블로그에서 현재 Divi 테마를 사용하고 있지만, 귀차니즘 때문에 그냥 기본 페이지 매김 내비게이션을 사용하고 있습니다. (쉽게 가려면 WP-PageNavi 플러그인을 설치하면 되지만 지금도 꽤 많은 플러그인이 설치되어 있어 추가로 플러그인을 설치하는 것이 부담이 되어 가급적 플러그인 설치를 자제하고 있습니다.)

참고:


댓글 남기기

* 이메일 주소는 공개되지 않습니다.