워드프레스 | 페이지네이션 만드는 법

정라잇 | 최근 수정일 : 22년 09월 26일

개요

우리가 검색할 때 자주 볼 수 있는 페이지 매김(Pagination) 블록을 만드는 방법을 공유하려 합니다. 놀랍게도 이 단순해 보이는 기능은 정확하지 않은 정보들로 인해 적용하는데 많은 시간이 걸렸습니다.

설명이 필요하기에 어쩔 수 없이 코드를 쪼개지만 한 페이지 파일에 순서대로 복사 붙여넣기 하시면 작동됩니다.

WP_Query

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$query = new WP_Query(array(
    'post_type' => 'post',
    'posts_per_page' => 4,
    'paged' => $paged
));
?>

자료를 불러오는 코드부터 시작합니다. WP_Query 클래스는 워드프레스 DB의 자료를 마음대로 가져올 수 있습니다. 자세한 사항은 워드프레스 공식 메뉴얼을 참조해주세요.

현재 post_type은 글(post) 만 가져오며, posts_per_page 를 통해 한 페이지에 4개의 글만 가져오게 설정했습니다 (자유롭게 변경 가능) 'paged' 와 $paged 변수는 페이지네이션을 위한 코드인데요, 활용 방법은 아래의 페이지네이션 탭을 보시면 됩니다.

자료 출력

<?php if ($query->have_posts()) : ?>
    <?php while ($query->have_posts()) : $query->the_post(); ?>
            <!-- 제목 -->
            <?php the_title(); ?>
            <!-- 요약 -->
            <?php the_excerpt(); ?>
    <?php endwhile; ?>
    <!-- Post Data 리셋 -->
    <?php wp_reset_postdata(); ?>
    <?php else : ?>
    <!-- 값이 없을 경우 -->
    <p><?php _e('리스트가 존재하지 않습니다'); ?></p>
<?php endif; ?>

WP_Query 설정을 마쳤다면 이제는 출력 과정입니다. posts_per_page 에 설정된 만큼 코드는 총 4번 실행됩니다. 한 페이지에 WP_Query를 여러번 실행시키려면 반드시 wp_reset_postdata() 함수를 실행해야 초기화가 됩니다.

페이지네이션

<?php the_posts_pagination(array(
    'mid_size'  => 4,
    'prev_text'    => '이전',
    'next_text'    => '다음',
)); ?>

post 에서 작동이 되는 페이지네이션 방식입니다. 가장 최근에 만들어졌으며 가장 정상적으로 작동되었던 코드입니다.


<div class="pagination">
    <?php
    echo paginate_links(array(
        'base'         => str_replace(999999, '%#%', esc_url(get_pagenum_link(999999))),
        'total'        => $query->max_num_pages,
        'current'      => max(1, get_query_var('paged')),
        'format'       => '?paged=%#%',
        'show_all'     => false,
        'type'         => 'plain',
        'end_size'     => 3,
        'mid_size'     => 3,
        'prev_next'    => true,
        'prev_text'    => '<div class="prev">이전</div>',
        'next_text'    => '<div class="next">다음</div>',
        'add_args'     => false,
        'add_fragment' => '',
    ));
    ?>
</div>

대망의 페이지네이션입니다. 이 코드는 CPT(커스텀 포스트 타입) 에 적용이 되는 코드입니다. 만약 적용이 되지 않는다면(404 에러) 페이지 슬러그를 다른 것으로 바꾸어 사용해보세요.

show_all 매개변수를 false 로 활용하면 중간에 … 을 넣음으로서 를 짧게 표시할 수 있습니다. end_size 와 mid_size 로 세세한 설정을 할 수 있습니다.

‘type’ 은 'plain' | 'array' | 'list' 중 어떤 포맷으로 보여줄지를 선택할 수 있습니다. 기본은 plain(일반) 입니다.

간단한 페이지 매김 방법

// 이전, 다음 링크 생성
next_posts_link(); 
previous_posts_link();

// 간단한 페이지 매김
posts_nav_link();

// 숫자 페이지네이션 활용법 *가장 최근방식
the_posts_pagination();

간단하게 활용이 가능한 페이지 매김 방식입니다. next_posts_link() 와 previous_posts_link() 의 경우 이전 페이지와 다음 페이지로 쪼개져 있기에 레이아웃에 따라 맞추어 활용하면 됩니다.

글 너무 길 때 쓰는 방법

<!--nextpage-->

글이 너무 긴 경우 다음 페이지로 넘길 수 있는 페이지 매김방식입니다. 글을 쓰는 도중 중간에 해당 코드를 추가하면 페이지를 쪼갤 수 있게됩니다.

CSS 활용방법

.nav-links > a {
    padding-left: 5px;
    padding-right: 5px;
}

.nav-links .page-numbers {
    color: #c4c4c4;
}

.nav-links {
    font-size: 20px;
}

.nav-links .page-numbers.current {

    padding-left: 8px;
    padding-right: 8px;
}

the_posts_pagination() 함수에서 작동하는 CSS 값입니다. 여기서 만약 폰트어썸을 사용중이라면 아래의 코드를 prev_text 와 next_text 에추가해보세요

<i class="fas fa-chevron-left" id="page_left" aria-hidden="true"></i></i>
<i class="fas fa-chevron-right" id="page_right" aria-hidden="true"></i></i>