上傳和轉換HTML至WordPress網站的圖文教學

將 HTML 上傳和轉換到 WordPress 的原因多種多樣。您可能想轉換一箇舊的、靜態 HTML 網站，並將其執行在 WordPress 內容管理系統上。還有一種可能是，您只是需要一個儲存或共享HTML檔案的地方，而WordPress為這兩種情況提供了可行的解決方案。

從 HTML 轉換到 WordPress 常常會讓人感到害怕或無從下手。我們將為您提供全程指導，確保您學會轉換 HTML 檔案所需的工具，並自行完成轉換。

HTML 是一種簡單的標記語言，而 WordPress 雖然功能強大，但卻相當簡單直觀。因此，HTML 和 WordPress 之間的轉換也不應該是一件苦差事。

請繼續閱讀，瞭解更多有關 HTML 基礎知識到 HTML 上傳至 WordPress 的資訊，以及您可以考慮進行這種轉換的實際情況。

將 HTML 上傳或轉換為 WordPress 的主要原因

如果您想知道為什麼首先要將 HTML 轉換或上傳到 WordPress，請看看下面的例子，瞭解完成這樣一項任務的原因。

• 將舊的HTML網站轉換到WordPress系統上執行。也許舊設計是您的最愛之一，或者您只是不想進行重新設計。這對於保持品牌形象也很重要。
• 轉換單個 HTML 網頁或博文，並將其釋出到您當前的 WordPress 網站上。如果你當前的主題沒有你想要的自定義頁面佈局，這一點尤其有用。
• 將 HTML 網站模板轉換成可安裝在 WordPress 上的主題格式。
• 上傳 HTML 驗證檔案，向搜尋引擎或其他服務機構證明網站的所有權。
• 在網站上儲存 HTML 檔案，以便日後使用。
• 生成該檔案的連結，以便與他人共享或讓使用者將檔案下載到自己的電腦上。
• 在 WordPress 頁面或文章中生成 HTML 設計元件，如自定義作者框或電子郵件訂閱表單。
• 將您的 WordPress 主題與您在網上找到但無法訪問的 HTML 網站設計相匹配。

正如您所看到的，在 WordPress 中新增 HTML 檔案的原因因您的目標而異。有時過程非常簡單，比如將 HTML 檔案上傳到 WordPress 部落格文章或頁面。有時，轉換整個HTML網站的過程很漫長，需要轉換幾十個檔案，還必須完成其他工作，比如將網站內容和HTML一起轉移過來。

在這篇關於將HTML轉換和上傳到WordPress的指南中，我們將從基礎知識（如何將HTML檔案上傳到WordPress）開始，然後我們將討論複製或轉換完整的HTML網站以在WordPress系統上執行的更深入的要求。

最後，我們將談談自動 HTML 轉換器的優缺點，以及市場上有哪些可用的工具。

請繼續閱讀，開始您的第一次HTML到WordPress的上傳或轉換！

如何將 HTML 檔案上傳到 WordPress

學習如何將HTML檔案轉換成WordPress頁面或完整網站的第一步是瞭解HTML檔案上傳過程是如何工作的。

請參閱本指南，深入瞭解如何將 HTML檔案 上傳到 WordPress。

下面我們將對這一過程進行快速總結，以確保您在本文接下來的其他步驟中步入正軌。

向WordPress上傳HTML檔案有三種方法：

1. 通過 WordPress 儀表板。
2. 使用 FTP 客戶端。
3. 使用 cPanel。

在 WordPress 儀表盤上傳 HTML 檔案是在媒體庫中完成的。我們將在下面的教學中介紹一些方法，但請記住，通過 WordPress 面板上傳檔案可以在頁面、帖子上完成，也可以直接通過媒體庫完成。

FTP 客戶端（如 FileZilla）可以連結到 WordPress 網站的實時檔案以及電腦上的檔案。只要使用 SFTP 託管憑據登入 FTP 客戶端，就可以將本地檔案傳輸到託管網站檔案。

最後，託管 cPanel 提供線上檔案管理器。它的功能與 FTP 客戶端很相似，可以讓你控制所有相同的檔案。主要區別在於 cPanel 是一個線上網路應用程式，需要您將檔案上傳到 cPanel，而不是通過 FTP 客戶端將檔案從本地環境即時傳輸到實時網站。

每種方法各有利弊。Kinsta Hosting不提供cPanel體驗，因此最好通過WordPress儀表板上傳要儲存或共享的較小的HTML檔案。

FTP/SFTP 客戶端是從靜態 HTML 網站建立全新網站的首選方法。這是因為 FTP/SFTP 客戶端提供了對網站檔案的大量控制，可以直接從計算機傳輸從媒體檔案到 HTML 資料夾的任何檔案。

如何在 WordPress 頁面或文章中新增 HTML 程式碼

有幾種方法可以將 HTML 檔案直接上傳到 WordPress 帖子或頁面。第一種是將 HTML 壓縮檔案或 TXT 檔案作為媒體元素上傳。這種方法類似於將圖片上傳到媒體管理器，只不過您是通過頁面或文章來上傳，而且上傳的是 HTML 檔案而不是照片。

使用這種方法時，您可能需要提供一個連結，以便使用者下載 HTML 檔案或在網站後臺訪問該檔案。

另一種方法是在頁面或文章中貼上 HTML 區塊，新增一些設計元素。例如，您可能有一個專門為該頁面製作的自定義登錄檔單，您想用一小段 HTML 插入該表單。

這兩種方法都有不同的目的和實現最終結果的過程。

要將 HTML 檔案上傳到帖子或頁面，請按照以下步驟操作。

進入 WordPress 面板中的 “頁面”>”所有頁面”。如果您想從一個空白頁開始，請轉到頁面 > 新建頁面。

在 WordPress 中新增新頁面

選擇要上傳 HTML 檔案的頁面。如果您要建立一個全新的頁面，也可以點選 “新建頁面” 按鈕。

為 WordPress 帖子新增 HTML 檔案的步驟幾乎相同。我們只是簡單地介紹瞭如何在 WordPress 頁面上進行操作。如果您想用帖子來代替，請轉到文章 > 所有文章 > 寫文章。

WordPress 中的 “關於我們” 頁面

這部分取決於您使用的是古騰堡編輯器還是經典 WordPress 編輯器。

在古騰堡中，您可以找到 “+”號按鈕，然後點選它來搜尋新的視覺化構件。搜尋 “File” 區塊，你可以在搜尋欄中輸入，也可以在圖塊列表中滾動查詢。

選擇 “File” 區塊，將其放置在頁面或文章中。

注：如果您使用的是 WordPress 經典編輯器，只需點選新增媒體按鈕並上傳 HTML 檔案即可。它會建立一個指向檔案的連結，供使用者在網站前端下載。

在 WordPress 中新增 “File” 區塊

對於 Gutenberg 區塊，檔案模組應顯示一個上傳按鈕。點選上傳按鈕，在電腦上找到所需的 HTML 檔案。這些檔案通常儲存為 TXT 檔案、資料夾中的 TXT 檔案集或 ZIP 檔案。

檔案上傳到網站後，就會以連結的形式顯示出來。現在，任何使用者都可以訪問您的網站，點選頁面或帖子中的連結，檢視 HTML 檔案，甚至將其下載到自己的電腦上。

此外，該檔案會儲存在您的媒體庫中，因此您可以隨時到媒體庫中獲取檔案的 URL，並將其放置在其他任何您想要的地方。您也可以只將 WordPress 用作檔案的儲存空間。

如果您只想將檔案儲存在 WordPress 中，而不想為所有使用者提供下載連結，只需刪除在頁面或帖子上建立的連結即可。

WordPress 中檔案區塊下的 “上傳” 按鈕

你可能會看到一個錯誤，告訴你由於安全原因不允許使用該檔案型別。這種情況很常見，因此請參考本指南，消除該錯誤並允許大多數檔案型別進入 WordPress 媒體庫。總的來說，這個過程涉及編輯 wp-config.php 檔案或使用外掛來消除錯誤。

WordPress 中的無效檔案型別錯誤

在頁面或文章設計中新增 HTML 程式碼

如前所述，您可能會考慮在頁面或文章中新增 HTML 檔案的原因之一是為了在頁面或文章中呈現簡單的設計。

前一種方法更適合在 WordPress 上儲存 HTML 檔案，並新增連結供人們下載。

這是一種功能性更強的解決方案，因為您可以複製貼上或製作自己的 HTML 程式碼，用於表單、作者框、橫幅等。

進入你選擇的頁面或文章，選擇你想放置 HTML 程式碼的部分。

點選 “+”號檢視區塊選擇。在搜尋欄中輸入自定義 HTML 程式碼區塊，或在程式碼塊列表中滾動查詢。

選擇自定義 HTML 程式碼區塊，將其插入頁面或文章。

在古騰堡中新增 “自定義 HTML” 區塊

該程式碼塊提供了一個簡單的空白程式碼欄位，供您貼上或鍵入任何可用的 HTML 程式碼。

在本教學中，我將貼上一個帶有電子郵件欄位和提交按鈕的簡單聯絡表單。

在程式碼塊中輸入 HTML 程式碼後，單擊 “Update” 或 “Publish” 按鈕，它就會顯示在頁面或文章的前端。

HTML 轉 WordPress 區塊

如果您訪問頁面或文章的前端，HTML 就會執行其工作，並顯示您試圖新增到佈局中的任何設計或功能。

在本例中，您可以看到我要求輸入電子郵件的表單，同時還有一個提交按鈕。

表單的前端檢視

在經典 WordPress 編輯器中，過程和結果並無太大不同，只是您不會使用拖放 Gutenberg 區塊。取而代之的是，在編輯器中導航到 “文字” 選項卡（而不是 “視覺化” 選項卡），然後將 HTML 程式碼貼上到您希望它出現在頁面上的任何位置。

如何將 HTML 驗證檔案上傳到 WordPress

您可能希望將 HTML 上傳到 WordPress 的另一個原因是出於搜尋優化的需要。谷歌和其他一些搜尋引擎提供了控制檯和網站管理員工具，通過分析和報告來檢視您的網站效能並優化您的內容，這些分析和報告可以檢查問題並解決這些問題。

但是，谷歌不能因為您聲稱自己是網站的所有者，就認為您是該網站的所有者。這就是 HTML 驗證檔案發揮作用的地方。

簡單地說，谷歌提供了一個 HTML 檔案，您必須將其上傳到您的網站。只有網站所有者才有權訪問網站檔案，因此谷歌以此來確保您沒有試圖控制他人的網站管理員工具。

上傳的 HTML 驗證檔案會向 Google 傳送一條資訊，表明該檔案已新增到該域，而且您確實是所有者。

瞭解上傳 HTML 驗證檔案是很謹慎的做法，因為谷歌和搜尋引擎並不是唯一要求你用此類檔案驗證身份或所有權的服務。一些第三方外掛、目錄和外掛也希望確保您不是入侵者。

上傳 HTML 驗證檔案的原因

• 驗證您是否擁有用於搜尋引擎優化工具的網站。
• 為某些線上目錄證明所有權時。
• 如果您需要連結到第三方整合或外掛，您需要弄清楚您是否真正擁有自己網站的所有權。

如您所見，HTML 檔案可能來自不同來源。你通常不需要知道 HTML 檔案的內容，只需要知道它是用來向服務傳送平回資訊的，以表明你對網站檔案擁有控制權。

儘管如此，我們在演示向 WordPress 上傳 HTML 驗證檔案時將涉及谷歌搜尋控制檯，因為這是使用驗證檔案的最常見原因之一。

首先，在谷歌註冊您的網站。具體方法是訪問谷歌搜尋控制檯工具。點選 “Start Now” 按鈕，然後登入您的谷歌賬戶或在谷歌註冊一個賬戶。

在 Google Search Console 中點選 “Start Now”

登入 Google Search Console 後，您可能會看到一個您過去管理或測試過的屬性列表。另一方面，你可能會看到一個空列表。

無論如何，請轉到儀表板左上角的 “Search Property” 選項卡。

在下拉選單中，選擇 “Add Property” 向前移動。這樣就可以在 Google Search Console 中將網站新增為管理屬性。

在 Google Search Console 中新增屬性

下一個彈出視窗會要求你選擇屬性型別。域選項允許你驗證所有子域中的所有 URL。這通常是驗證頁面的最簡單方法，但它需要 DNS 驗證，而 DNS 驗證可在託管賬戶中找到。

不過，我們現在討論的是 HTML 檔案上傳，所以我們將介紹 URL 字首選項，這是一種較早但仍然可靠的驗證網站所有權的方法。更重要的是，這種方法有助於識別輸入地址下的特定 URL。

因此，請將您網站上的 URL 貼上到 URL Prefix 欄位中。

點選 “Continue” 按鈕。

在 GSC 中輸入網站 URL

現在，谷歌搜尋控制檯要求您驗證網站的所有權。

還有其他幾種驗證方法，但這是一種使用 HTML 檔案上傳的方法。點選要求下載檔案的按鈕。

將該 HTML 檔案儲存在電腦上的一個資料夾中，該資料夾你要記住。下一步是將檔案上傳到之前貼上到谷歌搜尋控制檯的 WordPress 網站。

在 GSC 中驗證站點所有權

如前所述，向 WordPress 上傳 HTML 檔案有三種選擇。

第一種方法是通過儀表盤上傳，這絕對是一個可行的選擇。但當向媒體庫上傳HTML檔案出現常見錯誤時，很多人還是會走彎路。因此，使用 FTP 客戶端上傳通常會更快。不過，如果你打算上傳到 WordPress 的儀表板，卻看到 “抱歉，此檔案型別不允許” 的錯誤，請使用本指南來解決問題。

現在你有另外兩種解決方案：使用 FTP/SFTP 客戶端或從主機賬戶上傳到 cPanel。

對於某些主機而言，cPanel 並不是一個糟糕的選擇。因此，我們將主要關注通過 FTP/SFTP 客戶端上傳 HTML 檔案。詳細步驟見上面的連結文章，但這裡有一個快速複述，以指導你的操作。

首先，將 FileZilla 下載到電腦上。您也可以嘗試其他 FTP/SFTP 客戶端。

注：我們建議你在此過程之前備份你的網站。通過 FTP/SFTP 傳輸檔案時導致網站出現問題的情況並不常見，但絕對有可能發生。您不想讓網站崩潰或丟失資料，因此請建立一個備份網站檔案。

開啟 FTP/SFTP 客戶端，輸入 FTP/SFTP 憑據連線到虛擬主機。

在 Filezilla 中輸入 SFTP 憑據

所需憑證包括以下內容：

• 主機
• 使用者名稱
• 密碼
• 埠

在哪裡可以找到 WordPress 網站的證書？

它們通常位於您的主機儀表盤中，因此您可以聯絡主機或自己查詢。

將這些內容貼上到 FTP/SFTP 客戶端，然後點選快速連線按鈕。

如果出現錯誤，很可能是因為 FileZilla 預設使用 FTP 協議而非 SFTP 協議。要解決這個問題，請轉到檔案 > 站點管理器。在 FileZilla 中新增一個新網站並選擇 SFTP。將主機憑據貼上到該區域並嘗試再次連線。

HTML 上傳至 WordPress 的網站管理器

連線到主機後，WordPress 網站的所有檔案都會顯示出來供修改。

輸入憑證，檢視新網站的檔案

找到網站的根檔案，其中包含 wp-content 和 wp-admin 等資料夾。

找到網站的根資料夾。

在顯示電腦檔案的區域下找到 HTML 驗證檔案（在本例中，我將其重新命名以便於查詢）。例如，你可能會在 “Downloads” 下看到它，如果你的網際網路下載都在那裡的話。

將該檔案拖到網站的根檔案中。所有這些都可以在 FTP/SFTP 客戶端中完成。

拖動檔案上傳至伺服器

上傳只需幾秒鐘。

檔案現已上傳

檔案上傳至網站檔案後，您就可以返回谷歌驗證頁面，檢視是否註冊了您的網站。谷歌搜尋控制檯（Google Search Console）上應該會出現一條 “成功” 資訊，併為您提供多項優化和分析網站健康狀況的功能。

手動將整個 HTML 網站轉換為 WordPress

要將 HTML 網站轉換為 WordPress，您可以使用外掛/應用程式、手動轉換檔案或使用子主題，然後將 HTML 檔案轉入該子主題。

第一種方法是手動轉換 HTML 以製作 WordPress 主題。

有人說這是最令人生畏的方法，但也有人喜歡這種方法，因為你可以完全控制整個過程，不必依賴有時可能不可靠的應用程式或外掛。請按照以下步驟手動完成 HTML 到 WordPress 網站的完整轉換。

為主題建立資料夾並新增標準主題檔案

在電腦上建立一個資料夾，儲存主題的所有基本檔案。隨便給資料夾起個什麼名字都可以，最好起一個你能記住的名字。

建立以下基本主題檔案：

• style.css
• index.php
• header.php
• sidebar.php
• footer.php

請隨意在程式碼或文字編輯器中開啟它們，因為你將來會對它們進行編輯。目前，無需在檔案中新增任何程式碼。只需將它們保留在資料夾中即可。

注：你可以先將它們建立為 TXT 檔案。如果你改變了副檔名，比如從 .txt 改為 .php 或從 .txt 改為 .css，電腦會自動將其調整為正確的檔案格式。例如，新增 .css 副檔名後，檔案就會變成層疊樣式表。

HTML 至 WordPress 的網站檔案

將 WordPress 網站當前的 CSS 轉移到新資料夾中

您當前的 WordPress 網站應該已經安裝了主題。如果沒有，請安裝一個主題來幫助完成這部分工作。

您將以當前主題的 CSS 為基礎，在 style.css 檔案中加入 HTML 網站的檔案。

因此，請將 WordPress 網站的樣式表標題複製到新的 style.css 檔案中。

它應該是這樣的：

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.4
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

在這種情況下，網站使用的是 “Twenty Seventeen” 主題。如果你使用的是其他主題，你會在樣式表標題中看到一些變化。

現在是時候用新主題的資訊替換舊主題的元素了。

為此，請替換以下內容：

• Theme Name: 你可以隨意給主題起任何名字，但最好與主題資料夾的名字相同。
• Theme URI – 可以使用網站的主 URL。
• Author – 在這裡輸入你的名字，或者任何你想用的名字。
• Author URI – 將其連結到您的主頁。
• Description – 您可以對主題進行描述，以顯示在 WordPress 網站的後臺。

其他內容保持不變。許可證和標籤等其他元素只適用於您計劃將新主題釋出到 WordPress 主題目錄的情況。

請記住，您剛剛貼上和編輯的就是您的主題標題。

從 HTML 網站中找到現有的 CSS。將 CSS 複製並貼上到新的 style.css 檔案的頁首後。

儲存並關閉 style.css 檔案。

將您當前的 HTML 程式碼化整為零

WordPress 通常使用 PHP 從資料庫中提取檔案、程式碼和媒體等專案。因此，HTML 網站需要分割成獨立的 PHP 檔案，以便與 WordPress 基礎設施相融合。

這聽起來可能有點嚇人，但其實只需要把 HTML 文件分成幾個部分，然後把每個部分都變成 PHP 檔案即可。

每個 HTML 檔案看起來都不一樣，但這有助於獲得一個直觀的示例。因此，我們將展示一些 HTML 網站模板來進行演示。

下面的程式碼是一個很好的選擇，可以與你自己的 HTML 檔案相互參照。這是一個簡單的 HTML 網頁，包含頁首、選單項、副標題、側邊欄和頁尾。你可以在自己的 index.html 檔案中找到類似的程式碼。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="description" content="Website description">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Website Title</h1>
<nav>
<ul>
<li><a href="#">menu item #1</a></li>
<li><a href="#">menu item #2</a></li>
<li><a href="#">menu item #3</a></li>
</ul>
</nav>
</header>
</div>
<div class="main-container">
<main class="main wrapper clearfix">
<article>
<header class="entry-header">
<h2 class="entry-title">Article</h2>
</header>
<p>Test text right here..</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h2>A Sub</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<aside>
<h3>Sidebar here</h3>
<p>Etiam ullamcorper lorem dapibus velit suscipit ultrices. </p>
</aside>
</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2019 My Test Site</p>
</footer>
</div>
</body>
</html>

下面的模板是另一個範例，可供您根據自己的策略進行選擇。

HTML 網站示例

正如你所看到的，這個網站的 index.html 檔案要複雜一些，但其結構方式仍然很熟悉。

index 檔案的 HTML 示例

這兩個例子都包括頁首、內容區域、邊欄和頁尾。

你很可能會有不同的設計。因此，你必須調整以下步驟。

每一步都涉及編輯和新增到您之前建立的每個新 WordPress 檔案。儘管如此，還是要開啟 HTML 網站中的 index.html 檔案。您將繼續使用它。

The header.php File

在開啟的 HTML 檔案中，查詢檔案開頭和主要內容區域結尾的所有內容。主要內容區域通常用 <div> 或 <main> 標籤表示。

將 HTML 檔案的這一部分複製並貼上到新的 header.php 檔案中。

然後，找到 </head> 。

在這之前，貼上以下內容：

<?php wp_head();?>

這段程式碼對大多數 WordPress 外掛的執行都很重要。

The sidebar.php File

查詢 index.html 檔案中的 <aside> 部分。

<aside> 和 </aside> 標記內的所有內容，包括這些標記本身，都應複製到新的 sidebar.php 檔案中。

在我們的示例檔案中，它看起來像這樣：

<aside>
<h3>Sidebar here</h3>
<p>Etiam ullam corper lorem dapibus velit suscipit ultrices. </p>
</aside>

The footer.php File

如果您有一個簡單的 HTML 網站，您可能只剩下頁尾資訊需要轉移。其他網站則要複雜一些。無論如何，從頁尾修改開始也不失為一個好主意，因為它是構成 WordPress 網站檔案的核心構件之一。

在 index.html 檔案中，找到並複製 </aside> 標籤（側邊欄）之後的所有程式碼。

同樣，側邊欄部分之後可能會有更多內容，但對於較簡單的 HTML 網站來說，只需要處理頁尾就可以了。

在我們的示例中，頁尾看起來是這樣的：

</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
</body>
</html>

但沒那麼快。將頁尾程式碼貼上到新的 footer.php 檔案後，在 </body> 括弧前新增 <?php wp_footer();?> 程式碼段。這有助於頁尾在 WordPress 中正常執行。

下面是將 <?php wp_footer();?> 程式碼貼上到頁尾檔案的示例。

</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
<?php wp_footer();?>
</body>
</html>

確保將所有這些新檔案儲存到主題資料夾中。例如，將頁尾程式碼貼上到 footer.php 檔案後，點選編輯器中的儲存按鈕並關閉編輯器。

現在基本檔案已經完成，請關閉 HTML 網站上的原始 index.html 檔案。

將 header.php 和 index.php 檔案連結到 WordPress

你已經把它新增到了 header.php 檔案中，但還需要做一些額外的操作。基本上，你要修改樣式表中的呼叫，從現在的 HTML 格式改為標準的 WordPress PHP 格式。

回到 header.php 檔案，找到 <head> 部分。

我們要找的是樣式表的呼叫。它看起來是這樣的

<link href="style.css">

刪除該呼叫，代之以以下呼叫：

<link href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

這就是你需要對 header.php 檔案做的全部工作。現在樣式表的呼叫使用的是 WordPress 格式，而不是 HTML。

儲存並關閉 header.php 檔案。

接下來，開啟 index.php 檔案（不是之前的 index.html 檔案，而是新的 index.php 檔案）。

此時，index.php 檔案是空的。

將以下程式碼複製並貼上到新的 index.php 檔案中。保留前兩行之間的空格。這是有原因的，你很快就會看到。

這些行將呼叫其他網站檔案，包括 header.php、sidebar.php 和 footer.php。

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

第二行的空格是為我們所說的 “迴圈”（The Loop）預留的，或者說是 WordPress 在後臺執行的一個動態程序，用於向網站新增新文章。從本質上講，它是讓 WordPress 知道還有更多內容要新增，並使用迴圈來新增這些內容。點選此處瞭解有關 Loop 的更多資訊。

要新增 The Loop，請將以下程式碼貼上到之前在 index.php 檔案中留下的空白處（就在 <?php get_header(); ?> 下）。

<?php while ( have_posts() ) : the_post(); ?>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>

結果應該是這樣的：

<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

儲存 index.php 檔案。您也可以關閉該檔案。

這樣，基於您原始 HTML 網站的 WordPress 主題就可以上傳到 WordPress 中了。

將新主題上傳到 WordPress

最後一步是將主題上傳到你的 WordPress 網站。一種方法是直接將網站資料夾壓縮並上傳到 WordPress 主題部分，而不新增網站截圖作為參考。

雖然在沒有參考截圖的情況下，您的主題仍然可以以同樣的方式執行，但我們建議您建立一個截圖，這樣您就可以更輕鬆地組織您的主題，並瞭解哪個主題在您的網站上實際處於活動狀態。

我們所說的截圖是指安裝在 WordPress 面板上的所有主題的小預覽。即使是未啟用的主題也有截圖。如果您打算將主題上傳到 WordPress 主題庫，就必須有截圖。

WordPress 的主題面板

您可能不會公開上傳您的主題，但截圖有助於您自己的主題管理。正如你所看到的，如果沒有截圖預覽，就很難知道主題是什麼樣子的。Twenty Seventeen 兒童主題沒有截圖，所以只是一張空白圖片。這可能會在將來迷惑很多人。

要新增截圖，請在瀏覽器中開啟舊的 HTML 網站，然後用剪下工具或截圖軟體抓取主頁截圖。

開啟你喜歡的影象編輯軟體，將截圖裁剪為 880×660 畫素。這將確保截圖新增到 WordPress 時不會被拉伸或比例失調。

將編輯後的截圖儲存到新主題資料夾中。無需放在任何特殊資料夾中，只需將其放在主題資料夾中，與其他檔案（如 header.php 和 footer.php）放在一起即可。

主題資料夾中的截圖

現在，您有兩種方式將新的 WordPress 主題上傳到 WordPress。

第一種是通過 FTP 將這些檔案拖入 wp-content/themes 資料夾。如果採用這種方法，就不需要壓縮檔案。只需使用 FileZilla 等 FTP 客戶端，將普通資料夾拖入 wp-content/themes 資料夾即可。

另一種方法是將壓縮版上傳到 WordPress 面板。

首先，將整個主題資料夾壓縮成一個 zip 檔案。

然後，在 WordPress 儀表板中，轉到外觀 > 主題。

進入 WordPress 的主題面板

單擊 “Add New” 按鈕。

在 WordPress 中新增新主題

選擇上傳主題按鈕。

在 WordPress 中上傳主題

點選 “Choose File“，在電腦上搜尋壓縮檔案。選擇檔案，使其顯示在 WordPress 面板上。

選擇要上傳的主題檔案

點選 “Install Now”，將檔案匯入 WordPress。

上傳後安裝主題

WordPress 應該會告訴你軟體包正在安裝，並且安裝成功。

點選啟用按鈕完成安裝。

安裝後啟用主題

現在，主題及其截圖將作為活動主題出現在主題列表中。您可以進入 WordPress 網站的前臺，檢視原始 HTML 網站的 WordPress 版本。

新主題出現在儀表板中

請記住，任何 HTML 到 WordPress 的轉換都是一樣的。您可能會發現，您的網站比我們剛剛介紹的要複雜一些。一般來說，您還需要採取其他一些措施，才能得到一個完全相同的 HTML 網站。

例如，您需要新增小部件區域和評論，甚至調整部落格標題和描述，以便在 WordPress 中進行修改。

將HTML網站改成WordPress網站需要大量的手工工作，而且您可能會發現有些改動只能通過一些CSS標記來實現。

此外，本教學與新增帖子和圖片等內容無關。這可以通過將圖片上傳到媒體庫和調整 URL 結構等元素手動完成。

有一些外掛可以自動匯入內容，但它們大多沒有更新到 WordPress 的新版本。因此，我們建議您嘗試一下，看看它們是否適合您，但不要抱太大期望。

通過子主題將 HTML 轉換為 WordPress

這可以說是將整個 HTML 網站轉換成 WordPress 網站的最簡單方法之一。它可以使用網上已有的任何免費 WordPress 主題，因此您可以選擇自己喜歡的主題，並將其與 HTML 網站的設計相結合。

總的來說，您使用的是已建立的 WordPress 主題作為父主題。然後，HTML 網站會轉換為 WordPress 網站，並作為子主題連結到父主題。如果您對父主題和子主題有任何疑問，請閱讀我們的相關指南。

簡單解釋一下，父主題管理網站的功能，而子主題建立在父主題之上。從技術上講，父主題可以獨立存在，但子主題不能。因此，我們使用子主題來修改父主題的設計，同時保留父主題已經提供的強大功能。

下面介紹如何通過子主題從 HTML 轉換到 WordPress。

選擇父主題

首先要選擇一個自己喜歡的主題。你選定的主題將作為你的父主題，你將把它作為網站設計的基礎。

理想的情況是，你能找到一個在設計上與你的舊 HTML 網站的外觀和感覺相近的主題。另一種選擇是利用 WordPress 框架或啟動主題，因為這兩種主題都已被用作設計基礎。

例如，一個優質的起始主題是 Twenty Twenty 主題或任何以製作年份命名的 WordPress 預設起始主題。我們建議您追溯到當年的主題（二十九、二十七等），看看其中是否有與您的 HTML 網站設計更匹配的主題。

在本教學中，我們將使用二十七主題，因為它簡潔明瞭，能與許多簡單的 HTML 網頁設計相匹配。

無論如何，所有這些主題都是很好的起點。

首先，在 WordPress 網站上安裝主題。

啟用 WordPress 主題

如果你願意，可以啟用主題，但稍後你將啟用一個新的子主題，並只將啟動主題作為設計的基礎。

新建資料夾

所有 WordPress 主題都需要資料夾來儲存網站檔案。因此，您必須為從 HTML 網站建立的子主題新建一個資料夾。

我們建議以父主題命名資料夾，並在資料夾名稱末尾新增”-child”。

例如，在本例中我們將把資料夾命名為 “twentyseventeen-child”。

將 HTML 轉換 WordPress 的子主題資料夾

總之，只要能記住資料夾的名稱，並且不新增任何空格，任何名稱都可以。

配置樣式表

所有子主題都需要放入主題資料夾的樣式表。

因此，請建立一個文字文件並命名為 style.css。將其儲存在主題資料夾中，並在該文字檔案中加入以下程式碼：

/*
Theme Name:   Twenty Seventeen Child
Theme URI:    http://examplesite.com/twenty-seventeen-child/
Description:  Twenty Seventeen Child Theme
Author:       Jane Doe
Author URI:   http://examplesite.com
Template:     twentyseventeen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-seventeen-child
*/

請務必替換網站自定義的元素。你可能需要修改主題名稱、主題 URI、作者、模板和其他一些元素，以確保與你自己的檔名相匹配。這與上文 “手動將整個 HTML 網站轉換為 WordPress “部分的一些步驟類似，解釋了每一行的含義。

最重要的是模板標籤。它應該以父主題命名，這樣子主題才能正常執行。

建立 functions.php 檔案

如果只使用網站的樣式表並啟用子主題，那麼就可以得到一個沒有任何樣式的 HTML 網站。不過，我們還想為子主題新增樣式，使其看起來符合我們的要求。

所有樣式都將從父主題中提取。

因此，我們需要一個 functions.php 檔案，將父主題的樣式繼承到子主題中。

在主題資料夾中建立名為 functions.php 的檔案。

從 HTML 到 WordPress 的 functions.php 檔案

要啟用該檔案，請新增一個開頭的 PHP 標記，以及要求 WordPress 使用父主題樣式的程式碼：

<?php
function child_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

這段程式碼的另一個好處是，它可以讓你用子主題調整網站設計。

開啟新的子主題

現在是啟用子主題的時候了。

啟用子主題的一種方法是將資料夾新增到 WordPress 檔案中的 wp/content/themes 檔案。這需要使用 FTP/SFTP 客戶端。

你也可以將資料夾壓縮，然後在 “外觀“>”主題“>”安裝主題” 下上傳主題。

在 WordPress 中新增子主題

選擇上傳主題按鈕。

在 WordPress 中上傳子主題

在 WordPres 中上傳子主題單擊 “Choose File“，然後在計算機上找到子主題的壓縮檔案。

選擇要上傳的子主題

上傳後，單擊 “立即安裝” 按鈕。

安裝子主題

點選啟用按鈕。

啟用子主題

現在，你應該看到 “Twenty Seventeen”（或你使用過的任何主題）已被啟用為主主題。

WordPress 儀表板中的主題詳情

無論您使用哪種方法啟用子主題，您的 WordPress 網站都應與父主題保持一致。換句話說，就是完全複製父主題。

注：可以為新主題新增截圖，而不是完全不預覽。我們將在前面的章節 “手動將整個 HTML 網站轉換為 WordPress” 中介紹如何為主題新增截圖。

新增 HTML 檔案

我們的目標是製作一個與您的原始 HTML 網站相似的網站，而不是父主題。

因此，最後一步是將 HTML 網站內容複製到新的 WordPress 網站。大多數情況下，你需要手動完成這些步驟。我們之前提到過，有一些外掛可以自動完成內容轉移過程。不過，這些外掛並不支援較新的 WordPress 版本，因此使用它們的風險請自擔。

什麼是 HTML 至 WordPress 轉換器？(有哪些選項？）

HTML 到 WordPress 轉換器會將上述步驟簡化或完全代您完成。如果您沒有時間或經驗進行手動轉換，可以考慮使用 HTML 到 WordPress 的轉換工具。

轉換器有許多不同的樣式，但重要的是要記住，並不是所有的轉換器都能替代手動完成 HTML 到 WordPress 的轉換過程。

轉換器有以下幾種形式：

• 第三方軟體轉換器，包括線上和本地轉換器。
• WordPress 外掛。
• 真正的人類開發者。

在檢視轉換選項時，第三方軟體/應用程式對於簡單的工作似乎很合理。你可以將網站的 HTML 檔案壓縮後上傳到轉換器。大多數可用的第三方工具都是線上應用程式，因此只需在瀏覽器中開啟它們，然後點選上傳按鈕即可。

對於不太複雜的轉換，我們喜歡這些應用程式。如果您有一個基本的 HTML 網站，並希望在 WordPress 上執行，這可能會起到一定的作用，但並不能保證平穩過渡。

至於為 WordPress 轉換 HTML 的 WordPress 外掛，您很難找到能將整個 HTML 網站的檔案轉換為 WordPress 的外掛。有一些外掛是可用的，但它們都沒有更新，無法與較新版本的 WordPress 配合使用，而您又不想使用過時的外掛。

不過，有幾個外掛提供了基本檔案上傳所需的功能，可能比 FTP 傳輸或弄亂主機賬戶的後臺更容易。總的來說，許多外掛只允許上傳單個檔案，因此這不是大規模網站轉換的最佳途徑。

我們認為最後一種方法（真正的人工開發人員）是 HTML 到 WordPress 轉換器的一種形式，因為它可以通過請求專家幫助和由專人完成工作來實現流程自動化。總的來說，僱用人工開發人員轉換 HTML 網站遇到問題的機率最低，而且如果出了問題，您還可以找人傾訴。

最佳 HTML 至 WordPress 轉換器外掛選項及其他工具

如前所述，HTML 至 WordPress 轉換器有許多不同的配置。你不會找到很多指定的 WordPress 外掛，它們要麼已經過時，要麼已經失效。不過，我們確實有一些最受歡迎的轉換器外掛，可以完成較小的轉換任務，還有網路應用程式和手動開發選項，可以方便地完成更高階的 HTML 到 WordPress 的轉換工作。

使用 HTML 至 WordPress 自動轉換器外掛或應用程式的利弊

自動 HTML 到 WordPress 轉換器聽起來像是某些人的福音，但它並不總是最佳解決方案。在使用專為複製或轉換 HTML 而設計的應用程式或外掛之前，請先看看下面的利弊。

優點

• 它省去了製作自己的新網站檔案的麻煩，通常會為您生成這些檔案。
• 許多轉換器都為您提供了拆分 HTML 元素的選項，您可以選擇將哪些元素放入 WordPress 的正確檔案中。
• 你可以用舊的 HTML 製作一個主題，然後在多個網站上使用。
• 有些工具只需要一個 URL 就能製作一個新網站或主題。
• 其他工具提供的選項可以複製你不擁有的網站，為你喜歡的設計提供一個起點。

缺點

• 在轉移部落格文章和照片等內容時，往往還需要手動操作。
• 你很可能還得手動處理從舊網站轉移連結的問題。
• 這些轉換器並不總是保持更新。最好的轉換器之一是 WordPress 外掛，但我們在本文中沒有推薦它，因為開發者已經不再維護它了。
• 您可能會發現某些網路應用程式轉換器無法處理較大檔案的工作。

既然你已經瞭解了自動 HTML 轉換器的優點和缺點，下面就讓我們來看看我們最喜歡的自動轉換器應用程式和外掛。

WP Site Importer

儘管 WP Site Importer 工具可以從舊網站或第三方網站中提取和匯入各種內容和檔案，但可以肯定的是，其中一個元素涉及 HTML。簡而言之，WP Site Importer 能讓你把任何網站變成 WordPress 網站，從 HTML 網站和網站檔案中提取圖片、選單和頁面等內容。WP Site Importer 可以修復斷開的連結，這樣你就不必手動調整連結或新增新連結了。它甚至還能保留以前網站建立的搜尋引擎優化資訊，包括元描述和關鍵詞。

WP Site Importer

該匯入器省去了開發人員的成本，使 HTML 和內容的轉換更加一鍵完成，從而為您節省時間和金錢。更重要的是，它能清除您的 HTML，清理並重新格式化源 HTML。這將使您的 HTML 檔案與 WordPress 更加相容，並向 Google 顯示您使用的是乾淨的程式碼，從而提高您的搜尋引擎優化效果。

WP Site Importer 工具是一個直接的 WordPress 外掛，因此您可以下載該外掛，並直接在儀表板上啟用其功能。

WP All Import

WP All Import

WP All Import 外掛是上傳包含 HTML 資料的 XML 檔案最快、最簡單的工具之一。總的來說，該外掛允許您從以前的網站或潛在的演示網站遷移內容，這些網站或演示網站使用簡單的 HTML 或一些 HTML 檔案構建，您希望複製這些檔案並將其帶入新網站 WordPress。

轉換隻需四個步驟，您還可以使用一個漂亮的拖放介面來管理轉換和匯入。WP All Import 外掛的另一個有趣之處在於，它可以處理從外部網站匯入的 URL。因此，您甚至不需要密碼或對網站的控制權，就可以從該網站傳輸少量檔案並在 WordPress 中呈現潛在的元素。

使用該外掛進行全站轉換可能會令人生畏，但值得一試，尤其是在轉換為簡單的 HTML 檔案時。更重要的是，該外掛支援 WooCommerce 產品和 WordPress 頁面等元素的 HTML 轉換。高階版本可提供更多高階功能，最顯著的是高階客戶支援，讓你在進行這些轉換時可以尋求幫助。

HTMLtoWordPress.io

HTMLtoWordPress.io

HTMLtoWordPress.io 線上應用程式是將 HTML 檔案轉換為 WordPress 的最受歡迎的解決方案之一。HTMLtoWordPress.io工具令人興奮的地方在於，它主要提供完整網站（使用HTML構建的網站）的轉換。

您只需開啟主頁，上傳 HTML 壓縮檔案，即可快速轉換。該網路應用程式可全自動完成從 HTML 到 WordPress 的轉換，因此不需要任何編碼技能，也無需使用 FTP 客戶端。

在完成轉換並在網際網路上釋出之前，您還可以檢視新 WordPress 網站的完整預覽。您網站上的內容和圖片也會保留到新的 WordPress 網站上。這些內容和圖片可以通過 Simple Live Editor 應用程式進行編輯，而且它應該可以毫無問題地引用這些圖片以及 JavaScript 和 CSS。總的來說，如果你有一個或多個 HTML 網站需要轉換，這看起來是一個可靠的解決方案。另外，您還可以在 HTML 中新增類，以使用 WordPress 的高階功能。

適用於 WordPress 的 Pinegrow 主題轉換器

Pinegrow Theme Converter 是一款獨特的網頁設計工具，可將 HTML 網站資料夾立即轉換為完整的 WordPress 主題。主題轉換器可上傳檔案，並在視覺化介面中預覽 WordPress 網站。上傳後，您可以點選頁面上的不同元素，併為每個專案分配智慧操作。這些操作與 WordPress 相整合，因此在您分配操作的同時，它還會將合適的 WordPress 功能新增到您自定義的 HTML 結構和樣式中。

Pinegrow Theme Converter

一旦您決定了所需的操作並儲存了檔案，Pinegrow 就會提供將專案匯出為標準 WordPress PHP 檔案的選項，這些檔案可以上傳到普通的 WordPress 安裝中，以便在實際生活中進行測試。此外，內容匯入系統可確保您成功傳輸圖片和視訊等媒體元素。

我們尤其喜歡讓你回到 Pinegrow 進行編輯的功能。您只需點選更新按鈕，就能將新版本傳送到您的 WordPress 主題中，無需進行任何高階編碼更改或調整 WordPress 中的網站。

這不是一個外掛。事實上，在將 HTML 檔案轉化為 WordPress 主題的過程中，沒有使用任何 WordPress 外掛。Pinegrow 是一款可下載的軟體，有 Mac、Windows 和 Linux 版本。從漂亮的視覺化編輯器到即時更新功能，Pinegrow 軟體看起來是將完整的 HTML 網站轉換成 WordPress 主題的最佳選擇之一。

Jekyll

Jekyll

Jekyll 是一款免費的 HTML 到 WordPress 轉換器，可將純文字檔案轉換成真正的網站。該專案託管在 GitHub 上，可免費下載。它提供了一個機會，讓你不再需要資料庫和評論管理，而只需專注於傳輸內容和傳輸/轉換 HTML、CSS 和 markdown 檔案。

Jekyll 的一個有趣之處在於，它可以滿足面向部落格的 HTML 設計，編譯頁面、帖子和固定連結的內容設定，從而遷移部落格並保留或建立自定義佈局、類別和其他大量專案。你可以在 macOS、Ubuntu、Windows 甚至其他 Linux 作業系統上安裝 Jekyll 轉換器。總而言之，Jekyll 是一個志願者專案，擁有主題、外掛和指南等各種資源，可以測試你的知識水平，幫助你把 HTML 設計變成特別的東西。

我們尤其喜歡與 MemberSpace 等電子商務工具和 Getform 等表單應用程式的整合。整合列表很長，但這確實證明了在完成 HTML 到 WordPress 的轉換後，您的網站還能有多大的潛力。

Theme Matcher

將 HTML 轉換為 WordPress 的 Theme Matcher

Theme Matcher 與其說是一款HTML檔案轉換器，不如說是一款從第三方網站提取HTML檔案的工具。在您從個人網站或您不擁有的 HTML 網站中貼上 URL 後，它就會生成完整的 WordPress 主題。

這種型別的轉換器和主題生成器背後的理念是，要麼把你自己的 HTML 網站轉換成一個完整的 WordPress 網站，要麼根據你在網上注意到的設計製作一個主題。

Theme Matcher 預覽

例如，你可以瀏覽你最喜歡的線上商店，然後決定以這種格式和結構開始你的設計。主題匹配器會為你的網站生成一個全新的主題，由於版權問題，這個主題顯然需要更改，但它是一個很好的起點。

只需將網站 URL 複製並貼上到 “Theme Matcher” 欄位即可。請它為你建立一個主題，並選擇要轉換成 WordPress 內容的網站佈局。將 HTML 轉換為 WordPress 的大部分工作都在後臺進行，重要的是要確定這些 WordPress 內容區域，使其儘可能接近真正的 WordPress 主題。最後，您可以下載主題並將其上傳到您的 WordPress 內容管理系統。

如果你的 HTML 網站目前還沒有上線，你也無法貼上 URL，主題匹配器提供了一種上傳 HTML 頁面壓縮檔案的方法，這樣就可以完成相同的過程。

Import Into Blog

ImportIntoBlog.com HTML 至 WordPress 轉換器

Import Into Blog 是一個線上應用程式，可從您的實時網站抓取 HTML 和其他檔案，將其轉換為 WordPress 網站。有幾種可供選擇的方式，例如建立一個可下載的 XML 檔案，匯入到您的 WordPress 網站。您還可以考慮將最終結果下載為 WordPress 主題，上傳到 WordPress，檢視已完成的網站。

使用 ImportIntoBlog 工具可以自動恢復網站。更不用說，所有內部連結都會被重寫，使其指向新網站上的正確頁面。絕大多數網站內容都能自動發現，而且在匯出之前，你還可以自定義主題的外觀和風格。一般來說，該工具最適合靜態 HTML 檔案或 URL。它可以管理 CSS 檔案和 Javascript，讓你瞭解網站背後的完整故事，並使其正常執行。

HTML to WordPress Converter

HTML to WordPress Converter 應用

HTML to WordPress Converter 是另一種能將 HTML 網站轉換成 WordPress 主題的解決方案。

只需在一個欄位中貼上網站 URL，然後點選 “生成主題 “按鈕即可。你可以為 WordPress 選擇內容和側邊欄區域，這樣你的頁面和文章就會出現在正確的位置，而且你還可以從之前的 HTML 網站中提取準確的必要資料。看起來，你的所有內容都能轉移過來。不過，您可能需要仔細檢查照片和其他媒體元素，並偶爾通過 WordPress 完成上傳。

這會生成一個主題，而不是一個完整的網站。您需要啟用自己的 WordPress 網站並將其託管在其他地方。您可以從這個工具下載主題，這個主題看起來與之前的 HTML 網站一模一樣。請注意，有些元素將無法按照原來的方式執行，但從我們的測試來看，它能很好地保持網站的結構和格式。

顯然，HTML to WordPress Converter 的開發者還提供免費的 CSS 調整服務，如果有些東西沒有達到你的要求的話。

PHP Simple HTML DOM Parser

PHP Simple HTML DOM Parser 工具

在向 WordPress 上傳 HTML 檔案時，PHP Simple HTML DOM Parser 會完成一個必要的過程。解析器的作用是定位、提取和更改網站或 HTML 檔案中的任何 HTML 元素。這樣，您就可以找出錯誤，在將它們轉換到 WordPress 網站之前進行修復，甚至使用該工具修改當前 WordPress 網站上存在的 HTML 專案。

該工具可從 SourceForge 網站免費下載，因此您可以檢視評論，並在必要時請求支援。

Hiring a Developer

將 HTML 轉換為 WordPress 的 Acclaim 服務

WP Geeks、WP Online Support 和 Acclaim 提供價格合理的 HTML 到 WordPress 的轉換服務，適合那些不想親自動手完成轉換或上述自動工具無法產生可靠結果的人。聘請開發人員有時非常有意義，原因在於你最終可以在這個過程中節省時間和金錢，特別是如果這是一項簡單的工作，而你根本不具備完成這項工作的知識。

與真正的開發人員合作，意味著你不必利用自己的任何技術技能或缺乏技術技能來從 HTML 檔案渲染一個新網站。這項工作會交給懂行的人去做，與那些可能有一些開發人員可以幫助你的網路應用程式相比，你更有可能找到正確的幫助，並提出問題和要求。

更不用說，您還可以要求在新網站上保留哪些功能。而且，這幾乎可以保證網站的操作能真正轉移到新網站上併發揮應有的功能。

我們知道，聘請 HTML 到 WordPress 的開發人員並不總是在預算之內，但如果您遇到了麻煩，又有一點現金可花，還是值得考慮一下的。

如何使用自動應用程式或外掛將 HTML 轉換為 WordPress

如果您對使用之前列出的HTML到WordPress自動轉換器之一有疑問，這裡有一個 WP Site Importer 的例子。這是一種信譽較高的解決方案，它是一個第三方 WordPress 外掛，彙集了其他 HTML 到 WordPress 自動轉換器的許多功能。

首先，在 WordPress 控制面板上下載、安裝並啟用 WP Site Importer 外掛。您必須從開發者網站下載壓縮檔案，並註冊免費試用。

WP Site Importer 外掛提供一系列匯入工具，適用於單個頁面和帖子，以及完整網站和完成工作所需的其他元素，如圖片本地化和內部連結修改。

在本例中，我們將從單個 HTML 頁面開始，介紹其中的大部分功能。在 WordPress 儀表板中，轉到 Site Importer > Import Single Page。

將單個 HTML 匯入 WordPress 頁面

外掛中的絕大多數預設設定都已準備就緒，這意味著您通常無需更改任何內容。當然，除非您想調整諸如將頁面作為文章匯入或移除特色圖片之類的設定。請隨意瀏覽所有外掛設定，確保它們符合你的需求。

單頁匯入時，只需貼上URL讓外掛掃描即可。

注：檔案上傳只適用於多頁轉換。

匯入頁面嚮導

單擊 “Import Page” 按鈕繼續。

點選 “Import page” 按鈕

外掛會告訴你成功匯入了哪些頁面，並提供幾個連結來預覽新的 WordPress 頁面，必要時還可以對其進行編輯。

點選 “Preview” 連結

您還需要轉移靜態 HTML 網站上的任何選單。

為此，請轉到 Site Importer > Import Menus。

將選單匯入 WordPress

匯入選單與檔案轉換類似，因為它會要求輸入 URL。您還可以設定選單密度和最小選單尺寸等元素。

單擊 “Identify Menu” 繼續。

Import Menu Wizard  面板

現在，每個選單項都會出現在一個列表中。如果你的 HTML 網站上有多個選單，你還會看到多個選單。

選中要匯入的選單，併為每個選單命名。單擊 “Import Menu” 按鈕。

匯入選單

有了 WordPress 選單匯入，您仍然需要配置選單位置。

在儀表板中，導航至 Appearance > Menus。

命名並建立一個選單，然後儲存到 WordPress。如果一切按計劃進行，您應該已經看到匯入的選單了。

儲存匯入的選單

單擊 “Manage Locations” 標籤，在下拉選單中找到匯入的選單。你應該把新選單放到你選擇的選單位置。

完成後，請務必儲存更改。

根據需要更改選單位置

將 HTML 網站匯入 WordPress 的另一個步驟是本地化圖片。要完成這一過程，請轉到網站 Site Importer > Localize Images。

將影象本地化，以便將 HTML 轉換為 WordPress

影象本地化的所有預設設定通常都可以使用。

單擊 “Next” 按鈕。

點選 “Next” 按鈕開始

你會看到從上一個網站傳輸過來的圖片列表。

選擇要本地化的圖片，然後單擊 “Next” 按鈕。

檢視所有匯入的影象

幾秒鐘內，外掛就會將每張圖片新增到 WordPress 媒體庫，並在新網站上給出它們的所有 URL。您可以訪問媒體庫，確保已完成此轉換。

本地化影象的最終產品

HTML 轉換的另一個部分是更新內部連結。所有網站轉換通常都會導致連結中斷和 URL 結構問題。

我們需要修復這些問題，因此請進入 Site Importer > Update Internal Links 開始操作。

徹底更新內部連結

下面的頁面將解釋如何用新網站域的版本替換舊連結，新增子目錄以獲得流暢的使用者體驗，並駐留在 WordPress 網站的 URL 上。

您只需點選 “Update Links” 按鈕。外掛會為您完成所有轉換工作。

點選 “Update Links” 按鈕

如果你打算轉換整個 HTML 網站（而不是一個頁面），請瀏覽 Site Importer 選單下的 Import Multiple Pages 選項卡。

對於那些有興趣上傳本地網站檔案而不是複製實時 URL 的使用者來說，這也是一個不錯的選擇。

一次匯入多個頁面

Multiple Pages Wizard 有用於貼上 URL 和上傳網站 HTML 檔案的欄位。

請選擇最適合您工作的選項。

輸入要掃描匯入的 URL

在轉換和匯入 HTML 網站的過程中，您會看到一個匯入 WordPress 網站的 URL 列表。如果您不需要這些頁面，可以將它們從匯入中移除。您還可以選擇匯入帖子、將其設定為未釋出以及包含特色圖片。

匯入多頁嚮導

最後一步將顯示從 HTML 網站轉換到 WordPress 系統的全部網頁列表。現在，您可以點選每個頁面的 “Edit” 或 “Preview” 按鈕，繼續定製您的網站。

匯入並準備好所有頁面

請記住，這樣的轉換並不意味著您馬上就能看到與 HTML 網站完全相同的設計。您可能需要匯入樣式表，甚至自己定製網站或頁面的程式碼。

小結

從 HTML 遷移到 WordPress 需要做一些工作。但這是值得的。將 HTML 上傳到 WordPress 還可以幫助完成一些不那麼複雜的任務，比如驗證網站所有權或實施一個簡單的 HTML 模組。

HTML 檔案上傳和轉換的可能性非常大。請記住，您通常可以使用自動 HTML 轉換器完成大部分工作。在此之後，很可能還需要手動操作，但只要結合正確的工具和知識，你幾乎可以複製任何你想要的 HTML 網站！