调用 WordPress 4.1 内置分页式导航

发布时间:2020-05-07

wordpress 4.1发布已有段时日,新增加了许多功能,其中内置的分页式导航非常实用,其它第三方的分页代码及插件,已不需要。

调用 WordPress 4.1 内置分页式导航 1wordpress 4.1 内置分页式导航” />

其实在之前版本的默认主题中已内置了分页式导航,只是未集成到程序中,这次wordpress 4.1版正式集成到程序中作为默认函数使用。

分页式导航调用函数:

  1. <?php
  2.     the_posts_pagination( array(
  3.         ‘prev_text’          =>上页,
  4.         ‘next_text’          =>下页,
  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. ?>

注:不支持wordpress 4.1之前版本

添加到主题index、archive等模板适当的位置即可,再配以相应的样式,可实现响应式转换,如图:

调用 WordPress 4.1 内置分页式导航 2wordpress 4.1 内置分页式导航” />

内置分页式导航效果图
上是正常样式,下是手机移动设备上的样式。

 

展开样式代码展开

  1. /** 等于或大于550px正常模式 **/
  2. @media screen and (min-width550px) {
  3.     .pagination {
  4.         float: right;
  5.     }
  6.     .pagination a, .pagination a:visited {
  7.         floatleft;
  8.         background#fff;
  9.         margin: 0 5px 10px 0;
  10.         padding8px 11px;
  11.         line-height: 100%;
  12.         border1px solid #ebebeb;
  13.         border-radius: 2px;
  14.     }
  15.     .pagination .current, .pagination .dots {
  16.         background#fff;
  17.         floatleft;
  18.         margin: 0 5px 0 0;
  19.         padding8px 11px;
  20.         line-height: 100%;
  21.         border1px solid #ebebeb;
  22.         border-radius: 2px;
  23.     }
  24.     .pagination span.pages {}
  25.     .pagination span.current, .pagination a:hover {
  26.         background#0088cc;
  27.         color#fff;
  28.         border1px solid #0088cc;
  29.     }
  30.     .screen-reader-text, .pages  {
  31.         displaynone;
  32.     }
  33. }
  34. /** 等于或小于550px用于移动设备 **/
  35. @media screen and (max-width550px) {
  36.     .pagination {
  37.         background#fff;
  38.         border1px solid #ebebeb;
  39.         border-radius: 2px;
  40.     }
  41.     .pagination .nav-links {
  42.         min-height30px;
  43.         positionrelative;
  44.         text-aligncenter;
  45.     }
  46.     .pagination .current .screen-reader-text {
  47.         positionstatic !important;
  48.     }
  49.     .screen-reader-text {
  50.         height1px;
  51.         overflowhidden;
  52.         positionabsolute !important;
  53.     }
  54.     .page-numbers {
  55.         displaynone;
  56.         line-height25px;
  57.         padding5px;
  58.     }
  59.     .pagination .page-numbers.current {
  60.         text-transformuppercase;
  61.     }
  62.     .pagination .current {
  63.         displayinlineblock;
  64.     }
  65.     .pagination .prev,
  66.     .pagination .next {
  67.         background#0088cc;
  68.         color#fff;
  69.         displayinlineblock;
  70.         height29px;
  71.         line-height29px;
  72.         overflowhidden;
  73.         padding2px 8px;
  74.         positionabsolute;
  75.         border1px solid #0088cc;
  76.     }
  77.     .pagination .next {
  78.         border-radius: 0 2px 2px 0
  79.     }
  80.     .pagination .prev {
  81.         border-radius: 2px 0 0 2px;
  82.     }
  83.     .pagination .prev a,
  84.     .pagination .next a{
  85.         color#fff;
  86.         line-height20px;
  87.         padding: 0;
  88.         displayinlineblock;
  89.     }
  90.     .pagination .prev {
  91.         left: 0;
  92.     }
  93.     .pagination .prev:before {
  94.         left: –1px;
  95.     }
  96.     .pagination .next {
  97.         right: 0;
  98.     }
  99.     .pagination .next:before {
  100.         right: –1px;
  101.     }
  102. }

如果你的主题非响应式只添加正常模式的样式就可以(去掉媒体查询判断@media screen and ),具体效果看本站首页底部分页导航。

大熊wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。大熊wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18324743309,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”互联网推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体互联网推广吧,我们和你一起,开创互联网大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。