워드프레스 페이지 네비게이션 추가하기: WP-PageNavi 및 WP-Paginate 플러그인 사용법

by
워드프레스 페이지 네비게이션 플러그인

워드프레스에서 긴 글을 게시하거나 페이지별로 구분하여 보여주려면 페이지 네비게이션을 추가해야 합니다. 페이지 네비게이션은 독자가 긴 글을 쉽게 읽고 탐색할 수 있도록 도와주는 중요한 요소입니다. 그런데 워드프레스 기본 기능만으로는 긴 글을 여러 페이지로 나누고 페이지 네비게이션을 추가하는 것이 쉽지 않습니다. 여기서 WP-PageNavi와 WP-Paginate 플러그인이 필요합니다.

이 플러그인들은 워드프레스 사이트에서 페이지 네비게이션을 손쉽게 추가할 수 있도록 도와줍니다. 긴 글을 여러 페이지로 나누고 이전/다음 페이지로 이동할 수 있는 링크를 자동으로 생성하여 독자가 원하는 부분을 찾아보기 쉽게 해줍니다. 이는 웹사이트의 사용자 경험을 향상시키고 검색 엔진에서도 글을 더 잘 인덱싱할 수 있도록 도와줍니다. 따라서 이 플러그인들은 긴 글을 게시하는 워드프레스 사이트에서 필수적인 도구로 자리잡고 있습니다.

WP-PageNavi 플러그인 소개:

WP-PageNavi는 워드프레스에서 페이지 네비게이션을 구현하는 데 사용되는 가장 인기 있는 플러그인 중 하나입니다. 이 플러그인을 사용하면 긴 글을 여러 페이지로 나눌 수 있고, 페이지를 구분하여 이전 및 다음 페이지로 쉽게 이동할 수 있습니다.

페이지 네비게이션 플러그인 WP-PageNavi 설치 방법:

  1. 워드프레스 대시보드에 로그인합니다.
  2. 왼쪽 메뉴에서 “플러그인”을 선택합니다.
  3. “새 플러그인 추가”를 클릭합니다.
  4. 검색 창에 “WP-PageNavi”를 입력합니다.
  5. 검색 결과에서 WP-PageNavi를 찾아 “지금 설치”를 클릭합니다.
  6. 설치가 완료되면 “활성화”를 클릭하여 플러그인을 활성화합니다.

WP-PageNavi 사용 방법:

  1. 긴 글을 작성하고 편집합니다.
  2. 편집기에서 “문단” 또는 “블록”으로 글을 나누고, 페이지 구분을 위해 <!--nextpage--> 태그를 사용합니다. (블록에디터에서는 아래와 같이 페이지 나눔을 선택하여 삽입해 줍니다.)
  3. 글을 게시하거나 업데이트합니다.
  4. 페이지 네비게이션을 표시할 위치에 wp_pagenavi() 함수를 추가합니다. 주로 테마의 single.php 파일이나 page.php 파일의 적절한 위치에 추가됩니다.1
WP-PageNavi 페이지 네비게이션
블록에디터에서 페이지 나눔 삽입하기

페이지 네비게이션 UI 향상시키기

처음 페이지 네비게이션을 작동시키면 페이지 링크가 너무 촘촘하게 표시되어서 사용하기에 무리가 있습니다. 데쉬보드 사용자 정의에서 사용자 정의 css를 추가하여 페이지 네비게이션의 사용성을 개선하는 UI 향상이 필요합니다.

.post-nav-links {
    padding: 10px; /* 네비게이션 주변에 패딩 추가 */
    text-align: center; /* 가운데 정렬 */
}

.post-page-numbers {
    display: inline-block; /* 인라인 블록 요소로 변경하여 여백 추가 */
    padding: 5px 10px; /* 링크 주변에 패딩 추가 */
    margin: 0 5px; /* 링크 사이 여백 추가 */
    background-color: #f0f0f0; /* 배경색 추가 */
    border-radius: 5px; /* 둥근 테두리 추가 */
    text-decoration: none; /* 링크 텍스트에 밑줄 제거 */
    color: #333; /* 텍스트 색상 설정 */
}

.post-page-numbers.current {
    background-color: #333; /* 현재 페이지 배경색 변경 */
    color: #fff; /* 현재 페이지 텍스트 색상 변경 */
}

Custom css 스타일링 추가하기

기본 워드프레스 테마라면 Custom css 추가를 위해, 데쉬보드의 테마편집기에 들어갑니다. 스타일을 선택해서 아래 그림과 같이 따라 하면 됩니다.

기본 테마 스타일 편집
스타일 연필 아이콘 클릭
기본 테마 스타일 편집 2
오른 쪽 상단 세점줄 아이콘 클릭 후 ‘추가 css’ 선택
기본 테마 스타일 편집 3
css 추가 후 저장

위 스타일이 적용된 페이지 네비게이션

스타일이 적용된 네비게이션

이렇게 스타일링 될 수 있습니다. 하지만, 테마에 따라 위 css 코드가 먹히지 않을 수도 있으니, 브라우저의 inspect 기능을 활용하여, 어떤 스타일을 어떻게 고칠지 각자 상황에 맞게 결정해서 수정해야합니다.

WP-Paginate 플러그인 소개:

WP-Paginate는 또 다른 워드프레스 페이지 네비게이션 플러그인으로, 페이지 번호, 이전 및 다음 링크를 제공하여 긴 글을 페이지별로 나누고 네비게이션을 추가할 수 있습니다.

페이지 네비게이션 플러그인 WP-Paginate 설치 방법:

  1. 위의 WP-PageNavi 설치 방법과 동일합니다.
  2. 대시보드의 “플러그인” 메뉴에서 “새 플러그인 추가”를 클릭합니다.
  3. 검색 창에 “WP-Paginate”를 입력하고 플러그인을 설치하고 활성화합니다.

WP-Paginate 사용 방법:

  1. 긴 글을 작성하고 편집합니다.
  2. 편집기에서 “문단” 또는 “블록”으로 글을 나누고, 페이지 구분을 위해 <!--nextpage--> 태그를 사용합니다.(위와 동일하게 블록에디터에서는 아래와 같이 페이지 나눔을 선택하여 삽입해 줍니다.)
  3. 글을 게시하거나 업데이트합니다.
  4. 워드프레스 테마의 single.php 파일이나 page.php 파일에서 wp_pagenavi() 함수를 호출하여 페이지 네비게이션을 추가합니다.2

이렇게 하면 WP-PageNavi나 WP-Paginate를 사용하여 워드프레스 글에 페이지 네비게이션을 추가할 수 있습니다. 워드프레스 플러그인 디렉터리에서 두 플러그인을 검색하여 설치하고, 사용법에 따라 글을 페이지별로 나누고 네비게이션을 추가하세요.

각주

  1. 파일을 직접 수정하지 않고도 페이지 네비게이션을 표시할 수 있습니다. 일반적으로 워드프레스 테마는 템플릿 파일에서 wp_pagenavi() 함수를 호출하여 페이지 네비게이션을 표시합니다. 하지만 테마가 이 기능을 지원하지 않는 경우에는 다른 방법을 사용해야 합니다.
    =>플러그인을 사용: 페이지 네비게이션을 추가할 수 있는 다양한 플러그인이 있습니다. 앞서 언급한 WP-PageNavi나 WP-Paginate 플러그인을 설치하면, 플러그인이 자동으로 페이지 네비게이션을 표시할 수 있습니다.
    =>페이지 빌더 사용: 많은 워드프레스 페이지 빌더 플러그인은 페이지 네비게이션 요소를 쉽게 추가할 수 있는 기능을 제공합니다. 페이지 빌더를 사용하여 페이지를 디자인할 때 페이지 네비게이션을 원하는 위치에 추가할 수 있습니다.
    =>테마 설정 옵션: 몇몇 워드프레스 테마는 페이지 네비게이션을 표시하는 위치를 설정할 수 있는 테마 옵션을 제공합니다. 테마 설정에서 페이지 네비게이션을 활성화하고 위치를 선택하면, 테마가 자동으로 페이지 네비게이션을 표시할 것입니다. ↩︎
  2. 각주 1번 내용과 동일 ↩︎

Leave a Comment