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

zhangwei

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

新版分页导航上面的是电脑版显示状态，下面是移动端显示状态，既然官方默认的都这么漂亮使用那以后就可以丢掉以前自己美化的样式了！对于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;}
• }
  

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