WordPress 指定頁面替換為純靜態 HTML

SkyChoy
18 分鐘閱讀

WordPress 指定頁面替換為純靜態 HTML 教學

透過 mu-plugins 機制，在不修改主題、不怕更新覆蓋的情況下，將 WordPress 特定 URL 的內容替換為你自己的純 HTML 頁面。

為什麼需要這樣做？

用 WordPress 建站，有時某些頁面需要 100% 自訂 HTML + CSS（例如用 Tailwind CSS CDN 做 landing page），但 WordPress 有以下限制：

  • 主題模板會強制載入 header、footer、sidebar
  • 頁面編輯器無法完全自訂 HTML 結構
  • 直接改 PHP 檔案，主題一更新就全部消失

我們需要一個方法：保留原本的 URL 不變，但輸出完全由你控制的靜態 HTML，而且不會被任何更新覆蓋。

方案比較

方案 會被更新覆蓋？ 風險
直接改主題 PHP 會 主題更新即失效
.htaccess RewriteRule 可能 WordPress 儲存永久連結時會重寫 .htaccess
改插件檔案 會 插件更新即失效
mu-plugins（推薦） 不會 穩定，獨立於主題和插件之外

為什麼 mu-plugins 不受影響？

mu-plugins 是完全獨立的存在，以下任何操作都不會影響到它：

  • WordPress 核心更新：核心更新只動 wp-admin/ 和 wp-includes/，不會碰 wp-content/mu-plugins/
  • 主題更新：主題檔案在 wp-content/themes/ 裡面，跟 mu-plugins 毫無關係
  • 插件更新：一般插件在 wp-content/plugins/，mu-plugins 是另一個獨立目錄
  • .htaccess 被重寫：WordPress 在後台「儲存永久連結」時會重寫 .htaccess，但 mu-plugins 運作在 PHP 層面，完全不依賴 .htaccess
  • 切換主題：換主題只影響 wp-content/themes/ 下的檔案
  • 停用 / 刪除其他插件：mu-plugins 不在一般插件管理介面中，其他插件的操作對它零影響

簡單來說，mu-plugins 只有一種方式會消失：有人手動去伺服器刪除 mu-plugins/ 裡面的檔案。日常的 WordPress 維護操作完全不會碰到它。

什麼是 mu-plugins？

mu-plugins（Must-Use Plugins）是 WordPress 的一個特殊機制：

  • 放在 wp-content/mu-plugins/ 目錄下
  • WordPress 每次載入都會自動執行，不需要在後台啟用
  • WordPress 核心更新、主題更新、插件更新都不會影響它
  • 不會出現在一般插件列表，不會被人誤停用

實作步驟

Step 1：建立靜態 HTML 檔案存放目錄

透過 FTP/SFTP 連接你的伺服器，在 WordPress 根目錄（即 wp-config.php 所在的位置）建立一個資料夾：

/your-wordpress-root/
├── wp-admin/
├── wp-content/
├── wp-includes/
├── static-pages/          ← 新建這個資料夾
│   └── my-landing.html    ← 你的靜態 HTML 檔案
├── wp-config.php
└── ...

Step 2：上傳你的靜態 HTML 檔案

將你準備好的純 HTML 檔案放入 static-pages/ 資料夾。例如 my-landing.html：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你的頁面標題</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <!-- 100% 你控制的內容，不受 WordPress 主題影響 -->
    <h1 class="text-4xl font-bold text-center mt-20">Hello World</h1>
</body>
</html>

Step 3：建立 mu-plugin

確認 wp-content/mu-plugins/ 資料夾存在（如果沒有就建立一個），然後在裡面新增一個 PHP 檔案，例如 custom-static-pages.php：

/your-wordpress-root/
└── wp-content/
    └── mu-plugins/                    ← 如果沒有就新建
        └── custom-static-pages.php    ← 新建這個檔案

檔案內容如下：

<?php
/*
 * Plugin Name: Custom Static Pages
 * Description: 指定 URL 載入純靜態 HTML 取代 WP 模板
 */

add_action('template_redirect', function () {
    // ===== 設定區：在這裡加入你要替換的頁面 =====
    $static_pages = [
        // '原本的 URL 路徑' => '對應的靜態 HTML 檔案路徑',
        '/2025/08/11/my-example-post/' => '/static-pages/my-landing.html',
        // 需要更多頁面就繼續加：
        // '/2025/09/01/another-post/' => '/static-pages/another.html',
    ];
    // ===== 設定區結束 =====

    $request_uri = urldecode($_SERVER['REQUEST_URI']);
    $path = parse_url($request_uri, PHP_URL_PATH);
    $path = rtrim($path, '/') . '/';

    foreach ($static_pages as $url => $file) {
        $url = rtrim($url, '/') . '/';
        if ($path === $url) {
            $file_path = ABSPATH . ltrim($file, '/');
            if (file_exists($file_path)) {
                header('HTTP/1.1 200 OK');
                header('Content-Type: text/html; charset=utf-8');
                readfile($file_path);
                exit;
            }
        }
    }
});

Step 4：防止靜態檔案被直接存取（選做但建議）

在 static-pages/ 資料夾內新增一個 .htaccess 檔案：

# 防止用戶直接訪問靜態 HTML 檔案
# 所有流量應經過原本的 WordPress URL
Order Deny,Allow
Deny from all

這樣別人就不能直接打開 yourdomain.com/static-pages/my-landing.html，所有流量都會經過原本的 WordPress URL。

完成！驗證效果

上傳完成後，直接打開你設定的原始 URL，例如：

https://yourdomain.com/2025/08/11/my-example-post/

你應該會看到你的純靜態 HTML 頁面，而不是 WordPress 主題模板。URL 完全不變，訪客和搜尋引擎都不會察覺任何分別。

之後要加新頁面怎麼辦？

只需要兩步：

  1. 將新的 HTML 檔案上傳到 static-pages/
  2. 在 custom-static-pages.php 的 $static_pages 陣列加一行
$static_pages = [
    '/2025/08/11/my-example-post/'  => '/static-pages/my-landing.html',
    '/2025/09/15/new-post/'         => '/static-pages/new-page.html',  // 新加
];

不需要重啟任何東西，儲存即生效。

注意事項

  1. SEO 標籤要自己管理：因為繞過了 WordPress，Yoast / RankMath 等 SEO 插件不會在這些頁面運作。記得在你的 HTML 裡面手動加入 <title>、<meta name="description">、canonical、OG tags、Schema markup 等。

  2. 不影響其他頁面：只有你在 $static_pages 裡面設定的 URL 會被替換，其他所有 WordPress 頁面完全不受影響。

  3. 更新安全：mu-plugins 不受 WordPress 核心、主題、插件更新影響。唯一會消失的情況是有人手動刪除 mu-plugins 裡的檔案。

  4. 效能更好：因為 readfile() 直接輸出靜態檔案後就 exit，WordPress 的主題、sidebar、footer、插件都不會載入，頁面載入速度會比正常 WP 頁面快。

總結

WordPress URL 請求
       ↓
mu-plugin 攔截 (template_redirect)
       ↓
URL 有 match？ ─── 沒有 → 正常載入 WordPress 主題
       ↓ 有
讀取靜態 HTML 檔案 → 直接輸出 → exit

這個方法簡單、穩定、不怕更新，適合需要在 WordPress 站內放幾頁高度自訂 landing page 的場景。

上一篇
[Laravel] docker 中安裝supervisor 來守護 horizon