在使用WordPress制作網(wǎng)站的時候，

經(jīng)常會需要在網(wǎng)站頁面的某些部分添加表格形式的內(nèi)容。

因為table表格形式的內(nèi)容能夠清晰明了地向網(wǎng)站訪客呈現(xiàn)產(chǎn)品或者服務(wù)的一些相關(guān)參數(shù)信息，

所以越來越多電商網(wǎng)站都喜歡在woocommerce產(chǎn)品詳情頁中添加表格內(nèi)容。

WordPress有一款強大且免費的表格插件叫做tablepress，

這款WordPress插件能夠讓你快速建立或者導入現(xiàn)成的表格到網(wǎng)站中，

并且支持你進行自定義設(shè)計表格樣式。

在這篇文章中，

WP花園將會教你如何在WordPress中添加表格形式的內(nèi)容，

讓你的網(wǎng)站有更多豐富的內(nèi)容參數(shù)展現(xiàn)形式，

吸引更多客戶下單或者詢盤！

什么是tablePress插件

Tablepress插件是WordPress網(wǎng)站中運用最多、功能最強大的一款免費的表格生成和制作插件。

通過使用tablepress，

你能夠非常輕松地在WordPress網(wǎng)站上創(chuàng)建和管理精美的表格，

你可以將表格們嵌入到WordPress的頁面page、文章post或者產(chǎn)品products的頁面中。

不僅如此，

你甚至可以將tablepress生成的表格放入到WordPress的小工具widget中，

在側(cè)邊欄或者網(wǎng)頁底部展示表格。

對于WordPress建站的新手來說，

你不需要懂得任何HTML或者CSS代碼，

可以按照excel的方式輕松地在網(wǎng)站上創(chuàng)建表格。

簡單說，tablepress有以下特色：

• 輕松在網(wǎng)站上創(chuàng)建表格

• 從電腦中導入CSV、JSON格式表格

• 表格數(shù)據(jù)可以篩選或者排序

• 可以將表格嵌入到網(wǎng)站的很多地方

• 手機版訪問表格也效果不錯~

在WordPress的后臺中，找到plugin插件版塊，搜索和安裝tablepress插件，激活就能使用了！

官方文檔：

https://tablepress.org/documentation/

下載地址：

https://wordpress.org/plugins/tablepress/

安裝完表格之后，

你會在WordPress后臺的側(cè)邊欄中多出了一個tablepress的欄目，

這里可以看到您網(wǎng)站中創(chuàng)建過的所有表格：

使用tablepress創(chuàng)建一個新表格

如果你的表格內(nèi)容不是很多，

可以直接在WordPress后臺使用tablepress直接創(chuàng)建一個新的表格：

點擊【新建表格】之后，你會看到這個頁面，

填寫一些表格基本信息：

點擊創(chuàng)建表格之后，你會看到這個頁面：

表格ID為44，這個建議不要修改。

然后你會看到簡碼為【table id=44 /】（記得把【】換成[ ]），

通過復制這個簡碼，

然后粘貼到網(wǎng)頁中你想呈現(xiàn)表格的位置，

就能在WordPress網(wǎng)頁前臺展示這個表格了！

我們簡單填充一些內(nèi)容到表格中，

點擊保存：

通過復制表格的簡碼到任何一篇文章中，

保存文章：

就能在WordPress的網(wǎng)頁前臺看到表格的樣式了：

可以看到這個表格就非常清晰地展現(xiàn)在網(wǎng)站訪客的面前！

簡單好用，

有沒有？

WordPress就是那么強大！

在tablepress中導入表格

在很多真實的建站項目中，

往往客戶已經(jīng)準備好了某些產(chǎn)品資料的表格內(nèi)容。

而且這些表格往往內(nèi)容比較多，

不可能在WordPress的后臺一個一個地輸入這些數(shù)據(jù)，因為實在太繁瑣啦！

Tablepress也很貼心地添加了表格導入功能！

在WordPress后臺中，

選擇【導入表格】

這時候，

你會看到系統(tǒng)提示你導入CSV格式的表格。

我們打開WPS或者excel，

將一個表格另存為CSV格式，

然后導入到WordPress中：

有些情況下，

你會發(fā)現(xiàn)導入的表格里中文內(nèi)容為亂碼：

這時候，

你要使用windows電腦自帶的【記事本】來打開你導出的CSV文件：

然后在左上角的菜單欄，選擇另存為：

格式選擇UTF-8，

并且改一個名字，

以免你記錯。

再用相同的方式導入到WordPress后臺。

即便是txt格式的文件，

也能選擇CSV格式，

然后點擊導入。

這時候就解決了亂碼問題了：

也是非常簡單，有沒有？

省下了你大量的時間來一個一個輸入數(shù)據(jù)了！

真開心~

Tablepress表格分頁設(shè)置

我們看一下剛才導入的表格，

這個表格數(shù)據(jù)非常多，

一共有138行的數(shù)據(jù)：

那么在前臺是如何展示的呢？

我們驚奇地發(fā)現(xiàn)，

表格居然自動分頁了！

什么鬼，

我希望網(wǎng)站上全部展示表格所有數(shù)據(jù)，

怎么辦？

我們回到表格的編輯頁面，

在datatables javascript庫特性中，

取消勾選分頁功能：

再看一眼網(wǎng)站前臺，

就發(fā)現(xiàn)所有表格內(nèi)容都呈現(xiàn)出來了：

我們再看看tablepress中，

還有哪些可以讓網(wǎng)頁設(shè)計師修改和測試的屬性吧。

表格操作版塊

在這個版塊中，

網(wǎng)頁設(shè)計師可以選擇對表格的單元格進行增加或者刪除的操作，

也可以在某些單元格內(nèi)加入圖片或者鏈接等等操作：

大家可以自己做一下測試，看看能怎么編輯和改動。

表格選項版塊

在這個欄目中，

可以對表格進行一些全局的樣式設(shè)計，

特別是背景顏色的交替顯示以及表格名稱的展示方式等等：

如果有特殊樣式需求，可以在這里改動一下看看效果。

DataTables Javascript庫特性版塊

這里的內(nèi)容就比較復雜了，涉及到很多網(wǎng)站訪客在使用表格的時候一些互動操作：

• 網(wǎng)站訪客自行排序表格

• 網(wǎng)站訪客搜索表格內(nèi)容

• 表格分頁設(shè)置

• 表格水平滾動條

通過設(shè)置這個版塊的內(nèi)容，可以增加表格的交互效果！

WP花園的結(jié)語

表格數(shù)據(jù)越來越受到電商朋友的歡迎，

所以我們要認真學習如何添加表格到WordPress網(wǎng)站中，

增加網(wǎng)站的數(shù)據(jù)豐富程度。

WP花園在為客戶使用WordPress開發(fā)B2C獨立商城的時候，

經(jīng)常會需要將表格添加到商品的詳情頁中，

所以非常熟悉tablepress這個插件。

好的表格數(shù)據(jù)有利于幫助WordPress網(wǎng)站提升SEO排名和用戶體驗感！

如果你在使用tablepress插件中遇到問題，

歡迎給我們留言！