2026年用現代技術堆疊取代WordPress:完整指南
在過去三年中,我遷移了數十個 WordPress 網站。有些是五頁行銷網站,有些是擁有 10,000 篇文章的出版物。規律總是相同的:團隊帶著同一套問題來找我們,而解決方案清晰地對應到一小組現代工具。這不是關於追逐趨勢。這是關於解決 WordPress 在過去二十多年來所帶來的實際問題。
WordPress 仍然驅動著全球約 43% 的網站,理應因此獲得讚譽。但「最受歡迎」和「最適合」是不同的概念。如果你在讀這篇文章,你可能已經決定需要進行改變。讓我們具體說明什麼替換什麼 — 以及實際成本是多少。
目錄
- 將您的 WordPress 痛點與正確的現代堆疊進行匹配
- 參考架構:3 種有效的模式
- 遷移成本和時間表
- 沒有人談論的內容遷移問題
- 遷移期間的 SEO 保護
- 何時不應該離開 WordPress
- 常見問題
將您的 WordPress 痛點與正確的現代堆疊進行匹配
每一個 WordPress 的挫折都有一個直接的現代對應物。以下是我在客戶詢問遷移時使用的對應關係。
外掛臃腫 → 無頭 CMS(Payload、Sanity)
平均 WordPress 網站運行 20-30 個外掛。每一個都是潛在的安全漏洞、效能拖累,以及每次 WordPress 推送核心更新時的相容性風險。我見過外掛資料夾大小為 400MB 的網站。四百兆字節的 PHP 代碼在每個頁面請求上運行。
無頭 CMS(如 Payload 或 Sanity)完全消除了這個問題。內容建模是內置的 — 你不需要 Advanced Custom Fields。媒體處理是內置的 — 你不需要單獨的媒體庫外掛。用戶角色、API 訪問、本地化 — 一切都是原生的。
Payload CMS 是開源的、TypeScript 原生的,自託管(或在 Payload Cloud 上雲託管,起價 $15/月)。所有內容都在代碼中定義,這意味著你的 CMS 結構與前端一起存在於版本控制中。如果你曾經因為有人停用了錯誤的外掛而丟失過 WordPress 網站,你會欣賞這一點。
Sanity 採用了不同的方法 — 它是一個託管平台,配備了一個名為 Sanity Studio 的實時協作編輯器。他們的免費層涵蓋大多數小到中型項目(每月最多 100K API 請求),他們的 Growth 計畫起價 $99/月。內容湖架構意味著你的內容真正結構化和可移植。
我們在我們的無頭 CMS 開發實踐中經常使用兩者,選擇通常歸結為:你是想擁有基礎設施(Payload)還是支付他人管理它(Sanity)?
頁面加載速度慢 → Astro 或 Next.js
WordPress 為每個請求在伺服器上生成 HTML。是的,你可以附加緩存外掛(WP Rocket、W3 Total Cache),但這是在修補一個基本的架構問題。一個全新的 WordPress 安裝配上商業主題通常在 Lighthouse 上得分 40-60。我見過生產網站的得分在十幾分。
Astro 和 Next.js 在架構層面上解決了這個問題。
Astro 默認發送零 JavaScript。它在構建時將你的頁面渲染為靜態 HTML。一個典型的 Astro 行銷網站在 Lighthouse 上得分 95-100,無需任何優化努力。這是完全不同的。對於互動性最少的內容豐富的網站 — 行銷網站、部落格、文檔 — Astro 是明顯的選擇。我們在我們的 Astro 開發實踐中廣泛使用它。
Next.js 是當你需要更多互動時的選擇 — 儀表板、經過身份驗證的體驗、動態定價的電子商務、帶有篩選器的搜尋。它的 App Router 默認提供伺服器組件(更少的客戶端 JS),加上增量靜態重新生成,因此你不會在某個人修復拼寫錯誤時重新構建 10,000 頁。我們的 Next.js 開發團隊將其用於任何超出簡單內容網站的項目。
| 指標 | WordPress(典型) | Astro 網站 | Next.js 網站 |
|---|---|---|---|
| Lighthouse 效能 | 40-65 | 95-100 | 85-98 |
| 首位元組時間 | 800ms-2s | 50-100ms (CDN) | 50-200ms |
| 總頁面大小 | 2-5MB | 100-300KB | 200-600KB |
| 發送的 JavaScript | 300KB-1MB | 0-50KB | 80-200KB |
| 需要構建 | 否 | 是 | 是 |
託管成本 → Vercel 或 Cloudflare(免費層級)
託管的 WordPress 並不便宜。WP Engine 的基礎層起價 $20/月,Kinsta 起價 $35/月,一旦你需要暫存環境、CDN 和體面的效能,你輕易就會花費 $50-100/月。這還沒有計入流量激增的情況。
Vercel 的免費 Hobby 層無需花費一分錢就能處理大多數個人和小型企業網站。他們的 Pro 計畫是 $20/月每個團隊成員,包括預覽部署、分析和邊緣函數。Cloudflare Pages 甚至更激進 — 他們的免費層包括無限帶寬和每月 500 次構建。
讓人驚訝的是:一個靜態 Astro 網站在 Cloudflare Pages 上可以處理會導致 $100/月 WordPress 主機崩潰的流量激增。你是在從 CDN 提供文件,而不是在伺服器上運行 PHP。經濟基礎從根本上是不同的。
| 託管 | 免費層級 | 付費起始價 | 帶寬 | 構建分鐘數 |
|---|---|---|---|---|
| Vercel | 是 (Hobby) | $20/月每位使用者 | 100GB | 6,000/月 |
| Cloudflare Pages | 是 | $5/月 (Workers Paid) | 無限 | 500 次構建 (免費),5,000 (付費) |
| Netlify | 是 | $19/月每位使用者 | 100GB | 300 分鐘/月 |
| WP Engine | 否 | $20/月 | 50GB | N/A |
| Kinsta | 否 | $35/月 | 包含 CDN | N/A |
安全補丁 → 無頭架構
WordPress 是網際網路上最受攻擊的 CMS。並非因為它本身不安全,而是因為它是最大的目標,有最多的暴露面。每個外掛都是一個攻擊向量。每個主題函數都是潛在的漏洞。wp-admin 登錄頁面不斷受到暴力破解。
使用無頭架構,你的前端是 CDN 上的靜態 HTML。沒有伺服器端代碼可以利用。沒有資料庫可以 SQL 注入。沒有登錄頁面可以暴力破解。你的 CMS 單獨運行 — 要麼作為託管服務(Sanity、Contentful),其中安全是他們的問題,要麼自託管在身份驗證和防火牆後面(Payload 在私人網路上)。
我不是說無頭網站無法被攻擊。但攻擊面確實大幅縮小。你從保護一個擁有 30 個第三方外掛的 PHP 應用程式轉變為保護一個帶有基於令牌身份驗證的 API 端點。
頁面構建器 → Webflow 或 Framer(對於非開發者團隊)
不是每個團隊都有開發者。如果你的 WordPress 網站存在是因為有人在 Elementor 或 Divi 中構建的,那麼撕掉它並用基於代碼的堆疊替換它可能不合理。
Webflow 是 2026 年最強的 WordPress 頁面構建器替代品。它生成乾淨的 HTML/CSS,包括內置託管和全球 CDN,原生處理表單,並擁有行銷團隊實際上可以使用的 CMS,無需開發者幫助。他們的基礎站點計畫起價 $14/月,CMS 計畫起價 $23/月。
Framer 對於行銷網站變得出人意料地好。對於簡單著陸頁面,它比 Webflow 更快,他們的免費層足夠寬鬆以進行測試。付費計畫起價 $5/月。
這些不是無頭架構 — 它們是全棧視覺構建器。但它們解決了相同的痛點:效能、安全性和維護負擔。
參考架構:3 種有效的模式
在構建了許多這樣的系統後,三種模式涵蓋了我們看到的約 90% 的 WordPress 替換場景。
模式 1:行銷網站 — Astro + Sanity + Vercel
這是我們的麵包和黃油。企業行銷網站、代理機構網站、SaaS 著陸頁面 — 任何內容定期變化但網站基本上是靜態的地方。
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ Sanity │────▶│ Astro │────▶│ Vercel │
│ Studio │ │ (Build) │ │ (CDN) │
│ │ │ │ │ │
│ Content │ │ Static HTML │ │ Global │
│ Editors │ │ Generation │ │ Edge │
└─────────────┘ └──────────────┘ └─────────────┘
│ │
└── Webhook triggers rebuild ────────────┘
工作原理: 內容編輯者在 Sanity Studio 中工作。當他們發佈時,webhook 在 Vercel 上觸發重新構建。Astro 從 Sanity 的 API 獲取所有內容,生成靜態 HTML,並將其部署到 Vercel 的邊緣網路。對於典型的 50 頁網站,整個重新構建需要 30-90 秒。
替換的 WordPress 功能:
- 聯繫表單 → Resend + 無伺服器函數,或 Formspree ($25/月)
- SEO 元資料 → Astro 的內置
<head>管理 + Sanity SEO 架構 - 分析 → Vercel Analytics 或 Plausible ($9/月)
- 圖像優化 → Sanity 的圖像管道或 Astro 中 Vercel 的
next/image等效物
月費: 對於大多數網站為 $0-25(Sanity 免費層 + Vercel 免費層 + 可選 Formspree)
模式 2:部落格/出版物 — Next.js + Payload + Vercel
對於擁有數千篇文章、搜尋功能、標籤/分類和作者頁面的內容豐富的網站。想想媒體網站、公司部落格、知識庫。
// 例子:在 Next.js 中從 Payload 獲取文章
import { getPayloadClient } from '@/lib/payload'
export default async function BlogPage() {
const payload = await getPayloadClient()
const posts = await payload.find({
collection: 'posts',
where: {
status: { equals: 'published' },
},
sort: '-publishedAt',
limit: 20,
})
return (
<main>
{posts.docs.map((post) => (
<ArticleCard key={post.id} post={post} />
))}
</main>
)
}
為什麼選擇 Next.js 而不是 Astro? 增量靜態重新生成。當你有 5,000+ 篇文章時,你不希望在一篇文章更改時重新構建整個網站。Next.js 可以按需重新生成單個頁面。Astro 正在添加類似的功能,但 Next.js 在 2026 年對於這種規模更經過戰場考驗。
為什麼選擇 Payload 而不是 Sanity? 對於出版物,Payload 的自託管模型意味著你完全擁有你的數據。你可以運行複雜的查詢、為編輯者構建自定義管理視圖,並避免按 API 請求定價,這在大規模時變得昂貴。Payload 3.0(於 2024 年末發佈)在 Next.js 上運行,因此你的 CMS 和前端可以共享單次部署。
月費: $20-50(Vercel Pro + Payload Cloud 或用於自託管 Payload 的小型 VPS)
模式 3:電子商務 — Next.js + Shopify Hydrogen + Vercel
如果你在運行 WooCommerce,這是你的升級路徑。Shopify 處理購物車、結帳、付款、庫存和運費。你的 Next.js 前端處理呈現層。
// 例子:從 Shopify Storefront API 獲取產品
const { data } = await shopifyFetch({
query: `
query FeaturedProducts {
products(first: 12, sortKey: BEST_SELLING) {
edges {
node {
id
title
handle
priceRange {
minVariantPrice {
amount
currencyCode
}
}
featuredImage {
url
altText
}
}
}
}
}
`,
})
Shopify 的基礎計畫為 $39/月。他們的 Storefront API 對任何 Shopify 計畫都是免費使用的。你獲得世界級的結帳體驗、欺詐保護和支付處理 — 這些東西從頭開始用 WooCommerce 需要數月才能構建。
月費: $59-99(Shopify 基礎 $39 + Vercel Pro $20 + 可選的非產品內容 Sanity)
遷移成本和時間表
讓我們談論真實的數字。我將按網站複雜性進行分解,因為一個 5 頁的宣傳冊網站和一個有 500 篇文章帶電子商務的部落格是非常不同的項目。
按網站類型的時間表
| 網站類型 | 頁面/文章 | 典型時間表 | 代理機構成本範圍 | DIY 成本 |
|---|---|---|---|---|
| 宣傳冊/行銷 (5-15 頁) | 5-15 | 2-4 週 | $5,000-$15,000 | $0-500 |
| 部落格/出版物 (50-500 篇文章) | 50-500 | 4-8 週 | $15,000-$40,000 | $500-2,000 |
| 電子商務 (WooCommerce 遷移) | 50-500 個產品 | 6-12 週 | $25,000-$75,000 | $2,000-5,000 |
| 企業/多網站 | 1,000+ 頁 | 12-24 週 | $50,000-$150,000+ | 不現實 |
那些 DIY 成本假設你是一個開發者在進行工作,只支付工具和託管費用。代理機構成本基於像我們一樣的專業無頭開發代理機構的當前市場費率 — 你可以 查看我們的定價 了解詳情。
一個現實的 4 週遷移時間表
以下是我們通常為行銷網站遷移遵循的衝刺分解:
第 1 週:內容審計 + 架構
- 導出所有 WordPress 內容(文章、頁面、媒體)
- 將內容類型對應到無頭 CMS 架構
- 設置 CMS(Sanity 項目或 Payload 實例)
- 使用遷移指令碼導入內容
- 設置前端項目(Astro 或 Next.js)
第 2 週:設計系統 + 組件構建
- 構建可重用的組件(頁頭、頁腳、英雄部分、號召行動)
- 實施 Tailwind CSS 或你喜歡的樣式方法
- 將組件連接到 CMS 數據
- 構建頁面範本
第 3 週:功能奇偶性
- 用現代替代品替換 WordPress 外掛
- 表單 → 無伺服器函數 + 電子郵件服務
- SEO → 內置元標籤、網站地圖、結構化數據
- 搜尋 → Algolia、Pagefind 或內置 Astro 搜尋
- 分析 → Vercel Analytics、Plausible 或 Fathom
第 4 週:測試 + 啟動
- 301 重定向對應(對 SEO 至關重要)
- 跨瀏覽器和設備測試
- 效能驗證(Lighthouse、WebPageTest)
- DNS 轉換
- 監控搜尋控制台的爬蟲錯誤
隱藏成本
對這些要誠實:
- 內容清理: 你的 WordPress 內容可能很混亂。短代碼、內聯樣式、外掛特定標記。在遷移期間預留時間進行清理。
- 301 重定向: WordPress 使用
/blog/my-post-title/網址。你的新網站可能使用/posts/my-post-title。每個單一 URL 都需要重定向,否則你會失去 SEO 排名。 - 團隊培訓: 你的內容編輯者知道 WordPress。他們需要學習新的 CMS。預留幾小時進行培訓和文檔編制。
- 第三方整合: 電子郵件行銷、CRM、分析、支付處理器 — 每個整合都需要重新連接。
沒有人談論的內容遷移問題
這是大多數遷移指南隱藏的困難部分。你的 WordPress 內容不是乾淨的結構化數據。它是混合了短代碼、Gutenberg 塊和外掛特定標記的 HTML 湯。
這是一個真實的例子。當你導出它時,這是一個典型 WordPress 文章看起來的樣子:
<!-- wp:paragraph -->
<p>Some text with <strong>bold</strong> and a
[contact-form-7 id="1234" title="Contact form"]</p>
<!-- /wp:paragraph -->
<!-- wp:shortcode -->
[gallery ids="100,101,102" columns="3"]
<!-- /wp:shortcode -->
<!-- wp:acf/hero {"name":"acf/hero","data":{"heading":"Welcome"}} /-->
這些都不能直接轉換為無頭 CMS。你需要遷移指令碼來:
- 將 Gutenberg 塊解析為結構化數據
- 去除或轉換短代碼
- 下載並重新上傳媒體資產
- 將 WordPress 分類/標籤對應到你的新分類法
- 保留內部連結(並將其更新為新 URL 模式)
我們通常為此編寫自定義 Node.js 指令碼。WordPress REST API (/wp-json/wp/v2/posts) 是你的朋友 — 它給你結構化的 JSON,比原始資料庫導出更容易使用。
// 例子:基本的 WordPress 內容遷移指令碼
import { createClient } from '@sanity/client'
const sanity = createClient({
projectId: 'your-project-id',
dataset: 'production',
token: process.env.SANITY_TOKEN,
apiVersion: '2026-01-01',
useCdn: false,
})
async function migratePost(wpPost) {
// 將 WordPress HTML 轉換為 Sanity 的 Portable Text
const body = htmlToPortableText(wpPost.content.rendered)
await sanity.create({
_type: 'post',
title: wpPost.title.rendered,
slug: { current: wpPost.slug },
publishedAt: wpPost.date,
body,
// 對應 WordPress 特色圖像
mainImage: await uploadImage(wpPost.featured_media),
})
}
htmlToPortableText 函數是 80% 的遷移複雜性所在。像 @portabletext/html-to-portable-text 這樣的庫提供幫助,但你仍然需要短代碼和外掛特定標記的自定義處理程式。
遷移期間的 SEO 保護
這是不可協商的。如果你搞砸了 SEO 遷移,你會失去數月的有機流量。以下是檢查清單:
- 在觸及任何東西之前,使用 Screaming Frog 或 Ahrefs 爬取你現有的網站。導出每個 URL、其標題、元描述和規範標籤。
- 將每個 URL 對應到其新的等效物。在電子表格中創建重定向對應。
- 在你的託管平台中實施 301 重定向。在 Vercel 上,這進入
vercel.json或next.config.js:
// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/blog/:slug',
destination: '/posts/:slug',
permanent: true,
},
{
source: '/category/:slug',
destination: '/topics/:slug',
permanent: true,
},
]
},
}
- 在啟動後立即將你的新網站地圖提交給 Google Search Console。
- 每天監控爬蟲錯誤,前兩週特別注意。修復出現的任何內容。
- 保持舊 WordPress 網站運行(但不公開訪問)至少 30 天。你將需要它作為參考。
何時不應該離開 WordPress
如果我不提及這一點,我將不誠實。在某些情況下,WordPress 仍然是正確的選擇:
- 你的團隊是非技術性的,預算在 $5K 以下。WordPress 配合託管主機仍然是非開發者快速啟動網站的最快方式。
- 你需要 50+ 個外掛用於專業功能。會員網站、LMS 平台、複雜論壇 — 有時 WordPress 外掛生態系統確實沒有現代等效物。
- 你的內容編輯者拒絕學習新工具。認真地。如果你的編輯者喜歡 WordPress 管理面板並且不會改變,無論技術如何,遷移都會失敗。
- 你對當前設置感到滿意。如果 WordPress 對你有效,不要修復沒有壞的東西。技術遷移應該解決實際問題,而不是滿足開發者的好奇心。
對於其他一切 — 如果效能很重要、如果安全讓你夜不能寐、如果你厭倦了每次更新後的外掛衝突 — 現代堆疊已經準備好了。如果你想談論你的具體情況,聯繫我們。
常見問題
我應該在 2026 年用什麼堆疊替換 WordPress? 對於行銷網站,使用 Astro + Sanity + Vercel。對於部落格和出版物,使用 Next.js + Payload CMS + Vercel。對於電子商務,使用 Next.js + Shopify 的 Storefront API + Vercel。正確的組合取決於你的網站需要多少互動性,以及你的團隊是喜歡託管 CMS(Sanity)還是自託管的(Payload)。所有三種模式在速度、安全性和維護負擔方面都遠優於 WordPress。
現代堆疊比 WordPress 便宜嗎? 通常是的 — 對於持續成本。一個典型的 WordPress 設置配合託管主機(WP Engine 或 Kinsta)、高級主題和高級外掛每月運行 $50-150。Vercel 免費層上的 Astro 網站配合 Sanity 免費計畫每月成本 $0。即使使用付費層級,你通常也在 $50/月以下。不過,初始遷移成本要高得多 — 根據網站複雜性,預計投資 $5,000-$40,000,與保留在 WordPress 上的幾乎零成本相比。
WordPress 遷移需要多長時間? 簡單的行銷網站(5-15 頁)需要 2-4 週。擁有數百篇文章的部落格需要 4-8 週,主要是因為內容遷移和重定向對應很耗時。從 WooCommerce 到 Shopify + Next.js 的電子商務遷移通常需要 6-12 週。最被低估的任務是內容清理 — WordPress 內容滿是需要手動注意的短代碼和外掛特定標記。
如果我從 WordPress 遷移,我會失去 SEO 排名嗎? 如果你做得正確,就不會。關鍵步驟是:在遷移前爬取你的現有網站,為每個 URL 創建完整的 301 重定向對應,將你的新網站地圖提交給 Google Search Console,並在啟動後的兩週內監控爬蟲錯誤。大多數網站在排名中看到 2-4 週的暫時下跌,然後恢復或改進 — 因為新網站更快,在 Core Web Vitals 上得分更好。
非技術編輯者可以使用 Sanity 或 Payload 這樣的無頭 CMS 嗎? 可以,稍作調整。Sanity Studio 是在瀏覽器中運行的視覺編輯器 — 與 WordPress 不同,但不難。Payload 的管理面板乾淨直觀,適合任何使用過基於資料庫的 CMS 的人。對於基本內容編輯,學習曲線通常是 1-2 小時。也就是說,如果你的編輯者深深陷入 WordPress 工作流中並且抵制更改,請計算培訓時間和耐心。
使用無頭設置時,我還需要後端開發者嗎? 對於初始構建和遷移,是的。有人需要設置 CMS 架構、構建前端組件、編寫遷移指令碼和配置部署。啟動後,大多數內容更新根本不需要開發者 — 編輯者在 CMS 中工作,網站自動重新構建。你將定期需要一個開發者進行結構性更改(新頁面類型、新功能),但與 WordPress 相比,日常維護負擔大幅下降。
我的 WordPress 聯繫表單、SEO 外掛和分析會怎樣? 每個外掛都被替換為現代等效物。聯繫表單變成配對電子郵件服務(如 Resend)的無伺服器函數,或者像 Formspree 這樣的託管解決方案。SEO 由 Astro 或 Next.js 原生處理 — 元標籤、網站地圖和結構化數據內置在框架中,不需要外掛。分析移到 Vercel Analytics、Plausible 或 Fathom。關鍵區別:不是 20 個外掛做 20 件事情,而是你擁有不製造安全漏洞或減慢網站速度的目標工具。
如果我不是開發者,我應該使用 Webflow 而不是無頭 CMS 嗎? 如果你團隊中沒有開發者,並且不計劃僱用任何人,Webflow 可能是比無頭設置更好的選擇。它給你視覺設計控制、內置託管、表單和 CMS — 全部無需編寫代碼。計畫起價 $14/月用於基礎網站。權衡是靈活性:與 Next.js 或 Astro 構建相比,Webflow 網站更難使用自定義功能進行擴展。不過,對於大多數小型企業行銷網站,Webflow 涵蓋了你需要的一切。