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表格

這個網站是http://www.tablesgenerator.com/html_tables

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

操作方法如下

先復制做好的excel表格

4種實現WordPress表格的方法 13

然后進入http://www.tablesgenerator.com/html_tables

然后點擊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表格的方法,你可以根據實際情況選擇不同的方法來操作。原則就是把表格編輯成越簡單越好,這樣不僅好操作,還好排版。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM