페이지 매김 목록 클래스 변경


17

paginate_links()이 함수는 "page-numbers"라는 클래스를 가진 순서없는 목록을 반환합니다. 이 수업을 어떻게 바꿀 수 있습니까?

편집하다

현재 아래의 반창고 방법을 사용하고 있습니다.

$return = paginate_links( $arg );
echo str_replace( "<ul class='page-numbers'>", '<ul class="pagination">', $return );

더 좋은 방법이 있습니까?


1
나는 이것에 대한 빠른 튜토리얼을 찾았으며 부트 스트랩 테마 클래스를 사용하면 도움이 될 것이라고 생각합니다! http://www.ordinarycoder.com/paginate_links-class-ul-li-bootstrap/
Erik Larsson

LI 및 A html 태그 클래스 이름을 설정해야 할 때 유용한 PHP 클래스를 만들었습니다. gist.github.com/pixeline/1dc662b756c553eb5efcb6ec4753375f
pixeline

@ErikLarsson 링크가 끊어졌습니다.
MastaBaba

답변:


11

paginate_links()매개 변수를 제공하지 않고 후크를 제공하지 않습니다- 소스를 참조하십시오 -클래스를 변경할 수 있습니다. 즉, 수행 한 것처럼 수행하거나을 기반으로 자신 만의 페이지 매김 함수를 만들 수 있습니다 paginate_links().


14

부트 스트랩 페이지 매김 링크와 함께 사용할 동일한 솔루션을 찾고 있었지만

아래 코드는 내 테마에서 100 % 작동합니다.

function bittersweet_pagination() {

global $wp_query;

if ( $wp_query->max_num_pages <= 1 ) return; 

$big = 999999999; // need an unlikely integer

$pages = paginate_links( array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format' => '?paged=%#%',
        'current' => max( 1, get_query_var('paged') ),
        'total' => $wp_query->max_num_pages,
        'type'  => 'array',
    ) );
    if( is_array( $pages ) ) {
        $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
        echo '<div class="pagination-wrap"><ul class="pagination">';
        foreach ( $pages as $page ) {
                echo "<li>$page</li>";
        }
       echo '</ul></div>';
        }
}

index.php에서 호출하는 함수를 사용하십시오. 예; <?php bittersweet_pagination(); ?>또는 다른 파일. 또한 부트 스트랩 스타일을 덮어 쓰면 도움이 될 수 있습니다.

.pagination-wrap {
    clear: both;
    display: block;
    overflow: hidden;
    text-align: center;
}
.pagination-wrap .pagination {
    margin-bottom: 0;
    margin-top: 0;
}
.pagination-wrap .pagination > li:first-child > a, 
.pagination-wrap .pagination > li:first-child > span {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}
.pagination-wrap .pagination > li:last-child > a, 
.pagination-wrap .pagination > li:last-child > span {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}
.pagination-wrap .pagination > li > a,
.pagination-wrap .pagination > li > span {
    background-color: #4FBEBA;
    border: 1px solid #1BA5A0;
    padding: 10px 15px;
    font-weight: bold;
    color: #FFFFFF;
}
.pagination-wrap .pagination > li > a:hover, 
.pagination-wrap .pagination > li > span:hover, 
.pagination-wrap .pagination > li > a:focus, 
.pagination-wrap .pagination > li > span:focus {
    background-color: #1BA5A0;
    border-color: #189690;
}
.pagination-wrap .pagination .current {
    background-color: #1BA5A0;
    border-color: #189690;
}
.pagination-wrap .pagination .current:hover,
.pagination-wrap .pagination .current span:hover {
    background-color: #189690;
    border-color: #148781;
}

1
페이지 매김이 필요하지 않은 경우에도 각 페이지가 생성 될 때마다이 쿼리가 호출되므로 성능을 약간 향상시킬 수 있습니다. 추가 :```if ($ wp_query-> max_num_pages <= 1) return; 함수 시작 부분에서 전역 $ wp_query 다음에```.
pixeline

5

이를 위해서는 유형 매개 변수를 사용해야합니다

$links = paginate_links( array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total' => $posts_array->max_num_pages,
    'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
    'next_text'          => __( 'Next page', 'twentyfifteen' ),
    'type' => 'list'
) );
   echo $links

0

여기에 언급되지 않은 또 다른 옵션은 요소에 지정된 클래스를 변경하는 대신 스타일을 WordPress 페이지 매김 클래스로 복사하는 것입니다.

부트 스트랩을 사용하고 모든 것을 sass와 번들로 묶는 경우 @extend지시문을 사용하여 스타일을 쉽게 적용 할 수 있습니다 .

ul.page-numbers {
    @extend .pagination;
    > li {
        > a, > span {
            &.page-numbers {
                @extend .page-link
                &:focus, :hover {
                    /* Additional hover/focus styles here */
                }
            }
        }
    }
}

이것은 일부 상황과 관련이있을 수 있지만 원래 질문의 코드가 대부분의 응용 프로그램에 가장 적합한 솔루션이라고 생각합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.