WordPress 单页面上一页下一页的实现方法【附代码】


Posted in Javascript onMarch 10, 2016

WordPress的文章页页有实现上一篇下一篇的功能函数,不过我们想在单页page.php里面实现上一页下一页的功能,previous_post_link()和next_post_link() 函数还不能完全满足我的需要,所以就自己写函数实现。
页面有分级功能,需求是按 menu order 排序的子级页面之间有上一篇、下一篇链接,如:

Themes(父级页面)
---- zBench(子级页面1)
---- zBorder(子级页面2)
---- zSofa(子级页面3)

如果当前页面是 zBorder,那么就要上一篇链接是 zBench 的,下一篇链接是 zSofa 的。

把下面函数代码放入 functions.php(注:函数随手写的,可能不够精简)

/**
* get subpage previous/next page link by zwwooooo
*/
function subpage_nav_link($prevText='', $nextText='') {
global $post;
if ( !$post->post_parent ) return null; //如果不是子页面返回Null
$args = array(
'sort_order' => 'ASC',
'sort_column' => 'menu_order',
'child_of' => $post->post_parent,
'post_type' => 'page'
);
$pages = get_pages($args);
$num = count($pages);
$i = 0;
$index = -1;
foreach ($pages as $page) {
if ($page->ID == $post->ID) {
$index = $i;
break;
}
++$i;
}
if ($i == 0) {
$prev = '';
$next = $pages[$index+1];
} elseif ($i == $num-1) {
$prev = $pages[$index-1];
$next = '';
} else {
$prev = $pages[$index-1];
$next = $pages[$index+1];
}
if ($prev) {
if ($prevText) {
if ( substr_count($prevText, '%title') > 0 ) {
$explode = explode('%title', $prevText);
$prevText = $explode[0] . get_the_title($prev->ID) . $explode[1];
}
} else {
$prevText = get_the_title($prev->ID);
}
$prevlink = '<a class="previous-page-link" href="' . get_page_link($prev->ID). '">' . $prevText . '</a>';
}
if ($next) {
if ($nextText) {
if ( substr_count($nextText, '%title') > 0 ) {
$explode = explode('%title', $nextText);
$nextText = $explode[0] . get_the_title($next->ID) . $explode[1];
}
} else {
$nextText = get_the_title($next->ID);
}
$nextlink = '<a class="next-page-link" href="' . get_page_link($next->ID). '">' . $nextText . '</a>';
}
return array($prevlink, $nextlink);
}

[函数]

subpage_nav_link($prevText, $nextText)

[参数]

$prevText: 为前一篇文章链接文字,为空时默认是页面标题
$nextText: 为下一篇文章链接文字,为空时默认是页面标题;

例如:一般的主题是在 page.php 的 loop 循环里面(不知道就在 the_content(); 下面吧)插入调用代码

<?php

if ( function_exists('subpage_nav_link') ) {

if ( $subpage_nav_link = subpage_nav_link() ) {

echo $subpage_nav_link[0]; //上一篇(页面)链接

echo $subpage_nav_link[1]; //下一篇(页面)链接

}

}

?>

注:可以用 if (!$subpage_nav_link[0]) 来判断有没有上一篇,同样 if (!$subpage_nav_link[1]) 来判断有没有下一篇。

PS: $prevText 和 $nextText 还支持字符组合,如 subpage_nav_link('oo %title xx', '') 这样的话,前一篇文章链接文章会变成“oo 页面名 xx”

另一篇实用文章:实现wordpress文章页调用同分类上/下一篇文章

wordpress提供的显示上一篇、下一篇文章的函数代码是按照发布顺序调用的,前几天做的wordpress小说模板,由于使用每个分类添加一部小说《博客吧首款wordpress小说网站主题模板wpnovel》,如果使用这样的上下篇文章调用顺序显示不合适,让文章页显示同分类下的上一篇、下一篇文章才是正道,wordpress是强大的,总能满足用户的想法,通过搜索找到了相关的函数代码。

默认直接调用的代码

<?php previous_post_link('上一篇: %link') ?>
<?php next_post_link('下一篇: %link') ?>

当文章处于首篇或末篇时,会显示空白,但可以通过增加判断还填补空白

<?php if (get_previous_post()) { previous_post_link('上一篇: %link');} else {echo "已是最后文章";} ?>
<?php if (get_next_post()) { next_post_link('下一篇: %link');} else {echo "已是最新文章";} ?>

经过测试虽然显示同分类下的文章,但首篇文章和末尾的文章会不显示对应的提示信息“已是最后文章”和“已是最后文章”。只要在get_previous_post()函数中指定一下文章所属分类ID便能使代码完全有效。

下面是完整的代码:

<?php

$categories = get_the_category();

$categoryIDS = array();

foreach ($categories as $category) {

array_push($categoryIDS, $category->term_id);

}

$categoryIDS = implode(",", $categoryIDS);

?>

<?php if (get_previous_post($categoryIDS)) { previous_post_link('上一篇: %link','%title',true);} else { echo "已是最后文章";} ?>

<?php if (get_next_post($categoryIDS)) { next_post_link('上一篇: %link','%title',true);} else { echo "已是最新文章";} ?>

打开主题目录下的文章页single.php,在要显示的位置添加代码,保存文件即可。

以上这篇WordPress 单页面上一页下一页的实现方法【附代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
js实现简单页面全屏
Sep 17 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 #Javascript
node.js实现爬虫教程
Aug 25 #Javascript
ES6中如何使用Set和WeakSet
Mar 10 #Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 #Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 #Javascript
基于javascript制作微信聊天面板
Aug 09 #Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 #Javascript
You might like
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
php创建多级目录的方法
2015/03/24 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
js 函数性能比较方法
2020/08/24 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python字符串中的单双引
2017/02/16 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
德国团购网站:Groupon德国
2018/03/13 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
大学教师年终总结的自我评价
2013/10/29 职场文书
森林防火标语
2014/06/23 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
高一英语教学反思
2016/03/03 职场文书
导游词之杭州西湖
2019/09/19 职场文书