워드프레스로 웹사이트를 운영하다보면, 이 사이트에 많은 정보가 있고, 오랫동안 관리되어 온 페이지라는 것을 포장해야할 때가 있다. 그러나 아무리 글을 많이 써도 생각보다 글의 수는 늘지 않고, 포스팅이나 글의 하단에 나오는 페이지네이션(아래그림)의 숫자가 늘지 않는다.
위의 같이 페이지를 넘길 때 사용하는 것을 페이지네이션이라고 하는데, 테마에 따라 페이지 네비게이션이라고도 하는데 워드프레스에서는 다양한 페이지네이션 플러그인이 존재한다. 하지만, 필자가 원하는 가장 중요한 '마지막 번호'를 삭제할 수 있는 플러그인을 찾을 수 없었다.
정리하자면, 필자는 아래와 같은 페이지네이션 구현이 필요했다.
1. 포스팅 수가 적지 않게 보이기 위해 마지막 숫자(total number)를 제거 할것
2. post/page 등과 같이 기본 폼 이외에 커스텀 페이지에서도 적용이 가능해야 할것(예 Portfolio Ehsms Produc)
여러가지 방법을 찾던 중 테마별로 페이지네이션을 구현하는 방법이 다르긴 하지만, Fonction.php 파일 또는 테마별로 별도 페이지네이션에 대한 코딩이 존재하는데, 일반적으로 페이지네이션은 아래와 같이 구성되어 있다.
<?php
$big = 999999999; // need an unlikely integer
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $the_query->max_num_pages
) );
?>
잘 모르면 테마에서 위의 글자일부를 검색해서 나오는 페이지를 수정하면 된다. 여기서 중간에 'mid_size' => 2 이것을 추가하면 현재페이지 앞뒤로 2개씩 번호를 표시하는 것이고, 'end_size' => 1 를 추가하면 가장 마지막 페이지를 표시할 갯수를 설정할 수 있는데 1이 아니라 2라고 설정하면 가장 마지막 페이지 2개가 표시가 된다.
그래서 필자는 간단하게 0이라고 하면 마지막 페이지 번호가 나오지 않을 것이라고 추측했으나, 워드프레의 경우는 'end_size'에서 1이하는 1로 인식되도록 되어 있어서 0으로 표기해도 1로 인식해서 마지막 페이지가 표시된다.
그래서 필자가 구글링 해서 알아낸 또다른 방법은
위와 같은 형식으로 중앙에 현재페이지가 있고 앞뒤로 몇개씩 나타내고, 앞뒤로 가는 버튼과 처음과 마지막으로 가는 버튼까지 있는 방법을 알아내었다.
먼저 해야 할 것은, 테마의 function.php 파일 하단에 아래의 코드는 삽입한다.
function wds_pagination($pages = '', $range = 4) {
global $paged;
$showitems = ($range * 2)+1; // links to show
// init paged
if(empty($paged))
$paged = 1;
// init pages
if($pages == '') {
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
$pages = 1;
}
// if $pages more then one post
if(1 != $pages) {
echo '<div class="wds-pagination"><span>Page ' . $paged . ' of ' . $pages . '</span>';
// First link
if($paged > 2 && $paged > $range+1 && $showitems < $pages)
echo '<a href="' . get_pagenum_link(1) . '"><< First</a>';
// Previous link
if($paged > 1 && $showitems < $pages)
echo '<a href="'.get_pagenum_link($paged - 1).'">< Previous</a>';
// Links of pages
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) . '">' . $i .
'</a>';
// Next link
if ($paged < $pages && $showitems < $pages)
echo '<a href="' . get_pagenum_link($paged + 1) . '">Next ></a>';
// Last link
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages)
echo '<a href="' . get_pagenum_link($pages) . '">Last >></a>';
}
}위의 내용을 보면 wds_pagination 이라는 별도의 페이지네이션을 설정하여 이를 불러내도록 하는 것이다.
그리고 다음으로 style.css 스타일 시트파일에 아래를 추가해준다.
.wds-pagination {
margin: 10px auto;
text-align: center;
}
.wds-pagination a,
.wds-pagination span {
color: #fff;
display: inline-block;
text-decoration:none;
background-color: #6FB7E9;
border-radius: 3px;
cursor: pointer;
margin: 0 5px;
padding: 0px 10px;
line-height: 32px;
}
.wds-pagination a:hover,
.wds-pagination span.current {
background-color: #3C8DC5;
}
.wds-pagination span.current {
cursor: default;
}위의 것은 일종의 예시이며 색상등은 사용자가 맘에 드는 것으로 변경한다.
마지막으로 가장 중요한 부분인데, 페이지네이션을 불러내는 파일이나 페이지에 아래를 추가해주어야 하는데, 아래는 워드프레스의 기본테마 3종류에 적용하는 방법이고, 각 테마별로 이는 다를 수 있다.
<!-- for Twenty Twenty theme -->
<?php /* get_template_part( 'template-parts/pagination' ); */ ?>
<?php wds_pagination(); ?>
<!-- for Twenty Nineteen theme -->
<?php /* twentynineteen_the_posts_navigation(); */ ?>
<?php wds_pagination(); ?>
<!-- for Twenty Thirteen theme -->
<?php /* twentythirteen_paging_nav(); */ ?>
<?php wds_pagination(); ?>필자의 경우, 사용하는 테마에서 0000-nav.php 파일을 별도로 생성해서 페이지네이션이 출력되는 페이지에 <?php get_template_part("0000","nav"); ?> 이러한 식으로 불러내는 방식을 취하고 있기 때문에 0000-nav.php 파일에 필자가 처음 언급한 기본 페이지네이션이 아래와 같이 입력되어 있었다.
<?php
$big = 999999999; // need an unlikely integer
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $the_query->max_num_pages
) );
?>이 부분을 테마별로 적용하는 방식을 취해서 아래처음 변경해주었다.
<?php /* 0000_nav(); */ ?>
<?php wds_pagination(); ?>이렇게 하여 하단 페이지 네이션의 마지막 숫자를 제거하였고, 원하는 스타일로 변경할 수가 있었다.
댓글