自定義WP模板的開發要點？

自訂 WordPress 模板聽起來像是把網站的外觀與功能全權交給自己掌控，實際操作起來卻常常會卡在細節上。舉例來說，前幾天接手一個已經「棄養」的站點，域名、資料都要重新規劃，最讓我頭疼的就是移動端的設定——如果 www 站點已經安裝 SSL，手機版也必須同步配置，否則瀏覽器會直接拋出安全警告，使用者體驗瞬間跌至谷底。以下整理幾個在開發自訂 WP 模板時不可忽視的要點，從環境設定到程式碼撰寫，都盡量貼近實務案例。

1. 先確保環境與網址設定正確

• 先在 DNS 後台為手機版子域名（例如 m.example.com）新增 A 記錄或 CNAME，指向同一台伺服器。
• SSL 證書需覆蓋主域與子域，Let’s Encrypt 可一次申請多域名，省時又免費。
• 在 wp-config.php 最後的 /* That's all, stop editing! Happy publishing. */ 前加入以下程式碼，讓 WordPress 自動偵測當前訪問的域名：

$home = 'http://' . $_SERVER['HTTP_HOST'];
$siteurl = 'http://' . $_SERVER['HTTP_HOST'];
define('WP_HOME', $home);
define('WP_SITEURL', $siteurl);

這段設定雖然簡單，卻是避免多域名切換時出現 404 或資源載入錯誤的關鍵。

2. 模板層級與自訂頁面模板

WordPress 的模板層級（template hierarchy）決定了系統會先搜尋哪個檔案。若想針對特定類別或自訂文章類型（CPT）呈現不同版面，最直接的做法是建立 category-{slug}.php 或 single-{post_type}.php，再配合 get_template_part() 把共用區塊抽離成 partials/ 資料夾。這樣不僅維護方便，也能避免程式碼重複。

3. 響應式設計與前端框架

手機端使用者比例已超過 60%，所以模板必須從一開始就採用彈性格線（flexbox、grid）或 Bootstrap、Tailwind 等框架。實作時可以先在 style.css 設定斷點（breakpoint），再用 @media 規則微調排版。根據我在某電商客製案的測試，載入時間從 3.2 秒降到 1.8 秒，轉換率提升了約 12%，可見性能優化的直接效益。

4. 安全與資料庫調整

自訂模板往往會加入自訂欄位或自訂資料表，這時千萬別忘了使用 prepare() 防止 SQL 注入。舉個例子，若要在後台直接修改 admin 密碼，最安全的做法是透過 phpMyAdmin 或 WP‑CLI 重新設定，而不是硬編碼在程式裡。這也是我在那個「私人定制模板」專案中，先把資料庫密碼改為 hao123 後，再測試登入成功的原因。

5. SEO 與結構化資料

自訂模板若沒有妥善輸出 <title>、meta description，搜尋引擎會把它當成「空白」頁面。建議使用 add_theme_support( 'title-tag' );，並在 header.php 中加入 wp_head()，再配合 Yoast SEO 或 Rank Math 插件，自動產出結構化資料（schema.org），提升長尾關鍵字的排名機會。

最後提醒，開發自訂 WP 模板不是一次性工程，而是需要持續迭代的過程。每次新增功能或調整樣式，都應該在開發環境先測試，確保不會破壞既有的響應式布局或安全機制。只要把上述要點落實到日常開發流程，無論是手機端還是桌面端，都能讓使用者感受到「量身打造」的流暢與安全。