在Netlify上免費部署多語言WordPress部落格的最佳方法

您是否有一個 WordPress 網站,但覺得它的速度很慢?
也許您想有個更快的網站,卻又擔心切換到其他 CMS 平台會有很多困難。現在,有一個好方法可以解決這個問題,就是將 WordPress 轉換成靜態網站,然後部署到 Netlify 上發佈。這樣做不僅可以提高您的網站速度,還可以減少維護成本和安全風險。

Netlify 是一個很熱門的現代化網頁開發平台,專門為靜態網站而設計。它可以讓你更輕鬆、快速地開發和部署網站,將你的 HTML、CSS、JavaScript 和其他靜態資源部署到全球 CDN 網路上,能夠高效且安全地向全球提供您的網站內容。

與 Netlify 不同,傳統的 WordPress Hosting 由一個主機或一小群伺服器提供服務,主機雖然可以提供動態網站功能,讓使用者安裝和管理 WordPress 網站,並提供資料庫、外掛、主題等支援。然而,網站速度會受主機的性能限制,尤其會影響到跨地區服務,需要通過付費的 CDN 外掛來改善速度和穩定性。此外,主機有遭受網絡攻擊的風險,必須經常性對外掛或主題進行更新,以修復漏洞來確保網站的安全性。

如果你的網站主要是展示靜態內容,例如部落格、個人網頁、作品集等,那麼將 WordPress 網站搬遷到 Netlify 會是一個更好的選擇。一旦您學會了如何使用 Netlify,你就可以省去很多在 WordPress 主機上進行維護和優化的麻煩,讓您獲得一種前所未有的體驗和快感。我認為至少有五個誘因,值得您立即試試看:

  1. 通過 Netlify CDN 讓您的網站在世界各地都更快速、更順暢;
  2. 增加安全性,因為無需將 WordPress 後台暴露在互聯網上;
  3. 減少管理、更新和維護主機、外掛及主題的工作與費用;
  4. 免費託管您的網站,省掉租用主機的費用;
  5. 在所有網站上獲得免費的 HTTPS,以及憑證的自動更新。

Netlify 的免費計劃絕對會是您創建新網站項目的理想地點。尤其是當您要架設一個多語言網站,是以全球而非僅某個區域的用戶群為目標對象,將可最大化體現到在 Netlify 上發佈網站的好處。

若在傳統主機上架設的多語言 WordPress 網站,翻譯外掛都會導致 WordPress 的處理效能下降,拖長網頁的加載時間,且不只是經過翻譯的頁面就連原文都也會受到影響。

此外,由於與主機之間的距離會增加網路延遲,因此當跨區用戶訪問網站時頁面的加載速度會更慢。這些問題會給網站使用者帶來非常糟糕的瀏覽體驗。

“We know slow WordPress plugins is one of the biggest performance killers in the WordPress ecosystem.”

WordPress 專家
Jonathan Sulo

如果您將網站部署到 Netlify 上,則可以解決這個問題。當頁面或文章在編輯好之後,經由一個稱為 WordPress 靜態化的處理產生靜態網頁,類似在主機上建立緩存,先從 WordPress 預先渲染頁面,然後將輸出的靜態文件和媒體(包括 HTML、CSS、JavaScript 和圖像)檔案上傳至 Netlify 發佈。由於靜態 HTML 輕量小巧,通過 Netlify 的 CDN 節點加速,因此網頁可以快速傳送到世界各地。

不過您需要了解 WordPress 將並非安裝到 Netlify 上,而是要在本地電腦或其他伺服器上建立一個 WordPress 網站的開發環境。

本文將介紹將 WordPress 內容發佈至 Netlify 上的基本步驟。接下來,是動手的時間!


在您開始之前

將 WordPress 遷移到 Netlify 真的很棒,但是您必須事先了解有那些限制。想確定是否適合動手,我建議您先回答以下的問題再考慮一下:

  • 您的網站並不只是由您來運作,需要允許其他管理員(或作者)登入到 WordPress 控制台(或後台的編輯系統)嗎?
  • 您不希望將留言轉移至第三方平台上管理和儲存,要在您的網站上使用 WordPress 內置留言功能嗎?
  • 除了 WordPress 內置留言和搜尋功能,您的網站還包含其他需要使用伺服器端 PHP 和/或 WordPress 資料庫來運行的動態內容、功能和服務?

若任何上述的條件適用於您,本文介紹的方法將不適合作為您的解決方案。您應該繼續選用傳統的 WordPress 主機服務商來託管您的網站。

在Netlify上免費部署多語言WordPress部落格的最佳方法 1
rocket.net
WPForms

本文裏的範例使用了 Polylang 這個外掛來構建多語言 WordPress 網站。如果您採用其他翻譯外掛,請確認該外掛允許您為不同語言的頁面建立獨立的 URL 路徑,例如 /en/page1/ 用於英語,/fr/page1/ 用於法語。

另外,您需要一台個人電腦作為架設 WordPress 網站的本地開發環境。即使您已經有一個在 WordPress 主機上運作中的網站,亦應該建立一個獨立於生產環境的開發環境。這樣做永遠是個好主意,可以避免影響或損毀到正在運作中的東西。請按照接下來的兩節,使用 Docker 創建本地開發環境,並將您現存的 WordPress 站點拷貝至此。


設定本地開發環境

有多種方法可以在您的電腦本機上設定 WordPress 開發環境。譬如,您可以:

  1. 在虛擬機架設 LAMP/MAMP/XAMMP 伺服器,然後再在虛擬機上安裝 WordPress
  2. 使用 LocalLandoInstant WordPress 等軟件安裝 WordPress 架設套裝;
  3. 使用 Lokl 運行預建的 WordPress 套裝容器;
  4. 使用 Docker 配置自訂的 WordPress 套裝,部署及運行這些套件的容器。

一開始我嘗試用 Local 去弄,因為它最容易安裝和使用。但是,它在我的 Windows 系統上運行時卻與預期不乎。似乎是因為 Local 與 Polylang 外掛存在兼容性問題,導致瀏覽器出現 ERR_TOO_MANY_REDIRECTS 錯誤,所以無法開啟網站頁面。

因此,為了使我可以更好地掌控 WordPress 開發環境,我選擇了用 Docker。通過部署最基本的套件(即 WordPress 和 MySQL 的容器),就能更容易弄清楚它的運作。

您不必捆綁 NginxphpMyAdmin,亦無需提供啟用 HTTPS 的 SSL/TLS 證書。從最精簡的配置起步,將更容易進行部署和偵錯,使您不會被多餘的擴充套件弄得頭昏腦脹。

使用 Docker Compose 在本地設定和運行 WordPress

先決條件

  • 若您是使用 macOS 或 Linux 作業系統:
    • Docker
  • 若您是使用 Windows 作業系統:
    • Windows Linux 子系统 (WSL)
    • Docker for Windows

操作步驟

首先,為專案創建一個新文件夾,然後在該文件夾中創建一個名為 docker-compose.yml 的新檔。

接著,使用文本編輯器(如 Visual Studio Code)編輯 Docker Compose 檔。以 YAML 格式指定 WordPress 和 MySQL 容器的配置,如下所示:

將上面的 Gist 複製到你的 Docker Compose 檔中。然後,通過更改以下的參數的值來設定 WordPress 和 MySQL 的使用者名和密碼:

  • WORDPRESS_DB_USER
  • WORDPRESS_DB_PASSWORD
  • MYSQL_USER
  • MYSQL_PASSWORD

然後,在專案的根文件夾下創建兩個名為 htdocsdb 的新文件夾。您的 WordPress 和 SQL 檔案將會分別儲存在它們之中。

現在你已準備好使用 Docker 來運行 WordPress 的最基本材料。那麼,就可以讓它運作起來!

要啟動 WordPress,請在終端中執行下方的命令:

Shell

在第一次運行時,Docker 會花一些時間從 Docker Hub 下載所需的 Docker 鏡像。然後,初始化新網站,將複製 WordPress 的核心文件並創建 SQL 資料庫至指定的儲存位置。

local-wordpress running on Docker Desktop

容器準備就緒后,您就可以通過在瀏覽器中訪問 http://​localhost 來打開 WordPress 網站。

Initial setup after installing WordPress
安裝 WordPress 後的初始設置頁面

要關閉 WordPress,請在終端中執行下方的命令:

Shell

備註 #1:配定 PHP 環境

要使 WordPress-to-Static 外掛正常運作,您需要修改 WordPress 容器內的 PHP 設置。

在專案文件夾的根目錄中創建一個名為 wordpress.ini 的檔案,並將下方的設置複製到該文字檔中:

Plain Text

這會增加運行 PHP 進程的 memory_limit 和 max_execute_timeout,容許更多記憶體和 CPU 資源用於輸出靜態網站處理。特別是當你的 WordPress 是一個大型網站,這些配置將尤其重要。

備註 #2:Docker Volume 的寫入權限

如果 Docker 無法將 WordPress 和 SQL 文件夾寫入資料,請嘗試通過在終端中執行以下的命令,將文件夾權限更改為可從 Docker 容器進行寫入操作:

Shell

† 備註:權限 777 意味著在您的操作系統上任何用戶都可以修改、執行和寫入檔案。就長遠而言,這可能會導致安全和隱私問題。

備註 #3:使用通訊埠 80

在預設的情況下,Docker Desktop 通過本地電腦的通訊埠 80 與 WordPress 容器的通訊埠 (port 80) 連接來訪問網站。

假如主機上的通訊埠 80 已被其他程式佔用,您可以通過 Port Mapping 將容器連接到不同的通訊埠。例如,連接 localhost:8080 訪問 WordPress。

不幸的是,我發現 WordPress-to-Static 這類外掛並不太支援 Port Mapping,會無法偵測和抓取通訊埠為 8080 的網站頁面。雖然並不完美,但是建議先停用其他程式,將本地電腦的通訊埠 80 暫先讓給 WordPress 使用,以保障外掛可正常工作。


將現存的 WordPress 遷移到本地環境

WPvivid – 移轉、備份、建立測試環境

WPvivid – 移轉、備份、建立測試環境

Migrate, staging, backup WordPress, all in one.

WPvivid Team

WPvivid Backup 免費且易於使用,當要備份並將 WordPress 遷移到另一台主機的時候,它是我最喜歡用的 WordPress 外掛。

在Netlify上免費部署多語言WordPress部落格的最佳方法 2
WPvivid Backup UI 上的手動備份設置

該外掛可以將 WordPress 的檔案和資料庫備份為 ZIP 格式的壓縮檔,再讓您從 WordPress 控制台下載這些備份檔。

在Netlify上免費部署多語言WordPress部落格的最佳方法 3
WPvivid Backup UI 上可用的備份檔

當要從備份還原網站的時候,將 ZIP 格式的壓縮檔下載到您的電腦,再移至於 htdocs 文件夾下 wp-content/wpvividbackups 這個位置裡。登入本地 WordPress 的後台,然後按 WPvivid Backup 介面中的 “Scan” 按鈕偵測備份檔,再點擊 “Restore” 開始「還原/遷移」程序。

在Netlify上免費部署多語言WordPress部落格的最佳方法 4
WPvivid Backup UI 上
關於 “如何從備份還原您的網站” 的說明

完成後,您應該看到網站已複制到本地主機。而且,需要利用在原有網站上的使用者和密碼,才能夠重新登入本地 WordPress 的後台。


停用和刪除緩存和CDN外掛

在Netlify上免費部署多語言WordPress部落格的最佳方法 5

我們的目標是使本地網站上的所有內容和頁面資源可被抓取,從而將完整的靜態副本部署到 Netlify 上。

在開發過程中,本地 WordPress 不需要緩存和 CDN 外掛來改善頁面載入時間。安裝任何預加載和緩存網站頁面的外掛都將佔用大量電腦的 CPU 和記憶體資源。

WordPress-to-Static 外掛會首先通過類似的過程,將所有頁面的靜態副本上傳到 Netlify。因此,緩存外掛將是多餘,並反過來可能會增加處理過程中發生故障和錯誤的機會。

刪除 CDN 外掛以斷開與原有 CDN 服務的連接,防止錯誤重寫和重定向圖像和資源檔案的下載路徑。Netlify 會將您上傳的網站自動部署到其全球 CDN 以作取代。

在Netlify上免費部署多語言WordPress部落格的最佳方法 6
應該從本地 WordPress 中刪除的一些外掛例子

修復 Polylang 路由問題

Texts means welcome in multiple languages

透過利用 Netlify CDN,您的正式上線網站將在全球範圍內能被快速加載,更有利於吸引不同語言的受眾。接下來,來看看有關 WordPress 網站的多語言設置。

許多的多語言網站會在 URL 路徑中,使用語言前綴來區別不同的語言內容,例如: mysite.com/en/page1

大多數 WordPress 翻譯外掛都支援這樣修改網頁的 URL 格式,將原本的永久連結重定向至翻譯頁面。

然而,有一個常見的問題,在遷移之後 WordPress 網站的頁面出現無法開啟的情況。這是因為某些 URL 仍然指向舊的網站域名。特別是當 WordPress 安裝了翻譯外掛,就會更容易引致這種情況。

在Netlify上免費部署多語言WordPress部落格的最佳方法 7
Polylang 支援的 URL 修改設置

以 Polylang 此外掛為例,您可能會遇到網站的主頁無法開啟。您可以先暫時停用該外掛,查看頁面是否恢復顯示。然後,通過以下的步驟解決問題:

  1. 在 WordPress 控制台中重新啟用 Polylang 外掛。
  2. 導航到頁面」管理介面,然後將每種語言的主頁用編輯模式開啟並再次保存。
  3. 開啟「設置 > 閱讀」頁面,然後將「您的主頁顯示」設定為「靜態頁面」,在「主頁」選項的下拉清單中,選擇用作預設語言主頁的頁面。

完成之後,Polylang 外掛應該將 URL 進行重寫,按照設置修正主頁的顯示問題。


安裝及設定 WP2Static 外掛

雲端設置

WP2Static 是一個由 Strattic 管理的免費開源外掛,能夠將 WordPress 轉換為靜態網站。最簡單的安裝方法是從官方網站的「下載」 頁面取得最新的外掛模組封包。

您需要填寫您的姓名和電子郵件地址,並同意接收來自 Strattic 的電子報及促銷訊息。然後,您將收到一封提供下載連結的電子郵件。

Download WP2Static - Grab the latest WP2Static download!

在您的電腦下載外掛模組封包,並解壓以提取 WP2Static 核心模組及其插件的 ZIP 格式的外掛壓縮檔。

之後,導航到 WordPress 控制台中的「外掛 > 安排外掛」頁面,點擊「上傳外掛」以上載 ZIP 格式的外掛壓縮檔並安裝外掛。

要將 WordPress 網站部署到 Netlify,您必須安裝 WP2Static core 和 WP2Static Netlify Deployment Addon 這兩個外掛.

啟用外掛後,導航到 WP2Static > Diagnostics 頁面,檢查您的 WordPress 網站是否通過了所有健康檢查。

WP2Static Diagnostics 頁面

導航到 WP2Static > Addons 頁面。啟用 Netlify Deployment 插件並點擊齒輪(⚙ )圖標以打開其設置頁面,填入從您的 Netlify 控制面板獲取 Site ID 和 Personal Access Token

在Netlify上免費部署多語言WordPress部落格的最佳方法 8
WP2Static Addons 頁面
在Netlify上免費部署多語言WordPress部落格的最佳方法 9
「WP2Static Netlify Deployment Options」頁面

如果您還沒有 Netlify 使用者帳戶,請到官方網站註冊一個免費計劃帳戶。登入到你的 Netlify 控制面板之後,導航到 Sites 頁面,然後使用 ”Add new site” 選單創建您的 Netlify 專案。

Site ID 是 Netlify 分配給每個專案的唯一識別碼。您可以從 Site settings > Site details > Site information 中找到它。

接下來,導航到 User settings > Applications 頁面並生成 personal access token,這是用來允許您的 WordPress 訪問 Netlify 的 API。

該專案還會提供一個格式為 [name-of-your-site].netlify.app 的 Netlify 子網域作為你的網站地址。您可以在 Netlify 控制面板,通過修改的網站名稱來自訂子域名。

您可直接用 Netlify 子網域作為您網站的主要網址,或者導航到 Site settings › Domain management 指派 custom domain 與 domain alias

在 WordPress 控制台中,導航到 WP2Static > Options 頁面。在 Post-processing 設置選項,將您的主要網址填寫到 Deployment URL 的文字輸入框,在輸出靜態網站時對 HTML文件內的 http://​localhost 字串進行取代。

將網站的公開 URL 添加到 WP2Static Options 頁面

導航到 WP2Static > Run 頁面。點擊 “Generate static site” 按鈕開始處理 WordPress 網站。取決於您網站上的頁面數量有多少,此過程將需要幾分鐘至半小時。

您可以點擊 “Refresh logs” 來跟踪進度。完成後,您應該會看到一系列日誌記錄,如下所示:

2022-12-01 12:08:48: Netlify deploy complete. 8365 deployed.
2022-12-01 12:04:39: Starting Netlify deployment.
2022-12-01 12:04:39: Starting deployment
2022-12-01 12:04:39: Post-processing completed
2022-12-01 12:04:39: Finished processing crawled site.
2022-12-01 12:04:33: Processing crawled site.
2022-12-01 12:04:33: Starting post-processing
2022-12-01 12:04:33: Crawling completed
          ⁞
2022-12-01 12:00:04: Starting to detect WordPress site URLs.
2022-12-01 12:00:04: Starting URL detection
2022-12-01 12:00:04: Running WP2Static in Headless mode
2022-12-01 12:00:04: Running full workflow from UI

現在您的網站已經上線,在瀏覽器中查看已部署的網站,檢查它看起來是否與本地環境相同。

恭喜您,如果網站上的一切都完美無缺!

儘管如此,您可能仍然會發現缺少一些東西。讓我們進一步看看一些常見問題,並了解如何修復它們。


使用第三方外掛取代 Google Site Kits

Site Kits by Google Panel

如果你並沒有使用 Site Kit by Google 這個外掛來連接 WordPress 與 Google AdSense、Google Analytics 和/或 Google Tag Manager,您可以略過此部分並跳至下一節。

Site Kit by Google 外掛需要您登入並使用您的 Google 帳戶授權,以允許它訪問 Google 數據,並自動設定服務。只有當 WordPress 伺服器可在互聯網上被公開訪問時才能夠激活它,而在本地電腦上則無法啟用。

WordPress.org 上與 Google 相關的產品的外掛清單

因此,您必須使用第三方外掛以連接這些 Google 服務。您可以從 WordPress.org 網站或您的 WordPress 控制台中,輕鬆找到並下載替代 Site Kit by Google 的免費外掛。


將 URL 重新導向匯入到 Netlify

指向不同方向的箭頭

對於大型且有歷史的網站,很可能會因為以下的幾種情況而需要網頁重新導向:

» 更改過網站域名
» 想改善 SEO
» 從網站刪除過某些頁面
» 對一個網頁進行過更新
» 舉辦過某些限時促銷活動

您可能在 WordPress 中手動設定了重新導向,也可能一些 SEO 外掛會在創建或更新文章或頁面時自動生成重新導向。這些重新導向仍在 localhost 上生效,但是並不會自動將設置複製到你在 Netlify 上的網站。

要  Netlify 上啟用重新導向,您必須通過將重新導向的規則編寫到一個叫 _redirects 或 netlify.toml 檔案,再將檔案添加到您網站的「發佈文件夾」。

Redirection

Redirection

Manage 301 redirects, track 404 errors, and improve your site. No knowledge of Apache or Nginx required.

John Godley

您可以安裝由 John Godley 開發的 Redirection 外掛,從 WordPress 匯出重新導向的規則。該外掛支援匯入 Apache .htaccess 和熱門 SEO 外掛的重新定向設置,再匯出為 CSV 或 JSON 格式文件。

在文字編輯器中,按照 Netlify 文檔將重新定向的規則格式化,例如:

Plain Text

儲存為叫 _redirects 沒有副檔名的純文字檔案。然後,將該檔案移動至 wp-content\uploads 下的 wp2static-processed-site 文件夾中。

導航到 WP2Static > Run 頁面。點擊 “Generate static site” 按鈕將更改部署到 Netlify。

† 備註: 若您從 WP2Static 介面執行清除緩存,會一併刪除將 _redirects 檔案。有一個更好的做法,就是將該檔案儲存在 WordPress 的根文件夾中,然後在 WordPress 插入自訂程式碼片段在 WP2static 的管道中插入將指定文件抓取到緩存的指示。相關說明,會在文章稍後的部份更詳細講解。


自訂 404 頁面

當請求的 URL 不存在時,WordPress 伺務器會動態生成一個 404 頁面。由於不是一個常規頁面,因此 WP2static 外掛無法檢索並抓取到它。

當靜態網站部署到 Netlify 上時,訪客將會看到一個與您的網站主題格格不入的 Netlify 預設 404 頁面。

在Netlify上免費部署多語言WordPress部落格的最佳方法 10
Netlify 預設 404 錯誤頁面

您可以通過以下的其中一種方法添加自訂 404 頁面來解決此問題:

  1. 手動將 404 頁面匯出為 404.html,將它存放到網站的「發佈文件夾」。
  2. 在 Netlify 上設定重新導向規則在遇上不存在的 URL 時轉向至指定頁面。
ERROR 404! 插圖

若要按語言顯示不同的 404 頁面,則須使用上述的第2種方法以允許按語言重新導向,在 _redirects 檔案的結尾添加重新導向規則,如下方的例子:

Plain Text

使用 Algolia 取代 WordPress 搜索功能

如果您的 WordPress 主題或頁面佈局含有搜索框,供找尋在網站上查內容,您則需要關注這個部分。由於在靜態網站上的搜索框,將不會連接到 WordPress 的內置搜索引擎,因此您需要採用 Serverless 方案來接管網站上的搜索功能。

搜索框 插圖

Algolia 是一個有名的雲端搜索服務平台,提供頁面索引及網站的全文搜索功能。其免費計劃支援每月 10,000 個索引記錄及 10,000 個搜索請求。如果您的網站屬於規模小且低流量,您可以一直免費享受 Algolia 的功能和服務。

您需要安裝 WP Search with Algolia 這個 WordPress 外掛,將 Aloglia 整合到您的 WordPress 網站,讓您設定可供索引和搜索的頁面和數據類型。以及,將 Algolia 的 JavaScript 插入到您的 WordPress 主題,為搜索框添置自動填入功能。

WP Search with Algolia

WP Search with Algolia

Use the power of Algolia to enhance your website's search. Enable Autocomplete and Instantsearch for fast and accurate results and relevance.

WebDevStudios

您將需要 Algolia 的 API 密鑰來設定外掛。請登入到您的 Algolia 帳戶的控制面板,從左窗格導航到 Settings > API Keys 頁面。然後,將 Application ID、 Seach-Only API Key,以及 Admin API Key 複製並填寫到外掛的設置頁面中,再按 “Save Changes” 儲存設置並獲取存取權限。

在Netlify上免費部署多語言WordPress部落格的最佳方法 11
「Algolia 控制台 > Settings > API Keys page」頁面
在Netlify上免費部署多語言WordPress部落格的最佳方法 12
「WordPress 控制台 > Algolia Search > Settings」頁面

導航到 Algolia Search > Search Page 頁面,然後切換至選用 “Use Algolia with Instantsearch.js” 來顯示搜索結果。

在Netlify上免費部署多語言WordPress部落格的最佳方法 13
「WordPress 控制台 > Algolia Search > Search Page」頁面

之後,系統會要求您為所有帖文編制索引。但,先在這裡停一停!

For Algolia search to work properly, you need to index: All posts

在繼續操作之前,您必須在 WordPress 中增插入一個自訂程式碼片段來命令外掛執行 URL 重寫,將 http://​localhost 取代為您網站的部署 URL。

Code Snippets

Code Snippets

An easy, clean and simple way to enhance your site with code snippets.

Code Snippets Pro

最簡單的做法是使用 Code Snippets 外掛來插入 PHP 程式碼。創建一個新的 snippet,然後複製並貼上以下的程式碼片段:

development_url() 函式中的 https://yoursite.com 取代為您網站的部署 URL,然後按 “Save Changes and Activate” 存儲設置並啟用該自訂程式碼片段。

在這個階段,在搜索框中按 Enter 鍵仍然會被導向 WordPress 內置的搜尋結果頁面,即 /?s=SEARCH_TERM。要改為顯示由 Algolia 提供的搜尋結果,您需要創建一個新頁面,複製並貼上以下的自訂 HTML:

以上的代碼片段是修改自外掛 wp-search-with-algolia/templates 文件夾內的 instantsearch.php 檔案,它將生成出如下圖所示的搜索結果頁面。

clean a floor
顯示「Algolia 搜索結果」的自訂頁面樣本

使用 Polylang 建立其他語言的翻譯頁面。之後,在 _redirects 檔案的開頭,添加如下的重新導向規則,

Plain Text

撤換表格

聯繫表格範例

聯繫方式和電子報訂閱表格也是網站上的常見元件。若那些表單是透過 WordPress 伺服器來處理提交表單的請求,將會無法在 Netlify 上運作。您可以將它們替換為:

  • Netlify Forms
    Netlify 的免費計劃為每個網站提供每月 100 個限額供處理表格提交。當超過免費用量時,Netlify 會對接下來的 1000 個提交收取 19 美元,其後每 500 個提交額外收取 9 美元 (請參閱 Forms Pricing | Netlify)。所有透過 Netlify Forms 提交的內容都會收集到您網站的 Netlify 控制面板,在其 Forms 分頁中查看得到每一筆記錄。
  • 嵌入式線上表格
    嵌入在線表單且易用的解決方案,例如:Google FormsHubSpot FormsJotformMailchimp Signup Forms 等。

使用 Disqus 取代 WordPress 留言功能

信息氣泡

基於同樣的原因,WordPress 的內置留言功能也無法在 Netlify 上運作。您可以改用 Facebook 留言外掛程式,但我更推薦採用 Disqus,一個免費且廣受歡迎的的留言平台,去接管這項工作。

您需要安裝 Disqus Conditional Load 這個 WordPress 外掛,它可將現有的留言從 WordPress 匯入到 Disqus 中。安裝後,該外掛會停用 WordPress 的內置留言功能,再將加載 Disqus 的代碼插入到您的 WordPress 主題中。

Disqus Conditional Load

Disqus Conditional Load

Use Disqus comments with advanced features like lazy load, shortcode, widgets etc. Don't let Disqus to slow your site down.

Joel James

當您的網站發佈至線上,Disqus 留言區就會顯示在文章頁面上。您可以透過登入 Disqus 帳戶的管理面板,微調留言區的佈局和風格。

須要注意的是,使用 Disqus 的免費計劃會在網站流量達到一定水平之後,在留言區插入廣告。您可以升級至付費計劃來移除廣告,收費為每月 11 美元起。


進行最終檢查

通過上述修改,您的網站就該準備就緒!
儘管如此,您應該在網站正式上線之前進行以下的檢查。

執行失效連結檢查器,掃描即將公開的網站中是否出現一些找不到的頁面、圖像和資源檔。在 WordPress 中修正有問題的 URL,然後再次執行 WP2Static 將更新部署到 Netlify。

您可能會發現某些 URL 始終無法被 WP2Static 偵測得到,需要通過下方的自訂程式碼片段將這些網站資源手動添加回來,

另一方面,您或者需要從 Algolia 搜索排除特定的頁面。添加下方的自訂程式碼片段修改 WP Search with Algolia 外掛的索引程序,

盡可能將所有可能存在的漏洞填補,並在仔細檢查網站的桌面版和手機版,內容是否正確顯示,各項功能是否正常運作。

這樣就一切都妥當了!我希望您也成功將您的 WordPress 網站部署到 Netlify 上,與那些舊式的主機服務提供商說再見!🙂


常見問題

您可以點選區塊的選項,然後選擇「編輯 HTML 程式碼」選項。在 HTML 代碼中 http://localhost 插入一個 ​ HTML 字元。

† 備註若在此後您編輯於區塊中的文字,則手動插入的 ​ HTML 字元會被自動刪除。

您可以在 Windows 10 的 WSL 上安裝和使用 LocalWP,如果在 Linux 子系統上安裝並啟用了 XServer 以提供 GUI 支援。但是,某些功能將無法使用,包括 Live Links, SSL in Local, 及 Site Domains Router Mode


了解更多

靜態 WordPress:

比較 Jamstack 與 WordPress:

在本機上運行 WordPress:

WordPress Stacks 擴充元件:

WordPress 翻譯外掛:

在 WordPress 中插入自訂程式碼片段:

靜態 WordPress 中缺失的功能及其解決方案:


如果您喜歡這篇文章,請分享到您的 Facebook 和 Twitter。您也可以通過 Ko-fi 捐款支持本站。

Scroll to Top