静态网站WordPress改造完整教程

前端高手详细指导:将静态HTML网站整合到WordPress的三种方案与完整实施步骤

简介:三种可行方案分析

您担心的是对的!WordPress确实有自己的一套主题系统,直接将静态HTML页面"改造"成WordPress主题对新手有一定门槛。以下是三种可行的方案分析:

方案二:把静态HTML改成WordPress主题

把HTML拆分成WordPress主题文件:

  • header.php, footer.php, index.php等
  • 加入WordPress的PHP函数调用
  • 打包成主题上传

优点:统一后台管理

缺点:需要学一点PHP基础,工作量不小

方案三:简单的PHP后端

使用简单的PHP后端配合现有HTML页面:

  • 表单提交后存到数据库
  • 简单的博客发布功能
  • 用宝塔的MySQL数据库存数据

优点:比WordPress轻量得多

缺点:需要基础PHP知识

建议:如果您是新手,我推荐方案一,不破坏您现有的成果,上手最快,今天就能搞定,以后想换方案也灵活。

方案一:保持静态网站 + 轻量工具

这个方案的核心思想是保持您现有的静态网站不变,只添加所需的功能模块。

1. 客资登记功能

1 选择第三方表单服务

推荐使用:金数据、腾讯问卷、麦客表单等

只需要在页面里嵌入一个iframe或链接就行,数据自动收集到后台,还能导出Excel。

<!-- 嵌入金数据表单示例 --> <iframe src="https://jinshuju.net/f/xxxxx" width="100%" height="600" frameborder="0"></iframe> <!-- 或使用链接跳转 --> <a href="https://jinshuju.net/f/xxxxx" target="_blank" class="btn">点击登记信息</a>

2. 博客功能

2 安装独立的博客系统

在子目录安装轻量博客系统:

  • 安装目录:你的域名/blog/
  • 推荐系统:Typecho(中文友好,安装简单)或 WordPress
  • 在您的主站导航中添加博客链接即可
<!-- 在导航中添加博客链接 --> <nav> <a href="index.html">首页</a> <a href="about.html">关于我们</a> <a href="/blog/">博客文章</a> <!-- 链接到博客 --> <a href="contact.html">联系我们</a> </nav>

方案二:把静态HTML改成WordPress主题

这个方案需要将您的HTML文件拆分成WordPress主题文件结构。

1. 创建主题基本结构

your-theme/
css/ (存放样式文件)
js/ (存放JavaScript文件)
images/ (存放图片)
index.php (主模板文件)
header.php (头部模板)
footer.php (底部模板)
style.css (主题样式表,必须)
functions.php (主题功能文件)

2. 拆分HTML文件

1 创建header.php

将HTML中头部通用部分(到<main>开始前)提取出来,并添加WordPress函数调用:

<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header> <!-- 您的导航菜单 --> <?php wp_nav_menu(array('theme_location' => 'primary')); ?> </header>
2 创建footer.php

将HTML底部部分提取出来:

<footer> <!-- 您的页脚内容 --> <p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p> </footer> <?php wp_footer(); ?> </body> </html>

注意:此方案需要一定的PHP和WordPress主题开发知识,不适合完全的新手。

方案三:简单的PHP后端

如果您只需要表单提交和简单的博客功能,可以编写轻量PHP后端。

1. 创建数据库

1 在宝塔创建数据库

登录宝塔面板 → 数据库 → 添加数据库,记录下数据库名称、用户名和密码。

2. 创建表单处理PHP文件

2 处理表单提交
<?php // contact_form.php if ($_SERVER["REQUEST_METHOD"] == "POST") { // 获取表单数据 $name = $_POST['name']; $phone = $_POST['phone']; $wechat = $_POST['wechat']; $message = $_POST['message']; // 连接数据库 $conn = new mysqli("localhost", "数据库用户名", "数据库密码", "数据库名"); // 检查连接 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 插入数据 $sql = "INSERT INTO contacts (name, phone, wechat, message, created_at) VALUES ('$name', '$phone', '$wechat', '$message', NOW())"; if ($conn->query($sql) === TRUE) { echo "表单提交成功!"; } else { echo "错误: " . $sql . "<br>" . $conn->error; } $conn->close(); } ?>

3. 创建简单的博客系统

3 简单的文章发布和显示
<?php // blog.php - 显示博客文章 $conn = new mysqli("localhost", "用户名", "密码", "数据库名"); $sql = "SELECT * FROM posts ORDER BY created_at DESC"; $result = $conn->query($sql); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { echo "<article>"; echo "<h3>" . $row["title"] . "</h3>"; echo "<p>" . $row["content"] . "</p>"; echo "<small>发布于: " . $row["created_at"] . "</small>"; echo "</article>"; } } else { echo "暂无文章"; } $conn->close(); ?>

完整建站教程:静态网站 + 博客 + 金数据表单

按照以下步骤完成您的网站建设:

第一部分:创建网站并上传静态页面

1 在宝塔创建网站
  1. 登录宝塔面板
  2. 点击左侧「网站」→ 点击「添加站点」
  3. 填写域名(如 example.com 和 www.example.com 各一行)
  4. 根目录保持默认
  5. FTP:不创建
  6. 数据库:选 MySQL,记个名字如 mysite_db
  7. PHP版本:选 8.0
  8. 点击「提交」

重要:弹出的数据库信息(数据库名、用户名、密码)复制保存到记事本!

2 上传你的静态网站文件
  1. 在宝塔左侧点击「文件」
  2. 进入目录:/www/wwwroot/你的域名/
  3. 删除默认的 index.html 和 404.html
  4. 点击上方的「上传」按钮
  5. 上传你的所有网站文件(HTML、CSS、JS、图片等)
  6. 确保首页文件名是 index.html

第二部分:安装 Typecho 博客系统

3 下载 Typecho
  1. 在宝塔「文件」中,进入 /www/wwwroot/你的域名/
  2. 点击「新建」→「目录」,命名为 blog
  3. 进入 blog 文件夹
  4. 点击「远程下载」,填入地址:https://github.com/typecho/typecho/releases/latest/download/typecho.zip
  5. 下载完成后解压到当前目录
4 安装 Typecho
  1. 浏览器访问:http://你的域名/blog/install.php
  2. 按照安装向导填写数据库信息(步骤1保存的)
  3. 填写管理员信息
  4. 点击「确认,开始安装」

安装成功后,博客后台地址:http://你的域名/blog/admin/

第三部分:嵌入金数据表单

5 创建并嵌入金数据表单
  1. 登录金数据后台,创建新表单
  2. 添加需要的字段:姓名、手机号、微信号、咨询内容等
  3. 保存并发布表单
  4. 点击「分享」或「嵌入」,选择「嵌入网页」
  5. 复制提供的 iframe 代码
  6. 在您的静态页面中粘贴代码
<div class="contact-form"> <h2>客户登记</h2> <iframe src="https://jinshuju.net/f/xxxxx" width="100%" height="600" frameborder="0"></iframe> </div>

第四部分:最终网站结构

你的域名/
index.html ← 你的静态首页
about.html ← 其他静态页面
contact.html ← 放金数据表单的页面
css/
js/
images/
blog/ ← Typecho博客系统
index.php
admin/ ← 博客后台

访问地址:
主站首页:https://你的域名/
博客首页:https://你的域名/blog/
博客后台:https://你的域名/blog/admin/
金数据表单:嵌入在页面里,或直接跳转金数据链接