Timeline Express 時間軸製作沿革年表

內容目錄

Toggle

歡迎回到鵠學苑—WordPress網頁設計超詳細攻略 ––Timeline Express 時間軸 製作沿革年表！今天的教學外掛，主要的功能是為網站附上事件時間軸的功能，具體來說，通常會應用在顯示公司沿革上，在哪些時間點，公司有了哪些創新商品，或者成立了分公司等這些重大歷史事件，在網站上讓使用者能更清楚明瞭公司的發展狀況，可以說是一項相當重要的功能，之所以說很重要，因為對使用者而言，企業公司或電子商務網站，具有歷史年份的沈澱累積，在品牌形象上面會越有加分的效果，通常也越容易為使用者(消費者)建立信心。
對於這個外掛的功能而言，如果說是專門用來製作歷史沿革的外掛，就定義上來說太狹隘了，其實這個外掛還有許多延伸的功能，也可以在網站上建立未來事件的時間軸，比如每個月的課程表外掛製作，或者商品活動特價時間等等，讓使用者對於網站所想表達的事物能直接一目了然，所以這一篇Timeline express 時間軸的外掛教學，我相信能帶給各位不小的幫助！接下來跟著鵠學苑的腳步，讓我們開始學習～
(小提醒：鵠學苑的所有教學均是以Apple Mac OS X系統做步驟示範！)

外掛下載點
https://tw.wordpress.org/plugins/timeline-express/

透過WordPress後台安裝 Timeline Express時間軸以及外掛設定 (Timeline Express)

第一步：進入到WordPress後台，在側邊工具欄點選外掛>安裝外掛，右上角搜尋欄內輸入Timeline Express，點擊搜尋。

第二步：外掛圖示是火箭圖示，依序點選安裝、啟用。有關外掛的安裝，可以參考之前的文章：WordPress 教學基礎介紹六（外掛）。

第三步：可以在後台的側邊工具欄找到Timeline Express的選項，時間軸這個外掛本身也有付費及免費版的差異，端看個人需求，在下圖的畫面中有外掛的使用流程解說。另外在選項中有New Announcement及ALL Announcement，Announcement翻譯中文是”公告“的意思，在外掛裡一個時間軸的項目就是一個公告，因此整個時間軸可以自行配置公告的數量。

第四步：接下來點擊Settings，進入外掛設定的部分，下面跟大家解說每一個選項設定的意思。

1.Time Frame：設定顯示哪些時間的公告，未來/過去/或兩者同時顯示。

2.Display Order：設定公告顯示的排序，升序或降序依據的是公告日期。

3.Announcement Excerpt Length：在公告上顯示內容摘錄的長度，最小長度25個字符。

4.Date Visibility：設定公告的日期是否顯示，Visibility為顯示，Hidden為隱藏。

5.Read More Visibility：設定”閱讀更多”按鈕是否顯示，Visibility為顯示，Hidden為隱藏。

6.Default Icon：設定時間軸線上顯示的圖示，在建立公告的編輯頁面也可以自行設定，這裡是預設公告顯示的圖示。

7.Color：
(1)Default Announcement Color：公告的預設顏色，可以在新增公告內調整。
(2)Announcement Container Background：公告內容的背景顏色。
(3)Announcement Shadow Color：公告內容區域內陰影效果的顏色。
(4)Background Line Color：時間軸線條顏色。

8.No Announcements Message：在這個選項內設定的文字會顯示在所有公告上，如果公告訊息沒有設定，所有公告的內容文字會全部顯示一樣的內容。

9.Exclude Announcements from Site Searches：如果設定Ture，在網頁內搜尋不會顯示公告，設定Fale就可以在網站內搜尋的到。

10.Disable Timeline Animations及Delete Announcements On Uninstall：
(1)Disable Timeline Animations:設定具有時間軸的頁面，當畫面向下滾動時公告從右至左進入的動畫效果是否顯示。
(2)Delete Announcements On Uninstall：勾選的話在解除安裝外掛時會刪除所有公告的數據資料，如果是要進行網站除錯，可以先做備份。

學習Timeline Express時間軸建立方式

第一步：在 Timeline express的選項中選擇New Announcement，會進入下圖畫面，首先輸入公告名稱，在顏色的部分可以自行重新選擇，或著是使用在第一小節中預先設定的顏色。

第二步：公告圖示也是一樣，可以做更改或使用預設圖示。

第三步：日期直接點選日歷即可，如下圖所示。

第四步：Announcement Banner是指在公告頁面中顯示與公告主題相關的圖片，如WordPress在媒體庫內上傳圖片的操作方式一樣，見下圖。

第五步：在頁面的選項新增一個名為鵠學苑課程表的頁面，可以注意到在文章編輯器上方的設定按鈕中，多了一個橘色火箭的圖示，點擊圖示後會自動生成[timeline-express]的一段簡碼，可以自行設定簡碼的位置，接著發布頁面。

第六步：檢視課程表的頁面，就會出現如下圖一樣的時間軸樣式，我在這個範例建立了四個公吿，各位同學可以自行設計或因網站需求不同而更改公告數量。

結語：

在這次時間軸(沿革)的教學中，應該對各位同學有不小的幫助，既然使用WordPress來架站，當然要好好的運用其附加的支援功能，外掛就是很重要的資源，Timeline express時間軸其實是很簡單上手操作的外掛，今天的教學也講解了每一個設定功能所代表的意義讓同學們知道，相信只要多加練習，一定能很快的運用自如的！這個外掛也有付費版本，當然我們是要以最小的資源，發揮最大的效益，但其中有些外掛功能，是比較單一性的，各位同學可以自行斟酌是否付費使用喔！今天的WordPress外掛教學到此告一段落了！大家要持續追蹤鵠學苑，才能掌握WordPress教學最實用外掛的即時資訊喔！我們下週的教學見拉！