更改分页列表类


17

paginate_links()函数返回名为“ page-numbers”的类的无序列表。我该如何改变这个班级?

编辑

目前,我正在使用下面的创可贴方法。

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

有什么更好的办法吗?


1
我已经找到了关于此的快速教程,并且我可以为您使用bootstrap主题类,所以我认为这会有所帮助!http://www.ordinarycoder.com/paginate_links-class-ul-li-bootstrap/
Erik Larsson 2014年

我制作了一个php类,在您需要设置LI和html标记类名称时非常有用。gist.github.com/pixeline/1dc662b756c553eb5efcb6ec4753375f
pixeline 2016年

@ErikLarsson链接已损坏。
MastaBaba

Answers:


11

paginate_links()没有提供参数,也没有钩子-请参阅源代码 -可用于更改类。这意味着您可以像完成操作一样进行操作,也可以基于来创建自己的分页功能paginate_links()


14

我也在寻找相同的解决方案,以将其与bootstrap分页链接一起使用,

下面的代码在我的主题中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)返回; 在函数开头的全局$ 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分页类,而不是更改分配给元素的类。

如果您正在使用Bootstrap并将所有内容与sass捆绑在一起,则可以使用@extend指令轻松地应用样式。

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

这可能与某些情况有关,但是我觉得原始问题中的代码对于大多数应用程序是最佳解决方案。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.