플러그인없이 워드프레스에 페이징 적용하기

2013-10-06 by 편리

날씨 좋은 날.. 또 이런 삽질을 난 하고 있다. 아~ 이래서는 안되는 데 하는 생각이 들면서 한번 삽질에 빠지면 헤어나오지 못해서 큰 일이다. 이번엔 워드프레스에 플러그인을 사용하지 않고 페이징 기능을 추가하는 것이다. 기본으로 제공하는 것이 있긴 한데 ‘이전글’ ‘다음글’ 정도라서 많이 부족해보이고.. 치명적으로 지금 사용 중인 테마에선 검색 결과에 페이징이 적용되지 않은 듯 하여 방법을 찾다보니 여기까지 오게 된 것이다. 시작은 별 것도 아니었는데.. 어쩌나 이 지경이 됐는지는.. 나도 잘 모르겠다.

딱 이미지처럼 저렇게 나온다. 먼저 참고한 글은 영문이긴 한데.. 이 포스트이다. 플러그인을 찾아도 되는데.. 이상하게 EXIF 부분도 그렇고 직접 코드를 추가하는 방법을 자꾸 찾게 된다. 개발이라는 일을 하고 있어서일까? 먼저 위 이미지와 같은 페이징 기능을 추가하기 위해서는 함수를 추가해야 한다. 이 함수는 테마의 functions.php 파일에 추가해주면 된다.

function pagination($pages = '', $range = 4)
{
     $showitems = ($range * 2)+1;

     global $paged;
     if(empty($paged)) $paged = 1;

     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }

     if(1 != $pages)
     {
         echo '<div class="pagination"><span>Page '.$paged.' of '.$pages.'</span>';
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo '<a href="'.get_pagenum_link(1).'">&laquo; First</a>';
         if($paged > 1 && $showitems < $pages) echo '<a href="'.get_pagenum_link($paged - 1).'">&lsaquo; Previous</a>';

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? '<span class="current">'.$i.'</span>':'<a href="'.get_pagenum_link($i).'" class="inactive">'.$i.'</a>';
             }
         }

         if ($paged < $pages && $showitems < $pages) echo '<a href="'.get_pagenum_link($paged + 1).'">Next &rsaquo;</a>';
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo '<a href="'.get_pagenum_link($pages).'">Last &raquo;</a>';
         echo '</div>'.PHP_EOL;
     }
}

다음으로는 페이징 부분의 스타일을 지정해줘야 하는데.. 아래 css 코드를 테마의 style.css 파일에 추가해준다.

.pagination {
    clear:both;
    padding:20px 0;
    position:relative;
    font-size:11px;
    line-height:13px;
    text-align: center;
}

.pagination span, .pagination a {
    display:inline-block;
    margin: 2px 2px 2px 0;
    padding:6px 9px 5px 9px;
    text-decoration:none;
    width:auto;
    color:#999;
    font-family:Tahoma;
    background: #fff;
    border:1px solid #eee;
}

.pagination a:hover{
    color:#fff;
    background: #3279BB;
}

.pagination .current{
    padding:6px 9px 5px 9px;
    background: #3279BB;
    color:#fff;
}

그런 다음 페이징 출력을 위해서 아래 코드를 해당 파일에 추가해주면 된다. 나의 경우 테마의 index.php 파일과 search.php 파일에 적용했다.

<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>

참고했던 포스트에서 크게 수정한 부분은 없다. css 부분을 적당히 고쳐보긴 했는데.. 제대로 수정한 것인지는 잘 모르겠다. 간만에 css 코드를 보려니까 어려운 게 너무 많다. 그냥 php나 jquery 코드만 봐야할지도 모르겠다. 너무 담을 쌓고 살아왔다는 생각이 강하게 든다. 점점 더 블로그에 기능을 추가하고 있는데.. 한편으로는 나중에 테마라도 바꾸려면 일이 엄청 많아지겠다는 생각이 들기 시작했다. 그렇다고 해서 필요한 기능인데 넣지 않기도 그렇고.. 이런 거 할 줄 모를 때는 모르면 그냥 포기했는데.. 언제부턴가 포기라는 단어는 사라지고 어떻게든 구현하려고 하니.. 이거 좋은 거겠지? ㅎㅎ

참고글 : http://design.sparklette.net/teaches/how-to-add-wordpress-pagination-without-a-plugin/

Leave a Reply Cancel reply