收集自网络的wordpress 分页导航的代码教程（全网最全版）

最新推荐文章于 2023-03-20 15:07:22 发布

VIP文章 weixin_33826609

最新推荐文章于 2023-03-20 15:07:22 发布

阅读量1.1k

点赞数 1

文章标签： php 前端 ViewUI

原文链接：https://my.oschina.net/rhymo/blog/1833037

版权

为什么80%的码农都做不了架构师？>>>

wordpress 分页导航是用来切换文章的一个功能，添加了 wordpress 分页导航后，用户即可自由到达指定的页面数浏览分类文章，而这样的一个很简单功能却有很多朋友在用插件：WP-PageNavi，插件的详细设置请参考这篇文章：WordPress 安装 WP-PageNavi 文章列表分页导航插件，一直响应着一句 wordpress 界的口号“追求速度，远离插件”，那么如何用代码自定义 wordpress 的分页导航呢？

今天在此介绍的正是几种实现“wordpress 分页导航的代码教程（全网最全版）：自定义函数版和 wordpress 自带函数版”！

自定义函数版

第一种

效果图如下：

将以下分页导航函数的代码加到主题的 functions.php 中先：

/* 首页分页导航 
/* -------------*/  
function pagenavi( $before = '', $after = '', $p = 2 ) {
    if ( is_singular() ) return;
    global $wp_query, $paged;
    $max_page = $wp_query->max_num_pages;
    if ( $max_page == 1 )
        return;
    if ( empty( $paged ) )
        $paged = 1;
    	// $before = "<span class='pg-item'><a href='".esc_html( get_pagenum_link( $i ) )."'>{$i}</a></span>";
    echo $before;
    if ( $paged > 1)
        p_link( $paged - 1, '上一页', '<span class="pg-item pg-nav-item pg-prev">' ,'上一页' );
    if ( $paged > $p + 1 )
        p_link( 1, '首页','<span class="pg-item">',1 );
		if ( $paged > 2 + $p ) echo '<span class="pg-item"> ... </span>';
    for( $i = $paged - $p; $i <= $paged + $p; $i++ ) {
        if ( $i > 0 && $i <= $max_page )
            $i == $paged ? print "<span class='pg-item pg-item-current'><span class='current'>{$i}</span></span>" : p_link( $i,'', '<span class="pg-item">',$i);
    }
    if ( $paged < $max_page - $p ) p_link( $max_page, __('末页','tinection'),'<span class="pg-item"> ... </span><span class="pg-item">',$max_page );
    if ( $paged < $max_page ) p_link( $paged + 1,__('下一页','tinection'), '<span class="pg-item pg-nav-item pg-next">' ,__('下一页','tinection'));
    echo $after;
}

然后，在需要的地方，如主题 index.php、archive.php、category.php、search.php 等模板适当的位置，添加调用代码：

<div class="pagination">
<?php pagenavi(); ?>
</div>

最后，加上美化的 css：效果参考这里；

/* Pagination */
div.pagination {padding: 0px; margin: 25px 0 40px; text-align: center; font-size: 17px;line-height:17px; position:relative;} 
.pagination .pg-filler-1 { width:35%;}
.pagination .pg-filler-2 { width:40%;}
.pagination .pg-item a, .pagination .pg-item .current,.pagination .pg-dots, .pagination .pg-item .disabled{display:inline-block; color:#666; padding:9px 13px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; text-decoration:none; margin:0 1px; min-width:10px; }
.pagination .pg-item a {-webkit-transition: background .2s linear;-moz-transition: background .2s linear;-ms-transition: background .2s linear;-o-transition:  background .2s linear;transition: background .2s linear;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;}
.pagination .pg-next { position:absolute; right:10px;}
.pagination .pg-prev { position:absolute; left:10px;}
.pg-nav-item { text-transform:uppercase;}
.pagination .pg-item .current, .pagination .pg-item a:hover { background:#5CBDE7; color:#fff;}
div.pagination span.current, div.pagination a  {padding:0px;}  
div.pagination a.navbutton {margin:0 2px;border: 1px solid #eaeaea;}
/* 下面部分是mobile时 */
@media screen and (max-width: 640px) {
div.pagination{font-size:15px;}
.pagination .pg-prev{left:0;}
.pagination .pg-next{right:0;}
.pagination .pg-item a, .pagination .pg-item .current, .pagination .pg-dots, .pagination .pg-item .disabled{padding: 5px 8px;font-size: 12px;line-height:12px;border-radius:2px;}
}