Static Frontend 如何運作

第一階段

先確認網站是否適合轉換

第一階段在指定目錄建立靜態輸出,檢查頁面與資源,不變更正式網站的路由。

目標架構

再建立正式的靜態前端

目標架構是將 WordPress 留在 cms 子網域,由主網址提供公開網站,並逐步完成受控的內容更新流程。

九項相容性檢查

Static Frontend 以 WordPress 作為內容管理與前台渲染來源,將網站建置、驗證並發布成可獨立瀏覽的靜態前端。

頁面內容

相容性檢查

選單導覽

相容性檢查

圖片資源

相容性檢查

CSS 樣式

相容性檢查

JavaScript 互動

相容性檢查

站內連結

相容性檢查

SEO 資訊

相容性檢查

表單行為

相容性檢查

行動裝置版面

相容性檢查

從相容性檢查開始

先看現有網站能否完整產生靜態成果,再決定如何部署與維護公開前端。

先建置、檢查,再規劃部署

以檢查結果作為部署與維護公開前端的依據。

轉換檢查範圍

  • 頁面內容
  • 選單導覽
  • 圖片資源
  • CSS 樣式
  • JavaScript 互動
  • 站內連結
  • SEO 資訊
  • 表單行為
  • 行動裝置版面
  • CMS 來源網址
  • 公開前端網址

發布規劃

  • 指定目錄建立輸出
  • 不變更正式網站路由
  • 檢查頁面與資源
  • 分離 CMS 與公開網站
  • 發布前驗證
  • 內容變動同步
  • 錯誤頁面攔截
  • 建置紀錄
  • 持續相容性測試

查看示範成果

從首頁、內容頁到文章列表,實際檢查同一套 WordPress 內容在靜態前端的呈現。

想了解 WordPress 靜態前端如何運作?

先瀏覽這個示範網站,再看看內容如何從 CMS 轉換為公開前端。我們會持續記錄開發進度與實測結果。

閱讀開發紀錄