上传和转换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 网站！