페이지 이동을 편리하게 해주는, WP-PageNavi

1. 순차적 페이지 탐색의 불편함

워드프레스의 기본 페이지 이동은 ‘Older Entries’와 ‘Newer Entries’를 클릭해 현재 읽고 있는 글 이전/이후에 쓰여진 글을 순차적으로 탐색하는 방식입니다. 그런데 한두 페이지 정도면 별 상관 없지만 양이 많아지면 방문자 입장에서 탐색하기에 불편한 점이 있습니다. 특히 검색이나 특정 카테고리 또는 아카이브의 글을 탐색할 때 불편합니다.

그래서 보통 워드프레스 사용자들은 WP-PageNavi와 같은 플러그인을 이용해 페이지 이동을 쉽게 만들어 줍니다. 아래 그림 1)에서 위쪽은 워드프레스 기본 페이지 이동 방식이고, 아래쪽은 WP-PageNavi 플러그인을 적용해 옵션과 CSS를 조금 수정한  것입니다. 아래쪽 페이지 이동방식이 전체 페이지 수와 현재 머물고 있는 페이지를 직관적으로 알 수 있고 임의의 페이지로 이동해 전체 글타래를 훑어보기에도 편합니다. 일반적으로 사용되는 방식이기도합니다.

그림 1) 플러그인 적용 전과 후

2. WP-PageNavi 플러그인사용법

플러그인 기능을 블로그에 적용하기위한 과정을 아래 세 단계로 나눌 수 있습니다.

1. 플러그인 설치와 활성화
2. 페이징 네비게이션을 바꾸고 싶은 템플릿 파일을 열어서 코드 수정
3. 플러그인 옵션 설정과 CSS 편집

이 플러그인은 워드프레스의 기본 페이징 네비게이션을 변경하고 싶은 템플릿을 열어 코드를 직접 삽입해줘야한다는 점이 조금 귀찮습니다. 하지만 간단한 작업이니 쉽게 하실 수 있습니다.

2.1 플러그인 설치와 활성화

플러그인 설치와 활성화는 간단합니다. FTP를 이용해 내려 받기한 플러그인 파일을 직접 계정에 업로드 시키는 방법도 있지만 그보다는 워드프레스 관리자 화면에서 Plugins의 Add New를 이용해 설치하는 것이 쉽습니다. Add New로 이동해 WP-PageNavi로 검색해 설치하시거나 워드프레스 플러그인 페이지에서 WP-PageNavi를 내려받기 한 뒤 ’Install a plugin in .zip format’ 에서 압축된 파일을 선택해서 설치하시면 됩니다. 설치하신 후 바로 활성화시키세요.

2.2 페이징 네비게이션을 적용할 템플릿 파일에 코드 삽입

2.2.1 페이징 네비게이션을 적용할 템플릿 선택

그림 2) 블로그 레이아웃의 예

WP-PageNavi 플러그인의 페이징 네비게이션을 사용하기 위해서 뿐만 아니라 워드프레스를 워드프레스 답게 사용하기 위해서는 워드프레스 템플릿 파일의 구성과 계층구조(Template Hierarchy)에 대해서도 조금 알고 있어야 합니다.

일반적인 워드프레스 테마는 CSS 파일과 이미지 파일과 함께 header.php, sidebar.php, footer.php, index.php, single.php, search.php, 기타 등등의 php 파일로 된 템플릿으로 구성되어 있습니다. 워드프레스 블로그에서 보여지는 웹페이지는 이러한 템플릿의 조합에 의해 생성됩니다.

제 블로그의 레이아웃은 그림 2)와 같습니다. header영역에는 header.php, sidebar 영역에는 sidebar.php, footer영역에는 footer.php 템플릿의 내용이 출력됩니다. 물론 이러한 레이아웃은 CSS로 정의된 것입니다. 하지만 중요한 것은 이 템플릿들은 독립적으로 사용되지 않는다는 것입니다.  퍼즐의 조각같은 화면의 구성요소일 뿐입니다. 작성한 글을 불러와서 content 영역에 뿌려주고, header.php, sidebar.php, footer.php 파일을 불러와 완성된 웹페이지를 만들어주는 템플릿 파일은 따로 있습니다. index.php, single.php가 대표적입니다.

index.php 템플릿은 home.php라는 이름의 템플릿이 없을 경우 블로그 첫화면에 보여줄 웹페이지를 만들어 줄 뿐만 아니라 특정 템플릿이 없을 경우 최종 수비수로서 해당 템플릿을 대신해서 보여지기 때문에 가장 중요합니다.

예컨대 A, B, C라는 카테고리가 있습니다. 방문자가 A카테고리의 글을 보기 위해 해당 카테고리를 선택하면 워드프레스는 처음 category-해당카테고리의id.php 파일을 찾습니다. 없을 경우 category.php를 찾고, 그 역시도 없을 경우 archive.php를 찾고, 이 마저도 없을 경우 index.php 템플릿을 이용해 카테고리의 글을 보여주는 웹페이지를 생성하게 됩니다. (자세한 내용은 WordPress.org 사이트의 Template_Hierarchy 다이어그램이나 Stepping Into Templates에서 Special Template Files를 참고하세요.)

single.php는 개별 포스트를 보여주는 웹페이지를 만들어 줍니다. 지금 읽고 계신 ‘페이지 이동을 편리하게~’라는 제목의 http://www.nod.pe.kr/wp-plugin-wp-pagenavi/ 고유주소를 가진 이 포스트는 single.php에 의해 생성된 웹페이지입니다.

만약 사용하고 계신 테마에 category.php, archive.php, search.php 파일이 없다면, index.php와 single.php 이 두 파일만 열어서 이전/이후 글로 링크를 걸어주는 코드를 덜어 내어 WP-PageNavi가 동작할 수 있도록 짧은 코드만 추가해주시면 블로그 전체 페이지 이동 방식이 변경됩니다. 제 경우에는 블로그 첫화면에는 워드프레스의 기본 페이지 이동방식을 단일 포스트와 카테고리/아카이브/검색결과의 글이 뿌려지는 곳에는 WP-PageNavi 플러그인의 페이지 이동방식을 적용했습니다.

2.2.2 템플릿에 코드 삽입

플러그인을 적용할 템플릿을 선택하셨다면 해당 템플릿 파일을 열어서 아래 코드를 찾아 플러그인 사용법에 나온 코드로 대체해준 뒤 저장합니다. FTP에서 해당 템플릿 파일을 직접 열어서 수정하셔도 되고, 템플릿 파일을 쓰기가능하도록 퍼미션을 지정해둔 경우에는 워드프레스 관리자화면에서 Appearance > Editor로 이동해 해당 템플릿을 직접 편집할 수 있습니다.

<div class=”navigation”>
<div class=”alignleft”><?php next_posts_link(‘&laquo; Older Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(‘Newer Entries &raquo;’) ?></div>
</div><!– END navigation –>

<div class=”navigation”>과 </div><!–END navigation–> 사이의 코드만 삭제하신 다음 아래 코드를 복사해서 넣어 주시면 됩니다.

<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>

이렇게 코드를 바꿔준 뒤 저장을 하시면 아래 그림 3)처럼 플러그인이 적용됩니다.

그림 3) 플러그인 옵션과 CSS를 수정하지 않은 상태

3. 플러그인 옵션 수정과 CSS 수정

이제 Settings > PageNavi 로 이동해 플러그인의 옵션을 원하시는 대로 수정해주시면 됩니다.

그림 4) 플러그인 옵션

Page Navigation Text 항목은 그림 4)에 매겨진 번호와 아래 그림 5)에 매겨진 번호를 맞추어 보시면 플러그인의 옵션이 어떻게 화면에 적용될지 알 수 있으실 겁니다.

그림 5) WP-PageNavi의 페이징 네비게이션

그림 4)  Page Navigation Options에서 Page Navigation Style에는 두 가지 값이 있습니다. Normal와 Drop Down List입니다. Normal 값은 그림 5)처럼 가로로 펼쳐서 보여주는 방식이고, 드랍 다운 리스트 방식은 그림 6) 처럼 클릭하면 페이지를 세로로 펼쳐 보여주는 방식입니다.

그림 6)

Number of Pages to Show의 값이 5일 때 그림 5)처럼 나타납니다. 곧 페이지 번호를 몇개 나열해줄지를 지정합니다. 그 뒤 혹은 그 이전 페이지의 경우 그림 5)의 8번처럼 다음/이전 버튼을 넣어주고 점점점을 이용해 줄여주게 됩니다.

Always Show Page Navigation에 Yes를 하시면 이동할 페이지가 없는 경우, 곧 1페이지 밖에 없는 경우에도 페이지 수를 나타내주게 됩니다. ‘1′ 이렇게 나타나는 것이지요.

플러그인 옵션을 수정하셨으면 조금더 입맛에 맞게 페이징 네비게이션의 디자인을 수정하기 위해 WP-PageNavi 플러그인 디렉토리에서 pagenavi-css.css파일을 열어서 수정해주시면 됩니다. CSS를 잘 모르셔도 border, color, background-color 값을 바꿔보시면 큰 어려움 없이 마음에 들게 바꾸실 수 있으실 겁니다. 가능성은 낮지만 기회가 닿으면 CSS 수정 관련 예제를 추가하도록 하겠습니다.

읽어 주셔서 감사합니다.

연관 글

1. 워드프레스 테마 Swing Like Tiger
2. 워드프레스 테마 Ecopress
3. 산뜻한 워드프레스 테마 Glassical
4. 티스토리의 ‘더보기’기능이 필요하시다면, Tiny Spoiler
5. 데이터베이스 관리 플러그인, WP-DBManager