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

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

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

[ 이 글은 2023년 8월 25일에 마지막으로 업데이트되었습니다. ]

워드프레스 페이지 내비게이션을 숫자 형식으로 바꾸어주는 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<span style="color: #ff0000;"></span>를 수정하시면 됩니다. 가령 .wp-pagenavi a, .wp-pagenavi spanbackground-color: yellow;를 추가하면 숫자 부분의 배경색이 노란색으로 바뀌게 됩니다.

pagenavi-css.css를 적절히 수정하여 원하는 레이아웃을 만들도록 합니다. 아래 "WP-PageNavi 페이지네이션 스타일 예시" 부분을 참고해보세요.

이 글을 작성할 당시에는 플러그인을 직접 수정하는 방법으로 설정했습니다. 하지만 이렇게 수정할 경우 추후 플러그인 업데이트 시에 수정 사항이 사라집니다. 먼저 차일드 테마를 만들어서 편집할 테마 파일을 차일드 테마 폴더로 복사한 다음 수정하도록 합니다. 그리고 커스텀 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을 사용하면 수월하게 괜찮은 디자인의 내비게이션을 만들 수 있습니다.

WP-PageNavi 페이지네이션 스타일 예시

예를 들어, 다음과 같은 CSS 코드를 외모 » 사용자 정의하기 » 추가 CSS에 추가합니다.

.wp-pagenavi a,
.wp-pagenavi span {
    padding: 4px 8px; /* Slightly reduced padding */
    margin: 0; /* Removed margin-right to use 'gap' from flexbox */
    font-size: 14px; /* Slightly reduced font size */
    color: #03719c;
    text-decoration: none;
    border: 3px solid #ccc;
    border-radius: 5px;
    min-width: 30px; /* Ensuring a minimum width */
    text-align: center; /* Center the text, especially useful if numbers are of varying digits */
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.wp-pagenavi a:hover {
    background: #03719c;
    color: #fff;
    border-color: #AFAFAF;
}

.wp-pagenavi span.current {
    background: #03719c;
    color: #fff;
    font-weight: bold;
    border-color: #AFAFAF;
}

그러면 다음과 같이 페이지네이션 스타일이 바뀝니다. (테마에 따라 조금씩 다를 수 있습니다.)

WP-PageNavi 페이지네이션 스타일 예시

어두운 스타일(다크 테마)을 선호하는 경우 다음과 같은 코드로 테스트해보시기 바랍니다.

/* Dark Style */
.wp-pagenavi {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping but with flexbox control */
    justify-content: center; /* Center pagination */
    gap: 10px; /* Consistent spacing between elements */
    background-color: #2a2a2a; /* Dark background for the container */
    padding: 15px 0; /* Padding around the container */
}

.wp-pagenavi a,
.wp-pagenavi span {
    padding: 4px 8px;
    margin: 0; /* Using gap, so we don't need margins */
    font-size: 14px;
    color: #aaa; /* Light gray color for text for visibility against dark backgrounds */
    text-decoration: none;
    border: 2px solid #444; /* Darker border */
    border-radius: 5px;
    min-width: 30px;
    text-align: center;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.wp-pagenavi a:hover {
    background: #444; /* Darker hover background */
    color: #fff; /* White text on hover */
    border-color: #555; /* Slightly lighter border on hover */
}

.wp-pagenavi span.current {
    background: #555; /* Dark but different to denote the current page */
    color: #fff; /* White for contrast */
    font-weight: bold;
    border-color: #666; /* Even slightly lighter border for the current page */
}

.wp-pagenavi {
    margin-top: 20px;
}

조금 더 세련된 다크 스타일:

/* Dark Style 2 */
.wp-pagenavi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    background-color: #181818; /* Slightly darker background for the container */
    padding: 16px;
    border-radius: 8px; /* Soft rounded corners for the container */
}

.wp-pagenavi a,
.wp-pagenavi span {
    padding: 5px 10px;
    margin: 0;
    font-size: 14px;
    color: #b0b0b0; /* Medium gray text for a subtle appearance */
    text-decoration: none;
    border: 2px solid #303030; /* Subtle border color */
    border-radius: 4px; /* Rounded corners for each element */
    min-width: 32px;
    text-align: center;
    transition: all 0.25s ease-in-out;
}

.wp-pagenavi a:hover {
    background-color: #303030; /* A shade lighter than the container on hover */
    color: #e0e0e0; /* Light gray color on hover */
    border-color: #3a3a3a; /* Border color a bit lighter than the hover background */
}

.wp-pagenavi span.current {
    background-color: #3a3a3a; /* Differentiate the current page */
    color: #ffffff; /* Pure white for the current page */
    font-weight: bold;
    border-color: #4a4a4a; /* Lighter border for the current page */
}

.wp-pagenavi {
    margin-top: 24px; /* Slightly increased the margin */
}

밝은 스타일을 좋아하는 경우 다음과 같은 코드로 시도해볼 수 있습니다.

/* Vivid & Elegant Style */
.wp-pagenavi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    background-color: #f9f7f2; /* Soft off-white background for the container */
    padding: 16px;
    border-radius: 12px; /* A slightly more pronounced rounded corner for elegance */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.wp-pagenavi a,
.wp-pagenavi span {
    padding: 5px 10px;
    margin: 0;
    font-size: 14px;
    color: #3a76a7; /* Vivid blue color for general elegance */
    text-decoration: none;
    border: 2px solid #3a76a7; /* Border color matches the text */
    border-radius: 5px; /* Subtle rounded corners for each element */
    min-width: 32px;
    text-align: center;
    transition: all 0.25s ease-in-out;
    font-family: 'Georgia', serif; /* A classic font for added elegance */
}

.wp-pagenavi a:hover {
    background-color: #3a76a7; /* Matching vivid blue for hover state */
    color: #ffffff; /* White text on hover for contrast */
    border-color: #285882; /* Slightly darker border for hover differentiation */
}

.wp-pagenavi span.current {
    background-color: #e78f50; /* A vivid orange for the current page */
    color: #ffffff; /* White text for the current page */
    font-weight: bold;
    border-color: #c56e3b; /* Slightly darker orange for the current page border */
}

.wp-pagenavi {
    margin-top: 24px;
}

참고


8개 댓글

    1. 워드프레스 OnePress 테마에서 페이지네이션을 표시하는 방법에 대해서는 가능하면 다음 주에 별도의 글로 정리하여 알려드리겠습니다.

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

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

        https://codex.wordpress.org/Next_and_Previous_Links

댓글 남기기

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