2009

10월

12

wp-pagenavi, 게시판 스타일로 만들기

워드프레스는 기본적으로 숫자로 페이지를 넘겨가면서 볼 수 없다.
이전, 다음으로 포스팅 된 게시물 숫자만큼 페이지를 이동할 수 있다.
그렇다고 우울하게 이전, 다음으로 페이지만 넘겨가면서 포스팅 된 글을 살펴볼 수는 없는 일.

이런 기본적인 페이징의 그늘에서 벗어나 게시판 처럼 페이징을 가능하게 해준 플러그인이 있으니 이른바 wp-pagenavi라는 플러그인이다.
http://wordpress.org/extend/plugins/wp-pagenavi/

이 플러그인은 사용중인 테마를 수정해야 하는데 페이지 적용방법은
http://lesterchan.net/wordpress/readme/wp-pagenavi.html 에 나와있다.
하지만 설명데로 footer.php 에 넣어서는 동작을 하지 않는다.
php를 아는 분들은 가능하겠지만 나같은 사람들은 모니터를 치며 울 상황만 발생한다.

나보다 영어해석을 못하는 사람들을 위해 대충 사용법을 적어보겠다. ( … )
플러그인이 설치되고 활성화 된 상태에서 자신의 테마 디렉토리의 footer.php를 열어
<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?> 코드를 삽입해주면 된다… 고 되어있으나 안된다.

01. 적용방법
자신의 테마의 index.php를 열어

<div class=”navigation”>
<div><?php next_posts_link(__(‘&laquo; Older Entries’, ‘paperbook_default’)) ?></div>
<div><?php previous_posts_link(__(‘Newer Entries &raquo;’, ‘paperbook_default’)) ?></div>
</div>

부분을 찾아서

<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?> 로 수정을 해준다.
이렇게 되면 블로그에 페이지가 번호로 출력되게 된다.
다만 현재 해결을 못한 부분이 있는데 메인페이지에서는 위의 방법으로 해결을 했는데
각 아티클 별 페이지, 즉 single.php 의 동일한 코드부분을 수정해봐도 이 부분에는 적용이 되지 않는다.
아마 php와 관련된 무엇인가가 이유겠지만 개인적으로는 손 댈 방법이 없기에 아쉬운데로 메인페이지에서만이라도 페이징이 가능하도록 해놓았다.
방법이 없을까? ㅜ.ㅡ

페이징이 되면 그대로 사용해도 충분하지만 전체적으로 디자인이 우울하다.
크기도 너무 커서 10페이지로 출력이 되도록 설정을 해놓을 경우 좁은 컨텐츠 영역을 사용하는 사용자들은 밀려버린 페이징을 보는 수 밖에 없다.
이쯤되면 기분은 Gloomy sunday가 되고 회사에서 사장이 불러도 쌩까는 상황이 되기 쉽상이다.

pagenavi

02. 우울한 디자인 수정하기.
pagenavi-css.css를 열어 기존에 선언되어있는 css를 죄다 주석처리한다.

다음의 css를 넣어준다.

.wp-pagenavi { font:normal 11px tahoma; color:#999; text-align:right; }

.wp-pagenavi a {
font:normal 11px tahoma;
text-decoration: none;
color: #999999;
padding: 2px 4px 2px 4px;
margin: 2px;
}
.wp-pagenavi a:visited {
color: #999999;
}
.wp-pagenavi a:hover {
color: #000000;
}
.wp-pagenavi a:active {
color: #d45d3d;
}

.wp-pagenavi span.current {
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
color: #157cb7;
}

이렇게 하면 보편적인 사이트들에게서 볼 수 있는 평범한 페이지 네비게이션이 만들어지게 된다.
물론 디자인을 잘하고 css를 손 볼줄 안다면 예쁘게 꾸미는것도 좋겠지만 일반 사용자들은 이정도면 충분하지 않을까?
아래는 스크린 샷이다.
참고로 컨텐츠 영역의 넓이에 따라 전체페이지와? 네비게이션은 멀어지게 된다.

이쯤되면 사장님이 불러도 대답은 할 수 있는 상황은 되지 않을까?
멀쩡하게 회사도 그대로 다닐 수 있고.

pagenavi_02

팁!
코맨트도 길어지게되면 페이지로 출력되게 할 수 있다.
http://wordpress.org/extend/plugins/wp-commentnavi/ 에 가서 플러그인을 다운받으면 되는데 개발은 동일한 사람이 한것으로 보인다.
클래스도 동일하다.

적용방법은 위 url에서 참고하고

commentnavi-css.css를 열어
아래와 같이 수정하면 메인에 적용한 위 디자인과 동일하게 적용이 된다.
.wp-commentnavi { font:normal 11px tahoma; color:#999; text-align:right; }

.wp-commentnavi a {
font:normal 11px tahoma;
text-decoration: none;
color: #999999;
padding: 2px 4px 2px 4px;
margin: 2px;
}
.wp-commentnavi a:visited {
color: #999999;
}
.wp-commentnavi a:hover {
color: #000000;
}
.wp-commentnavi a:active {
color: #d45d3d;
}

.wp-commentnavi span.current {
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
color: #157cb7;
}
.wp-commentnavi-all-comments-link {
float:left;
font:bold 11px tahoma;
color:#000;
text-decoration:none;

}