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 相关文章推荐
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
HTML上传控件取消选择
Mar 06 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
vue+element实现表单校验功能
May 20 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
jQuery 1.0.2
2006/10/11 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
详解vue slot插槽的使用方法
2017/06/13 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
母校寄语大全
2014/04/10 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
春季防火方案
2014/05/10 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
售房协议书
2014/08/19 职场文书
党员评议思想汇报
2014/10/08 职场文书
悬空寺导游词
2015/02/05 职场文书
2015双创工作总结
2015/07/24 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Node实现搜索框进行模糊查询
2021/06/28 Javascript