給新手看的Ninja Tables Pro教學
Wordpress 網站架設

給新手看的 Ninja Tables Pro 教學: 地表最強整合資料表格WordPress外掛

分享到社群

Last Updated on 2022 年 1 月 4 日

不知道你是否遇到一種情況,那就是辛苦做好的精美表格,在不同裝置(手機、平板或電腦)裡顯示卻跑框、不對齊了!

Ninja Tables Pro 教學 讓你快速了解最通用的 WordPress 響應式表格外掛,手把手教你使用Ninja Tables 的各種強大功能,與跑框不對齊的表格說掰掰。

Ninja Tables 在WordPress外掛評分中擁有4.5顆星(滿分五顆星)的高分,並超過六萬次的啟用安裝數。

假如你有大量的WooCommerce產品列表,像是Amazon電商網站的話,那麼非常推薦你使用 Ninja Tables Pro。

Amazon 表格製作
Amazon 電商網站商品表格範例

為什麼? 讓我們繼續看下去!

Ninja Tables 介紹&特色

WordPress 中最簡單的響應式表格外掛

通過快速建立響應式表格,可以在你的網站上顯示大量數據資料,也可以響應任何設備(電腦或手機、平板)的寬度。

Ninja Tables 有一個很棒的功能,可以使用 Footables、Bootstrap 3 & 4 和 Semantic UI 來設計表格的前端。

超過 100 種表格樣式

提供百種不同樣式、五顏六色的表格模板。

表格加載速度快

Ninja Tables 從一個頁面開始操作所有內容。 VueJS 和 VueRouter 作為單頁應用程序 (SPA) 用於開發後端,使體驗更加流暢,包括製作表格以設置配置、插入條目、導入 CSV 文件和重新排列列。

友善且簡易操作的介面

表格列的設計和響應式斷點的配置使重新排列列(column)變得更加容易。

手機響應式應表格

在所有類型的設備中加載表非常重要。 Ninja Tables 通過在行內的可擴展區域中添加這些列來解決這個問題。

你可以輕鬆操縱哪些列將顯示在哪些設備中。 Ninja Tables 包括在所有設備上運行的實時排序、分頁和搜索功能。

匯出(Export)和匯入(Import)數據

表格可以以 CSV / JSON 文件格式匯出/匯入存檔使用。

從其他表格外掛匯入

如果你已經在使用其他表格外掛(例:TablePress),你其實也可以簡單地匯入數據表格。

短代碼

只要將製作完成的表格的短代碼複製貼上到WordPress網站頁面或文章中,可以看到表格呈現在想要的位置。

客服支援

免費且提供優秀服務的客服團隊。

Ninja Tables 安裝&設定

登入你的WordPress網站後台 > [ 外掛 ] > 新增外掛 > 搜尋 [ Ninja tables ] > 安裝外掛。

Ninja Tables Pro 安裝使用

接著,會看到Ninja tables外掛已經安裝好,按下 [啟用]。

Ninja Tables Pro 教學 – 開始製作第一張表格

STEP 1:

進到Ninja Table的操控畫面,按下右上角的藍色按鈕 [Add Table]。(假如你已經有作好的表格,可以直接點 [Import Table] 。)

會跳出以下編輯視窗,在[ Table Title ]命名此表格,你也可以在 [Table Description]加入描述。

右手邊的箭頭小圖示可以匯入已建立好的表格(CSV、JSON檔)。

也可以跟WP Fluent Form整合。

假如需要更多功能,像是與 Google Sheets整合、移除CSV或是客製化SQL,則需要升級到Pro版

Ninja Tables Pro 教學

STEP 2 :

點 [Add Column],開始製作你的列(Column)。

Ninja Tables Pro 教學

[Basic Settings] 設定列名,也可以決定是要以文字形式、數字、日期、按鈕或是圖片/連結的形式呈現。

也可以決定表格欲顯式的裝置設備,例如:可以顯示在電腦上但不顯示在手機上,或對全部設備隱藏/顯示表格等。

Ninja Table Pro 可以客製化表格寬度、內容位置和背景顏色等。

Ninja Table 教學

基本上,只要你點進欄位就可以立刻編輯,非常方便,也可以按右邊的 [Duplicate data]小圖示複製單筆資料。

Ninja Tables Pro 教學

簡單兩步驟就可以完成一個表格。

Ninja Tables Pro 進階功能說明

[ Table Configuration ] 裡的 [Columns] 可以用拖拉的方式設定列的順序。

[ Rendering Settings ] 有Ajax Table和 Advanced Table (legacy)的選擇,通常免費版只能用Ajax table。

如果你對進階功能有需求和講求更好的SEO的話,就可以考慮使用 Advanced Table (legacy)。

[ Custom Filters ] 升級Pro版才能用的篩選(Filters)功能。

[ Table Design ] 預覽各設備(手機、平板、電腦)的顯示位置和形式,也可設計表格外觀、顏色等。一樣要升級才能使用全部的功能。

會CSS的站長也可以在 [Custom CSS/JS] 編輯存檔。

[ Frontend Editing ]能讓前端使用者根據使用者角色新增、編輯和移除紀錄。

Ninja Tables 方案比較

方案大同小異,只差在可使用網站數,而且阿,假若購買後不滿意還可以在14天內要求全額退款。

可使用網站數年費計算方案終生方案
一個網站49 USD (約1368台幣) 199 USD (5557台幣)
20個網站 (Agency License)99 USD (約2764台幣)399 USD (11,144台幣)
無限個網站199 USD (5557台幣)599 USD (16,730台幣)

結語

表格外掛適用於各種WordPress網站,但你若是經營WooCommerce之類的電商網站或是自己接案的話,常常需要製作大量的產品表格說明,這時候Ninja Tables就非常適合你了。

需特別注意的是,假如你用了免費版的Ninja Table之後想升級成Pro版,記得不要刪除Ninja Table外掛,不然沒辦法使用Pro版阿。


分享到社群

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *