将 HTML 站点转换为 WordPress 站点

已发表: 2018-10-05

在（网络的）开始时，所有网站都是用文本和静态 HTML 制作的。然而，20 多年后的现在，网络已经大不相同了。网站要复杂得多。它们为网站创建者和访问者提供了更丰富、更愉快的体验。

这在很大程度上要归功于 WordPress 等开源项目。在过去十年左右的时间里，它成功地实现了在线发布民主化的核心使命（以及在此过程中的更多内容），因此任何安装了 WordPress 和正确主题/插件的人都可以拥有一个设计先进的现代网站和功能。不需要编码——甚至不需要 HTML！

这就是为什么像我这样狂热的 WordPress 用户，几乎很难相信在 2018 年有人可能仍在运营静态 HTML 网站，而不是带有主题和插件的 WordPress 网站。但事实是仍然有大量活动的纯 HTML 站点。（或带有一些 CSS 的 HTML。）

当然，这些网站所有者可能有充分的理由不升级或转换。也许他们的网站内容永远不会改变，并且已经存在的简单格式和设计是有用的？或者，也许这比担心保持 WordPress 网站更新更麻烦？两者都是正当理由（除其他外）。 “不要修复没有损坏的东西”的主要例子。

但是，我有一种感觉，这些可能不是某些（也许很多）没有实现飞跃的主要原因。最明显的一个是他们根本不知道如何将他们的 HTML 站点转换为 WordPress 站点。特别是不会丢失内容或需要逐页进行过度格式化。

值得庆幸的是，与 WordPress 的情况一样，有很多方法可以解决这个问题。我在下面编译了一些选项。

订阅我们的 YouTube 频道

将静态 HTML 站点转换为 WordPress 站点的选项

您选择如何将静态 HTML 站点转换为 WordPress 站点无疑取决于您的个人偏好、所需的时间/金钱投资以及代码技能水平。您必须自己决定哪种方式最适合您，但通过下面的总结，您应该能够快速做出决定并直接跳至本文中针对您的具体情况的最相关信息。

有三个主要选项：

1. 根据您当前的静态 HTML 站点手动创建 WordPress 主题。

这将要求您进入您的代码。您必须通过 FTP 访问您当前的站点目录，并使用您现有的代码作为起点。从那里，您需要为 WordPress 主题创建必要的文件，并从 WordPress 代码中复制一些代码。如果您对 HTML、CSS 和一些 PHP 有一定的经验，这将是相当简单和直接的。

2. 安装一个预先制作的主题并简单地迁移您的内容。

这可能是简单性和价值交叉点的最佳选择。假设您已经拥有当前网站的主机，如果您选择购买高级主题，则只需要花钱。我们将用于导入内容的插件在官方 WordPress 插件库中免费提供。

3. 付费使用 HTML 到 WordPress 转换服务重新创建您的网站。

这是最简单的解决方案，因为它不需要您做任何事情。但是，它不会让您熟悉 WordPress，而且费用会因您选择雇用的人而异。我不会在下面的部分中介绍这个选项，因为如果这是您感兴趣的路线，您只需快速搜索服务提供商，他们就会处理剩下的事情。

准备 HTML 到 WordPress 的转换

无论您决定选择下面的哪条路线，在潜入之前您都需要做一些事情。

首先是选择托管计划。您需要查看现有的选项并决定最适合您需求的软件包。或者您可能想要创建本地 WordPress 安装？您以后可以随时将其迁移到托管服务。

选择后，您将需要安装 WordPress 并登录 WP Admin。这是我们的两条可能的路径分开的点。

手动将您的静态 HTML 站点转换为 WordPress

如果您的目标不仅是将静态 HTML 站点中的内容导入 WordPress，还要复制您当前的设计，这意味着您需要创建自己的自定义主题。值得庆幸的是，这并不像一开始听起来那么可怕。它只涉及创建几个文件夹和文件，进行一些复制和粘贴，然后上传结果。

您将需要一个代码编辑器，例如 Sublime 或 Notepad++，并且可以访问您的 HTML 站点目录和新的 WordPress 安装目录。

步骤 1：创建一个新的主题文件夹和必要的文件

在您的桌面上，创建一个新文件夹来保存您的主题文件。随意命名您的主题。

接下来，在您的代码编辑器中创建一些文件（它们都在您的新主题文件夹中）。暂时不要对他们做任何事情。只需将它们打开以进行进一步编辑。

样式文件
索引.php
头文件
侧边栏.php
页脚.php

第 2 步：将现有 CSS 复制到新样式表中

如果您想复制一个设计，这可能意味着您至少有一些想要保存的 CSS。因此，您要编辑的第一个文件是 Style.css 文件。

首先，将以下内容添加到文件顶部。

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

在本节之后，只需将您现有的 CSS 粘贴到下方即可。保存并关闭文件。

第 3 步：分离您当前的 HTML

在我们进入第三步之前，让我快速说明一下 WordPress 的工作原理。 WordPress 使用 PHP 从其底层数据库调用和检索数据片段。我们在这个小教程中使用的每个文件都旨在告诉 WordPress 您网站内容的哪一部分要显示以及在哪里显示。

因此，当我说我们要“砍掉”您现有的 HTML 时，我们实际上所做的只是将现有代码的一部分剪切并粘贴到我们刚刚创建的不同文件中，以便 WordPress 知道在哪里显示他们。

开始了。

首先，打开您当前站点的index.html文件。突出显示从文件顶部到开头div class="main"标记的所有内容。将此部分复制并粘贴到header.php文件中，保存并关闭。

其次，回到你的index.html文件。突出显示side class="sidebar"元素和其中的所有内容。将此部分复制并粘贴到您的sidebar.php文件中，保存并关闭。

第三，在您的index.html 中选择侧边栏之后的所有内容并将其复制并粘贴到您的footer.php文件中，保存并关闭。

最后，在您的index.html文件中，选择剩下的所有内容（这应该是主要内容部分）并将其粘贴到您的index.php文件中。保存，但不要关闭。

但是，您现在可以关闭index.html文件并继续执行最后的步骤。快完成了！

第 4 步：完成您的 Index.php 文件

为了完成新主题的index.php文件，您需要确保它可以调用位于您创建的其他文件中的其他部分（除了主要内容）。或者换句话说，将我们刚刚“切碎”的元素重新组合在一起。

在index.php文件的最顶部，放置以下 php 行。

<?php get_header(); ?>

然后，在index.php文件的最底部，放置这些 php 行。

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

最后，我们必须添加所谓的循环。这是 WordPress 用来向访问者显示您的帖子内容的主要 php 位。因此，创建新主题的index.php文件的最后一步是在内容部分添加以下代码。

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <div class="navigation index">
       <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

保存您的index.php并关闭。你的主题现已完成！剩下的就是将其上传到您的 WordPress 网站。

第 5 步：上传您的新主题

现在您已经创建了主题文件并将它们全部存储在新的主题文件夹中，您将需要访问新的 WordPress 安装目录。

将您的新主题文件夹放在/wp-content/themes/ 中。然后导航回WP Admin > Appearance > Themes你新创建的主题应该出现在那里。继续并激活它！

此时剩下要做的就是用旧网站的内容填充新的 WordPress 网站。按照下面的部分（跳过有关使用预制主题的部分）来查看如何完成。

使用预制的 WordPress 主题并导入 HTML 内容

如果上述步骤对您来说过于密集或耗时，请放心，还有另一种方法。您可以利用更广泛的 WordPress 市场中提供的数千个主题中的任何一个，而不是将您现在正在使用的任何设计转换为 WordPress 主题。

有免费主题，也有高级主题。在决定哪个最适合您之前，您可能需要阅读哪些主题旨在满足您的需求，并在 Elegant Themes 和其他地方按主题类别浏览。

一旦您选择了您喜欢的主题（并下载了其压缩文件包），您将需要返回WP Admin > Appearance > Themes > Add New并安装/激活您的新 WordPress 主题。

完成此操作后，您将拥有一个新的 WordPress 网站和主题——但除此之外别无他物。当您预览您的网站时，它将是空的内容并且可能看起来有点无聊。没关系，因为接下来我们将导入您旧网站的内容。

在 WP Admin 中，转到Plugins > Add New并搜索 Stephanie Leary 的名为 HTML Import 2 的插件。 安装并激活此插件后，请按照其方便的用户指南导入您的整个 HTML 页面目录。配图完成！

在此之后，您的所有旧内容都将保留在 WordPress 上，并按新主题进行格式化。或者，如果您在上面创建了自己的主题，您的网站应该看起来和以前一样——只是在 WordPress 上运行。

综上所述

如果您使用这篇文章作为将网站迁移到 WordPress 的指南，那么您刚刚加入了世界上最大的开源社区之一。欢迎！这是一个有趣的地方，有很多开发人员、设计师、博客作者、DIY 者等等——他们都在使用 WordPress 和 WordPress 主题/插件进行构建、播放和创建。

如果您“发现了 WordPress 错误”，WordPress.org 官方网站上充满了有用的主题、插件和其他资源。如果您想进一步调整您的主题文件，请探索 Codex 中看似无穷无尽的提示、技巧和变化。

当然，我们希望你能留下来在下面的评论中聊天，并在未来订阅更多的博客文章。

文章缩略图来自 Max Griboedov / shutterstock.com