导读:建站技术建站技术前几天在制作一款博客主题时无意中发现原来wordpress默认主题的分页导航改版了，而且新版的导航布局样式美观大方而且还支持不同设备可谓是功能强大又上档次，于是技术支持网站网站服务器搭建。
前几天在制作一款博客主题时无意中发现原来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;pdede后台模板adding: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;}
关键词标签: 建站 分页 漂亮
声明: 本文由我的SEOUC技术文章主页发布于:2023-07-23 ，文章漂亮的WordPress内置分页导航代码,建站技术主要讲述分页,漂亮,建站网站建设源码以及服务器配置搭建相关技术文章。转载请保留链接: https://www.seouc.com/article/web_35184.html
