베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

워드프레스 페이지 내비게이션을 숫자 형식으로 바꾸어주는 WP-PageNavi

Last Updated: 2022년 9월 21일 | 4개 댓글

일부 워드프레스 테마에서는 블로그 페이지나 카테고리 페이지에 "이전 글", "다음 글" 내비게이션 대신 숫자 형식의 내비게이션이 표시됩니다. 이 기능이 제공되지 않는 테마의 경우 WP-PageNavi 플러그인을 사용하여 숫자 내비게이션으로 바꿀 수 있습니다.

엘리멘터, 아바다, Divi 테마, 뉴스페이퍼 등 일부 페이지 빌더와 테마에서는 템플릿을 사용하여 카테고리 페이지 템플릿 등을 수월하게 만들 수 있습니다. 보통 템플릿을 만들면서 내비게이션 형식을 지정하는 것이 가능합니다(참고).

워드프레스 페이지 내비게이션을 숫자 형식으로 바꾸어주는 WP-PageNavi

이 글은 오래 전에 작성되었지만, WP-PageNavi 플러그인은 아직도 활발히 업데이트가 되고 있고 현재 70만 개가 넘는 사이트에 설치되어 사용되고 있습니다.

예를 들어, 워드프레스 기본 테마 중 하나인 Twenty Twelve 테마에서 블로그 페이지는 아래 그림과 같이 "이전 글, 다음 글" 형식으로 되어 있습니다.

Twenty Twelve 테마 내비게이션

WP-PageNavi 플러그인을 사용하면 다음과 같이 숫자 형식의 페이지 내비게이션으로 바꿀 수 있습니다.

Page-Navi

위와 같이 숫자 내비게이션으로 변경하려면, 먼저 워드프레스 알림판 » 플러그인 » 새로 추가에서 "WP-PageNavi"를 검색하여 플러그인을 설치하고 활성화하도록 합니다.

페이지 내비게이션으로 변경할 테마 파일을 찾습니다. 가령 Twenty Twelve 테마에서 index.php 페이지를 살펴보면 페이지 내비게이션 코드는 다음과 같습니다.

<?php twentytwelve_content_nav( 'nav-below' ); ?>

이 코드를 아래 코드로 대체하도록 합니다.

<?php wp_pagenavi(); ?>

그러면 위의 그림에 나와있는 숫자 내비게이션으로 바뀌게 됩니다. 레이아웃(배경 색상 등)을 수정하려면 wp-content/plugins/wp-pagenavi 아래의 pagenavi-css.css를 수정하시면 됩니다. 가령 .wp-pagenavi a, .wp-pagenavi spanbackground-color: yellow;를 추가하면:

Page Navi Background Yellow


그림과 같이 숫자 부분의 배경색이 노란색으로 바뀌게 됩니다. pagenavi-css.css를 적절히 수정하여 원하는 레이아웃을 만들도록 합니다.

이 글을 작성할 당시에는 플러그인을 직접 수정하는 방법으로 설정했습니다. 하지만 이렇게 수정할 경우 추후 플러그인 업데이트 시에 수정 사항이 사라집니다. 먼저 차일드 테마를 만들어서 편집할 테마 파일을 차일드 테마 폴더로 복사한 다음 수정하도록 합니다. 그리고 커스텀 CSS 코드는 알림판 » 외모 » 사용자 정의하기 » 추가 CSS 페이지에 추가하도록 합니다. "워드프레스에 CSS를 적용하는 방법"을 참고해보세요.

WP-PageNavi는 또한 기본적인 숫자 내비게이션보다 향상된 기능을 제공합니다.

설정 페이지에서 Page Navigation의 UI 텍스트를 지정할 수 있습니다:

Page Navi - Text


그리고 페이지 숫자를 "페이지 1, 2, 3, 4, 5, 10, 20, 30, 40, 50"과 비슷하게 표시할 수 있는 옵션과 기타 옵션을 제공합니다.

Page Navigation Options 페이지 내비게이션 옵션

스타일을 직접 설정하는 것이 어려운 경우 애드온 플러그인인 Styles For WP Pagenavi Addon을 사용하면 수월하게 괜찮은 디자인의 내비게이션을 만들 수 있습니다.

참고


4 개 댓글

Leave a Comment

      • 테마를 바꿨더니 네비가 사라져서 방도를 찾고있었어요. 글을 읽다보니 이 글 아래에도 네비가 보이지 않아 궁금해서 여쭤봅니다.

      • 새로 바뀐 테마를 살펴보니 별 글 아래에 "이전 글", "다음 글" 내비게이션이 없네요.

        아마 개별 글을 표시해주는 테마 소스 파일에 코드 자체가 없는 것 같습니다. 다음 글을 참고로 적절한 곳에 코드를 추가해주시면 "Previous", "Next" 링크가 표시될 것입니다.

        https://codex.wordpress.org/Next_and_Previous_Links