pannel添加的子窗体很大_在WordPress中添加简书风格的连载目录和文章导航

转自丘壑博客，转载注明出处

需求
自从机缘巧合的开始翻译Gensis的系列教程，越来越沉迷于研究这款WordPress主题框架了，一边翻译一边学习一边也在自己的丘壑博客上实验。
最近又有了一个需求，想在该系列的每一篇上都加上一个目录列表和前后文章的导航链接，方便读者查找阅览。效果就像简书上连载小说的这个东西：

思路
总体上需要实现的是两部分内容，一个前后文章的链接按钮，一个目录的弹出框。
前后文章地址链接用WordPress自带的函数a href="https://codex.wordpress.org/Function_Reference/previous_post_link"> previous_post_link() 和 next_post_link() 就可以很方便的获取到。具体针对我的需求，我只想在符合特定条件的情况下才显示前后页链接，所以还需要做一些条件判断，具体后面再说。
目录弹出框其实就是个很常见的modal(模态)框：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
我仔细看了下Genesis Sample的demo示例中貌似是没有自带这个效果的，所以这个需要自己实现一下。方法挺多，用纯CSS也可以，用jQuery也可以，用Vue.js也可以。纯CSS太难为我了，CSS对我来说都是黑魔法，想想就是一件很痛苦的事，放弃。用Vue.js也是可以的，但本次还是决定使用WordPress自带的jQuery。
要实现模态效果需要引入一个jQuery的模态插件， ="http://vodkabears.github.io/remodal/">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做了一层封装。那这样就好办了，照着它模仿一下，改成自己的函数，如下

代码里面已经加入了注释，主要用的就是 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）：什么是框架？ - 丘壑博客​bestscreenshot.com