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入门基础 document.write输出
Feb 22 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
canvas的神奇用法
Feb 03 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 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得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
Javascript的闭包详解
2014/12/26 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
利用python发送和接收邮件
2016/09/27 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
世界地球日活动总结
2015/02/09 职场文书
二十年同学聚会感言
2015/07/30 职场文书
同学聚会祝酒词
2015/08/10 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL