需求

自從機(jī)緣巧合的開始翻譯Gensis的系列教程，越來越沉迷于研究這款WordPress主題框架了，一邊翻譯一邊學(xué)習(xí)一邊也在自己的丘壑博客上實(shí)驗(yàn)。

最近又有了一個(gè)需求，想在該系列的每一篇上都加上一個(gè)目錄列表和前后文章的導(dǎo)航鏈接，方便讀者查找閱覽。效果就像簡書上連載小說的這個(gè)東西：

思路

總體上需要實(shí)現(xiàn)的是兩部分內(nèi)容，一個(gè)前后文章的鏈接按鈕，一個(gè)目錄的彈出框。

前后文章地址鏈接用WordPress自帶的函數(shù)?previous_post_link()?和?next_post_link()?就可以很方便的獲取到。具體針對(duì)我的需求，我只想在符合特定條件的情況下才顯示前后頁鏈接，所以還需要做一些條件判斷，具體后面再說。

目錄彈出框其實(shí)就是個(gè)很常見的modal(模態(tài))框：

模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個(gè)單獨(dú)的源的內(nèi)容，可以在不離開父窗體的情況下有一些互動(dòng)。子窗體可提供信息、交互等。

我仔細(xì)看了下Genesis Sample的demo示例中貌似是沒有自帶這個(gè)效果的，所以這個(gè)需要自己實(shí)現(xiàn)一下。方法挺多，用純CSS也可以，用jQuery也可以，用Vue.js也可以。純CSS太難為我了，CSS對(duì)我來說都是黑魔法，想想就是一件很痛苦的事，放棄。用Vue.js也是可以的，但本次還是決定使用WordPress自帶的jQuery。

要實(shí)現(xiàn)模態(tài)效果需要引入一個(gè)jQuery的模態(tài)插件，?remodal?，這個(gè)插件用法挺簡單的，基本上是開箱即用，也自帶了CSS主題，還可以做各種自定義配置，用來實(shí)現(xiàn)我的需求已經(jīng)很夠用，夠用就行。雖然這個(gè)插件的作者已經(jīng)棄坑不再更新了，但功能實(shí)現(xiàn)還是比較穩(wěn)定的，也是有用戶群體的，比如這個(gè)插件也在用，Genesis login modal box。

點(diǎn)開的彈出框的里面要出現(xiàn)該系列的所有文章鏈接。這個(gè)怎么獲取呢？最笨的辦法就是直接寫死。。。但那樣也太傻了。一開始走了點(diǎn)彎路，什么異步獲取，什么寫WP_Query。后來發(fā)現(xiàn)了一個(gè)最簡單辦法：WordPress的模板PHP文件里可以直接把shortcode的內(nèi)容顯示出來，有一個(gè)函數(shù)do_shortcode()?，這就太方便了，把之前在另一篇文章里用到的插件?display posts?的shortcode 直接拿過來就行了。下面就是開始代碼部分了。

第一步 前后文章的鏈接

Genesis框架里面其實(shí)已經(jīng)包含了這個(gè)功能，要在文章中自動(dòng)插入前后文章的鏈接，只需要在子主題的function.php中加入一句：

這是一個(gè)快捷用法，Genesi會(huì)直接在文章后面顯示出來前后鏈接，如下

或者還有一種更靈活的方法，可以根據(jù)需要調(diào)整要插入的位置，當(dāng)然鏈接文字也是可以改的：

這確實(shí)很方便，默認(rèn)會(huì)在所有文章后面都出現(xiàn)前后鏈接。但這不符合我的需求，我的需求是：

• 只需要在添加了Genesis Explained這個(gè)tag的文章下面才顯示
• 在這兩個(gè)鏈接中間插入一個(gè)“目錄”的按鈕
• 只在同系列文章之間導(dǎo)航，不顯示其他無關(guān)的文章
• 如果文章是該系列的第一篇，那么就顯示“已是最前”
• 如果文章是該系列的最后一篇，那么就顯示“已是最后”
• 點(diǎn)擊目錄彈出該所有系列所有文章鏈接

我們可以打開?genesis/lib/structure/post.php?文件看看里面的?genesis_adjacent_entry_nav()?是怎么實(shí)現(xiàn)的。可以發(fā)現(xiàn)，其實(shí)它就是自動(dòng)幫你把WorPress的函數(shù) get_previous_post_link 和 get_next_post_link做了一層封裝。那這樣就好辦了，照著它模仿一下，改成自己的函數(shù)，如下

genesis_exlained_post_nav

代碼里面已經(jīng)加入了注釋，主要用的就是?get_previous_post_link?和?get_next_post_link, 這兩個(gè)函數(shù)和 不帶get的那兩個(gè)用法是一樣的，區(qū)別是previous_post_link?和?next_post_link只自動(dòng)打印出來，這樣就不好做條件判斷了。TRUE可以讓前后文章的鏈接限定在同一個(gè)目錄中。

這樣就已經(jīng)基本實(shí)現(xiàn)了前面幾個(gè)需求了，雖然有點(diǎn)丑，但是先不管它，效果如下：

第二步 添加模態(tài)對(duì)話框

這一步很簡單，直接把remodal的JavaScript文件和CSS文件下載下來，扔進(jìn)子主題的js文件夾里，注冊(cè)到WordPress里就行了，都不需要在寫額外的js文件來初始化或者運(yùn)行這個(gè)插件。當(dāng)然如果在更復(fù)雜的場景里，比如登錄框或其他需要一些異步回調(diào)的內(nèi)容，那就需要另寫一個(gè)js文件來使用了。

現(xiàn)在remodal.js就準(zhǔn)備好了，現(xiàn)在還需要一個(gè)div元素給remodal來調(diào)用，并在這個(gè)div原理里面放翻入需要呈現(xiàn)的內(nèi)容。這里的shortcode內(nèi)容也是之前的文章里寫過的，直接拿過來用就ok了。具體如下：

對(duì)話框和內(nèi)容都有了，怎么讓remodal可以把這個(gè)框給彈出來呢？remodal的文檔里提供了兩種方式，一種是在a標(biāo)簽中使用?#，還有一種是使用?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>

所以，把剛才預(yù)留的目錄鏈接<a>目錄</a>?修改一下 ，再把這一步的div內(nèi)容填入進(jìn)去（這個(gè)div部份理論上可以網(wǎng)頁的任何位置），修改后如下：

現(xiàn)在效果就基本實(shí)現(xiàn)了

第三步 CSS

CSS一直是讓我覺得很糾結(jié)的一個(gè)東西，除非裸奔否則是繞不開這個(gè)令人頭疼的玩意的。最后還是用了一個(gè)土法煉鋼的辦法，直接在gutenberg 里插了一個(gè)三欄框，然后用預(yù)覽模式摳出來這塊的html，直接懟進(jìn)到php文件里去了，是個(gè)很臟的辦法。。。。不過適應(yīng)性很好。。

THE END

就這么著吧。。。。還有4、5篇的沒有翻呢。。。不要太監(jiān)了就行吧

實(shí)際的最終效果歡迎從第一篇開始參觀瀏覽：Genesis框架從入門到精通（1）：什么是框架？

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。