Wordpress 表格外掛-TablePrss介紹

在Wordpress的頁面與文章裡面也有提供表格,但表格不是很彈性,功能不多。


在這推薦一套Wordpress外掛「TablePress」,是一套蠻簡易使用,又蠻彈性的表格。TablePress已擁有超過80萬啟用安裝~是一套非常簡易使用的表格外掛,使用者都不需要學會程式碼也能輕鬆擁有美觀且功能完整的表格。到Wordpress安裝外掛搜尋「Tablepress」安裝,不知道如何安裝外掛,文章:Wordpress外掛教學

安裝好後會在後台左欄「TablePress」->查看一下「所有表格」,之後新增的與已新增的表格都會在這呈現。

Wordpress 表格外掛TablePress製作表格

目前還未新增,是空的,那我們就來新增吧!我們來試做課程議程。

  1. 按「新增」
  2. 出現基本設定,表格名稱、表格說明、表格有多少列與欄,橫排=列、直排=欄。設定好後就按「新增表格」
  3. 最上方出現剛剛寫的設定,可以重新更改。又上還有「表單簡碼」,這最後會使用到。
  4. 「表格內容」在這裡填寫內容,下方「表格操作」,任何上方要調整的,這欄做設定。
  5. 首先先寫最上方的標題(標題列,都是粗體),多一欄,那就勾選下方多的欄位,再去「表格操作」按「刪除」,就可以囉。
  6. 填寫到一半又發現,想加更多行怎麼辦?只要再「表格操作」按「新增X個橫列」新增!就出現了~
  7. 想要編輯讓「綜合大樓三樓國際會議廳」加上連結,首先到「表格操作」->「進階編輯器」-> 再點「編輯欄位」
  8. 跳出來「進階編輯器」,這裡都可以使用,如果會寫code也可以在此編輯。不會的話就按上面一排,就會出現囉~
    這次加Google地圖的網址,把字匡起來,點「link」-> 填寫「網址」&「連結文字」-> 新增連結,就會出現在「進階編輯器」了!


  9. 填寫好後可以先到最上方按「預覽」,查看是不是自己想要的排版。

  10. 表格OK,接下來就是一些表格設定。看需不需要呈現表格名稱、說明、或著需不需要交替背景色等等。都可以嘗試看看,基本上都會留跟預設一樣。
  11. 最後設定「DataTable JavaScript函式庫特性」若你還想要有排序、搜尋、上下頁的表格,可將 DataTables 打勾,不需要就勾取消即可。
  12. 最後「儲存設定」搞定!

「DataTable JavaScript」勾取消呈現


「DataTable JavaScript」打勾呈現

TablePress表格放入文章/頁面

製作好的表格如何放入文章/頁面內呢?其實很簡單,生成文章/頁面放入即可。怎麼生成文章?怎麼生成頁面?這裡有Wordpress教學:【Wordpress文章新增、刪除、修改、列表、分類 】教學【Wordpress頁面新增、刪除、修改 】教學

  1. 剛剛的表單最上方有一個「簡碼」,複製下來。
  2. 再到Wordpress文章/頁面內建編輯器找到「段落」
  3. 貼上表格「簡碼」->「儲存」,就完成了!
  4. 到前台查看。