将 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 文件中找到类似的代码。

Website Title


Article
Test text right here..
Subheading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
A Sub
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Sidebar here
Etiam ullamcorper lorem dapibus velit suscipit ultrices. 
 

下面的模板是另一个范例，可供您根据自己的策略进行选择。

HTML 网站示例

正如你所看到的，这个网站的 index.html 文件要复杂一些，但其结构方式仍然很熟悉。

index 文件的 HTML 示例

这两个例子都包括页眉、内容区域、边栏和页脚。

你很可能会有不同的设计。因此，你必须调整以下步骤。

每一步都涉及编辑和添加到您之前创建的每个新 WordPress 文件。尽管如此，还是要打开 HTML 网站中的 index.html 文件。您将继续使用它。

The header.php File

在打开的 HTML 文件中，查找文件开头和主要内容区域结尾的所有内容。主要内容区域通常用

Sidebar here
Etiam ullam corper lorem dapibus velit suscipit ultrices.