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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
Vue.js表单控件实践
Oct 27 Javascript
Vue生命周期示例详解
Apr 12 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
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的urlencode()URL编码函数浅析
2011/08/09 PHP
Admin generator, filters and I18n
2011/10/06 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
php实现源代码加密的方法
2015/07/11 PHP
PHP目录操作实例总结
2016/09/27 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python下Fabric的简单部署方法
2015/07/14 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
python按比例随机切分数据的实现
2019/07/11 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
小学优秀班干部事迹材料
2014/05/25 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
售房协议书范本2014
2014/10/23 职场文书
美丽人生观后感
2015/06/03 职场文书
雨中的树观后感
2015/06/03 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
创业计划书之服装
2019/10/07 职场文书
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
Django框架中表单的用法
2022/06/10 Python