我是如何将 HTML 网站迁移到 WordPress 的(并让更新变得轻松 10 倍)

我是如何将 HTML 网站迁移到 WordPress 的(并让更新变得轻松 10 倍)

如果你曾经维护过一个传统的 HTML 网站,一定深知其中的繁琐。每次修改哪怕只是一行文字或替换一张图片,都需要打开代码、保存文件、再上传覆盖。

这正是许多人选择将网站迁移到 WordPress 的主要原因。WordPress 是一款完整的 CMS(内容管理系统),可以直接在后台完成所有更新,无需编写代码、不用 FTP 上传,也不需要额外软件。

我帮助过很多读者完成这种迁移。有些人只是想上传单个 HTML 页面,而有些人则打算将整个网站彻底重建到 WordPress 平台上。

本教程分别介绍这两种方案。你将学会如何安全迁移内容、避免网站停机,以及保持搜索引擎排名不受影响。

How to Convert HTML to WordPress

简要概述:如何将 HTML 转换为 WordPress

将 HTML 转换为 WordPress 有两种方式。若只需单个页面,最佳方案是使用页面构建器(如 SeedProd)在 WordPress 中重新创建该页面(也可以直接上传 HTML 文件,但无法使用主题和插件功能)。

若是完整站点迁移,则需要安装 WordPress、选择主题、重新构建页面、匹配原有 URL,并设置 301 重定向以保护 SEO。

为什么要将 HTML 网站转换为 WordPress?

从 HTML 切换到 WordPress 的最大优势在于便利性。WordPress 可以轻松更新内容、修改设计、添加新功能,全程无需触碰代码。

而静态 HTML 网站则不同,每次编辑都需要打开文件、修改代码、重新上传。即使只是替换一张图片或修正一个拼写错误,也可能耗费数小时。

Sublime text code editor

WordPress 的运作方式截然不同。它是一个完整的 内容管理系统(CMS),提供统一的后台仪表板来管理所有事务。登录后即可编辑内容并即时发布,无需任何编码基础。

此外,WordPress 还赋予你对网站外观的完全控制权。无需手动重建布局,你可以从数千款现成的 WordPress 主题 中任选其一,瞬间改变网站整体设计。

WordPress themes directory

如果需要额外功能——比如 添加联系表单、优化 SEO 或创建图库——只需在 6 万多个 WordPress 插件中选择安装。这些插件如同网站的应用程序,只需几次点击即可完成部署。

总而言之,迁移到 WordPress 能节省时间、保持网站更新,并随着需求变化不断扩展功能。

更多细节可参阅我们对 WordPress 与静态 HTML 网站的对比分析。

如何将 HTML 转换为 WordPress

前面介绍了 WordPress 的优势,接下来看具体实现步骤。

最佳方案取决于你的目标:是想在 WordPress 站点中添加单个 HTML 页面,还是希望将整个网站完全迁移?

本教程分别介绍这两种需求的最简处理方式,先从最简单的场景开始。

场景一:想在 WordPress 中添加单个 HTML 页面

先来看一个常见情况。你并不需要迁移整个网站,只是有一个 HTML 文件想嵌入到 WordPress 站点中。

也许你从在线市场下载了一个 HTML 模板,或者设计师给了你一个用于特定营销活动的文件。这种情况很常见。

常见场景包括:自定义着陆页、特殊的“即将上线”页面、独特的销售页面模板,甚至是简单的单页在线简历。

如果你的目标是添加这样一个页面,有几种处理方式。下面先介绍最快捷的方法。

方法一:直接上传 HTML 文件到网站(最简方法)

如果只有一个 HTML 文件,可以直接将其上传到你的 WordPress 主机 账户。

但如果页面还包含额外的 CSS 文件和图片,则需要将所有文件放入一个文件夹,然后将整个文件夹上传到网站。

你可以通过主机面板中的文件管理器,或使用 Windows/Mac 的 FTP 客户端 软件来完成上传。具体操作可参考初学者指南中 如何使用 FTP 上传文件到 WordPress 的详细说明。

只需将文件或文件夹添加到网站的主目录即可。这通常称为 public_html 或根目录,是存放网站所有文件的顶层文件夹。

Uploading an HTML File

上传完成后,任何人都可以通过 URL 直接访问,例如:

yourdomain.com/mylandingpage.html

我编写了一份完整指南,详细演示 如何将 HTML 页面上传到 WordPress,帮你避免出现 404 错误。

局限性: 虽然上传 HTML 文件很便捷,但有必要了解其缺点。这种方法会使页面与 WordPress 完全隔离。

上传的页面不会使用 WordPress 主题的样式,意味着它不会显示网站的页眉、页脚或字体,很可能与网站其他部分外观不一致。

此外,该页面无法在 WordPress 后台编辑,也无法受益于你的任何插件(如 SEO 或缓存工具)。

因此,这种方式不适合需要频繁更新的页面。

方法二:使用页面构建器重新创建 HTML 页面(最佳方法)

更好的方案是直接在 WordPress 中使用 页面构建器插件 重新创建页面。

这是一种可视化拖放式编辑器,无需编码即可构建自定义页面布局。这种方式能提供完全的掌控权,而且操作远比想象中简单。

我推荐使用 SeedProd。这是一款强大的拖放式页面构建器,可以直观地复刻任何布局,全程无需触碰代码。你只需添加栏、文本、图片和按钮,即可匹配原来的 HTML 页面。

The SeedProd page builder

最大的好处是,新页面会自动使用主题的设计,呈现完美一致的外观。它还能与你安装的其他所有插件协同工作。

最棒的是,需要修改时,你可以像管理网站其他页面一样,直接在 WordPress 后台编辑该页面。

我们编写了详细教程,介绍如何使用 SeedProd 创建不同类型的页面:

场景二:想将整个 HTML 网站转换为 WordPress

接下来处理另一个常见需求:将整个静态 HTML 网站迁移到 WordPress。这适用于希望全面升级网站、将所有内容统一管理的场景。

最有效且可靠的方法是使用现代 WordPress 工具系统性地重建网站设计和内容。这比手动转换代码要简单得多,效果也更好。

第一步:安装并设置 WordPress

首先需要 WordPress 主机。这是网站文件在互联网上的存放位置。优质主机能确保网站流畅运行、访客随时可访问。

我推荐新手使用 Bluehost。我自己也在用 Bluehost,感觉非常可靠,尤其是对新手非常友好。而且经常有优惠活动。

目前他们为 WPBeginner 读者提供免费域名和主机大幅折扣。每月仅需 $2.99 起,性价比很高。

→ 点击此处获取 Bluehost 专属优惠 ←

其他选择:如果想看看其他选项,我推荐 HostingerSiteGround。两者都口碑良好,价格合理,性能出色。

本指南中使用的是 Bluehost 的截图来演示流程。但无论选择哪家主流 WordPress 主机商,基本步骤都大同小异。

首先访问 Bluehost 网站,点击“Get Started Now”按钮。

Bluehost homepage

随后会看到定价页面,列出不同方案。对大多数网站而言,尤其是刚起步时,Starter 方案完全够用。

点击“Choose Plan”按钮选择方案。

Choose Bluehost pricing plan

接下来需要填写 域名。这是网站在互联网上的地址(如 www.yourwebsite.com)。

选择“我稍后创建域名”。这样在构建新网站时,你的旧 HTML 网站仍可保持在线。稍后在完成域名切换,确保网站不会中断。

Set up domain name later

为什么要稍后设置域名? 🤔 如果你已有绑定到 HTML 网站的域名,选择此选项可以在不影响现网站的情况下完成 WordPress 配置。准备就绪后,我会演示如何将域名指向 WordPress。

完成域名选择后,需要填写账户信息和支付方式来完成购买。

随后 Bluehost 会发送一封包含登录凭据的邮件。请妥善保存!这组凭据将用于登录主机账户后台。

最喜欢的部分来了:首次登录时,Bluehost 会自动为你安装 WordPress。

现在只需找到“Edit Site”按钮并点击,即可直接进入 WordPress 后台。

Bluehost login WordPress

安装完成!

如果对 WordPress 安装需要更多帮助,可以参考详细的 WordPress 安装教程,其中包含每一步的详细说明。

第二步:选择一款匹配旧网站设计的 WordPress 主题

接下来需要选择一款外观与原有 HTML 网站设计相似的主题。具体考量因素可参考我们的 选择完美 WordPress 主题 指南。

不必担心找不到完全匹配的主题,因为可以进行 自定义设置

Block settings

主题为你提供专业设计基础,控制网站的页眉、页尾、颜色和字体,无需编写代码。WordPress 有数千款优秀的免费和付费 主题 可供选择。

第三步:设置 WordPress 固定链接

WordPress 提供多种 固定链接 选项,让你控制网站地址(URL)的结构。

我推荐使用“文章名称”固定链接结构。它会根据页面或文章的标题生成简洁易读的 URL(如 yourwebsite.com/about-us)。

这不仅便于访客理解,还能将关键词直接包含在地址中,带来一定的 SEO 优势。

普通的固定链接完全无法传达文章信息,例如:

yourblog.com/?p=123

“文章名称”固定链接则更加清晰、信息丰富:

yourblog.com/your-blog-post-title

相信你也会认同第二种方式更易于理解。

在后台的 设置 » 固定链接 页面中即可快速选择。

在“常用设置”区域,选择“文章名称”选项。

WordPress' permalink settings

然后向下滚动,点击“保存更改”按钮。

固定链接设置完成!今后 WordPress 将对所有新页面和文章使用“文章名称”结构。

第四步:在 WordPress 中重建内容

主题激活后,就可以将旧 HTML 文件中的内容迁移到 WordPress 中了。

根据每个页面的复杂程度,可以选择最合适的方法。

WordPress 区块编辑器

对于大多数重要页面,如“关于我们”、“服务”或“联系我们”页面,WordPress 内置的区块编辑器是理想之选。如果页面主要是简单布局的文字和图片,这是最简便的方案。

在 WordPress 中打开区块插入器库

你可以在 WordPress 后台直接创建新页面,然后将旧 HTML 文件中的文字复制粘贴到编辑器中。之后使用区块来添加标题、图片、列表和按钮,从而构建内容结构。

详细操作说明请参阅 如何使用 WordPress 区块编辑器 指南。

页面构建器插件

如果旧网站有自定义首页、着陆页或复杂的多栏布局页面,那么 页面构建器 是更好的选择。它能灵活复现这些特定的设计。

我推荐使用 SeedProd。这是一款拖放式构建器,可以直观地复刻任何布局,让你在无需编写代码的情况下完全掌控设计。这非常适合让那些重要的自定义页面呈现完美效果。

SeedProd 是一款流行的 WordPress 页面构建器插件

本文前面部分提供了 教程列表,其中包含使用 SeedProd 在 WordPress 中创建不同类型页面的详细指南。

专业提示: 为简化操作,可同时打开两个浏览器标签页。第一个标签页显示正在运行的 HTML 页面,第二个标签页打开网站的 SeedProd 页面或 WordPress 编辑器。这样可以逐区块复制旧页面的内容并粘贴到新页面中,完成布局重建。

第五步:设置重定向以保护 SEO

这一步绝对不能跳过,尤其是当你的旧网站从搜索引擎获得了大量流量时。

你的旧 HTML 网站 URL 与新的 WordPress 固定链接很可能不同。如果不解决这个问题,任何持有旧网站链接的用户都将在新 WordPress 网站上看到令人沮丧的 404“页面未找到”错误。

为避免此问题,需要设置重定向,自动将访问者从旧 HTML URL 引导到新 WordPress 网站上的对应页面。

需要安装并激活 Redirection 插件。该插件免费且非常有效。如需帮助,请参阅 如何安装 WordPress 插件 指南。

该插件提供了友好的界面来安全地管理重定向。这比手动编辑网站的 .htaccess 文件 要简单安全得多,因为后者一旦出错可能导致整个网站宕机。

激活后,你可以在 工具 » Redirection 中找到该插件的设置界面。

在 Redirection 插件界面中,“Source URL”用于输入旧的 HTML 网站 URL。

例如,如果旧网站上“关于我们”页面的 URL 是 https://your-old-website.com/about.html,则输入 /about.html

为网站添加新重定向

“Target URL”用于输入新 WordPress 网站上对应页面的新 URL。

例如,如果新“关于我们”页面在 WordPress 中的固定链接是 about-us,则输入 /about-us/

请确保为重定向类型选择“301 – Moved Permanently”(永久重定向)。301 重定向会告知搜索引擎该页面已永久迁移到新位置,这对 SEO 非常重要。

最后,点击“Add Redirect”按钮保存重定向设置。

详细操作说明请参阅 如何在 WordPress 中设置重定向

这一点对从旧网站迁移的每个页面都至关重要。慢慢来,仔细将每个旧 URL 映射到新 URL,确保不会有访问者或搜索引擎迷路。

添加重定向后,最好测试一下。在浏览器中输入旧的 HTML 网站 URL,确保它们能正确重定向到新 WordPress 网站的对应页面。

花时间做好这一步,可以确保不会丢失已经积累的宝贵流量和权重。这是成功迁移的关键。

备选方案: 如果你已经在使用 AIOSEO 或考虑将其用于 SEO,那么可以使用它的重定向管理器,而无需安装单独的 Redirection 插件。

这是付费插件,但内置了强大的重定向管理器,支持 设置全站重定向

输入新域名地址进行迁移

此外,AIOSEO 还有许多其他功能帮助网站在搜索结果中获得更好排名。

它提供 404 错误跟踪 功能,方便及时发现失效链接,还能轻松添加 结构化标记、自定义面包屑、本地 SEO 模块等。

第六步:将域名指向新的 WordPress 网站

大功告成!内容已导入 WordPress,图片也已上传,网站外观不错。现在需要让用户输入域名(如 yourwebsite.com)时能够访问新的 WordPress 网站。

为此需要更新域名设置,具体是修改名称服务器(nameservers)。

名称服务器相当于互联网的地址簿总册,是特殊地址,用于告诉互联网具体到哪里查找域名对应的网站。

目前,域名的“地址条目”(其名称服务器)指向存放旧静态 HTML 网站的位置。

要让新 WordPress 网站显示出来,需要更新这个地址条目。将名称服务器更改为指向新的 WordPress 主机。

这相当于向整个互联网宣告:“yourwebsite.com 不再访问旧网站了,请访问我的新 WordPress 主机。”

你的 WordPress 主机商(如 BluehostHostingerSiteGround)会提供所需的名称服务器信息,通常如下:

ns1.hostingprovider.com
ns2.hostingprovider.com

主机商 会提供具体使用的名称服务器。

但在哪里修改名称服务器设置?这取决于你在哪里注册域名,称为 域名注册商

可能是提供主机的同一家公司,也可能是独立的域名注册商,如 Network SolutionsNamecheap

需要登录域名注册商的账户,然后查找域名相关设置,如“DNS 设置”、“名称服务器”或“域名管理”。

例如,以下是我在 Bluehost 账户中看到的界面。

在 Bluehost 中管理名称服务器

具体步骤因所使用的公司而异。可以在我们的 轻松更改域名名称服务器指南 中找到许多流行域名注册商的详细操作说明。

更新这些名称服务器后,变更需要一点时间才能在全球互联网生效。通常只需几小时,有时可能需要一两天。

这就是所谓的“DNS 传播”。在此期间,部分访问者可能仍看到旧网站,而另一部分访问者则开始看到新的 WordPress 网站。

DNS 传播完成后,用户在浏览器中输入你的域名时,将被引导至新提供商托管的新 WordPress 网站!

第七步:安装必要的 WordPress 插件

接下来谈谈人们从 HTML 网站迁移到 WordPress 的主要原因之一:插件!

插件就相当于网站的应用程序。这些小工具可以安装到 WordPress 网站上,即时添加新功能和特性。

在静态 HTML 网站上,添加任何新功能通常都需要编写代码。而在 WordPress 中,往往只需安装并激活一个插件。

这就像从功能手机升级到智能手机。插件为网站开启了无限可能,无需成为编程高手。

插件能做什么?几乎任何你能想到的功能。

有用于 备份、增强安全性、设置缓存、开设 电商商店、搜索引擎优化等的插件。

WordPress 有数千款插件可供选择,包括免费和付费版本。数量众多,确实有些难以抉择。我经常被问到:“我到底需要哪些插件?”

因此我们创建了如何选择最佳插件的指南,值得一读,可以了解如何评估插件并找到适合自己需求的那一款。

不过为了让你快速上手,以下是我经常推荐在新 WordPress 网站上安装的几款核心插件:

  • WPForms 可以轻松创建功能强大的表单。我在自己的网站上使用它,感觉非常易用。更多功能信息请参阅 WPForms 完整评测
  • SeedProd 是一款拖放式网站构建器,可轻松自定义网站设计。它非常适合创建自定义页面布局,甚至无需编码即可构建完整的 WordPress 主题。了解更多请参阅 SeedProd 详细评测
  • AIOSEO(All in One SEO)是最受欢迎、功能最全面的 WordPress SEO 插件之一。只需不到 10 分钟即可开始优化整个网站,提升搜索引擎排名。详情请参阅 AIOSEO 评测
  • MonsterInsights 帮助了解网站流量和访客行为。它将 WordPress 网站与 Google Analytics 关联,在后台直接展示关键网站统计数据。功能介绍请参阅 MonsterInsights 全面评测
  • OptinMonster 帮助增长邮件列表并提升转化率。它是创建弹出窗口、订阅表单等的强大工具。更多信息请参阅 OptinMonster 完整评测

更多插件灵感,请参阅我整理的 必备 WordPress 插件 列表。

手动将 HTML 转换为 WordPress 主题怎么样?

你可能想知道是否可以将旧 HTML 代码直接转换为新的 WordPress 主题。我经常收到这个问题,尤其是来自技术爱好者的问题。

开发者方法:将 HTML 转换为自定义主题

从技术上讲,开发者可以做到这一点。过程包括创建核心 WordPress 主题文件(如 header.phpfooter.phpindex.php),然后在其中重建 HTML 布局。

这需要将 HTML 文件中的静态内容替换为特殊的 WordPress 代码——模板标签。这些标签是 PHP 函数,用于动态从 WordPress 数据库中获取文章和页面等内容,使网站可被管理。

博客页面布局

为什么不推荐大多数用户使用此方法

然而,坦白说,我不建议大多数企业主或初学者使用这种方法。虽然听起来高效,但学习曲线非常陡峭,且存在几个重大缺点:

  • 需要扎实的编码知识。 必须对 HTML、CSS 和尤其是 PHP 有深入了解才能正确操作。
  • 必须学习 WordPress 模板层级 这是一套复杂的规则,决定 WordPress 为任意给定页面使用哪个模板文件。
  • 过程非常耗时。 手动转换代码需要大量时间,且容易出错。
  • 风险很高。 一个小错误就可能导致整个网站崩溃。

因此我强烈建议坚持使用前文介绍的方法。这些方法能带来 WordPress 的所有优势,无需面对技术难题。

WordPress 学习资源

你已经从静态 HTML 网站迈入了 WordPress 的动态世界。

如果你在想“WordPress 很不错,但要学的东西很多!”,那说明你并不孤单。确实,WordPress 有大量的功能和选项。

但不用担心!WordPress 实际上相当易用,你掌握它的速度会比预期更快。最棒的是?WPBeginner 是面向初学者最大的 WordPress 资源网站,我们会一步步帮助你。

以下是 WPBeginner 上完全免费的部分资源,帮助你掌握 WordPress:

  • WPBeginner 博客 是 WPBeginner 的核心。这里有数千篇分步教程、指南和文章,涵盖 WordPress 的方方面面。
  • WPBeginner 词典 是我们的术语表,可以学习 WordPress 相关术语。
  • WPBeginner 视频 是我们的视频教程库,逐步演示常见 WordPress 任务。非常适合视觉学习者!
  • 我们的 WPBeginner YouTube 频道 提供更多视频帮助,拥有超过一百万订阅用户。
  • WPBeginner 蓝图 介绍 WPBeginner 使用的工具和插件。就像深入了解我们自己的 WordPress 配置。
  • WPBeginner 优惠 汇总 WordPress 产品和服务的独家折扣和优惠券,仅限 WPBeginner 用户。可在主题、插件、托管等方面节省开支。

关于将 HTML 转换为 WordPress 的常见问题

帮助许多用户完成从 HTML 到 WordPress 的迁移后,我经常会收到一些常见问题。以下是一些最有代表性的解答。

1. 从 HTML 转换到 WordPress 会影响 SEO 吗?

可能会产生正面或负面影响。如果正确执行步骤,尤其是为所有旧页面设置 301 重定向,可以保护甚至提升 SEO。WordPress 和 AIOSEO 等插件提供的优化工具远比静态 HTML 网站强大。然而,如果不设置重定向,现有的排名将会丢失。

2. 将网站从 HTML 迁移到 WordPress 需要多长时间?

这取决于网站规模。5-10 页的小型网站可能一天内就能完成。拥有数十甚至数百页的大型网站则需要多天。关键是要有条不紊,逐页转移内容。

3. 能保持与 HTML 网站完全相同的设计吗?

虽然可以找到外观相似的 WordPress 主题,但要实现完全 1:1 复刻非常困难,除非进行定制开发。我的建议是专注于寻找与现代、简洁且与旧设计相似的主题,然后使用页面构建器重建关键页面布局。目标是实现现代化和简化管理,而不仅仅是创建完美克隆。

希望本教程帮助你将静态 HTML 网站转换为 WordPress。你可能还想查看我为初学者整理的 WordPress SEO 迁移终极检查清单,或者我精选的 最佳 WordPress 迁移服务

如果喜欢本文,请订阅我们的 YouTube 频道 获取 WordPress 视频教程。也可以关注我们的 TwitterFacebook

ESC 关闭