用 jQuery 和 Bootstrap 在 WordPress 中新增進度條

需求

昨天整理了一下Genesis的系列教程的翻譯進度，彙總成了一個頁面 神級 WordPress 主題框架 Genesis 從入門到精通 。 今天突然想放一個進度條，可以直觀看下顯示一下翻譯了幾篇。

思路

手動更新肯定是不行的，程式設計師就是要懶。思路其實挺簡單的，就是動態獲取到已經翻譯了幾篇，除以總數得到百分比，並讓頁面上的進度條部分根據這個百分比變化就行了。方法還是有挺多的，很多JavaScript的庫都可以實現這個功能，但是因為WordPress裡已經自動載入了jQuery了，所以就不想再引入其他庫了，而且這個需求也很簡單，用jQuery就足夠了。

第一步

原作者一共寫了15篇，這是定死了的， 只需要獲取到我已經在丘壑部落格上翻譯了幾篇就可以了，除以總數15篇就得到了百分比。本想自己寫個 WP_Query 查出來，發現有個外掛可以很方便的獲取到，就不用重複造輪子了 Display Posts – Easy lists, grids, navigation, and more, 很強大，可以用各種過濾條件動態查詢文章並顯示出來

在頁面上加上如下的 shortcode，就可以把所有標籤為 genesis-explained 的文章按順序查出來並顯示

第二步

因為用display-posts顯示出來的列表自帶了一個css樣式，所以可以很容易用jQuery選擇器來獲取到文章數量：

第三步

資料有了，那麼還需要在頁面上加一個div區域，可以讓jQuery來動態更新區域的內容，很簡單，編輯頁面，插入一段html

現在，再把上面的 JavaScript程式碼再補充一下，用來更新進度條裡的文字內容，完整版的如下：

第四步

現在是光禿禿的，太醜了，再加入一點CSS，穿件衣服。寫CSS是我的弱項，所以我就選擇了Bootstrap，完整版的太臃腫了，包含了太多不需要的東西，完整引入也有可能會把現有主題搞亂，所以在 Bootstrap官網上定製化下載了一個最簡版的，只包含alert和 progress部分，其他部分都不要。然後再加上一點自定義的樣式：

第五步

現在基本上就已經可以達到效果了，最後，我只想在這一個頁面上顯示這個進度，其他頁面上都不需要，所以，新建一個針對這個頁面的模板 page-genesis-explained.php，放在子主題的目錄下。為什麼叫這個名字呢？可以參看這裡 Template Hierarchy。因為這是一個頁面，slug是genesis-explained，所以就叫page-genesis-explained.php，加入以下程式碼，作用就是用add_action()把上面的JavaScript指令碼和CSS註冊進入WordPress，新增動作的方法可以參考這篇文章 。

當然要先把需要用的檔案FTP上傳到對應的目錄下，我就全扔到wp-content/themes/genesis-sample/js 這裡了。

最終效果在這裡 神級 WordPress 主題框架 Genesis 從入門到精通

結語

不知不覺都已經翻譯一大半了，60%了才想起來做個進度表，翻譯過程其實還是有收穫的，細嚼慢嚥的也可以消化的更好一點，希望早點到達100%吧