现在的位置: 首页 > WP 专题 > 正文
WP 专题

如何调用 WordPress 4.1 分页式导航函数

2016年06月20日 ⁄ WP 专题 ⁄ 共 2973字 ⁄ 字号 小 中 大 ⁄ 暂无评论 ⁄ 阅读 613 次

在wordpress 4.1之前版本的默认主题中已内置了分页式导航，但并未集成到程序中。从4.1版本开始，官方将分页式导航函数正式集成到程序中，可以作为默认函数使用了。有了这个wordpress分页式导航函数，你就可以对其他第三方的分页代码和wordpress插件说再见了。

分页式导航调用函数：

  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之前的版本。

函数调用方法：将上面的分页式导航函数添加到wordpress主题的index、archive等模板文件的合适位置即可，如果再配以相应的样式，即可实现响应式转换，效果如下图所示：

调用 WordPress 4.1 分页式导航函数

具体的分页式导航样式代码：

  1. /** 等于或大于550px正常模式 **/
  2. @media screen and (min-width: 550px) {
  3.     .pagination {
  4.         float: rightright;
  5.     }
  6.     .pagination a, .pagination a:visited {
  7.         float: left;
  8.         background: #fff;
  9.         margin: 0 5px 10px 0;
  10.         padding: 8px 11px;
  11.         line-height: 100%;
  12.         border: 1px solid #ebebeb;
  13.         border-radius: 2px;
  14.     }
  15.     .pagination .current, .pagination .dots {
  16.         background: #fff;
  17.         float: left;
  18.         margin: 0 5px 0 0;
  19.         padding: 8px 11px;
  20.         line-height: 100%;
  21.         border: 1px 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.         border: 1px solid #0088cc;
  29.     }
  30.     .screen-reader-text, .pages  {
  31.         display: none;
  32.     }
  33. }
  34. /** 等于或小于550px用于移动设备 **/
  35. @media screen and (max-width: 550px) {
  36.     .pagination {
  37.         background: #fff;
  38.         border: 1px solid #ebebeb;
  39.         border-radius: 2px;
  40.     }
  41.     .pagination .nav-links {
  42.         min-height: 30px;
  43.         position: relative;
  44.         text-align: center;
  45.     }
  46.     .pagination .current .screen-reader-text {
  47.         position: static !important;
  48.     }
  49.     .screen-reader-text {
  50.         height: 1px;
  51.         overflow: hidden;
  52.         position: absolute !important;
  53.     }
  54.     .page-numbers {
  55.         display: none;
  56.         line-height: 25px;
  57.         padding: 5px;
  58.     }
  59.     .pagination .page-numbers.current {
  60.         text-transform: uppercase;
  61.     }
  62.     .pagination .current {
  63.         display: inline-block;
  64.     }
  65.     .pagination .prev,
  66.     .pagination .next {
  67.         background: #0088cc;
  68.         color: #fff;
  69.         display: inline-block;
  70.         height: 29px;
  71.         line-height: 29px;
  72.         overflow: hidden;
  73.         padding: 2px 8px;
  74.         position: absolute;
  75.         border: 1px 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-height: 20px;
  87.         padding: 0;
  88.         display: inline-block;
  89.     }
  90.     .pagination .prev {
  91.         left: 0;
  92.     }
  93.     .pagination .prev:before {
  94.         left: -1px;
  95.     }
  96.     .pagination .next {
  97.         rightright: 0;
  98.     }
  99.     .pagination .next:before {
  100.         rightright: -1px;
  101.     }
  102. }

注：本文介绍的wordpress技巧对于非响应式题，只需添加正常模式的样式代码即可（去掉媒体查询判断@media screen and ）。

原文地址：http://zmingcx.com/wordpress-4-1-tabbed-navigation.html

返回
【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. 自动为wordpress文章图片添加alt属性和title属性
  2. 如何为WordPress导航菜单、标签、出站等链接添加nof
  3. 如何设置WordPress的RSS feed更新频率
  4. 正确屏蔽 WordPress 版本号的代码
  5. WordPress插件WP First Letter Avatar代码版
  6. 让WordPress文章内链接在新窗口打开的方法
  7. 如何让wrodpress在分类列表页显示其下子分类文章列表
  8. 如何下载WordPress官网插件的旧版本
百度云网盘资源搜索技巧
展喜犒师原文及翻译
图标字体的使用方法
曾子易箦原文及翻译

作者:

给我留言

留言无头像?


插入图片

返回首页

Copyright © 2014-2018 骤雨打新荷  保留所有权利.   Theme by Robin

版权声明  | 谷歌地图  | 

×