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 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
js实现随机抽奖
Mar 19 Javascript
原生js实现移动小球(碰撞检测)
Dec 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验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
一个原生的用户等级的进度条
2010/07/03 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
统计员岗位职责
2013/11/14 职场文书
银行介绍信范文
2014/01/10 职场文书
学年自我鉴定
2014/01/16 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
青年教师听课心得体会
2016/01/15 职场文书