將 HTML 模板轉換為 WordPress 主題

已發表: 2023-02-12

儘管 Web 技術已經取得了長足的進步，但仍然存在完全使用 HTML 創建的網站。如果您碰巧擁有其中之一，您可能想知道如何將 HTML 模板轉換為 WordPress 主題。

幸運的是，如果您想將這些 HTML 文件轉換為 WordPress，您有多種選擇。可用的技術範圍從動手手動轉換到與可以處理所有繁重工作的專家合作。

在本文中，我們將介紹四種不同的 HTML 模板轉換方法。對於每一種，我們都將提供說明和資源，以幫助您將基於 HTML 的網站納入 WordPress 的範圍。有很多內容要介紹，所以讓我們開始吧！

1.手動轉換 HTML

1.1. 第 1 步：創建主題文件夾

1.2. 第 2 步：複製並粘貼您現有的 CSS

1.3. 第 3 步：分離現有的 HTML

1.4. 第 4 步：配置您的 Index.php 文件

1.5. 第 5 步：上傳您的新主題

2.使用插件導入 HTML 內容

3.使用兒童主題

3.1. 第 1 步：選擇主題

3.2. 第 2 步：為您的子主題創建一個文件夾

3.3. 第 3 步：設置樣式表

3.4. 第 4 步：設置 Function.php 文件

4.第 5 步：激活您的兒童主題

5.購買網站轉換服務

5.1. 1. 聘請 WPGeeks

5.2. 2. 奇特科技解決方案

6.使用 WP Engine 自定義您的網站體驗

手動轉換 HTML

轉換時的第一個選項是手動方法。由於這是一個需要動手操作的過程，因此您需要確保您可以訪問原始網站和新網站的文件。

通常，您將為此目的使用安全文件傳輸協議 (SFTP) 應用程序。訪問您的網站後，您可以繼續執行以下步驟。

第 1 步：創建主題文件夾

首先，您需要創建一個文件夾來保存您的新主題文件，並用您的新主題名稱對其進行標記。然後，您可以使用代碼編輯器創建五個特定文件：

樣式.css
索引.php
標題.php
頁腳.php
邊欄.php

現在，您可以將這些文件留空，並將它們保存到您剛剛創建的文件夾中。

第 2 步：複製並粘貼您現有的 CSS

您的下一個優先事項是自定義層疊樣式表 (CSS) 文件。您將在此處概述站點的所有不同樣式元素。

在頂部，最好添加一些關於文件的信息。事實上，當涉及到 WordPress 時，需要一些元素才能使主題在主題目錄中成為特色。

在該信息下方，您需要粘貼原始網站中的任何現有 CSS 樣式，並將其保留到新主題中。

第 3 步：分離現有的 HTML

在您的原始網站中，指定頁眉、頁腳、側邊欄和主要內容區域的 HTML 代碼都可能位於您的index.html文件中。現在，您需要將這些元素中的每一個分配到您為 WordPress 主題創建的新文件中。

例如，在原始網站的index.html文件中，您可以找到第一個類為“main”的<div>標籤。然後可以將此標記之前的所有內容複製並粘貼到新的header.php文件中。

然後，您將為“側邊欄”和“頁腳”標籤重複此過程。複製每個元素中包含的代碼，並將其粘貼到相應的 PHP 文件中。

現在，剩下的就是index.html文件的主要部分。這是構成基於 HTML 的網站的主要內容佈局的內容。您需要復制剩餘的代碼，並將其粘貼到新的index.php文件中。

第 4 步：配置您的 Index.php 文件

您的下一步是確保您的新索引文件可以找到使您的主題能夠顯示站點結構和样式所需的文件。為此，您將使用 WordPress 模板標籤。這些用於告訴主題檢索頁眉、頁腳和側邊欄文件。

例如，您可以讓您的模板顯示您使用以下標記創建的頭文件：

get_header();

您將把它放在您的index.php模板文件中，或者放在您希望標頭出現的後續頁面上。這同樣適用於您的頁腳。

您還需要了解新模板的另一個重要部分。這稱為 WordPress 循環——一段 PHP 代碼，告訴模板拉入帖子。它還可以自定義以控制顯示的帖子數量。

第 5 步：上傳您的新主題

現在您的新主題已準備就緒，您需要將其文件夾放入網站的wp-themes/content/目錄中：

上傳文件後，您可以登錄到 WordPress 儀表板並導航至外觀>主題。 在這裡，您應該會看到列出的新主題，並且能夠單擊“激活”並開始使用它。

使用插件導入 HTML 內容

處理此過程的另一種方法是使用插件從基於 HTML 的舊站點傳輸內容。不幸的是，與最新版本的 WordPress 兼容的可用工具非常少。您可以查看 WP Site Importer 的免費試用版，但是：

這個插件可以掃描你的整個網站並對可移動的內容進行分類。如果您的 HTML 組織良好且一開始就“乾淨”，那麼效果最好。您還可以導入菜單和鏈接等內容。

使用兒童主題

另一種將 HTML 站點移動到 WordPress 的方法是使用子主題。它具有與其父主題相同的基本功能和样式，但即使更新父主題，您也可以保留所做的任何調整和自定義。

第 1 步：選擇主題

WordPress 主題目錄中有許多精心打造的免費主題可供選擇。一旦你選擇了一個你喜歡的，你需要安裝它，這樣它的文件就會在你網站的文件目錄中可用：

但是，您不需要激活這個父主題。

第 2 步：為您的子主題創建一個文件夾

接下來，您需要使用 FTP 應用程序訪問您的文件，並在您的wp-content/themes目錄中創建一個新文件夾。該文件應與您的父主題同名，並在末尾添加“-child”。

例如，如果您要為二十九創建一個子主題，您可以創建一個名為twentynineteen-child 的文件夾：

此設置意味著一旦您設置了其餘必要的主題文件，您的子主題將能夠自動從父主題中提取功能和样式。

第 3 步：設置樣式表

下一步是設置style.css文件。 WordPress 需要樣式表中的一些特定信息來使父子主題關係起作用。如果需要，您還可以從原始 HTML 文件中粘貼其他樣式信息。

第 4 步：設置 Function.php 文件

現在您基本上有兩個正在使用的主題，您需要告訴 WordPress 您的子主題依賴於父主題的 CSS。為此，您可以使用wp_enqueue_style() PHP 調用。

您將首先創建一個function.php文件，並將其放在子主題的文件夾中。這是您將在其中執行說明主題依賴關係和層次結構的入隊函數的文件。

第 5 步：激活您的兒童主題

將這些新文件上傳到網站服務器後，您可以返回 WordPress 儀表板並導航至外觀>主題。在那裡，您現在應該看到您的子主題已準備就緒。

單擊您的子主題上的激活以將其設置為您網站的主題。然後您就可以開始將您的 HTML 網站內容複製到您的新 WordPress 網站中了。

購買網站轉換服務

如果您沒有時間或資源自己進行轉換，您也可以使用轉換服務。此外，如果您在遷移其他 WordPress 內容時需要更多資源或幫助，在 WP Engine，我們提供許多用於遷移和轉換的解決方案和資源。

1. 聘請 WPGeeks

HireWPGeeks 是一個提供全方位服務的轉換選項。它將處理所有繁重的工作，您最終會得到一個靈活、響應迅速、基於主題的 WordPress 網站，其中包含您的所有內容。您必須聯繫該公司獲取報價，但您可以計劃其服務的起價為 89 美元。

2. 奇特科技解決方案

FantasTech Solutions 是另一種 HTML 到 WordPress 的轉換服務。它宣傳從 HTML 到高端、編碼良好的 WordPress 主題模板的高度專業轉換。請記住，一頁的起價為 297 美元。附加頁每頁 147 美元起，具體價格取決於復雜程度。

使用 WP Engine 自定義您的網站體驗

這似乎是一項艱鉅的任務，但將您的 HTML 網站轉換為 WordPress 可以帶來許多其他機會。借助這個高度靈活和可擴展的平台，您將變得更加敏捷並能夠快速部署新內容。

在 WP Engine，我們相信合適的開發人員資源可以對您的項目產生巨大影響。除了創新解決方案，我們還提供適合任何預算的計劃和定價等級！