如何在 WordPress 中编辑 HTML：从页面到小部件、主题转换全指南

WordPress 在自定义设计或功能时，编辑 HTML 代码是一个不可或缺的能力。本篇文章将为你详细讲解如何编辑 WordPress HTML 代码的各种方法及其可能的应用场景。

为什么要在 WordPress 中编辑 HTML？

HTML（超文本标记语言）是构建网站页面的核心语言，WordPress 也不例外。通过编辑 HTML，你可以：

微调网站设计，满足品牌需求。
添加额外的功能或效果，超越默认设置。
优化 SEO，改善网站在搜索引擎中的表现。
修复或排除网站布局问题。

如何将 HTML 文件导入 WordPress：三种简单方法分步指南

11月23日 09:41

018715

无论你是希望修改文章内容，调整小部件，还是开发自定义主题，掌握 HTML 编辑技巧都是至关重要的。

如何在 WordPress 编辑器中编辑 HTML？

WordPress 提供两种主要的编辑器：块编辑器（Gutenberg） 和 经典编辑器，每种都有不同的 HTML 编辑方式。

使用块编辑器编辑 HTML

块编辑器（Gutenberg）是 WordPress 的默认编辑器，具有模块化的特点，同时允许更高级的用户直接编辑 HTML。

步骤：

打开页面或文章：从 WordPress 仪表板中打开需要编辑的页面或文章。
添加 HTML 块：
- 单击“+”按钮以插入新块。
- 搜索“自定义 HTML”，并将其添加到编辑器。

输入 HTML 代码：直接在块中粘贴或输入 HTML 代码。

预览效果：点击预览按钮，查看 HTML 代码在网站上的实际显示效果。

直接编辑块 HTML

如果你希望编辑现有块（已有内容）的 HTML，块编辑器提供了“以 HTML 格式编辑”的选项：

单击块右上角的“三点”菜单。
选择“以 HTML 格式编辑”，内容将自动转换为 HTML 格式。

修改 HTML 代码后，切换回“视觉编辑”模式查看效果。

编辑整个页面的 HTML

当你需要编辑整个页面的 HTML 时，可以切换到 代码编辑器：

单击右上角的“三点”菜单。
选择“代码编辑器”。

在代码视图中自由修改 HTML。

使用经典编辑器编辑 HTML

经典编辑器是一种传统编辑器，许多用户仍然偏爱它，特别是在编辑 HTML 代码时。以下是具体方法：

打开文章或页面：从 WordPress 仪表板中打开需要修改的内容。
切换到“文本”标签：编辑器默认显示为“可视化”模式，点击顶部的“文本”标签切换到 HTML 模式。

编辑 HTML 代码：修改所需的 HTML 元素。

保存更改：完成后，切换回“可视化”模式或直接保存。

经典编辑器中的“文本”模式将内容直接显示为 HTML，适合有代码经验的用户进行快速调整。

如何在小部件中编辑 HTML？

除了页面和文章，也可以直接编辑 WordPress 的小部件 HTML，例如侧边栏或页脚区域。以下是具体步骤：

1. 访问小部件设置：

登录 WordPress 仪表板。
导航至“外观 > 小部件”。

2. 添加“自定义 HTML”小部件：

在左侧菜单栏中找到“自定义 HTML”，并拖动添加到目标区域。

3. 输入 HTML 代码：

在内容框中粘贴或输入 HTML 代码。
你可以使用 <p>、<a>、<img> 等标签格式化文本或插入图片。

4. 预览和保存：

点击“预览”查看效果。

满意后，点击“保存”。

通过这种方式，可以轻松自定义小部件的内容和样式。

如何将 HTML 转换为 WordPress 主题？

如果你拥有一个现成的 HTML 模板，并希望将其转换为 WordPress 主题，可以按照以下步骤进行：

1. 创建主题文件夹

导航至 WordPress 的 /wp-content/themes/ 目录。

创建一个新的文件夹，例如 my-custom-theme。

2. 创建基本文件

在新文件夹中创建两个必要文件：

style.css：主题样式表，包含主题信息和样式定义。
index.php：主题的主要模板文件。

3. 转换 HTML 到 WordPress 文件

头部（header.php）：复制 HTML 模板的 <head> 和开头的 <body> 部分，创建 header.php。

页脚（footer.php）：将 HTML 模板的结束部分（包括 </body> 和 </html>）粘贴到 footer.php。
内容区域（content.php）：将主要内容部分转换为 content.php 文件。
侧边栏（sidebar.php）：如果有侧边栏，将对应的 HTML 部分转换为 sidebar.php。

4. 添加 WordPress 模板标签

将 HTML 中的静态内容替换为 WordPress 动态模板标签：

显示标题：<?php the_title(); ?>
显示内容：<?php the_content(); ?>

替换 HTML 中的静态内容

假设你有以下的静态 HTML 内容：

<h1>欢迎来到我的博客</h1>
<p>本站描述：这是一家关于技术的博客。</p>
<p>文章发布时间：2024年10月10日</p>

你希望将这些静态内容替换成动态的 WordPress 模板标签：

替换静态博客标题和描述：

<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>

5. 激活主题

回到 WordPress 仪表板，导航到“外观 > 主题”。
激活创建的主题。

常见 HTML 标签及其用法

了解 HTML 标签有助于提升网站的自定义能力。以下是 WordPress 中常用的 HTML 标签：

标题：<h1> 至 <h6> 定义标题，有助于内容结构和 SEO。
段落：<p> 用于分隔文本块。
文本格式：
- <strong>：强调文本。
- <em>：斜体文本。
- <a>：超链接。
图像：<img> 用于插入图片。
列表：
- <ul>：无序列表。
- <ol>：有序列表。

在 WordPress 中编辑 HTML 的注意事项

备份网站：在编辑 HTML 代码前，请确保备份文件，以防止误操作导致数据丢失。
使用 HTML 验证工具：在线 HTML 验证器（如 W3C）可帮助检查语法错误。

避免插件冲突：部分插件可能会覆盖你添加的自定义 HTML，需进行兼容性测试。

总结

通过文章了解块编辑器和经典编辑器修改页面和文章的 HTML，如何在小部件中插入自定义 HTML，以及如何将现有的 HTML 模板转换为 WordPress 主题。还强调了使用 WordPress 模板标签来动态替换静态内容，从而提升网站的可维护性和扩展性。

联系我们
文章看不懂？联系我们为您免费解答！免费助力个人，小企站点！
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息