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 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
Python3中的真除和Floor除法用法分析
2016/03/16 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python通过len函数返回对象长度
2020/10/22 Python
Python用户自定义异常的实现
2020/12/25 Python
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
外企C语言笔试题
2013/11/10 面试题
捐款倡议书
2014/04/14 职场文书
质量月活动总结
2014/08/26 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
十月围城观后感
2015/06/08 职场文书
结婚主持人致辞
2015/07/28 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
Ajax常用封装库——Axios的使用
2021/05/08 Javascript