1. 程式人生 > >4種實現WordPress表格的方法,史上最全!

4種實現WordPress表格的方法,史上最全!

在做網站的時候,很多時候會用到wordpress表格,今天就來講下4種方法在網站上面加上wordpress表格

1.  最簡單的方法 - 複製excel表格然後貼上在wordpress頁面

這種方法適合很簡單的表格,最好是2列的,優點是簡單,直接複製貼上即可,短板就是表格很素,一點也不cool

方法如下

在excel編輯好表格之後,選中表格,並複製(多餘的空格不要複製)

然後貼上到WP網站需要貼上頁面後臺位置,以AVADA主題為例,一般是貼上到text block這個element裡面,注意一定要貼上在編輯器的visual模式下,如下圖

4種實現wordpress表格的方法 2

儲存,update之後 ,重新整理前臺頁面,可以看到表格了,不過沒有邊框,文字也不居中,如下圖

4種實現wordpress表格的方法 3

需要加一些css程式碼來設定邊框和文字居中,如下

td,tr{border:1px solid #eee;text-align:center;padding:10px;}

將以上程式碼加到網站後臺-AVADA-theme options - custom css 中,然後儲存。再重新整理前臺,就可以看到好看多了

4種實現WordPress表格的方法 4

其他操作

把表格中的文字加粗或加連結等操作,先選中文字,再進行加粗等操作,非常簡單。

4種實現WordPress表格的方法 5

注意:有的人會問,為什麼後臺那裡是雙虛線,而前臺是實線,不一樣。原因是前後臺就是顯示不一樣,不用研究這個問題,你只要保證前臺是你想要的效果就行了,後臺怎麼樣一點也不重要!

另外,還有人做WP頁面,喜歡點預覽查,不喜歡Publish或update檢視,這個操作也不對。有的時候網站有Bug,預覽跟實際的顯示結果是不一樣的,切記!

2. tablepress外掛實現wp網站表格

tablepress是一個德國小夥子研發的,直接匯入excel表格來實現。它的基礎功能是可以免費使用,但是如果要包含網站響應式功能,就必須購買付費外掛。要不要購買看你自己。

注意:tablepress不適合有合併單元格的表格,因為操作太複雜。由於免費版本不含響應式的功能,如果想免費使用又想保證手機端能相容的話,最好把表格做的簡單一點再上傳(最好只有2列)。

方法如下

先安裝和啟用,下面這一個外掛就沒錯

tablepress 1

然後在wp後臺左側選單就可以看到tablepress了,點選import a table,匯入你準備好的EXCEL表格檔案,記住,它只讀取第一個excel表的內容。

4種實現WordPress表格的方法 6

選擇好你的excel檔案和檔案格式,點選import上傳

4種實現WordPress表格的方法 7

上傳完後,自動跳轉到這個表格的編輯頁面,往下翻,找到Features of the DataTables JavaScript library這一項選單,把下面的勾全部去掉, 這些都是沒用的功能,然後save changes,

4種實現WordPress表格的方法 9

然後翻到頁面上面,複製這個shortcode,當然,也可以點選wp左側選單-tablepress - all tables裡面,查看錶格的shortcode4種實現WordPress表格的方法 8

然後把shortcode貼上在頁面的text block中,儲存後,update頁面,再重新整理前臺

4種實現WordPress表格的方法 10

就可以在前臺看到表格了,這個看起來很cool,為什麼左下角有一個edit呢,是因為我已經登入了網站,所以它有這個提示。如果是訪客,是看不到這個edit的。

4種實現WordPress表格的方法 11

可以看下手機上面的以上兩種方法的效果,在手機端上還是很友好的顯示的。所以儘量把表格弄簡單一點,特別是把列控制在2列,行數可以不限。這樣,就可以自動的相容在手機上顯示。

4種實現WordPress表格的方法 12

3. 在第三方網站上實現wordpress表格

這種方法適合比較複雜的表格,並且帶響應式功能,而且可以對錶格進行美化。

操作方法如下

先複製做好的excel表格

4種實現WordPress表格的方法 13

然後點選file - paste more data,在彈出的視窗中貼上表格

4種實現WordPress表格的方法 14

貼上完以後,再點選Load

4種實現WordPress表格的方法 15

就可以看到表格已經匯入了

4種實現WordPress表格的方法 16

然後選中最上面一行,方法是點選第一個單元格,按住左鍵,往右拖

4種實現WordPress表格的方法 17

然後點選右圖選單中的背景色,選擇一種背景色

4種實現WordPress表格的方法 18

然後點選文字顏色,將它變成白色,這樣比較諧調

4種實現WordPress表格的方法 19

最後的效果如下。當然,其他的功能都可以使用,方法差不多,可以自己去摸索。

4種實現WordPress表格的方法 20

做好表格後,點選表格下面的generate按鈕,然後再點選extra options裡面,點選make the able responsive,給表格加上響應式功能。

4種實現WordPress表格的方法 21

然後選擇如下圖部分的程式碼,並複製,切記一模一樣的位置,不要多也不要少(即<style>和</style>之間的所有程式碼)

4種實現WordPress表格的方法 22

然後到wp後臺-avada- theme options - custom css中,另起一行,貼上上面複製的程式碼,並儲存。

4種實現WordPress表格的方法 23

然後再到這個頁面的程式碼框中,複製如圖所示的剩下的所有程式碼(拖到底再複製)

4種實現WordPress表格的方法 24

再到需要放程式碼的text block中,visual模式下,貼上程式碼 ,儲存。

4種實現WordPress表格的方法 24

重新整理前臺,就可以看到效果出來了。

4種實現WordPress表格的方法 25

4. 最直接的方法,擷取表格的圖片上傳

這種方法適用於任何表格,特別是複雜的表格,缺點就是表格內容不能選擇和複製

方法也簡單,先做好表格,並編輯好樣式,然後用QQ截圖(快捷鍵CTRL+ALT+A),把表格擷取然後儲存為英文名字的圖片

再上傳到media中,並在text block中插入圖片(注意在插入頁面選擇圖片的size為full size)即可。最終效果如下

4種實現WordPress表格的方法 26

以上就是4種實現Wordpress表格的方法,你可以根據實際情況選擇不同的方法來操作。原則就是把表格編輯成越簡單越好,這樣不僅好操作,還好排版。