在WordPress中添加简书风格的连载目录和文章导航

  1. 云栖社区>
  2. 博客>
  3. 正文

在WordPress中添加简书风格的连载目录和文章导航

丘壑 2019-03-06 11:49:43 浏览535
展开阅读全文

需求

自从机缘巧合的开始翻译Gensis的系列教程,越来越沉迷于研究这款WordPress主题框架了,一边翻译一边学习一边也在自己的丘壑博客上实验。

最近又有了一个需求,想在该系列的每一篇上都加上一个目录列表和前后文章的导航链接,方便读者查找阅览。效果就像简书上连载小说的这个东西:

思路

总体上需要实现的是两部分内容,一个前后文章的链接按钮,一个目录的弹出框。

前后文章地址链接用WordPress自带的函数 previous_post_link() 和 next_post_link() 就可以很方便的获取到。具体针对我的需求,我只想在符合特定条件的情况下才显示前后页链接,所以还需要做一些条件判断,具体后面再说。

目录弹出框其实就是个很常见的modal(模态)框:

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

我仔细看了下Genesis Sample的demo示例中貌似是没有自带这个效果的,所以这个需要自己实现一下。方法挺多,用纯CSS也可以,用jQuery也可以,用Vue.js也可以。纯CSS太难为我了,CSS对我来说都是黑魔法,想想就是一件很痛苦的事,放弃。用Vue.js也是可以的,但本次还是决定使用WordPress自带的jQuery。

要实现模态效果需要引入一个jQuery的模态插件, remodal ,这个插件用法挺简单的,基本上是开箱即用,也自带了CSS主题,还可以做各种自定义配置,用来实现我的需求已经很够用,够用就行。虽然这个插件的作者已经弃坑不再更新了,但功能实现还是比较稳定的,也是有用户群体的,比如这个插件也在用,Genesis login modal box

点开的弹出框的里面要出现该系列的所有文章链接。这个怎么获取呢?最笨的办法就是直接写死。。。但那样也太傻了。一开始走了点弯路,什么异步获取,什么写WP_Query。后来发现了一个最简单办法:WordPress的模板PHP文件里可以直接把shortcode的内容显示出来,有一个函数do_shortcode() ,这就太方便了,把之前在另一篇文章里用到的插件 display posts 的shortcode 直接拿过来就行了。下面就是开始代码部分了。

第一步 前后文章的链接

Genesis框架里面其实已经包含了这个功能,要在文章中自动插入前后文章的链接,只需要在子主题的function.php中加入一句:

这是一个快捷用法,Genesi会直接在文章后面显示出来前后链接,如下

或者还有一种更灵活的方法,可以根据需要调整要插入的位置,当然链接文字也是可以改的:

这确实很方便,默认会在所有文章后面都出现前后链接。但这不符合我的需求,我的需求是:

  • 只需要在添加了Genesis Explained这个tag的文章下面才显示
  • 在这两个链接中间插入一个“目录”的按钮
  • 只在同系列文章之间导航,不显示其他无关的文章
  • 如果文章是该系列的第一篇,那么就显示“已是最前
  • 如果文章是该系列的最后一篇,那么就显示“已是最后
  • 点击目录弹出该所有系列所有文章链接

我们可以打开 genesis/lib/structure/post.php 文件看看里面的 genesis_adjacent_entry_nav() 是怎么实现的。可以发现,其实它就是自动帮你把WorPress的函数 get_previous_post_link 和 get_next_post_link做了一层封装。那这样就好办了,照着它模仿一下,改成自己的函数,如下

genesis_exlained_post_nav

代码里面已经加入了注释,主要用的就是 get_previous_post_link 和 get_next_post_link, 这两个函数和 不带get的那两个用法是一样的,区别是previous_post_link 和 next_post_link只自动打印出来,这样就不好做条件判断了。TRUE可以让前后文章的链接限定在同一个目录中。

这样就已经基本实现了前面几个需求了,虽然有点丑,但是先不管它,效果如下:

第二步 添加模态对话框

这一步很简单,直接把remodal的JavaScript文件和CSS文件下载下来,扔进子主题的js文件夹里,注册到WordPress里就行了,都不需要在写额外的js文件来初始化或者运行这个插件。当然如果在更复杂的场景里,比如登录框或其他需要一些异步回调的内容,那就需要另写一个js文件来使用了。

现在remodal.js就准备好了,现在还需要一个div元素给remodal来调用,并在这个div原理里面放翻入需要呈现的内容。这里的shortcode内容也是之前的文章里写过的,直接拿过来用就ok了。具体如下:

对话框和内容都有了,怎么让remodal可以把这个框给弹出来呢?remodal的文档里提供了两种方式,一种是在a标签中使用 #,还有一种是使用 data-remodal-target


<a href="#modal">Call the modal with data-remodal-id="modal"</a>


<a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>

所以,把刚才预留的目录链接<a>目录</a> 修改一下 ,再把这一步的div内容填入进去(这个div部份理论上可以网页的任何位置),修改后如下:

现在效果就基本实现了

第三步 CSS

CSS一直是让我觉得很纠结的一个东西,除非裸奔否则是绕不开这个令人头疼的玩意的。最后还是用了一个土法炼钢的办法,直接在gutenberg 里插了一个三栏框,然后用预览模式抠出来这块的html,直接怼进到php文件里去了,是个很脏的办法。。。。不过适应性很好。。

THE END

就这么着吧。。。。还有4、5篇的没有翻呢。。。不要太监了就行吧

实际的最终效果欢迎从第一篇开始参观浏览:Genesis框架从入门到精通(1):什么是框架?

网友评论

登录后评论
0/500
评论
丘壑
+ 关注