Affpeer Affpeer
  • 數字營銷導航
  • 聯盟行銷賺錢
    • 如何開始一個網站
    • 怎樣去做市場調研
    • 到底要寫什麼內容
    • SEO優化要怎麼做
    • 超實用的鏈接策略
    • 若干方法流量變現
  • 社交營銷賺錢
    • 各類平台註冊教程
    • 平台安全養號策略
    • Pinterest營銷攻略
  • 郵件營銷賺錢
  • 工具與服務評測
  • 请到 [后台->外观->菜单] 中设置菜单
我的主页 › Wordpress › 如何手動添加帶樣式的WordPress表格
#Wordpress#

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

7月 20, 2020
371 0 0

在寫文章的時候,很多時候會用到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,对比这个新方法,会否觉得更方便呢?希望你喜欢。

0 0
# Wordpress功能# Wordpress插件
相关文章
如何禁用WordPress文章的自動保存與修訂版本
新手 WordPress 建站指南
Loco Translate 好用的网站翻译插件
评论 (0)
再想想

  • 關於本站
  • 服務條款
  • 隱私政策
  • 本站托管: 阿里云
Copyright © 2020-2021 Affpeer.com. Sitemap.