在WordPress中添加簡書風格的連載目錄和文章導航

轉自 丘壑博客， 轉載請註明出處連接

https://bestscreenshot.com/add-post-pagination-to-wordpress/

需求

自從機緣巧合的開始翻譯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

就這麼着吧。。。。還有四、5篇的沒有翻呢。。。不要太監了就行吧

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