• 主页
  • 文章
  • 指导
  • 您如何编辑 WordPress 的终极指南——HTML、CSS、PHP、JavaScript

您如何编辑 WordPress 的终极指南——HTML、CSS、PHP、JavaScript

已发表: 2021-04-05

WordPress 作为最常用和用户友好的平台之一，在上一年的 CMS 市场份额接近 61.8%，并且持续增长。 这导致非常需要学习如何编辑 WordPress HTML 和更改功能齐全的 WordPress 网站中的其他技术。

编辑您的 WordPress 网站的需要可能由于不同的原因而出现，包括任何恶意软件、更新任何插件或 WordPress 版本，或简单的网站崩溃。 在某些情况下，轻微的网站定制可能会对您有所帮助； 但是，在大多数情况下，您需要编辑 WordPress HTML 或 WordPress 中的源代码。

本文为您解答如何在 WordPress 网站中编辑源代码以及如何在 WordPress 中编辑 HTML 等问题。 在继续之前，让我们弄清楚为什么编辑 WordPress HTML 和源代码很重要。

相关：如何轻松地将 jQuery 脚本添加到 WordPress

WordPress 编辑 – 为什么

开发网站的主要目的是改善您的在线形象和与客户的互动。 此外，拥有 WordPress 网站使日常功能、管理和性能变得容易。 但是，在某些情况下，您可能需要通过编辑 WordPress HTML 或编辑 WordPress 源代码来改进 WordPress 功能。

学习如何通过编辑 HTML 和其他源代码来编辑 WordPress，有助于确保正常运行、足够的安全性和持续的连接性。 更新 WordPress 网站可帮助企业实现更好的控制并在网站上执行高级自定义。

从 WordPress 的微小变化到编辑 HTML 和升级主题，再到检查和维护安全和托管服务，WordPress 编辑包括所有这些。 深入了解为什么 WordPress 网站维护至关重要。

现在，事不宜迟，让我们开始讨论如何编辑 WordPress 网站。 首先，我们将详细了解如何在 WordPress 网站中编辑 HTML。

在 WordPress 网站中编辑源代码的步骤

更新 WordPress 网站主要包括编辑网站的源代码，而不仅仅是编辑 HTML。 当使用不同的功能和编程语言来设计、构建和维护一个 WordPress 网站时，它就会组合在一起。

这也强调了对 WordPress 进行顺序监控和管理以确保更新的重要性，因为它最终会提高网站的性能和功能。 让我们继续学习如何在 WordPress 网站中编辑源代码。

WordPress 网站的源代码包括用 CSS、PHP 和 JavaScript 编写的代码，分别满足设计功能和性能。 不能说在开发 WordPress 网站时哪个不那么重要。 但是，我们可以告诉您如何编辑它们以改善您的 WordPress 网站的整体外观。

可以通过访问您网站的主题编辑器中的文件来编辑 WordPress 网站中的源代码。 但是，您可以通过两种方式访问​​这些文件。 第一，使用 WordPress 主题编辑器，或者第二，使用文件传输协议 (FTP)

使用 WordPress 主题编辑器编辑 WordPress 源代码

WordPress 网站中的主题编辑器用作内置网站编辑器，可让您修改主题文件。 编辑器允许访问所有 CSS、PHP、JavaScript 和所有其他与主题相关的文件。

专业提示：在开始在 WordPress 中编辑您的主题和源代码之前，请确保为您的网站创建备份，以免您遇到任何麻烦。

在对您的主题进行编辑时，我们建议您创建一个子主题并在其中进行所需的更改。 它使您免于更新 WordPress 网站后通常出现的主题覆盖问题。 现在让我们开始了解如何访问主题编辑器

如何访问主题编辑器

首先，您永远不能编辑您的主题文件，除非您不知道它们的位置。 如果您知道如何访问主题编辑器，请向下滚动到下一个标题，但如果您不知道，请继续阅读。

访问主题编辑器需要访问您网站的后端。 浏览网站的构建站点后，单击 WordPress 网站侧边栏中的“外观”选项卡，您将看到一个下拉菜单，最后显示主题编辑器选项。

单击选项卡会打开当前运行主题的 CSS 文件。 在这里，您可以在 WordPress 网站的外观中进行所有设计编辑。 如果您使用多个主题或父子主题的组合，您可以从显示主题名称的右上角下拉选项中切换它们。

专业提示：更新完 WordPress 网站后，请按底部的“更新文件”按钮以保存更改。 但是，如果您无法保存更改，则您添加的代码中可能存在一些错误。

WordPress 使其成为更新 WordPress 源代码的更好选择的突出功能之一是，如果更改包含错误，它不允许您保存更改。 此功能使编辑 WordPress 比使用 FTP 更安全。

注意：在某些情况下，您可能无法访问主题编辑器。 如果发生这种情况，您必须这样做；

  • 在您的文件中查找特定于主题的代码编辑器。 WordPress 中的几个主题对主题编辑器的使用不同，这也会影响可见性和功能。
  • 搜索您可能正在使用的任何安全插件和检查，这些插件和检查导致“隐藏”主题编辑器选项，以更好地抵御入侵者。

使用主题编辑器编辑 WordPress JavaScript 文件

JavaScript 有助于提高网站的响应能力和性能。 悬停在按钮上时改变大小或颜色，单击按钮时打开下拉菜单，都是因为 JavaScript 在后面。

在大多数情况下，WordPress 主题与托管在不同服务器中的 JavaScript 文件很好地结合在一起，并使用“调用”功能包含在主题中。 这些称为外部 JS 文件，有时也使用您网站中的第三方插件添加。

但是，您可以编写自己的 JavaScript 文件并将其添加到主题中，并通过主题编辑器访问它们。 一般来说，使用 JavaScript 文件，无论是第三方的还是自己编写的，都需要你在想使用的地方使用调用函数，想用多少次就用多少次。 以下调用函数用于将 JavaScript 文件合并到代码中。

<script type=”text/javascript” src=”path-to-javascript-file.js”></script>

使用 <script> 标记将 JavaScript 文件添加到源代码文件中。

专业提示：确保在 html 文件中的 <head> 和 </head> 标记之间包含 <script> 标记，否则文件会导致错误。

手动使用 JavaScript 编辑 WordPress 网站

您可以在相应文件中使用相同的调用函数来编辑 WordPress 网站页眉和页脚的源代码。 这些文件通常以 .php 扩展名保存，并且可能位于主题编辑器中的主题文件中。

一些第三方工具或功能通常需要网站开发人员在 WordPress 网站页眉和/或页脚中添加 JS 源代码。 为此，添加代码与上面提到的完全相同。 在 <head> 标记之间使用 <script> 调用 JS 文件。

奖励：如果找不到开始 <head> 标记，只需按 Control + F 并在搜索栏中输入“head”。

在某些情况下，您可能需要编辑单个页面或帖子的 JavaScript，而不是整个页眉或页脚。 为此，您首先需要创建或使用预先开发的 Javascript 文件并将其添加到您的 WordPress 主题文件中。 其次，从要编辑的页面或帖子中调用文件。

在WordPress的post/page中Incorporate JS的调用功能略有不同，需要一系列步骤。 因此，要通过自定义字段调用 WordPress 页面/帖子中的 JavaScript 文件，您可以按照以下步骤操作；

  1. 打开您的块编辑器，然后单击右上角的三个垂直对齐的点。 这将打开一个下拉菜单。
  2. 从下拉菜单中，单击末尾的“选项选项卡”，这将打开一个包含多个选项的小部件。
  3. 选项小部件打开后，向下滚动到“高级面板”并选中“自定义字段”框。
  4. 现在您会看到一个可以在帖子编辑器下方添加自定义字段的空间。
  5. 在值字段中添加您的 JS 片段，为您添加的 JS 代码提供自定义名称，完成编辑后，单击“添加自定义字段”进行保存。

使用插件编辑 WordPress

更新或编辑 WordPress 网站的源代码有时会非常费劲。 为此，您可以使用自动更新页眉和页脚功能的插件。 此外，使用插件更有效，因为即使在每次 WordPress 更新后它也会保留您所做的更新。

WordPress 提供各种免费和付费插件来编辑您的页眉和页脚文件，从而提供更好的网站支持和整体性能。

另一种有效的方法是聘请 WordPress 维护服务提供商。 服务提供商不仅可以帮助您轻松进行编辑和更新，还可以提高您网站的整体性能、安全性等。

在 WordPress 网站中编辑 CSS 源代码

CSS 是 Cascading Style Sheet 的缩写，基本上负责 WordPress 网站的所有样式和设计。 在您的网站中编辑 CSS 文件是指更改您网站中的小部件、按钮和文本字段的显示方式。

在 WordPress 文件中编辑 CSS 文件或多或少类似于在 JavaScript 文件中进行更新。 尽管有三种基本方法可以更改 CSS 文件； 但是，它们的可用性会根据您所做的更改以及更改的频率而有所不同。

使用主题编辑器编辑 WordPress CSS

在您的 WordPress 网站中编辑 CSS 文件的一种常用且简单的方法是以上述相同的方式使用主题编辑器。 您可以在所有主题文件所在的最右侧访问所有 CSS 文件。

使用 WordPress 定制器编辑 WordPress CSS

外观小部件中的主题编辑器选项稍上方是另一个选项，上面写着“自定义”。 WordPress 还允许您使用此 WordPress 定制器修改您的 WordPress 网站。

单击“自定义”选项后，在导航面板上向下滚动，然后单击左下角的“附加 CSS”选项卡。 这将打开一个小型 CSS 编辑器，支持对 CSS 代码进行轻微或微小的更改。 完成后，单击保存并继续使用您的网站。

使用插件编辑 WordPress CSS

如果您打算避免手动更改 WordPress 网站的 CSS，下载一些有用的插件可以为您解决问题。 如果您是 CSS 知识有限或优先考虑定期更新的人之一，那么使用插件是您的最佳选择。

有一系列 CSS 编辑插件可用于对 WordPress 网站进行所需的更改。 安装网站后，您需要做的就是将插件安装到您的 WordPress 网站，输入您的许可证密钥，然后开始编辑。

使用 FTP 在 WordPress 网站中编辑源代码

如前所述，使用文件传输协议 (FTP) 是除主题编辑器之外的另一种编辑 WordPress 网站的方法。 此方法实际上可以通过使用任何 FTP 客户端（例如 WinSCP）来工作。 使用这些第三方工具的主要原因是能够访问 WordPress 网站的服务器和存储在那里的文件。

当您无法访问主题编辑器是您的 WordPress 网站或对 WordPress 进行 PSD 工作时，使用 FTP 客户端编辑源代码会派上用场。 使用这种编辑方法有助于在本地更新文件，然后将这些文件重新上传到您网站的托管环境。

听起来可能很可怕，但整个过程只需要四个步骤，让我们开始了解该做什么以及如何做。

第 1 步：登录或创建您的 FTP 帐户

第一步，要通过 FTP 客户端连接到您的 WordPress 网站服务器，您需要使用您的帐户凭据（包括主机名、用户名和密码）登录到您的 FTP 帐户。 您可以从您的托管帐户中找到凭据信息。

如果您找不到您的登录信息，您可以在您网站的 cPanel 中创建一个新的用户名和密码。 要访问您的 cPanel，请单击“文件”选项卡中的“FTP 帐户”。

单击此图标后，选择添加 FTP 帐户以添加新的用户名和密码。

创建新的登录凭据需要您完成所有提到的字段。

  • 确保为您的 FTP 帐户添加一个唯一但相关的用户名。
  • 在字段中输入您的用户生成或自动密码。 确保您的密码强度高。
  • 确保在您的目录扩展中使用 public_html。
  • 并且，从两个给定选项中为您的配额选择无限制。

专业提示：确保复制/粘贴您的 FTP 凭据并将其保存在安全的地方。 此外，我们建议使用自动密码生成器来生成强密码和自定义密码。

单击“创建 FTP 帐户”，您就完成了。 如果您无法创建 FTP 帐户，联系您的托管服务提供商可能会有所帮助。

第 2 步：下载您的 FTP 客户端

完成登录 FTP 凭据或创建新凭据后，下一步是下载 FTP 客户端，如 WinSCP。

WinSCP 是适用于 Windows 的顶级免费 FTP 解决方案之一，支持在您的设备和托管服务器之间轻松快速地传输文件。 根据您的业务需求和网站，除了 WinSCP 之外，还有许多 FTP 客户端可供选择。

第 3 步：登录网站托管环境

现在，使用您下载的 FTP 客户端（在本例中为 WinSCP），通过输入步骤 1 中的 FTP 主机名、用户名和密码登录到您的 WordPress 网站的托管环境。

为此，按下启动 WinSCP，您将在前面看到一个对话框。 选择您的文件协议并分别在字段中添加您的 FTP 主机名、用户名和密码。 完成后，单击登录，您终于进入了托管环境。

专业提示：如果您使用的是 FTPS 协议，请选择 FTP，然后选择一种 FTPS 调用方法。

第 4 步：编辑源代码文件

登录后，您可以访问您的 WordPress 源文件，并可以根据需要进行 HTML、CSS、PHP 和 JS 编辑。 只需右键单击任何文件并选择查看/编辑。

进行更改后（再次注意不要对您的网站进行白屏），您可以保存文件。 WinSCP 会自动重新上传您编辑的所有文件并用新文件替换它们。

恭喜，您已完成 WordPress 网站上的源代码文件编辑。

如何在 WordPress 网站中编辑 HTML 的基础知识

虽然更新 WordPress 网站可能包括从小到大的更改，但升级网站的外观和结构需要在 WordPress HTML 中进行编辑。 尽管更改 HTML 比 WordPress 中的其他技术更改相对容易，如下所述，但学习如何访问 WordPress 网站中的 HTML 代码仍然很重要。

有几种方法可以访问 HTML 文件并编辑 WordPress HTML 以升级网站的布局。 让我们详细看看每一个。

通过 WordPress 经典编辑器编辑 HTML

在 WordPress 中编辑 HTML 的最简单和最易于访问的方法之一是访问 WordPress 文件中的经典编辑器并单击一个按钮。 打开右上角的 WordPress 页面，您会看到两个标签，分别是视觉标签和文本标签。 要在 WordPress 中编辑 HTML ，您只需从可视化编辑器转到文本编辑器。

切换选项卡后，您将看到页面的详细 WordPress HTML 文件，您可以在其中对 WordPress 页面进行所需的更改。 此外，您始终可以切换到可视化编辑器来查看您所做的 WordPress HTML 编辑。

专业提示：确保在您完成编辑所需页面或帖子上的 WordPress HTML 文件后单击保存按钮。

如何使用块编辑器在 WordPress 中编辑 HTML

使用块编辑器在 WordPress 中编辑 HTML 与经典编辑器略有不同； 从可视化编辑器切换到文本编辑器需要更多步骤。 在 WordPress 的块编辑器中，编辑 HTML 首先需要您单击编辑器右上角的三个垂直点。

这会产生一个下拉菜单，您可以在其中选择“代码编辑器”选项。 单击此选项卡后，该站点将打开 WordPress HTML 编辑器。 现在，要从可视化编辑器切换到给定块的文本编辑器，请单击块菜单栏中的三个垂直点。

从下拉列表中，选择“编辑为 HTML”以对您指定的块进行相关更改。

在 WordPress 网站中编辑 HTML 的另一种方法是使用自定义 HTML 块。

自定义 HTML 块允许编辑器直接在指定块中添加您选择的 HTML 代码。 通过右侧的“预览”按钮，用户还可以查看已编辑的 WordPress HTML。

专业提示：请记住在 WordPress 网站中完成 HTML 编辑后保存您的工作。

人们经常遇到的一个非常常见的查询涉及在 WordPress 主页上编辑 HTML。 让我们学习如何做到这一点

编辑 WordPress 网站主页的 HTML

在您的网站主页上编辑 HTML 代码有两种方便的方式。 如果您的 WordPress 网站是建立在主页作为单独页面的主题上，则编辑其 HTML 的过程与上述两种方法相同。

只需从您网站的仪表板中选择主页，然后开始在您的 WordPress 网站中编辑 HTML。

其次，您还可以单击主页顶部菜单块上的“编辑页面”选项卡以访问经典或块编辑器。

奖励：如果这些 WordPress HTML 编辑选项都不适合您，那么就您的主页而言。 您可以为您的 WordPress 网站使用带有内置主页编辑选项的页面构建器或主题。

如何在 WordPress 网站小部件中编辑 HTML

当谈到使用 HTML 进行 WordPress 编辑时，他们的肯定要多得多。 除了页面和帖子之外，在 WordPress 网站的小部件中编辑 HTML 也是一个经常被问到的“如何在 WordPress 中编辑 HTML”的问题。

WordPress 网站中的多个主题使用小部件（包括侧边栏、页眉和页脚）来自定义和编辑 WordPress。 自定义 HTML 小部件支持在 WordPress 网站的页眉、页脚和侧边栏中编辑 HTML。

要访问此小部件，只需导航到您网站侧边栏上的“外观”选项卡，然后选择您希望在其中编辑 HTML 的小部件。在那里添加自定义 HTML 小部件并开始在您的 WordPress 小部件中编辑 HTML 代码。

总体上

您可以通过多种方式更新或编辑 WordPress 网站的 HTML、CSS、PHP 和 JavaScript。 但是，您选择哪一个完全取决于您网站的需求、您更新的频率、您需要更新的原因等等。

如果您希望在 WordPress 网站上编辑源代码，使用主题编辑器是一种可以让您访问所有源文件的选项。 另一种更具技术性的方法是通过 FTP 客户端访问 WordPress 网站托管服务器中的文件并直接对其进行更改。

而在您的 WordPress 网站上编辑 HTML 可以通过经典编辑器或新的块编辑器完成。 无论您希望在小部件、主页还是任何单独的帖子中编辑 WordPress HTML，您只需要打开编辑器即可。

无论您选择哪种方法，它们都会附带一系列您必须研究的步骤，以避免任何错误和麻烦。 为此，更安全、更便捷的方式是聘请WordPress维护团队或WordPress服务商。

他们是专业人士，知道自己在做什么，并且总是提供合适的套餐来满足您的业务需求。 我们 WP Pals 是一支由 WordPress 开发人员组成的高技能、经验丰富且专业的团队，随时准备为您提供最合适的服务包和最合适的服务。

在下面发表评论，让我们知道这篇文章对您有多大用处。 如果您了解有关编辑 WordPress 的更多信息，我们一定很想听听您的意见。