如何在WordPress代码编辑器中编辑HTML(初学者指南)

12/08/2022

您为什么要在WordPress中编辑HTML?

WordPress提供了数以千计的主题和插件,可让您在不编辑一行代码的情况下更改网站外观和自定义不同的元素。然而,插件和主题存在限制,并且可能无法提供您需要的确切功能。因此,您可能无法根据自己的喜好样式化网站。这时,编辑HTML就非常有用了。您可以通过HTML代码轻松进行高级自定义,提供了更多的灵活性和对网站外观和功能的控制。

同时,学习如何编辑HTML还可以帮助您在无法访问仪表板时识别和修复网站上的错误。

使用WordPress区块编辑器编辑HTML

在WordPress区块编辑器中,有多种方法可以编辑帖子或页面的HTML。首先,您可以在内容中使用“自定义HTML”区块添加HTML代码。

进入WordPress仪表板,然后添加一个新帖子/页面或编辑现有文章。然后,点击左上角的加号(+)并添加“自定义HTML”区块。

接下来,在区块中输入自定义HTML代码。您还可以点击“预览”选项,查看HTML代码是否正常工作以及内容在实时网站上的显示效果。

另一种方法是在区块编辑HTML。选择内容中的现有区块,然后点击三点菜单。接着,选择“编辑为HTML”选项。现在,您将看到单个区块的HTML。编辑内容的HTML,例如添加nofollow链接、更改文本样式或添加其他代码。

如果您想编辑整个帖子的HTML,可以使用WordPress区块编辑器中的“代码编辑器”。通过点击右上角的三点选项并从下拉选项中选择“代码编辑器”,即可访问代码编辑器。

使用WordPress经典编辑器编辑HTML

如果您使用的是WordPress经典编辑器,您可以在“文本”视图中轻松编辑HTML。编辑博客文章或添加新文章时,点击“文本”标签即可查看文章的HTML。

然后,您可以编辑内容的HTML。例如,您可以加粗不同的词语以突出显示、使用斜体样式、创建列表、添加目录等。

在WordPress小工具中编辑HTML

您知道可以在站点的小工具区域添加和编辑HTML代码吗?使用自定义HTML小工具可以帮助您自定义侧边栏、页脚和其他小工具区域。可以嵌入联系表单、行动号召(CTA)按钮、谷歌地图等内容。

进入WordPress管理面板,然后转到外观 » 小工具。点击任何小工具区域上的加号图标,以添加HTML代码。具体的小工具区域取决于您使用的WordPress主题。例如,您可以将其添加到页脚、页眉或其他区域。

接下来,在小工具区块菜单中搜索“自定义HTML”小工具并点击即可自动将其添加到小工具区域。接着,点击您的自定义HTML小工具并输入HTML代码。完成后,不要忘记点击屏幕右上角的“更新”按钮。

现在,您可以访问您的网站查看自定义HTML小工具的实际效果。

使用WordPress主题编辑器编辑HTML

另一种编辑网站HTML的方法是通过WordPress主题编辑器(代码编辑器)。但是,我们不建议您直接在主题编辑器中编辑代码。因为输入代码时的一个小错误可能会破坏您的网站,并且阻止您访问WordPress后台。

此外,如果更新主题,所有更改都会丢失。因此,如果您打算使用主题编辑器编辑HTML,建议在进行任何更改之前备份您的网站。

进入WordPress仪表板,然后转到外观 » 主题编辑器。您将看到有关直接编辑主题文件的警告消息。点击“我明白”按钮后,您将看到主题文件和代码。选择要编辑的文件并进行更改。

使用FTP编辑WordPress中的HTML

另一种替代方法是使用FTP(文件传输协议服务)编辑WordPress主题文件中的HTML。这是所有WordPress托管账户的标准功能。使用FTP而不是代码编辑器的好处在于,您可以使用FTP客户端轻松修复问题。这样,如果在编辑HTML时出错,您不会被锁定在WordPress仪表板之外。

首先,选择一个FTP软件。我们将在本教程中使用FileZilla,因为它是一款适用于Windows、Mac和Linux的免费且用户友好的FTP客户端。选择FTP客户端后,需登录到您网站的FTP服务器。您可以在托管服务提供商的控制面板仪表板中找到登录详细信息。

登录后,您会在“远程站点”列下看到网站的不同文件夹和文件。导航到wp-content » 主题,找到要编辑的主题文件。选择要编辑的主题文件。

右键单击一个主题文件以编辑HTML。例如,如果要在页脚中进行更改,请右键单击footer.php文件。许多FTP客户端允许您查看和编辑文件,并在完成更改后自动上传。在FileZilla中,可以通过点击“查看/编辑”选项进行操作。

建议您在进行任何更改之前将要编辑的文件下载到桌面。编辑HTML后,可以替换原始文件。有关更多详细信息,建议按我们的指南上传WordPress文件。

在WordPress中添加代码的简单方法

在WordPress中添加代码的最简单方法是使用WPCode,这是市场上最好的代码片段插件。该插件由WPressize Me团队设计,即使是完全的初学者也可以在几分钟内将自定义代码添加到他们的网站。此外,该插件的简装版是100%免费使用的。通过WPCode,代码存储在一个地方,帮助组织代码,防止手动编辑代码时可能出现的错误。另一个好处是,您不必担心在更新或更改主题时代码被删除。

首先,需在网站上安装并激活免费版WPCode插件。有关更多详细信息,可以参考我们的详细教程。插件激活后,可以从管理面板导航到代码片段 » 页眉和页脚,然后将HTML代码添加到网站的页眉、正文和页脚框中。

例如,假设您想在网站上显示一个警告栏。将HTML代码输入“正文”框并点击“保存更改”按钮。除了可以在页眉中添加谷歌分析跟踪代码、Facebook像素和抖音广告像素,还可以使用插件在网站页脚中添加Pinterest按钮。

通过WPCode,决定代码输出位置也很容易。例如,可以自动在每个帖子的开头或结尾显示一些HTML代码。

希望这篇文章帮助您学习如何在WordPress代码编辑器中编辑HTML。还可以参考我们的指南了解构建WordPress网站的实际成本,或者查看为何应该使用WordPress的最重要原因。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>