2024 年 4 月 27 日 我的频道
舍弃 Wp-PageNavi
  • 2022
  • Sunny

曾经一度让我痴迷的分页插件,今天终于狠下心来彻底放弃。原因是因为该插件的兼容性差,无论是对于多国语言的支持还是可用性都显得强差人意。本站在打算全面利用 Wp_Query 改变写法的时候,不断的进行测试,就是因为 Wp-PageNavi 的不兼容所至,参考了网上诸多的写法,对于主页、分类页都能很好的支持,唯一不足的就是对于标签链接页、日志归档页不支持。而且还经常出现重定向过多的错误页面,实在让人诅丧,所以才狠下心来彻底放弃。

有了替代才能横下心来放弃,利用纯代码实现的支持 Wp_Query 写法的分页代码如下,仅供参考,拓展性自行研究开发:

//Wp_Query Pages
function my_pagination( $args = array() ) {
    global $wp_query;
    $output = '';

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

    $pagination_args = array(
        'base'         => str_replace( 99999, '%#%', esc_url( get_pagenum_link( 99999 ) ) ),
        'total'        => $wp_query->max_num_pages,
        'current'      => max( 1, get_query_var( 'paged' ) ),
        'format'       => '?paged=%#%',
        'show_all'     => false,
        'type'         => 'plain',
        'end_size'     => 1,
        'mid_size'     => 1,
        'prev_next'    => false,
        //'prev_text'    => __( '&laquo; Prev', 'text-domain' ),
        //'next_text'    => __( 'Next &raquo;', 'text-domain' ),
        //'prev_text'    => __( '&lsaquo; Prev', 'text-domain' ),
        //'next_text'    => __( 'Next &rsaquo;', 'text-domain' ),
        'prev_text'    => sprintf( '<li></li> %1$s',
            apply_filters( 'my_pagination_page_numbers_previous_text',
            __( 'Newer Posts', 'text-domain' ) )
        ),
        'next_text'    => sprintf( '%1$s <li></li>',
            apply_filters( 'my_pagination_page_numbers_next_text',
            __( 'Older Posts', 'text-domain' ) )
        ),
        'add_args'     => false,
        'add_fragment' => '',

        // Custom arguments not part of WP core:
        'show_page_position' => false, // Optionally allows the "Page X of XX" HTML to be displayed.
    );

    $pagination_args = apply_filters( 'my_pagination_args', array_merge( $pagination_args, $args ), $pagination_args );

    $output .= paginate_links( $pagination_args );

    // Optionally, show Page X of XX.
    if ( true == $pagination_args['show_page_position'] && $wp_query->max_num_pages > 0 ) {
        $output .= '<span class="current">' .
                                    sprintf( __( 'Page %1s of %2s', 'text-domain' ), $pagination_args['current'], $wp_query->max_num_pages ) .
                '</span>';
    }

    return $output;
}

把曾经为了 Wp-PageNavi 插件所设置的 Css 写进去:

/* Page Bar Css */

.wp-pagenavi {
    width: auto;
    height: auto;
    overflow: visible;
    margin: 85px 0 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-pagenavi a,
.wp-pagenavi span {
    width: auto;
    height: 40px;
    line-height: 40px;
    padding: 0 13px;
    box-sizing: border-box;
    text-decoration: none;
    border: 1px solid #2f3542;
    background: #fff;
    margin: 0 5px 0 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wp-pagenavi a:hover,
.wp-pagenavi span.current {
    background: #2f3542;
    color: #fff;
    box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
}

.wp-pagenavi a:hover:before {
    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom: 7px solid #2f3542;
    position: absolute;
    bottom: -12px;
}

.wp-pagenavi span.current:before {
    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom: 7px solid #2f3542;
    position: absolute;
    bottom: -12px;
}

.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
    font-size: 22px;
}

.wp-pagenavi .first,
.wp-pagenavi .last {
    font-size: 20px;
    font-weight: 400;
}

前台调用:

<div class="wp-pagenavi" role="navigation"><?php echo my_pagination(); ?></div>
STUDY
897
0

Author Box

名字:Sunny
注册:Jan 30, 2021
简介:技术菜鸟,拷贝、黏贴代码中 ……

Comment Box

0 0 投票数
Article Rating
订阅评论
提醒
guest

0 评论
内联反馈
查看所有评论