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;}
}
第二种
效果图:@爱找主题
依然是运用到 wordpress 的