首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在WordPress中添加简书风格的连载目录和文章导航

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

作者头像
丘壑
发布2019-03-13 10:11:08
1.9K0
发布2019-03-13 10:11:08
举报
文章被收录于专栏:一丘一壑一丘一壑

需求

自从机缘巧合的开始翻译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_linkget_next_post_link, 这两个函数和 不带get的那两个用法是一样的,区别是previous_post_linknext_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):什么是框架?

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-03-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求
  • 思路
  • 第一步 前后文章的链接
  • 第二步 添加模态对话框
  • 第三步 CSS
  • THE END
相关产品与服务
网站建设
网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档