需求

自從機緣巧合的開始翻譯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）：什么是框架？

總結

以上是生活随笔為你收集整理的在WordPress中添加简书风格的连载目录和文章导航...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。