TablePress 是一款操作簡單且功能強大的 WordPress 表格外掛，適合需要在網站上快速建立漂亮且具備排序、搜尋、分頁等多功能表格的使用者。本文將以實務操作角度，說明如何安裝、建立、設定及應用 TablePress，讓你能輕鬆打造符合需求的多功能表格。

安裝 TablePress 外掛

首先，進入 WordPress 後台的「外掛」->「安裝外掛」，在搜尋欄輸入「TablePress」，找到後安裝並啟用。啟用後，左側管理選單會出現「TablePress」選項。

建立 TablePress 表格

點擊「TablePress」選單中的「新增表格」，輸入表格名稱（必填）及說明（選填），設定欄位數與列數，按下「新增表格」開始編輯。

填寫表格內容時，第一行通常作為標題列，請輸入欄位名稱。編輯器支援插入連結（可設定新分頁開啟）、插入圖片（媒體庫選取）、以及進階編輯器功能。

此外，可操作橫列與直欄的隱藏、顯示、複製、插入、刪除等功能，並支援合併儲存格，方便調整表格結構。

表格選項設定

在表格設定中，可依需求勾選：

• 表格標題橫列（第一行為標題）
• 表格底部標題列（最後一行為標題）
• 橫列交替背景色（偶數白色、奇數灰色）
• 滑鼠游標經過時的突顯效果
• 顯示表格名稱與說明
• 附加自訂 CSS Class

若需排序、搜尋、分頁等互動功能，請勾選「使用 DataTables」選項，這是 TablePress 強大的前端互動功能。

使用短碼將表格嵌入頁面

設定完成後，於表格標題右上角會看到短碼，複製該短碼並貼到想要顯示表格的頁面或文章中，儲存後即可在前端看到完整功能的表格。

表格前端顯示與互動

前端表格會自動呈現排序箭頭、快速搜尋框及分頁按鈕，使用者可直接操作，提升資料瀏覽效率。

匯出與匯入功能

TablePress 支援表格匯出與匯入，方便資料備份或跨站移轉：

• 匯出：進入 TablePress -> 匯出表格，選擇欲匯出的表格與格式，下載檔案。
• 匯入：進入 TablePress -> 匯入表格，選擇檔案與格式後匯入。

延伸應用與常見坑

• 表格資料量大時，建議使用 DataTables 的分頁功能避免前端卡頓。
• 自訂 CSS Class 可搭配自訂樣式，達成更符合網站風格的表格外觀。
• 匯入匯出時注意格式一致性，避免資料錯亂。

完整程式碼

// TablePress 為 WordPress 外掛，無需額外程式碼，以下為短碼範例：
[table id=1 /]

以上即為利用 TablePress 外掛製作多功能表格的完整流程與說明，適合想快速建立互動式表格的開發者與自學者參考。

表單是網站中不可或缺的功能，常用於客戶回報問題或課程報名等場景。本文針對有基本程式理解的工程師或自學者，介紹如何透過 WordPress 的 Contact Form 7 外掛，快速建立並客製化專屬表單。

步驟1：安裝 Contact Form 7 外掛

首先，在 WordPress 後台的【外掛 -> 安裝外掛】搜尋 “contact form”，找到 Contact Form 7 外掛後，進行安裝並啟用。此外掛提供豐富的表單欄位類型與驗證功能，方便後續客製化。

步驟2：建立聯絡表單

啟用外掛後，左側管理選單會出現「聯絡表單」選項，點擊後選擇新增聯絡表單。輸入表單名稱後，即可開始新增欄位。

常用欄位類型介紹

• 文字：適合姓名、職稱等短文字輸入，限制255字元內。
• 電子郵件：自動驗證格式，適用Email輸入。
• 網址：驗證URL格式。
• 電話：驗證電話格式。
• 數值：輸入數字，適合金額等。
• 日期：提供年月日選擇。
• 文字區域：多行文字輸入，無字數限制。
• 下拉式選單、核取方塊、選項按鈕：提供用戶選擇功能，多選或單選皆可。
• 接受度：用戶需勾選同意條款才能送出。
• 問答題：設定固定答案的簡單問題。
• reCAPTCHA：防機器人驗證，需串接API。
• 檔案上傳：允許用戶上傳文件。
• 送出按鈕：必備，觸發表單送出。

每個欄位可設定是否必填、欄位ID、預設值等，並可插入標籤至表單編輯區。表單內容支援 HTML 排版，方便自訂樣式。

步驟3：將表單短碼嵌入頁面

完成表單設計後，複製 Contact Form 7 產生的短碼，貼入 WordPress 頁面或文章中。前端頁面即會呈現該表單，使用者可直接填寫並送出。

實際應用與延伸

• 可依需求新增多個表單，分別用於不同功能。
• 利用 CSS 自訂表單樣式，提升使用者體驗。
• 搭配 reCAPTCHA 增強安全性，防止垃圾訊息。
• 透過外掛設定郵件通知，及時收到用戶回覆。

常見坑點

• 表單欄位未設必填，可能導致資料不完整。
• reCAPTCHA 未正確串接 API，驗證失效。
• 短碼貼錯位置，表單無法正常顯示。

完整程式碼

[contact-form-7 id="1234" title="聯絡表單"]

以上為 Contact Form 7 產生的短碼範例，實際 ID 依照建立的表單而定，請複製後貼入頁面使用。