前几天在制作一款博客主题时无意中发现原来wordpress默认主题的分页导航改版了,而且新版的导航布局样式美观大方而且还支持不同设备可谓是功能强大又上档次,于是果断把代码拷贝出来留了一个备份,今天就在晨星博客分享给大家。

内置分页php代码


<?php
    the_posts_pagination( array(
       ‘prev_text’ => __( ‘上一页’, ‘chenxingweb’ ),
    ‘next_text’ => __( ‘下一页’, ‘chenxingweb’ ),
        ‘before_page_number’ => ‘<span class=“meta-nav screen-reader-text”>第 </span>’,
        ‘after_page_number’ => ‘<span class=“meta-nav screen-reader-text”> 页</span>’,
    ) );
?>

把代码放到列表主循环下面即原来放置分页导航的位置即可,由于该分页代码是在wordpress4.1版本集成的,所以4.1之前的版本不能使用!

内置分页css样式代码


/** 等于或大于550px正常PC模式 **/
@media screen and (min-width:550px){
.pagination{float:rightright;}
.pagination a,.pagination a:visited{float:left;background:#fff;margin:0 5px 10px 0;padding:8px 11px;line-height:100%;border:1px solid #ebebeb;border-radius:2px;}
.pagination .current,.pagination .dots{background:#fff;float:left;margin:0 5px 0 0;padding:8px 11px;line-height:100%;border:1px solid #ebebeb;border-radius:2px;}
.pagination span.pages{}
.pagination span.current,.pagination a:hover{background:#0088cc;color:#fff;border:1px solid #0088cc;}
.screen-reader-text,.pages{display:none;}
}
/** 等于或小于550px用于移动设备 **/
@media screen and (max-width:550px){
.pagination{background:#fff;border:1px solid #ebebeb;border-radius:2px;}
.pagination .nav-links{min-height:30px;position:relative;text-align:center;}
.pagination .current .screen-reader-text{position:static !important;}
.screen-reader-text{height:1px;overflow:hidden;position:absolute !important;}
.page-numbers{display:none;line-height:25px;padding:5px;}
.pagination .page-numbers.current{text-transform:uppercase;}
.pagination .current{display:inline–block;}
.pagination .prev,.pagination .next{background:#0088cc;color:#fff;display:inline–block;height:29px;line-height:29px;overflow:hidden;padding:2px 8px;position:absolute;border:1px solid #0088cc;}
.pagination .next{border-radius:0 2px 2px 0}
.pagination .prev{border-radius:2px 0 0 2px;}
.pagination .prev a,.pagination .next a{color:#fff;line-height:20px;padding:0;display:inline–block;}
.pagination .prev{left:0;}
.pagination .prev:before{left:-1px;}
.pagination .next{rightright:0;}
.pagination .next:before{rightright:-1px;}
}

上面的样式包含了pc端和移动端代码,如果您只是用与pc端的模板上可以把《去掉媒体查询判断@media screen and》删除即可!如果要修改分类导航的颜色只需替换css代码中#0088cc颜色编码即可,默认为蓝色。