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

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

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

在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 数据库中找到受密码保护的文章
  2. 在 wordpress 后台为所有文章或页面中的贴子添加一个“
  3. wordpress主题更新style.css样式表文件后不生效的解决
  4. 如何在WordPress文章末尾自动添加作者简介
  5. 如何更改 WordPress 默认发件人及邮箱地址
  6. 免插件为wordpress配置SMTP服务
  7. 如何解决wordpress密码设置链接失效的问题
  8. 为 wordpress 后台添加“全部设置”选项
祭鳄鱼文原文及翻译
图标字体的制作方法
舍身斗新冠，视死忽如归！
曾子易箦原文及翻译

作者:

给我留言

留言无头像?


插入图片

返回首页

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

版权声明  | 谷歌地图  | 

×