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

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

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

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

 php代码

  1. <?php
  2.     the_posts_pagination( array(
  3.        ‘prev_text’ => __( ‘上一页’, ‘chenxingweb’ ),
  4.     ‘next_text’ => __( ‘下一页’, ‘chenxingweb’ ),
  5.         ‘before_page_number’ => ‘<span class=“meta-nav screen-reader-text”>第 </span>’,
  6.         ‘after_page_number’ => ‘<span class=“meta-nav screen-reader-text”> 页</span>’,
  7.     ) );
  8. ?>

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

 css样式代码

  1. /** 等于或大于550px正常PC模式 **/
  2. @media screen and (min-width:550px){
  3. .pagination{float:rightright;}
  4. .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;}
  5. .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;}
  6. .pagination span.pages{}
  7. .pagination span.current,.pagination a:hover{background:#0088cc;color:#fff;border:1px solid #0088cc;}
  8. .screen-reader-text,.pages{display:none;}
  9. }
  10. /** 等于或小于550px用于移动设备 **/
  11. @media screen and (max-width:550px){
  12. .pagination{background:#fff;border:1px solid #ebebeb;border-radius:2px;}
  13. .pagination .nav-links{min-height:30px;position:relative;text-align:center;}
  14. .pagination .current .screen-reader-text{position:static !important;}
  15. .screen-reader-text{height:1px;overflow:hidden;position:absolute !important;}
  16. .page-numbers{display:none;line-height:25px;padding:5px;}
  17. .pagination .page-numbers.current{text-transform:uppercase;}
  18. .pagination .current{display:inlineblock;}
  19. .pagination .prev,.pagination .next{background:#0088cc;color:#fff;display:inlineblock;height:29px;line-height:29px;overflow:hidden;padding:2px 8px;position:absolute;border:1px solid #0088cc;}
  20. .pagination .next{border-radius:0 2px 2px 0}
  21. .pagination .prev{border-radius:2px 0 0 2px;}
  22. .pagination .prev a,.pagination .next a{color:#fff;line-height:20px;padding:0;display:inlineblock;}
  23. .pagination .prev{left:0;}
  24. .pagination .prev:before{left:-1px;}
  25. .pagination .next{rightright:0;}
  26. .pagination .next:before{rightright:-1px;}
  27. }

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 WP技术 漂亮的WordPress内置分页导航代码 https://www.mbxzb.com/blog/file/wordpress/24429.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务