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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
原生js的数组除重复简单实例
May 24 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
JavaScript中this的全面解析及常见实例
May 14 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作的文本留言本的例子(六)
2006/10/09 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
js new Date()实例测试
2019/10/31 Javascript
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
大学生就业自我鉴定
2013/10/26 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
校园安全检查制度
2014/02/03 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书