WordPress 网站调用内置分页式导航的方法。WordPress 新版本发布已有段时日，新增加了许多功能，其中内置的分页式导航非常实用，其它第三方的分页代码及插件，已不需要。
1、其实在之前版本的默认主题中已内置了分页式导航，只是未集成到程序中，这次WordPress 4.1版正式集成到程序中作为默认函数使用。
2、分页式导航调用函数：
- <?php the_posts_pagination( array( ‘prev_text’ =>上页, ‘next_text’ =>下页, ‘before_page_number’ => ‘<span class=“meta-nav screen-reader-text”>第 </span>’, ‘after_page_number’ => ‘<span class=“meta-nav screen-reader-text”> 页</span>’, ) );?>
注：不支持WordPress 4.1之前版本
2、添加到主题index、archive等模板适当的位置即可，再配以相应的样式，可实现响应式转换，如图：
3、展开样式代码。
- /** 等于或大于550px正常模式 **/@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; }}
4、如果你的主题非响应式只添加正常模式的样式就可以（去掉媒体查询判断@media screen and ）
1、阿里云产品最新优惠领取地址：立即前往。
2、阿里云服务器优惠券领取地址优惠购买地址：点击前往。
3、阿里云最新优惠活动地址汇总，共16个，地址：点击前往。
4、同配置云产品腾讯云相对便宜，先点此一键领取2860元无门槛满减券（老用户换QQ登陆，同一实名享新人特价），再点此进入腾讯云活动页面。12年老码农建议：服务器升级、复购、续费贵，数据迁移也麻烦，建议用好新人优惠资格，买多年，配置一次性到位，后期省事又省钱。
发表回复