如何手動添加帶樣式的Wordpress表格

在寫文章的時候,很多時候會用到wordpress表格,一般我們用簡碼shortcode來實現。但是默認效果太簡陋了,今天就來講下如何在內容中添加帶css樣式的wordpress表格。

可能你會覺得奇怪,不是有個插件tablepress可以插入表格嗎?因為我覺得只是實現單一的功能,最好擺脫對插件的依賴。

這裡我們需要做下面三個工作:

  • 在excel表格中編輯好內容
  • 打開Tablesgenerator在線編輯器
  • 找到wordpress主題的自定義css框

那我們開始動手做吧!

首先,複製做好的excel表格。

選擇excel表格區域

然後打開 http://www.tablesgenerator.com/html_tables,在左上角的菜單 File 中,找到並點擊 Paste more data...

導入數據

然後,粘貼表格數據,並點擊 Load 。

粘貼表格數據

這樣就可以看到表格已經導入。然後,根據在線編輯器提供的功能進行樣式設計。

設置表格樣式

做好表格後,點擊表格下面的 Generate 按鈕,然後再點擊左下角 Layout 裡面,點擊make the able responsive,給表格加上響應式功能。

點擊生成樣式代碼

然後,選擇<style></style>之間的代碼,並複制。

複製樣式代碼

然后到 Wordpress后台 - 外观 - 主题设置 - 自定义代码中,粘贴上面复制的代码,并保存。(每个主题提供的自定义代码表框不一样,也可以到 外观 - 自定义 - 主题编辑器视图左侧的 额外CSS中尝试应用。)

插入樣式代碼

再到这个页面的代码框中,复制剩下的所有代码,并回到文章内容编辑器(html文本模式)中,直接粘贴。效果对比如下,

將樣式代碼黏貼到文本框

可視化文本窗口的效果:

可視化窗口的效果

網頁實際瀏覽效果:

網頁實際瀏覽效果

如果你曾经使用过tablepress,对比这个新方法,会否觉得更方便呢?希望你喜欢。

原创文章,作者:Andy,如若转载,请注明出处:https://www.affpeer.com/how-to-use-tablepress-to-add-wordpress-tables/

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注