WordPress如何添加自定义HTML网页？-网页设计-锦华智联科技

使用自定义页面模板（推荐，最灵活）

这是最专业、最灵活的方法，尤其适合创建一个与网站其他页面风格完全不同的独立页面（一个活动报名页、一个产品介绍页等）。

（图片来源网络，侵删）

原理： 创建一个特殊的 PHP 文件（模板文件），然后告诉 WordPress 在编辑页面时可以选择使用这个模板。

优点：

完全独立： 页面的 HTML、CSS 和 JavaScript 都可以完全自定义,不受主题限制。
功能强大： 可以在模板文件中使用 WordPress 的函数（如 get_header(), get_footer()），也可以完全不使用，创建一个完全“裸”的页面。
管理方便： 页面会出现在 WordPress 后台的“页面”列表中,易于管理和更新。

缺点：

需要一些基础的 PHP 和 HTML 知识。

详细步骤：

第 1 步：准备你的 HTML 文件

（图片来源网络，侵删）

假设你的 HTML 文件名为 my-custom-page.html，为了更好的集成，我们最好将 CSS 和 JavaScript 内联到 HTML 文件中,或者至少将它们也一并上传。

第 2 步：创建模板文件

通过 FTP 或你的主机控制面板的文件管理器，登录到你的 WordPress 网站根目录。
进入 wp-content/themes/ 目录,然后找到你当前正在使用的主题文件夹。
在主题文件夹中，复制一个现有的 page.php 文件，并将其重命名为 page-my-custom-template.php（文件名可以自定义，但必须以 page- 开头，并以 .php 。
用代码编辑器（如 VS Code, Sublime Text）打开这个新文件 page-my-custom-template.php。

第 3 步：修改模板文件

在文件的最顶部，添加一个“模板名称”注释，这是 WordPress 识别这个模板的关键。

（图片来源网络，侵删）

<?php
/*
Template Name: My Custom Page Template
*/
?>

你可以根据需要修改文件内容。

选项 A：保留 WordPress 的头部和底部（推荐） 这样你的页面会自动包含网站的导航栏和页脚，保持网站风格统一，你的 HTML 内容应该放在 get_header() 和 get_footer() 之间。

<?php
/*
Template Name: My Custom Page Template
*/
?>
<?php get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <!-- 在这里粘贴你的 HTML 内容 -->
        <h1>欢迎来到我的专属页面！</h1>
        <p>这是一个通过自定义模板创建的页面。</p>
        <div class="my-custom-form">
            <form action="#">
                <input type="text" placeholder="你的名字">
                <button type="submit">提交</button>
            </form>
        </div>
        <!-- HTML 内容结束 -->
    </main><!-- #main -->
</div><!-- #primary -->
<?php get_footer(); ?>

选项 B：创建一个完全独立的页面 如果你的 HTML 页面是 100% 独立的，不需要 WordPress 的任何部分，你可以直接替换整个文件内容为你的 HTML 代码。

<?php
/*
Template Name: My Custom Page Template (Standalone)
*/
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的独立页面</title>
    <!-- 在这里添加你的 CSS -->
    <style>
        body { font-family: sans-serif; background-color: #f0f0f0; }
        .container { max-width: 800px; margin: 50px auto; padding: 20px; background: white; border-radius: 8px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>这是一个完全独立的 HTML 页面</h1>
        <p>它不包含 WordPress 的头部和页脚。</p>
        <!-- 在这里粘贴你的所有 HTML 内容 -->
    </div>
    <!-- 在这里添加你的 JavaScript -->
    <script>
        console.log("页面已加载");
    </script>
</body>
</html>

第 4 步：在 WordPress 后台使用模板

登录 WordPress 后台。
转到 页面 > 添加新页面。
给你的页面起一个标题（“我的活动页”）。
在右侧的“页面属性”面板中，找到“模板”下拉菜单。
选择你刚刚创建的模板（“My Custom Page Template”）。
你不需要在编辑器中写任何内容，因为内容已经写在模板文件里了,你也可以在这里添加一些动态内容。
点击 “发布” 或 “更新”。

访问这个新页面，你就会看到你的 HTML 内容已经成功显示出来了。

使用插件（最简单，适合新手）

如果你不想写代码，或者只是想快速上传一个静态 HTML 文件作为页面,可以使用插件。

原理： 插件会创建一个自定义的 Post Type（HTML页面”），让你可以直接上传 HTML 文件并设置一个访问链接。

推荐插件： Display HTML Content

优点：

零代码： 无需任何编程知识。
操作简单： 上传文件,点击激活即可。
独立性强： 创建的页面与 WordPress 循环完全分离。

缺点：

增加了一个插件,可能对网站有轻微的性能影响。
功能相对固定,不如自定义模板灵活。

详细步骤：

在 WordPress 后台，转到 插件 > 添加新插件。
搜索 “Display HTML Content” 或类似的插件（如 "Static HTML Page"）。
安装并激活你选择的插件。
激活后，后台菜单中会出现一个新的选项，HTML Pages 或 Static HTML。
点击进入，然后点击 “添加新”。
在新页面中，你可以设置页面的标题（这将是链接的文本），然后上传你的 .html 文件。
上传完成后，插件会为你生成一个 URL（your-site.com/html-page/my-page-slug/）。
保存并发布。

你可以通过这个链接访问你的 HTML 页面了。

直接创建页面并粘贴代码（最直接，但有风险）

如果你的 HTML 代码非常简单，不包含复杂的脚本，并且你希望它直接显示在 WordPress 页面的编辑器中。

原理： 使用 WordPress 的“代码编辑器”（Code Editor）块，将 HTML 代码直接粘贴进去。

优点：

最直接： 无需 FTP,无需插件。
所见即所得： 在页面编辑器中就能直接看到效果。

缺点：

极易出错： WordPress 的经典编辑器和 Gutenberg 块编辑器都会自动清理和修改 HTML 代码，导致你的脚本失效、样式错乱。
不安全： 直接在后台编辑复杂的代码容易出错。
样式冲突： 你的 CSS 可能会与主题的 CSS 发生冲突。

详细步骤：

在 WordPress 后台，转到 页面 > 添加新页面。
给页面起一个标题。
点击添加一个新块，搜索并选择 “代码编辑器” (Code Editor)。
在代码编辑器块中，切换到“文本”模式（非常重要！）。
将你的完整 HTML 代码（包括 <html>, <head>, <body> 等标签）原封不动地粘贴进去。
点击 “发布” 或 “更新”。

⚠️ 重要警告：

务必使用“代码编辑器”块，不要使用普通的“段落”块,否则代码会被当做普通文本显示。
此方法强烈不推荐用于包含 <script> 或复杂 <style> 的 HTML 文件，代码极有可能被 WordPress 过滤掉或破坏。

总结与对比

方法	优点	缺点	适用场景
自定义页面模板	最灵活、最专业、功能强大	需要基础 PHP/HTML 知识	创建功能复杂、样式独特的独立页面（如活动页、落地页）
使用插件	最简单、零代码、操作便捷	增加插件、功能相对固定	新手、快速部署简单的静态 HTML 页面
直接粘贴代码	最直接、无需额外工具	极易出错、样式冲突、不安全	仅用于极简单的、不含脚本样式的 HTML 代码片段

给你的建议：

如果你想认真做一个功能完整的独立页面，并且愿意学习一点基础知识，请选择方法一（自定义页面模板），这是 WordPress 开发的标准做法。
如果你只是临时需要一个页面，或者对代码感到恐惧，请选择方法二（使用插件），它能安全、快速地完成任务。
尽量避免使用方法三,除非你只是在页面上放一小段格式化的文本。