從 Webflow 遷移到 WordPress 的簡單 7 步指南

由於其拖放式編輯器和預先設計的模板，Webflow 使得無需代碼即可輕鬆創建網站。

但隨著您的需求增長，您可能會面臨限制。

創建在線會員的功能仍處於測試階段，而 WordPress 多年來一直使用 SureMembers 等插件提供此功能。

需要一個令人驚嘆的電子商務網站？ 使用 SureCart 建立高轉化率商店。

Spectra 等強大的插件將為您提供設計塊、線框和模板，以輕鬆創建漂亮的網頁。

我們可以繼續……

關鍵是您不需要受限於專有軟件。 您可以使用 WordPress 獲得更多更好的結果。

這就是為什麼在本指南中您將看到如何逐步從 Webflow 遷移到 WordPress 。

一種創建和管理網站的新方法正等著您。

讓我們開始吧！

通過將您的網站從#Webflow 遷移到#WordPress，進入一個靈活和控制的新時代。

從 Webflow 遷移到 WordPress 需要什麼？

從 Webflow 遷移到 WordPress 時，您只需要幾個基本要素。

Webflow 提供創建和維護功能性網站所需的所有元素。

1. webflow.io 上的子域或連接自定義域的可能性。
2. 創建網站的軟件。
3. 託管以容納所有站點元素。

要遷移到 WordPress 網站，您首先需要自己複製這些資源。

1. 域名。 如果您已經在 Webflow 上擁有自定義域，則需要將其指向您的新主機。
2. 站點功能。 您需要安裝 WordPress。 還需要一個專業的主題和一些插件來複製一些 Webflow 功能。
3. 託管。 這是您存儲網站所有內容的地方。

這聽起來可能很多，但您會發現這是一個非常簡單的過程。

如何逐步從 Webflow 遷移到 WordPress

遷移包括使用 WordPress 創建一個新平台，然後將內容從 Webflow 移動到您的新站點。

讓我們看看如何逐步實現這一目標。

步驟 1. 獲取主機

首先，您需要 WordPress 託管，您將在其中安裝和存儲所有內容。

我們建議使用 Hostinger 或 CloudWays，因為它們以合理的價格提供一系列可靠的計劃。

對於此示例，我們將使用 Cloudways。

但是您可以按照 Hostinger 或任何其他主機提供商的步驟進行操作，因為該過程非常相似。

Cloudways 提供從基本到最高級的一系列託管選項。 我們認為 Digital Ocean 基本計劃應該足夠了。

.

該計劃提供 1TB 的帶寬。 甚至連 Webflow 的 39 美元/月商業計劃都無法提供。

入門可能綽綽有餘，但您隨時可以根據需要隨時升級。

步驟 2. 安裝 WordPress

註冊後，您必須在剛購買的 Cloudways 服務器上安裝 WordPress。

1. 選擇 WordPress 作為您要安裝的應用程序。
2. 選擇大多數客戶所在的最近位置。

如果需要，此時可以增加服務器大小。

否則保留所有參數，然後單擊立即啟動以完成服務器設置和 WordPress 安裝。

步驟 3. 自定義 WordPress

轉到您剛剛安裝的 WordPress 安裝並在“訪問詳細信息”選項卡中找到您的WordPress 管理員登錄憑據。

• 請注意，Cloudways 為您提供了一個臨時免費域，它是一個類似name.cloudways.com 的子域。
  • 這類似於 Webflow 也提供的子域 ( domain.webflow.io )

上述 URL 和憑據將帶您進入 WordPress 管理面板，該面板部分類似於 Webflow 的儀表板。

現在是自定義 WordPress 的時候了。

首先你需要一個主題。

我們推薦阿斯特拉。 它非常輕巧快速，可以輕鬆適應您的任何需要。

WordPress 已經有一個用於設計部分的塊編輯器。

但是如果你想要更強大的東西，你可以安裝 Spectra，它包括更多的塊和特性。

WordPress 非常靈活，允許使用數百個插件主題和選項。

目前，我們建議您只關注設計，少做其他事情，以便我們可以繼續遷移過程。

步驟 4. 導出 Webflow 內容

現在您已經準備好新的 WordPress 平台，您需要用內容填充它。

從Webflow 儀表板轉到CMS 集合部分。

選擇您要移動的內容，在我們的例子中是博客文章，然後單擊“導出”按鈕。

您將獲得包含所選項目的 CSV 文件。

您可以為您擁有的任何收藏重複此步驟。 不幸的是，靜態頁面無法導出，圖像也無法導出。

重要的

從這一點開始，您不應該修改 Webflow 中的任何內容。 如果您添加更多內容，它將不再導入 WordPress，因為我們已經下載了內容。

步驟 5. 將內容導入 WordPress

現在您必須將剛剛在 Webflow 中導出的內容導入到 WordPress 中。

只有一個小缺點： WordPress 無法本地導入 CSV 文件。

幸運的是，解決方案很簡單。 您需要做的就是安裝一個名為WP All Import的免費插件。

您將從WordPress 管理面板 > Plugins > Add New執行此操作。

使用搜索功能找到插件，然後安裝並激活它。

然後，從邊欄中選擇 WP All Import，導入您之前下載的文件並指定其內容類型。

在這種情況下的帖子。 將其更改為您當時下載的任何內容。

在完成導入之前，您可以查看將導入的內容。

如果滾動到底部，您會注意到圖像仍然鏈接到您的 Webflow 帳戶。

請記住，圖像不能自動從 Webflow 導出到 WordPress 。

這是一個您必須手動完成的過程。 但我們將在下一步中向您展示如何更快地完成它。

在最後一步中，您需要創建導入模板。

這意味著告訴插件文章的哪個部分將包含哪些內容。

通過拖放，您可以指定“name”中找到的信息將用作帖子標題，“postbody”作為內容等。

一切準備就緒後，滾動到底部並單擊繼續以進入最後一步。

單擊自動檢測，以便插件為每個導入的項目分配一個唯一標識符，然後再次單擊繼續。

運行導入，你就完成了。

這些文章將出現在 WordPress 的帖子頁面上。

使用相同的過程從 Webflow 遷移其他內容，以便將所有內容添加到 WordPress。

步驟 6. 重新上傳圖片

Webflow 不允許您導出圖像。

它確實使用代碼引用它們，因此它們將出現在您的 WordPress 帖子中。

它們將託管在 Webflow 上，如果您刪除帳戶，它們就會消失。

要有效地解決此問題，您可以使用自動上傳圖片插件：

• 掃描您的文章以查找嵌入外部站點的圖像。
• 從原始來源下載它們，將它們上傳到 WordPress 並交換舊參考。

自動上傳圖片真的很容易使用，一旦安裝並激活：

1. 轉到發布 > 所有帖子。
2. 全部選中。
3. 在第一個下拉菜單中選擇Edit 。
4. 單擊應用按鈕。

在將出現的編輯面板中，保留所有內容，然後單擊Update 。

該插件將在後台運行，鏈接的圖像將從現在開始託管在您的網站上。

步驟 7. 重定向域

您的網站現已完美運行。 但現在只能通過 Cloudways 提供的臨時 URL 訪問它。

您的域仍然指向您在 Webflow 中製作的網站。

要解決這個問題，您必須執行兩個步驟。

首先，在 Cloudways 儀表板面板中添加您要使用的域，並將其設為主域。

然後復制你服務器的公網IP 。

您可以在 Cloudways 的訪問詳細信息選項卡中找到它。

最後，您必須前往您的域註冊商並修改幾個值。 我們希望它指向 Cloudways，而不是指向 Webflow 服務器。

這是通過添加 2 條新記錄來修改 DNS來完成的。

請參閱下面的示例，了解如何在 Namecheap 中完成此操作。

• 一個記錄：
  • 主機/名稱：@ 或空白。
  • 值/目標：您剛剛複制的 IP 地址。
  • TTL：自動/默認。
• CNAME記錄：
  • 主持人：萬維網
  • 值：您的域名（例如 nameofyourstore.com）
  • TTL：保留默認值

進行此更新後，您可能需要等待最多 48 小時才能傳播更改。

如果您遇到困難，您的域名註冊商或新的虛擬主機應該能夠提供幫助。

遷移後的後續步驟

遷移完成後，您應該執行快速檢查並手動處理網站的某些方面。

• 重新創建頁面： Webflow 不允許您導出靜態頁面。 您必須在 WordPress 中手動創建它們。

• 重新創建導航菜單：以及其他元素，如側邊欄或頁腳小部件。
• 安裝額外的插件：用於創建聯繫表格、潛在客戶捕獲和任何其他插件，以恢復對您的業務至關重要的功能。
• 重新安裝現在丟失的代碼。 就像來自 Google Analytics 或 Meta Pixels 的代碼。

測試一切以確保它在控制之下並且您沒有在 Webflow 中留下任何內容。

當您確信這一點時，請關閉您的 Webflow 帳戶以避免產生額外費用。

從 Webflow 遷移到 WordPress 常見問題解答

本指南包含您需要了解的所有內容，但我們感謝您可能仍有疑問。

關於從 Webflow 遷移到 WordPress 的最終想法

將網站從 Webflow 遷移到 WordPress 並不困難。

一旦您使用 WordPress 在您選擇的主機上創建了新的數字家庭，並根據自己的喜好設置了設計，只需將內容從一個地方移動到另一個地方。

WP All Import 將通過導入您之前從 Webflow 導出的博客文章或產品來提供幫助。

請記住，雖然圖像不是導出的，而是從原始來源嵌入的，因此您需要使用自動上傳圖像插件來解決這個問題。

Webflow 和 WordPress 是非常不同的平台，因此某些元素不可轉移是不可避免的。

導航菜單、聯繫表格或設計本身都是 Webflow 的固有特徵。 您必須在 WordPress 中手動重新創建它們，但這很容易。

這可能是一個額外的步驟，但您只需執行一次。

開始使用更易於使用且價格更實惠的平台是值得的，該平台可以通過插件和集成以無限方式擴展。

您決定離開 Webflow 的原因是什麼？

您想知道如何在 WordPress 中復制平台的功能嗎？

在下面的評論中讓我們知道！