如何在 WordPress 中编辑 HTML

您想自定义您的网站吗？ 如果您正在寻找个性化网站及其设计的方法，那么您来对地方了。 在本指南中，我们将向您展示不同的初学者友好方法，无需聘请自由职业者即可在 WordPress 中编辑 HTML 文件。

为什么要在 WordPress 中编辑 HTML 代码？

尽管 WordPress 是一种即用型 CMS，不需要任何编码经验并提供数千个主题和插件来自定义您的网站，但学习编辑 HTML 将为您提供很大的灵活性。

通过自定义 HTML 代码，您将获得对网站的更多控制权，并且您将能够执行高级设计自定义，为您的主题添加自定义功能或效果。 此外，当您无权访问管理仪表板时，您将能够解决问题。

通过自定义 HTML 代码可以做的一些主要事情是：

• 包括文本、图像和视频
• 添加功能或特性
• 更好地控制您的 WordPress 网站
• 当您无权访问 WordPress 管理仪表板时解决问题

总而言之，如果您学习如何在 WordPress 中编辑 HTML 代码，您将有更多选项来自定义您的网站，并且可以将其提升到一个新的水平。

什么时候不应该编辑 HTML？

您可能知道，WordPress 使用四种主要语言：HTML、CSS、PHP 和 JavaScript。 这意味着要进行一些更改，您需要了解的不仅仅是 HTML。 这就是为什么在某些情况下自定义 HTML 代码不是一个好主意的原因。

HTML 用于构建网页，因此如果您需要更改网站的设计并编辑颜色、字体、行高等类似内容，您可以简单地自定义 CSS 代码。 此外，当您尝试同时控制多个页面的布局时，不应编辑 HTML。

最重要的是，我们不建议在实时环境中自定义代码。 错误位置的单个逗号或撇号可能会给您的站点带来重大问题，因此最好在暂存环境中测试所有内容。

如何在 WordPress 中编辑 HTML

在本指南中，我们将向您展示在 WordPress 中自定义 HTML 代码的不同方法：

1. WordPress 经典编辑器
2. WordPress块编辑器
3. 编辑 HTML 源代码
4. 带插件
5. 小部件

让我们来看看它们中的每一个，以便您选择最适合您的那个。

在你开始之前…

在继续之前，我们强烈建议您创建一个子主题。 如果您不知道如何操作，请查看此分步指南或使用这些插件中的任何一个。 这很重要，因为如果您修改父主题文件，则每次更新主题时都会丢失所有自定义项。

此外，请确保创建站点的完整备份并将其存储在安全位置。 这样，如果出现问题，您可以随时返回并恢复您的网站。

1) WordPress 经典编辑器

经典编辑器是流行的 WordPress 内容编辑器。 该插件允许您轻松编辑站点上的 HTML 文件。

首先，在您的站点上安装并激活经典编辑器插件。 然后，打开任何帖子或页面，您将看到两种模式：视觉和文本。

视觉显示您在前端看到的内容。 您将看到不同的标题大小、图像、粗体文本等。

另一方面，当您使用文本编辑器时，您会看到帖子的 HTML 版本，因此您可以从此处编辑 HTML 代码。

好消息是您可以切换到可视模式以查看您的更改在前端的外观，而无需发布任何内容。

添加或自定义 HTML 代码后，只需更新或发布帖子即可！

2）WordPress块编辑器

最新的 WordPress 版本带有一个名为 Gutenberg 的新编辑器。 它是具有更多功能的高级内容编辑器。 如果您使用的是 Gutenberg，您还可以像以前一样编辑 HTML 代码。

要在您的帖子或页面中添加自定义 HTML 部分，请使用HTML 块并将 HTML 代码添加到其中。 然后更新帖子，您就可以开始了。

有时，您需要编辑现有的段落或图像并添加额外的样式。 要使用 Gutenberg 在 WordPress 中编辑现有 HTML 代码，请选择要自定义的元素，然后按更多选项。

之后，选择编辑为 HTML选项。

您将看到元素的 HTML 模式，并且可以对其进行自定义。

一旦您对更改感到满意，您可以通过点击Edit visible轻松切换回可视化编辑器。

如您所见，使用 Gutenberg 添加或编辑现有 HTML 代码既快捷又简单。 在发布之前，请务必检查预览以确保一切正常。

3) 在 WordPress 中编辑 HTML 源代码

另一种选择是在 WordPress 中编辑 HTML 源代码。 这个过程比以前的过程风险更大，因为如果您不知道自己在做什么，您可能会破坏您的网站。 让我们看看如何使用四种不同的方法自定义 HTML 源代码。

1. 仪表板文件编辑器
2. FTP

3.1) 仪表板文件编辑器

这是无需访问任何其他网站或依赖任何其他工具即可编辑源代码的最直接方法。

在您的 WordPress 仪表板中，转到外观 > 主题编辑器。

在右侧，您将看到所有主题文件。

在右上角，您还可以选择更改主题目录。

在我们的例子中，我们使用的是二十二十个主题。 选择正确的主题后，选择要编辑的相应文件夹和文件。

您可能想要编辑的一些最常见的文件是：

• 索引.php
• 头文件.php
• 页脚.php
• 函数.php
• 样式.css

假设您要编辑主题的标题，请从列表中选择header.php文件。

通常， .php文件包含 PHP，但也包含其他语言，例如 HTML、JavaScript（有时）和 CSS（在某些情况下）。 因此，您可以从那里编辑 HTML 文件。 如上所述，单个逗号或撇号可能会破坏您的网站，因此请谨慎操作。

3.2) FTP

如果您更喜欢技术性更强的方法，您可以使用 FTP 客户端自定义 HTML 代码。 为此，您可以使用 FileZilla，它是目前最好、安全且用户友好的 FTP 客户端之一。

首先，下载 FileZilla 并创建一个帐户。 大多数 WordPress 托管公司会通过 cPanel 为您提供免费的 FTP 帐户访问权限。 生成主机名、用户名和密码后，连接到服务器。

如果要编辑主题文件，请转到wp-content >主题文件夹。

如您在上面的屏幕截图中所见，我们的网站上有四个主题：GeneratePress、 29 岁、 20 岁和21 岁。

假设我们要编辑 GeneratePress 文件，所以我们打开主题文件夹。

要编辑文件，请右键单击它并选择查看/编辑选项。 例如，要编辑页脚，您需要编辑footer.php文件。

FileZilla 将在文本编辑器上打开文件，如下所示。

之后，您可以进行更改、保存文件并将其上传回服务器。

3.3) 面板

大多数托管公司都为其客户提供 cPanel（控制面板）访问权限，因此这是在 WordPress 中编辑 HTML 代码的另一种绝佳方式。

为此，请登录您的网络托管帐户并访问 cPanel。 然后，打开文件管理器。

之后，转到wp-content >主题。

打开要自定义的主题，然后右键单击要更改的文件，然后按Edit 。

这将在文本编辑器中打开文件，您可以在其中对其进行自定义。 进行更改后，不要忘记保存文件。

4) 插件

在 WordPress 中编辑 HTML 代码的另一种方法是使用插件。 WP File Manager 是一款出色的免费工具，可将 FTP 功能带入您的仪表板。 让我们看看如何使用它。

首先，登录您的 WordPress 站点并转到插件 > 添加新的. 搜索文件管理器，安装并激活它。

之后，从侧边栏中选择 WP 文件管理器选项。

现在，打开wp-content目录。

然后，打开主题文件夹并选择要修改的文件夹。 在我们的例子中，我们将编辑Astra 主题文件。

打开文件夹后，您将看到所有可用的文件。 找到要编辑的内容后，右键单击它并选择代码编辑器选项。

与大多数 FTP 程序一样，此插件不需要您在笔记本电脑上安装文本编辑器软件。 如果是这种情况，插件将在基于 Web 的文本编辑器上打开文件，您可以在其中编辑代码。

一旦你完成了修改文件，保存它，就是这样。

5) 小部件

现在让我们看看如何将 HTML 代码添加到小部件区域。

首先，转到外观 > 小部件。

在那里，您将看到所有小部件区域。

现在将 HTML 小部件添加到任何小部件区域。 对于本教程，我们将选择侧边栏。

您可以为代码添加标题并在其中包含您的自定义 HTML 代码。

添加代码后，保存小部件，一切顺利。

奖励：在 WordPress 中编辑 CSS 和 PHP

WordPress 使用四种主要语言：

• PHP
• HTML
• CSS
• JavaScript

到目前为止，您已经学习了如何在 WordPress 中编辑 HTML 代码。 在本节中，我们将向您展示如何自定义站点的 CSS 和 PHP 代码并添加自定义脚本。

编辑和添加 CSS 代码

除了我们上面提到的方法之外，您还可以使用 WordPress 定制器将自定义 CSS 代码添加到您的站点。 为此，在您的WordPress 仪表板中，转到外观 > 自定义。

进入定制器后，转到Additional CSS 。

在那里你可以简单地输入你的 CSS 代码。

最好的部分是您可以在实时预览模式下看到所有更改。

一旦您对更改感到满意，请更新/发布帖子或页面。

这是向您的网站添加 CSS 代码的最简单方法之一。 请记住，此代码将叠加在我们主题的style.css文件之上。

注意：某些 WordPress 主题（例如 Divi 或 Avada）带有内置功能来添加 CSS 代码，因此您可以使用主题面板来包含您的 CSS 代码，而不是使用定制器。

编辑/添加 PHP 代码

PHP 是 WordPress 的核心语言。 与编辑 HTML 类似，自定义现有 PHP 代码很容易。 您可以使用主题编辑器或上述任何方法来执行此操作。 在本节中，我们将向您展示如何使用名为 Code Snippets 的插件添加 PHP 片段。

首先，在您的站点上安装并激活代码片段。

之后，转到插件的设置并单击“添加新”以将新代码段包含到您的站点中。

为您的代码段命名以记住您正在添加的内容，粘贴您的 PHP 代码，然后保存代码段。

在本教程中，我们采用了一个简单的片段来向我们的站点添加自定义图像大小。 之后点击保存，你就完成了！

这样，您可以向您的 WordPress 网站添加无限的 PHP 代码，并根据需要对其进行自定义。

结论

总而言之，自定义 HTML 代码可以帮助您更好地控制您的网站以及添加功能和解决问题。 最好的部分是在 WordPress 中，您可以轻松地编辑 HTML 代码并个性化您的网站。

在本指南中，我们看到了不同的方法：

1. 使用 WordPress 经典编辑器
2. 使用块编辑器
3. 编辑 HTML 源代码
4. 使用插件
5. 将 HTML 添加到小部件

自定义 HTML 代码的最简单方法是通过 WordPress 主题编辑器。 如果您正在寻找更高级的解决方案，您可能需要使用 FileZilla 等 FTP 客户端编辑 HTML 源代码。 如果您不想在计算机上安装任何软件，可以使用 cPanel 方法。

另一方面，如果您更喜欢插件，您可以使用 WP File Manager 来包含或编辑 HTML 代码，而无需依赖任何其他 FTP 软件或文本编辑器。

最后，您还可以使用 WordPress Customizer 或 Code Snippets 插件包含和编辑 CSS 或 PHP。

我们希望这篇文章对您有所帮助并帮助您自定义您的网站。 您知道在 WordPress 中编辑 HTML 文件的任何其他方法吗？ 你用哪一个？ 在下面的评论部分让我们知道！