漂亮的WordPress内置分页导航代码

小牛爱奋斗 | 2016/3/11 16:38

评论 1 条

主题修改分页导航

文章目录

php代码
css样式代码

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

pagination

新版分页导航上面的是电脑版显示状态，下面是移动端显示状态，既然官方默认的都这么漂亮使用那以后就可以丢掉以前自己美化的样式了！对于wp的这个改变还是非常满意的！

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;}
}