wordpress建站教程：給網站文章添加日期歸檔效果

繼續分享wordpress建站教程。之前的一個博客資源wordpress建站項目中 ，客戶需要求給網站添加一個文章歸檔的效果，需要能夠按日期檢索。經過一番折騰悅然wordpress找到了一個簡單實用的方法，下面就給大家分享一下，同時也給自己留個記錄。

wordpress自帶功能

其實wordpress自帶就有按日期歸檔的效果，不過顯示效果不好，而且默認情況下它會連頁面內容一起歸檔，所以默認的功能就不太適用了。要實現此類效果可以修改代碼，也可以使用插件，代碼麻煩， 插件會簡單方便一些。

使用插件

類似的插件其實不少，但很多比較臃腫，最終悅然wordpress建站找到一個由西部盒子（wbox8）大佬分享的文章時間線歸檔插件，插件非常小只有3K。最終我在此插件的基礎上進行了一些修改達到了想要的效果。

安裝插件

文章歸檔時間線插件

https://pan.baidu.com/s/1o7K1veod1Jnoiw-kgO-SbQ

首選下載大佬分享的插件，安裝啟用。

添加歸檔頁面

這個插件是通過短代碼調用的，我們需要新建一個頁面，然后添加下面的短代碼，這樣直接發布就會以時間軸的方法顯示網站所有文章了。

[wboxtimeline]

修改樣式

默認情況下插件會一頁顯示20條信息，然后翻頁顯示。但是我感覺還是一頁顯示所有內容更方便查詢，所以可以在插件設置中修改為全部顯示，如上圖所示。

接下來還需要繼續修改插件，因為默認情況下歸檔的文章標題沒有顯示具體日期，顯示的是評論（而且有可能調用不出來），所以我修改了插件文件wb-archive-timeline.php，把原來的調用評論修改為調用日期，如上圖所示。

接下來我還修改了年份大標題和月份小標題的H標簽，修改使用了H3和H4，方便后面目錄調用區分。

<style>
.wbcss-archive {
    color: rgb(253 174 1);
      cursor: pointer;
    height: 1000px;
    width: calc(100% + 6px);
    overflow: hidden;
    overflow-y: scroll;
}
</style>

因為我設置了所有文章列表都顯示在同一頁，如果內容很多的話，頁面就會拉的很長，所以這里可以使用css來控制時間線模塊的顯示高度，然后可以拖動。上面我設置的是1000PX，大家也可以設置為更大或更小。

添加目錄

因為要實現比較方便的按日期歸檔查詢的效果，所以接下來我們還需要對這個頁面進行優化。這里可以使用目錄插件，也有一些區塊編輯器自帶了目錄模塊，效果都一樣，這里推薦一個本站使用的目錄插件Easy Table Of Contents

Easy Table Of Contents

https://cn.wordpress.org/plugins/easy-table-of-contents/

大家直接安裝啟用這個插件就可以。

[ez-toc]

然后在歸檔時間線模塊上線添加一個短代碼/簡碼模塊，輸入上面的內容即可。發布之后這個頁面就會顯示分別顯示時間目錄（根據前面修改過的H標簽來識別）和時間線。時間目錄的樣式大家也可以通過CSS來進一步調整，這里就不細說了。

最后我們來看效果，如上圖所示。當用戶需要查詢的內容比較靠后時就可以點擊目錄模塊中的時間，它會自動定位到下面的時間線模塊的位置，這樣查詢歷史文章就非常方便了。（頂部的搜索是添加了一個wordpress自帶的搜索模塊）

總結

以上就是今天分享的內容，希望對你有所幫助。