将 HTML 模板转换为 WordPress 主题

尽管 Web 技术已经取得了长足的进步，但仍然存在完全使用 HTML 创建的网站。 如果您碰巧拥有其中之一，您可能想知道如何将 HTML 模板转换为 WordPress 主题。

幸运的是，如果您想将这些 HTML 文件转换为 WordPress，您有多种选择。 可用的技术范围从动手手动转换到与可以处理所有繁重工作的专家合作。

在本文中，我们将介绍四种不同的 HTML 模板转换方法。 对于每一种，我们都将提供说明和资源，以帮助您将基于 HTML 的网站纳入 WordPress 的范围。 有很多内容要介绍，所以让我们开始吧！

手动转换 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，我们相信合适的开发人员资源可以对您的项目产生巨大影响。 除了创新解决方案，我们还提供适合任何预算的计划和定价等级！