调用 WordPress 4.1 内置分页式导航

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

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

分页式导航调用函数:

  1. <?php
  2.     the_posts_pagination( (
  3.         \’prev_text\’          =>上页,
  4.         \’next_text\’          =>下页,
  5.         \’before_page_number\’ => \'<span =>第 </span>\’,
  6.         \’after_page_number\’ => \'<span => 页</span>\’,
  7.     ) );
  8. ?>

注:不支持WordPress 4.1之前版本

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

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

展开样式代码

  1. @media  and (: ) {
  2.     .pagination {
  3.         : ;
  4.     }
  5.     .pagination a, .pagination a:visited {
  6.         : ;
  7.         : ;
  8.         : 0   0;
  9.         :  ;
  10.         : 100%;
  11.         :   ;
  12.         -radius: ;
  13.     }
  14.     .pagination .current, .pagination .dots {
  15.         : ;
  16.         : ;
  17.         : 0  0 0;
  18.         :  ;
  19.         : 100%;
  20.         :   ;
  21.         -radius: ;
  22.     }
  23.     .pagination span.pages {}
  24.     .pagination span.current, .pagination a:hover {
  25.         : ;
  26.         : ;
  27.         :   ;
  28.     }
  29.     .-reader-text, .pages  {
  30.         : ;
  31.     }
  32. }
  33. @media  and (: ) {
  34.     .pagination {
  35.         : ;
  36.         :   ;
  37.         -radius: ;
  38.     }
  39.     .pagination .nav-links {
  40.         : ;
  41.         : ;
  42.         : ;
  43.     }
  44.     .pagination .current .-reader-text {
  45.         :  !important;
  46.     }
  47.     .-reader-text {
  48.         : ;
  49.         : ;
  50.         :  !important;
  51.     }
  52.     .-numbers {
  53.         : ;
  54.         : ;
  55.         : ;
  56.     }
  57.     .pagination .-numbers.current {
  58.         : ;
  59.     }
  60.     .pagination .current {
  61.         : -;
  62.     }
  63.     .pagination .prev,
  64.     .pagination .next {
  65.         : ;
  66.         : ;
  67.         : -;
  68.         : ;
  69.         : ;
  70.         : ;
  71.         :  ;
  72.         : ;
  73.         :   ;
  74.     }
  75.     .pagination .next {
  76.         -radius: 0   0
  77.     }
  78.     .pagination .prev {
  79.         -radius:  0 0 ;
  80.     }
  81.     .pagination .prev a,
  82.     .pagination .next a{
  83.         : ;
  84.         : ;
  85.         : 0;
  86.         : -;
  87.     }
  88.     .pagination .prev {
  89.         : 0;
  90.     }
  91.     .pagination .prev:before {
  92.         : -;
  93.     }
  94.     .pagination .next {
  95.         : 0;
  96.     }
  97.     .pagination .next:before {
  98.         : -;
  99.     }
  100. }

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

    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞0 分享
    评论 抢沙发

    请登录后发表评论

      暂无评论内容