WordPress 테마에 페이지 매김을 추가하는 방법

기본 다음 및 이전 게시물 대신 멋진 숫자로 WordPress 테마에 페이지 매기기 지원을 추가하려는 경우 유명한 PageNavi 플러그인을 사용하여 그렇게 할 수 있습니다. 하지만 저는 사람들이 페이지 매김을 수동으로 추가하지 않도록 테마에 수동으로 페이지 매기기를 추가하는 것을 선호합니다. 플러그인을 검색해야 합니다. 또한 모든 외부 스크립트와 CSS 없이도 사이트를 더 빠르게 유지하는 데 도움이 됩니다.

운 좋게도 WordPress 2.1에 추가된 "paginate_links"라는 훌륭한 기능이 WordPress 2.1에 추가되어 사이트의 모든 쿼리에 대해 페이지 매김 스타일 탐색을 생성할 수 있게 해줍니다. 여기 내 Total WordPressTheme의 페이지 매김과 똑같이 보이는 간단한 페이지 탐색을 테마에 추가하기 위한 빠른 튜토리얼이 있습니다.

페이지 매김 PHP

function.php 파일(또는 테마에서 유지하려는 파일) 끝에 다음 코드를 추가하기만 하면 됩니다.

// Numbered Pagination
if ( !function_exists( 'wpex_pagination' ) ) {
	
	function wpex_pagination() {
		
		$prev_arrow = is_rtl() ? '→' : '←';
		$next_arrow = is_rtl() ? '←' : '→';
		
		global $wp_query;
		$total = $wp_query->max_num_pages;
		$big = 999999999; // need an unlikely integer
		if( $total > 1 )  {
			 if( !$current_page = get_query_var('paged') )
				 $current_page = 1;
			 if( get_option('permalink_structure') ) {
				 $format = 'page/%#%/';
			 } else {
				 $format = '&paged=%#%';
			 }
			echo paginate_links(array(
				'base'			=> str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
				'format'		=> $format,
				'current'		=> max( 1, get_query_var('paged') ),
				'total' 		=> $total,
				'mid_size'		=> 3,
				'type' 			=> 'list',
				'prev_text'		=> $prev_arrow,
				'next_text'		=> $next_arrow,
			 ) );
		}
	}
	
}

모든 매개변수 보기

페이지 매김 CSS

다음 CSS를 복사하여 style.css 파일에 붙여넣습니다.

ul.page-numbers {
    list-style: none;
    margin: 0;
}

.page-numbers:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

ul.page-numbers li {
    display: block;
    float: left;
    margin: 0 4px 4px 0;
    text-align: center;
}

.page-numbers a,
.page-numbers span {
    line-height: 1.6em;
    display: block;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid #ddd;
    color: #888;
}

.page-numbers a span { padding: 0 }

.page-numbers a:hover,
.page-numbers.current,
.page-numbers.current:hover {
    color: #000;
    background: #f7f7f7;
    text-decoration: none;
}

.page-numbers:hover { text-decoration: none }

테마에 페이지 매김 기능 추가

페이지 매김 기능을 다시 호출하는 방법은 정말 간단합니다. 여러분이 해야 할 일은 모든 종류의 페이지 매김을 표시하려는 테마 파일에 다음 코드를 추가하는 것뿐입니다. 가장 일반적인 것은 index.php, home.php, Category.php, Tags.php, archive.php 및 search.php입니다. 그러나 페이지 매기기를 지원하는 사용자 정의 페이지 템플릿이 있는 경우 여기에 추가하는 것이 좋습니다.

기본 페이지 매김을 다음으로 바꿉니다(일반적으로 endif 다음 위치).

<?php wpex_pagination(); ?>

맞춤 쿼리?

WP_Query를 사용하여 사용자 정의 쿼리를 생성하는 경우 $wp_query 변수에 쿼리를 정의하지 않으면 이 기능이 작동하지 않습니다(나쁘므로 사용하지 마세요). 이 문제를 해결하기 위해 일반적으로 다음과 같은 새 쿼리를 만듭니다.

$wpex_query = new WP_Query( $args );

이렇게 하면 페이지 매김을 생성할 때 변수를 찾도록 기본 페이지 매김 기능을 변경할 수 있습니다(예: 첫 번째 코드 조각 편집).

global $wp_query, $wpex_query;
if ( $wpex_query ) {
    $total = $wpex_query->max_num_pages;
} else {
    $total = $wp_query->max_num_pages;
}

업데이트: 이 예에서는 전역 변수를 확인합니다… 하지만 단순히 쿼리 변수를 wpex_pagination 함수에 직접 전달할 수도 있으며 이는 아마도 더 나은 선택일 것입니다 ?