将 HTML 网站转换为 WordPress 网站

2022年5月18日

353

在（网络）开始时，所有网站都是用文本和静态 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 步：创建一个新的主题文件夹和必要的文件

在您的桌面上，创建一个新文件夹来保存您的主题文件。将其命名为您希望为主题命名的任何名称。

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

样式.css
索引.php
头文件.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 知道在哪里显示他们。

开始了。

首先，打开您当前网站的 索引.html 文件。突出显示从文件顶部到开头的所有内容 div类=“主要” 标签。将此部分复制并粘贴到您的 头文件.php 文件，保存并关闭。

第二，回到你的 索引.html 文件。突出显示 除了类=“侧边栏” 元素和里面的一切。将此部分复制并粘贴到您的 边栏.php 文件，保存并关闭。

第三，在你的 索引.html 选择侧边栏后的所有内容并将其复制并粘贴到您的 页脚.php 文件，保存并关闭。

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

你能够关闭你的 索引.html 但是现在提交文件并继续进行最后的步骤。快完成了！

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

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

在你的最顶端 索引.php 文件，放置以下行 php.ini

<?php get_header(); ?>

然后，在你的最底部 索引.php 文件，放置这些行的 php.ini 文件。

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

最后，我们必须添加所谓的循环。这是 WordPress 用于向访问者显示您的帖子内容的 php 的主要部分。所以创建新主题的最后一步 索引.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; ?>

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