如何在 WordPress 中编辑页面的源代码

已发表: 2022-09-27

登录 WordPress 网站后，您可以直接从仪表板编辑页面和帖子。但是，如果您想编辑页面的源代码，则需要从Theme Editor中进行。在主题编辑器中，您可以访问所有主题的源代码文件，包括为您的站点提供支持的 PHP 文件。如果您想编辑页面的源代码，您需要从主题编辑器访问相关的 PHP 文件。找到要编辑的 PHP 文件后，只需单击它即可在编辑器中打开它。从这里，您可以更改代码并保存更改。请记住，更改主题的源代码可能会破坏您的网站，因此请务必在进行任何更改之前创建备份。

包括页眉和页脚在内的主题元素构成了任何页面的大部分代码。如果您想构建完全自定义的代码，您应该使用子主题。通过创建包含一些引用父主题的注释的 style.css 文件，在子主题中创建自定义模板。如果你想改变它的外观，你只需要改变页面的外观而不改变主题。您将需要知道主题是如何工作的，以及它们是如何“构建”的。在 Google Chrome 或其他浏览器中，单击标题区域，然后选择检查。在屏幕的左角，您会看到与您的页面关联的 CSS 样式。

如何在 WordPress 中编辑源代码？

信用：软百科

编辑 WordPress 代码时，您可以自定义网站的外观和功能。您现在可以使用新的块编辑器和经典编辑器编辑单个帖子或页面。您可以使用子主题更改WordPress 主题的源代码。

WordPress 的即用型主题允许您为您的企业或个人用途选择合适的主题。当 PHP、Javascript 或 CSS 等语言文件发生更改时，源代码也会被修改。除了下面列出的元素之外，主题还受这些文件的约束。如果您无法自行编辑 WordPress 代码，可以使用此 CMS (WordPress) 通过内置编辑器在线修改主题。主题编辑器使您能够查看创建主题时使用的 PHP、CSS 和其他文件。只需单击右侧列表中的任何文件即可开始调整它们。如果您的WordPress 网站未在任何特定的代码编辑器上运行，则可能是由于仪表板中的错误而导致的。

如果主题的功能不同，则不可能看到它。除了以上两种解决方案，您可能无法找到您的 WordPress 主题编辑器；还有许多其他原因。我们使用免费的 FTP 客户端 FileZilla，允许您在计算机和站点服务器之间传输文件。还有其他可用的 FTP 客户端，因此请使用适合您的客户端，例如下面列出的客户端。您可以更改 HTML、CSS、PHP 和 JavaScript 的源文件。在早期阶段，WP Customizer 为用户提供了对其网站进行微小更改的能力。尽管自定义代码有限制，但仍然可以使用 WordPress Customizer。

安装哪些插件可以让您编辑 WordPress 主题而无需进行任何编码？以下是关于他们每个人的一些信息。此页面包含为此目的推荐的插件列表。 Microthemer 是市场上可用的WordPress 网站的 CSS 编辑器。借助点击功能以及设计响应式网格的能力，您可以精确地自定义您的网站。 Ultimate Tracker 的功能包括 HTML minifier 工具、自定义图标、拖放界面和自定义 HTML 图标的拖放界面。

如何查看特定帖子或页面的代码

要查看特定帖子或页面的代码，请单击帖子或页面编辑屏幕右上角的铅笔图标，然后选择要查看的帖子或页面。通过单击此按钮，您将能够访问 WordPress 代码编辑器。

如何在 WordPress 中添加源代码？

为了在 WordPress 中添加源代码，您需要安装一个插件，例如 SyntaxHighlighter Evolved。安装并激活插件后，您可以在帖子和页面中使用简码 [源代码] 来插入代码。

我可以将我的代码导入 WordPress 吗？

如果您有一个旧的 HTML 网站，您可以轻松地将其转换为 WordPress 网站。 Internet 上仍有静态 HTML 网站，它们仍然可用。如果您不是编码专家并且想要保持您的网站简单，那么如果您是所有者，那么切换到 WordPress 可能是一个好主意。

什么是 WordPress 源代码？

您使用的 WordPress 主题是围绕模板构建的。这些有时被称为 WordPress 的源代码。原始主题文件 (PHP)、级联样式表 (CSS) 和 JavaScript (JS) 都包括在内。

如何在 WordPress 中查看源代码？

可以使用外观编辑器或通过 FTP 访问 PHP 和 CSS WordPress 源代码。您可以通过从 WordPress 仪表板中选择外观来访问 WordPress 中的编辑器。可以通过选择不同的文件类型从编辑器访问主题。

网页本质上由数百条指令组成，Web 浏览器必须读取这些指令才能显示它。检查代码以查看您是否可以识别任何 HTML、CSS 或 JavaScript 元素。在 Lorelle 的在线课程中了解有关 WordPress 内部运作的更多信息。 Lorelle 的 WordPress 学校教您如何为您的 WordPress 网站创建和编辑图像。我们已经在课程中介绍了 HTML 标记的基础知识，但您现在可以看到标题、段落、链接和列表。应仔细阅读页面内容周围的代码。在大多数 Web 浏览器中，HTML 和链接会被突出显示，以使它们更容易从非代码词中识别出来。

导航到您的一篇文章系列帖子以查看该页面的源代码。在HTML 代码中查找链接、图像、标题、列表和其他元素。当您查看 HTML 标记时，您将看到每个段落的 HTML 字符列表。 WordPress 会自动将其添加为换行符，因此它将显示为 >br /br> 或只是 >br。

如何编辑 PHP 源代码

尽管文字处理器不编辑编程代码，但您可以在任何文字处理器或文本编辑器中编辑 PHP 文件。 PHP 文件应该使用支持语法高亮、自动缩进和括号补全的文本编辑器来编辑。

在各种情况下，学习如何在 WordPress 中编辑 HTML 都是有益的。在这种情况下，您的网站可能会受到恶意软件的攻击，或者更新插件可能会导致崩溃。为了能够安全地访问和修改其他源代码，例如 PHP、CSS 和 JavaScript，熟悉它们至关重要。通过在 WordPress 中编辑 HTML，您可以控制和灵活地控制您的 WordPress 网站，从设计到维护。无需从WordPress 经典编辑器中的可视编辑器移动到文本编辑器。与使用本文中讨论的其他技术相比，编辑 HTML 不太可能受到伤害。如果您正在编辑 WordPress 主题的源代码，您可以通过两种方式访问它。

您将学习如何从 WordPress 主题编辑器开始浏览这些选项中的每一个。可以通过您自己的编辑将 HTML 添加到您的 WordPress 侧边栏或页脚。您可以使用 WordPress 的内置编辑器来修改您的主题文件。 PHP、CSS、JavaScript 和所有其他与您的主题相关的开发相关文件都可以通过主题编辑器访问。稍后我们将讨论 FTP 编辑，但与此同时，您将能够使用此方法编辑 WordPress。如果您创建自己的 JavaScript，WordPress 将可以访问它。根据您希望使用 JavaScript 的方式，您可能希望从控制台调用它。

根据需要执行的频率，您可以执行多次或仅执行一次。大量第三方工具要求您将代码添加到站点的标题中。 Genesis Framework 的内置编辑器可用于向框架添加页眉和页脚脚本。此方法很有用，因为 WordPress 在更新期间会覆盖您的 header.html 文件。您可以更新 WordPress Core，而无需手动重新输入代码。您可以使用这个免费工具将简单的代码添加到您网站的页眉和页脚。您的 WordPress 网站的CSS 编辑过程几乎与您的 JavaScript 脚本一样简单。

如果您想这样做但需要进行大量编辑，您有三个选项。 WordPress 的自定义字段功能可用作 JavaScript 小部件。此选项允许您修改 CSS 以及 WordPress 定制器。您可以在 WordPress 主题编辑器中更改 WordPress 网站的样式和布局。您还可以使用 FTP 编辑网站的源代码。为此，您必须先在本地修改文件，然后再将它们上传到您的托管环境。第一步是安装 FTP 客户端，例如 FileZilla。

在第 2 步中，您必须输入您的 FTP 用户名、密码和主机名。通过单击快速连接按钮，您可以将服务器连接到计算机。 WordPress Customizer 可用于修改您的 WordPress 源文件。 YellowPencil 是一个功能强大的免费增值插件，可让您创建视觉样式编辑器。 WordPress CSS 样式编辑器插件使添加或更改网站样式变得简单。 Ultimate Tweaker 是一种可用于修改页面构建器（例如 Elementor 或 Beaver Builder）的工具。使用此插件，您可以创建响应式网格并使用实时 CSS 向 WordPress 添加点击式编辑。

可以使用 WordPress 主题编辑器或 FTP 访问您的 WordPress 网站的源代码。因此，您将能够完全自定义有关您网站的所有内容。在 WP Buffs，我们提供 24 小时客户支持和护理计划，可帮助您管理维护和定制需求。

PHP 文件仅包含设置信息，例如服务器名称和数据库连接。但是，有几行代码可以控制网站的行为方式。
此代码包括“include_once 'WP-config.php';”行，它指示 Web 服务器查找名为 WP-config.php 的文件并在响应请求时包含它。
它指示 Web 服务器通过第二行 error_log(“error message”) 向浏览器发送错误消息。如果您需要在您的网站上找出问题的根源，这条线是一个很好的起点。
exit() 过程的第三行指示 Web 服务器退出循环并返回到主程序。
此外，通过在 Finder 命令中键入包含的命令，您可以包含计算机上其他文件夹中的文件。如果您的文档文件夹中有一个名为 myfile.php 的文件，则可以包含以下内容：
此方法需要插入名为“myfile.php”的文件的第一行。
必须先编辑 WP-config.php 文件，然后才能更改 WordPress 网站中的设置。可以在纯文本编辑器（例如记事本或文本编辑）中打开它，然后根据需要更改设置。
在大多数 PHP 文件中，它只是服务器的名称和连接信息，以及数据库名称和连接信息。如果您的文档文件夹中有一个名为 myfile.php 的文件，您也可以在此处包含它：
一旦我包含了“myfile.php”，其他所有内容都应该包含在内。
如果您想更改 WordPress 网站上的设置，请执行此操作。

如何查看 WordPress 网站的源代码

要查看 WordPress 网站的源代码，只需右键单击任何页面，然后从下拉菜单中选择“查看页面源代码”。这将在您的网络浏览器中打开页面的源代码。从这里，您可以随心所欲地查看和分析代码！

用户无需单独的浏览器即可访问任何网页的 HTML 源代码。 Ctrl U 可用于访问谷歌浏览器中网页的源代码。要访问交互式开发人员工具，请在 Firefox 中按 F12、Ctrl Shift I 或 Shift X。可以使用此工具使用 CSS 设置配置源代码。通过使用 Microsoft Internet Explorer、Microsoft Edge 或 Opera，您可以查看网页的源代码。在 IE 中可以使用 View Page Source 工具仅查看源代码。当您在 Safari 中查看网页的源代码时，需要启用开发者选项。

必须启用这些才能执行以下步骤。当您按下 Ctrl Shift I 时，您还将看到交互式开发人员工具。要在 iPhone 或 iPad 上查看网页的源代码，您必须学习一门新的编程语言。要查看给定页面的源代码，您必须首先创建一个书签，然后为其分配 JavaScript 代码，然后使用页面上的书签来查看源代码。如果您在浏览器中查看网页的源代码，您可以使用书签导航到它。 View Source 应用程序也可在 iOS App Store 中免费下载。如果您的移动设备设计不当，请考虑使用在线工具浏览其源代码。