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 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
angularJS深拷贝详解
Mar 23 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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/11/25 PHP
PHP strtotime函数详解
2009/12/18 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
python实现ID3决策树算法
2018/08/29 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
个人找工作自荐信格式
2013/09/21 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
2014年秘书工作总结
2014/11/25 职场文书
公司放假通知范文
2015/04/14 职场文书
作息时间调整通知
2015/04/22 职场文书
硕士论文致谢范文
2015/05/14 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏