作者： Next

MySQL

MySQL 是基于 Web 的应用程序中最流行的数据库系统之一。

本课将向您介绍 MySQL 数据库系统，以及如何与之交互。

什么是 MySQL？

MySQL 是一个开源的关系型数据库管理系统。它用于在数据库中存储数据，并在需要时检索这些数据。

SQL 代表结构化查询语言，它是一种用于与 MySQL 数据库中的数据交互的编程语言。

正如您在关于 WordPress 和 Web 服务器的课程中所学到的，WordPress 使用 MySQL 数据库来存储其所有数据。这些数据包括文章、页面、评论和用户等内容。

您可以使用的一个与 MySQL 数据库交互的工具是 phpMyAdmin。

phpMyAdmin 是一个基于浏览器的工具，允许您通过图形用户界面与 MySQL 数据库交互，同时也可以对其运行 SQL 查询。

它通常包含在您的 Web 主机或本地开发环境的控制面板中。

创建表

要在数据库中创建表，您需要使用 CREATE TABLE 语句。此语句需要表名以及表应包含的列。

例如，要创建一个名为 colors 的表，包含 id、type 和 value 列，您可以使用以下 SQL 语句：

CREATE TABLE colors (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    type VARCHAR(30) NOT NULL,
    value VARCHAR(30) NOT NULL
)

这将创建 colors 表，并包含相应的列。

向表中添加行

现在，如果您想向表中添加一行，您需要使用 INSERT 语句。此语句需要表名以及每列的值。

例如，要向 colors 表添加一行，您可以使用以下 SQL 语句：

INSERT INTO colors (type, value) VALUES ('header', 'red');

如果您现在浏览 colors 表，您将看到刚刚添加的行。

从表中读取行

如果您想从表中读取一行，您需要使用 SELECT 语句。此语句需要表名以及要读取的行。

例如，要从 colors 表中读取 type 为 header 的行，您可以使用以下 SQL 语句：

SELECT * FROM colors WHERE type = 'header';

这将返回所有请求的行。

如果您只想要 value 列的值，您可以使用以下 SQL 语句：

SELECT value FROM colors WHERE type = 'header';

这将只显示 value 列中的数据。

更新表中的行

如果您想更新表中的一行，您需要使用 UPDATE 语句。此语句需要表名、要更新的列、新值以及要更新的行。

例如，要更新 colors 表中 value 列的值，您可以使用以下 SQL 语句：

UPDATE colors SET value = 'blue' WHERE type = 'header';

如果您浏览该表，您将看到 value 列的值已被更新。

从表中删除行

如果您想从表中删除一行，您需要使用 DELETE 语句。此语句需要表名以及要删除的行。

例如，要从 colors 表中删除 type 为 header 的行，您可以使用以下 SQL 语句：

DELETE FROM colors WHERE type = 'header'

浏览该表显示数据已被删除。

数据库键

在前面的示例中，您可能注意到使用 value 列来更新或删除行。虽然这可行，但这不是更新或删除行的最有效方式。这是因为 value 列不是唯一的，可能存在多行具有相同的值。此外，如果您想更新或删除一行，您需要知道 value 列的值，这可能无法实现。

因此，通常建议您的数据库表有一个 id 列，并且该 id 是唯一的、自动递增的。同时，最好为 ID 建立索引。索引允许 MySQL 比没有索引的字段更快地执行选择、更新和删除操作。

从 PHP 运行查询

与 PHP 和 JavaScript 不同，SQL 是一种在数据库上执行的查询语言。此外，由于 JavaScript 在浏览器中运行，通常不会从 JavaScript 直接向数据库发送请求，而是通过服务器端执行的 PHP 来实现。

要运行 SQL 查询，你需要从 PHP 建立与数据库的连接，准备并执行查询，查询结果会以某种变量形式返回给 PHP。

幸运的是，正如你在 WordPress 工作原理模块中学到的，WordPress 包含一个数据库 API，可以让你管理数据库连接并运行所需的任何查询。

此外，如果你使用默认的 WordPress 数据类型，甚至无需担心执行 SQL 查询。

附加资源

有关 MySQL 和 SQL 语句的更多信息，可以访问以下在线资源：

  • MySQL 教程
  • MySQL 8.2 参考手册
  • 在 freeCodeCamp 上学习 MySQL – 初学者课程

PHP

PHP 是一种用于创建动态网页的编程语言。

根据网络统计数据，超过 75% 的现代网站由 PHP 驱动。

让我们来看看 PHP 是如何工作的。

什么是 PHP？

PHP 通常用于创建网站的管理界面，例如 WordPress 仪表盘，但它也用于为网站前端填充内容。

PHP 是一种服务器端脚本语言，这意味着它由服务器解释，并将结果渲染到浏览器中。

为了看一个 PHP 能做什么的简单例子，我们沿用之前课程中的 HTML 页面，但使用 PHP 来更改标题元素的颜色：

<?php
if ( isset( $_GET['color'] ) ) {
    $color = $_GET['color'];
} else {
    $color = 'red';
}
?>
<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="main">
        <h1 style="color: <?php echo $color; ?>;">这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
        <a href="/index.php?color=blue">将标题颜色改为蓝色</a>
    </body>
</html>

你首先会注意到，文档的文件扩展名从 .html 变成了 .php。这告诉服务器该文档包含 PHP 代码。

然后，任何你想添加到文档中的 PHP 代码都需要用 PHP 标签包裹起来。

在深入代码之前，先点击链接试试这个例子。

所以，在这个例子中：

  1. 文件顶部的 PHP 代码被包裹在 PHP 标签中，这告诉服务器将这些代码作为 PHP 执行。
  2. 创建了一个名为 $color 的变量，它存储来自 $_GET 全局数组的 color 查询字符串参数的值（如果存在的话），如果不存在则存储值 red。
  3. $color 变量的值被添加到了标题元素的 style 属性中。你会看到这也被包裹在 PHP 标签中，并使用 echo 函数输出 $color 变量的值。
  4. 文档中添加了一个链接，将 color 查询字符串参数的值更改为 blue。

你会注意到，检测查询字符串并设置颜色变量的 PHP 代码被添加到了文档中其他 HTML 元素之前。这是因为这段 PHP 代码需要在 HTML 元素在浏览器中渲染之前运行。

此外，你会看到新的标题颜色是在 PHP 标签内以内联样式输出的。这是因为 PHP 无法更改 CSS 文件，所以更改标题元素颜色的唯一方法是将颜色添加为内联样式。

最后，注意锚标签上查询字符串的使用，用于将数据从一个页面传递到另一个页面。这是在 PHP 中从一个页面传递数据到另一个页面的常见方式。

同时，你会看到按钮被改成了锚标签。这样做是为了确保 HTML 的语义化使用。按钮元素通常用于触发一个操作，例如提交表单或触发 JavaScript 函数。在这种情况下，锚标签用于链接到一个页面，而这个页面恰好是正在渲染的同一个页面。

这也可能是你第一次看到 if 语句。if 语句用于检查一个条件是否为真，如果为真，则运行 if 语句内的代码。这也被称为条件语句。

PHP 和 JavaScript 都支持条件语句。事实上，PHP 和 JavaScript 的许多功能是相似的。然而，这两种语言之间有一些关键区别，理解这些区别很重要。

其他资源

有关 PHP 的更多信息，你可以访问以下在线资源：

  • PHP 入门指南
  • 官方 PHP 文档
  • 在 freeCodeCamp 上学习面向初学者的 PHP

JavaScript

JavaScript 是一种编程语言，用于为网页添加交互功能。

让我们进一步了解 JavaScript 的工作原理，以及如何在 WordPress 网站中使用它。

什么是 JavaScript？

JavaScript 是一种客户端脚本语言，这意味着它由浏览器解释执行。

要了解 JavaScript 能做什么的简单示例，让我们看看之前课程中的 HTML 页面，并添加一个按钮，该按钮使用 JavaScript 更改标题元素的颜色：

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
        <button>将标题颜色改为蓝色</button>
    </body>
    <script>
        const button = document.querySelector('button');
        const heading = document.querySelector('h1');

        button.addEventListener('click', () => {
            heading.style.color = 'blue';
        });
    </script>
</html>

在这个示例中：

  1. 文档中添加了一个按钮元素，文本为“将标题颜色改为蓝色”。
  2. 在 HTML 文档的底部，有一个新的 <script> 元素。这个元素用于向文档添加 JavaScript。
  3. 创建了一个名为 button 的变量，它通过使用 document.querySelector() 方法并传入按钮元素的 CSS 选择器（本例中为 button）来存储对按钮元素的引用。
  4. 创建了一个名为 heading 的变量，它通过使用 document.querySelector() 方法并传入标题元素的 CSS 选择器（本例中为 h1）来存储对标题元素的引用。
  5. 为按钮元素附加了一个事件监听器。这个事件监听器监听点击事件，当事件被触发（按钮被点击）时，它会将标题元素的颜色改为蓝色。

你会注意到 JavaScript 是在其他 HTML 元素之后添加到文档中的。这是因为 JavaScript 需要能够访问 HTML 元素才能正常工作。

由于浏览器从上到下读取 HTML 文档，将 JavaScript 放在文档底部可以确保在 JavaScript 运行之前，HTML 元素已经加载到浏览器中。

你还会注意到，如果刷新页面，标题会恢复为原始颜色。这是因为 JavaScript 只能在页面加载到浏览器后影响页面，但这些更改不会持久保存。

与 CSS 类似，也可以使用外部文件向文档添加 JavaScript。这是向文档添加 JavaScript 的首选方式。

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
        <button>将标题颜色改为蓝色</button>
    </body>
    <script src="script.js"></script>
</html>

然后，你可以将文档中 <script> 元素内的 JavaScript 移动到 script.js 文件中。

const button = document.querySelector('button');
const heading = document.querySelector('h1');

button.addEventListener('click', () => {
    heading.style.color = 'blue';
});

JavaScript 在 WordPress 网站的许多地方都有使用。JavaScript 最大的用途之一是在新的块编辑器中，它由一个名为 React 的 JavaScript 框架驱动。

WordPress 中还使用了许多外部 JavaScript 库，你可以在 WordPress 仪表盘中的“关于”页面底部找到这些库的列表。

此外，与 CSS 一样，WordPress 允许你灵活地将自定义 JavaScript 或外部 JavaScript 库添加到你的插件和主题中。

其他资源

有关 JavaScript 的更多信息，你可以访问以下在线资源：

  • MDN 上的 JavaScript
  • freeCodeCamp JavaScript 算法和数据结构认证

CSS

如果说 HTML 是网页的结构，那么 CSS 就是网页的样式。

在本课中，你将学习 CSS 如何与 HTML 配合使用，以及在哪里可以找到更多关于 CSS 的信息。

什么是 CSS？

CSS 代表层叠样式表。如果说 HTML 描述了网页的结构，那么 CSS 则描述了文档的样式。

CSS 用于定义网页的颜色、字体和布局。

让我们看看 HTML 课程中的 HTML 文档：

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
    </body>
</html>

在上面的例子中，HTML 文档没有样式。它在浏览器中使用默认的浏览器样式显示。但你可以使用 CSS 来改变样式。

例如，你可以将标题元素的颜色改为红色，并将段落元素的字体大小改为 20 像素。

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
    </head>
    <body class="main">
        <h1 style="color: red;">这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p style="font-size: 20px;">这是我的 HTML 文档的内容。</p>
    </body>
</html>

使用 style 属性将 CSS 添加到元素被称为内联样式，但这并不是为 HTML 文档添加样式的最佳方式。

相反，你可以使用 <style> 元素将 CSS 添加到文档中。

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <style>
            h1 {
                color: red;
            }
            p {
                font-size: 20px;
            }
        </style>
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
    </body>
</html>

也可以使用外部样式表将 CSS 添加到文档中。这是为文档添加 CSS 的首选方式。

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
    </body>
</html>

在上面的例子中，style.css 文件将包含以下 CSS：

h1 {
    color: red;
}
p {
    font-size: 20px;
}

在这些例子中，CSS 一直针对特定的元素。但也可以根据元素的属性来定位它们。

例如，你可以定位 body 元素的 class 属性，并为其添加边框。

.main {
    border: 5px solid black; 
}

CSS 能做的远不止改变元素的颜色和字体大小。它还可以用于创建复杂的布局、动画等等。

和 HTML 一样，CSS 在 WordPress 网站中随处可见。仪表盘有其自己的一套核心 CSS 来控制其外观和感觉。

主题会附带一套自定义的 CSS 来样式化主题元素。

在网站前端添加内容的插件也会使用 CSS 来样式化这些内容。

WordPress 还允许你灵活地添加自己的自定义 CSS，或使用外部 CSS 框架，例如 Bootstrap 或 Tailwind。

其他资源

有关 CSS 的更多信息，你可以访问以下在线资源：

  • MDN 上的 CSS
  • Web.dev 上的 CSS
  • freeCodeCamp 响应式网页设计课程

HTML

作为 WordPress 开发者，你最先学习的编程语言之一就是 HTML。

在本课中，你将了解什么是 HTML、它在 WordPress 中如何使用，以及在哪里可以找到更多关于编写 HTML 的信息。

什么是 HTML？

HTML 是网络的代名词。互联网的创始人设计 HTML 是为了创建网页。

无论何时你在浏览器中访问一个网站，无论是世界上最大的新闻门户网站之一，还是当地非营利组织的主页，你正在查看的文档都是用 HTML 编写的。

HTML 代表超文本标记语言，用于描述网页的结构。

HTML 由元素组成。元素是 HTML 文档的构建块。

一个 HTML 元素通常有一个开始标签、一个结束标签以及标签之间的内容。

以下是一个 HTML 文档的示例：

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
    </body>
</html>

在上面的示例中，顶部的 <html> 标签是开始标签，底部的 </html> 标签是结束标签。注意结束标签以斜杠开头。这些标签之间的内容是 <html> 元素的内容。

HTML 元素可以相互嵌套。在上面的示例中，<head> 元素嵌套在 <html> 元素内，而 <title> 元素嵌套在 <head> 元素内。

HTML 元素也是语义化的，这意味着每个标签都有特定的含义，并且应该以特定的方式使用。例如，<h1> 元素是标题元素，而 <p> 元素是段落元素。

HTML 元素也可以有属性。属性用于提供关于元素的额外信息。在上面的示例中，<body> 元素有一个名为 class 的属性，其值为 main。

某些元素允许你包含媒体，例如图像、音频和视频。在上面的示例中，<img> 元素用于在页面上包含图像。src 属性用于指定图像的位置，alt 属性用于为图像提供替代文本。

HTML 元素也可以是自闭合的。在上面的示例中，<img> 元素是自闭合的，你会注意到它没有结束标签。

当你在浏览器中访问一个网页时，浏览器会读取 HTML 文档并在浏览器窗口中显示内容。浏览器从上到下、从左到右读取 HTML 文档。

默认情况下，每个元素以不同的方式显示。例如，<h1> 元素显示为标题，而 <p> 元素显示为段落。

HTML 在 WordPress 网站中无处不在，从仪表盘到驱动前端的主题。甚至插件也使用 HTML 来显示内容。

无障碍 HTML

在编写 HTML 时，编写无障碍 HTML 非常重要。无障碍 HTML 是指以方便残障人士使用的方式编写的 HTML。

例如，如果你使用图像显示徽标，你应该为图像包含替代文本。这允许使用屏幕阅读器的人理解图像是什么。

此外，你应该始终使用语义化的 HTML 元素，并以正确的方式使用它们。例如，如果你要创建标题，你应该使用标题元素，而不是段落元素。

其他资源

有关 HTML 的更多信息，你可以访问以下在线资源：

  • MDN 上的 HTML
    • MDN 上的无障碍 HTML
  • Web.dev 上的 HTML
    • Web.dev 上的无障碍 HTML
  • freeCodeCamp 响应式网页设计课程

其他实用开发工具

虽然本地开发环境和代码编辑器是 WordPress 开发的基础工具，但还有其他社区工具和资源可能对您有所帮助。

如果您正在开发 WordPress 主题，WordPress.org 主题测试数据提供了导入包含虚拟数据的 XML 文件的选项，用于测试您的主题。这可以让您了解主题在不同类型内容和布局下的表现。

您可以安装主题检查插件，该插件会测试您的主题是否符合最新的 WordPress 标准和实践。

类似地，对于插件开发者，有插件检查插件，它会测试您的插件，确保其达到 WordPress 插件审查团队的基本要求标准。

还有一些插件可以帮助调试代码。这些插件包括：

  • 调试栏：在管理栏中添加一个调试菜单，显示查询、缓存和其他有用的调试信息。
  • 查询监视器：支持调试数据库查询、PHP 错误、钩子和操作、区块编辑器区块、已排队的脚本和样式表、HTTP API 调用等。

还有弃用通知记录插件，它会记录插件或主题中不正确的函数使用、弃用的文件使用以及弃用的函数使用。

您将在未来的课程中了解更多关于这些工具的信息。

代码编辑器

要进行 WordPress 开发，你还需要一种编写和编辑 WordPress 代码的工具。

选择代码编辑器

所有代码本质上都是文本，因此理论上你可以使用操作系统自带的文本编辑器来编写和编辑 WordPress 代码。

但这样你就会错过真正的代码编辑器和集成开发环境（IDE）所提供的所有最佳功能。

如果你还没有一个自己习惯使用的代码编辑器或 IDE，以下是一些可供考虑的选择。

Visual Studio Code

Visual Studio Code 是由微软创建的一款免费开源的代码编辑器。它支持 Windows、Mac 和 Linux 系统。它支持多种语言，包括 HTML、PHP、JavaScript 和 CSS。它还提供内置终端等附加功能，并可通过扩展添加更多功能。

VIM

VIM 是一款免费开源的文本编辑器，支持 Windows、Mac 和 Linux 系统。它是一款基于命令行的编辑器，不如其他编辑器那样用户友好。但它提供了广泛的功能，并且高度可定制。

Brackets

Brackets 是一款免费开源的代码编辑器，最初由 Adobe 创建，现已开源。它支持 Windows、Mac 和 Linux 系统。Brackets 与 Visual Studio Code 类似，支持多种语言，并可通过扩展添加更多功能。

Sublime Text

Sublime Text 是一款代码编辑器，支持 Windows、Mac 和 Linux 系统。它不是免费的，但提供免费试用版。在 Visual Studio Code 发布之前，它是另一款流行的代码编辑器。

Notepad++

Notepad++ 是一款免费开源的编辑器，仅支持 Windows 系统。它通常被视为 Windows 默认文本编辑器的强大替代品，同时也作为代码编辑器而广受欢迎。

TextMate

TextMate 是一款免费开源的编辑器，仅支持 Mac 系统。与 Notepad++ 类似，它是 MacOS 默认文本编辑器的替代品，并提供代码编辑器功能。

PhpStorm

PhpStorm 是由 JetBrains 创建的一款功能完整的集成开发环境。它支持 Windows、Mac 和 Linux 系统。它不是免费的，但提供免费试用版，并且深受使用 PHP 应用程序的开发者的欢迎。

选择代码编辑器

就像选择本地开发环境一样，选择代码编辑器是个人选择，没有绝对的对错之分。

在 Learn.WordPress.org 的大部分内容中，我们将使用 Visual Studio Code，但你也可以自由选择自己最习惯使用的任何代码编辑器。

WordPress 安装

一旦你确定了本地开发环境，就需要安装 WordPress 核心文件，以便在你的电脑上搭建一个可运行的 WordPress 站点。

像 LocalWP、DevKinsta 和 VVV 这类工具都提供了自动创建新本地站点并为你安装 WordPress 的功能。要使用这些功能，你需要查阅所选工具的文档，因此可以跳过本课。

然而，如果你决定使用 MAMP 或 XAMPP 这类工具，就需要自己手动安装 WordPress，这正是本课要教你的内容。

虽然手动安装 WordPress 并非必备技能，但了解这一过程对将来可能遇到的情况会很有帮助。

前提条件

在安装 WordPress 之前，你需要了解本地开发环境的以下信息。

  • 文档根目录或网站根目录的位置。这是本地开发环境用来向浏览器提供文件的文件夹。
  • 数据库详细信息。包括数据库服务器名称、数据库名称、数据库用户名和数据库密码。在本地开发环境中，数据库服务器名称通常是 localhost，数据库用户名通常是 root。数据库密码要么为空，要么是 password。你可能需要为你的 WordPress 站点创建一个新数据库。
  • 本地站点的 URL。这是你在浏览器中访问本地站点时使用的网址。

建议查阅本地开发环境的文档来获取这些信息。

下载 WordPress

第一步是下载 WordPress 核心文件。你可以从 WordPress.org 网站的“获取 WordPress”页面进行下载。

点击“下载 WordPress”按钮，即可下载最新版本的 WordPress，该版本以 zip 文件形式提供。

根据浏览器的不同，你可能会被提示保存文件，或者文件会自动下载。文件可能默认保存在“下载”文件夹中，如果你设置了自定义文件夹，则会保存在那里。

如果你使用的是 Mac 上的 Safari 浏览器，zip 文件可能会自动解压。如果没有，你需要手动解压文件。无论如何，你的电脑上最终会有一个名为 wordpress 的文件夹。

打开该文件夹，你会看到 WordPress 核心文件。

将 WordPress 文件复制到本地开发环境

下一步是将 WordPress 文件复制到本地开发环境的文档根目录中。

著名的五分钟安装

将 WordPress 文件复制到本地开发环境后，现在可以安装 WordPress 了。为此，在浏览器中访问本地站点的 URL。这将启动 WordPress 安装过程。

第一步是选择语言。选择语言后，点击蓝色的“继续”按钮。

你会看到一个屏幕，说明完成安装所需的信息。点击蓝色的“开始安装！”按钮继续。

现在系统会要求你输入数据库详细信息。包括数据库服务器名称、数据库名称、数据库用户名和数据库密码。你还需要选择一个表前缀，或者接受默认值。

输入所有详细信息后，点击“提交”按钮。

如果数据库详细信息不正确，你会看到一条错误消息。你需要检查数据库详细信息并重试。

如果数据库详细信息正确，你会看到一个屏幕，确认安装已准备就绪。

在此过程中，会在 WordPress 安装根目录中创建一个 wp-config.php 文件。该文件包含你输入的所有数据库详细信息，WordPress 用它来连接数据库。

点击蓝色的“运行安装”按钮继续。WordPress 将使用数据库详细信息连接数据库并创建数据库表。

现在系统会要求你输入一些关于站点的信息。包括站点标题、管理员用户名和密码，以及管理员电子邮件地址。

系统会为管理员用户生成一个安全密码，但你可以根据需要更改它。

你还可以选择是否阻止搜索引擎索引你的站点。

输入所有详细信息后，点击“安装 WordPress”按钮继续。

此过程将在用户表中创建管理员用户（用户 ID 为 1）。它还会设置默认的站点选项。

现在你会看到一个屏幕，确认安装已完成。你可以使用之前输入的管理员用户名和密码登录本地站点。

总结

恭喜你，已成功在本地开发环境中安装 WordPress。

关于此过程的更多信息，可参考 WordPress.org 开发者文档中的“如何安装 WordPress”部分。

本地开发环境

要使用 WordPress 进行开发，您需要在计算机上安装一些工具，其中首要的就是本地开发环境。

本地开发环境有很多选择，在本课程中，您将了解一些最流行的选项。

术语快速入门

开发人员倾向于使用不同的术语来指代他们可能使用的不同 WordPress 环境。

存在于互联网上、用户与之交互的 WordPress 网站通常被称为线上环境或生产环境。这是所有最终内容发布以及任何自定义代码上线的地方。

有时，开发人员会创建一个单独的服务器环境来测试新功能或对网站进行更改。这通常被称为预发布环境。这是线上网站的一个副本，可通过互联网访问，但通常只有网站所有者或开发人员才能访问。它用于在将新功能或更改部署到线上网站之前进行测试。

最后，开发人员通常会有一个本地环境。这是安装在他们计算机上的线上或预发布网站的副本。他们将在其中完成大部分开发工作。

本地开发环境

拥有一个您熟悉的本地开发环境，可以让您专注于编写代码，而无需担心在计算机上设置 Web 服务器和数据库服务器的复杂性。它还允许您离线工作，并在无需将代码上传到线上网站的情况下进行测试。

一些本地开发环境还提供额外功能，例如内置数据库管理工具，或快速更改 PHP 版本的能力。

在 WordPress 领域，通常有两种类型的本地开发环境：由 WordPress 社区成员创建和维护的环境，以及由非营利组织或公司创建和维护的环境。

wp-env 是目前 WordPress 开发者文档推荐的本地开发环境。

它需要具备命令行操作知识，并安装 Docker 和 Node.js。

VVV（即 Varying Vagrant Vagrants）是另一个由 WordPress 社区成员维护的本地开发环境。它也需要具备命令行操作知识，并安装 VirtualBox 和 Vagrant。

另一个免费开源的选择是 XAMPP。XAMPP 是由 Apache Friends（一个旨在推广 Apache Web 服务器的非营利项目）维护的本地开发环境。虽然它并非专门针对 WordPress 的本地开发环境，但它包含了您所需的一切：Apache Web 服务器、数据库服务器和 PHP。

与 XAMPP 类似，MAMP 是另一个并非专门为 WordPress 设计的本地开发环境，但它包含了入门所需的一切。与 XAMPP 不同，MAMP 不是开源的，并且提供免费版和付费版。

其他 WordPress 本地开发环境包括 WordPress Studio 和 DevKinsta。

这些产品均由各自的母公司创建和维护，并且各自提供独特的功能。

选择本地开发环境

选择本地开发环境是个人选择，没有绝对的正确或错误答案。

您需要审查每个选项的所有功能、优缺点，并决定哪个最适合您。

管理页面请求

WordPress 管理界面的功能由 wp-admin 目录中的所有文件处理。

让我们更深入地了解一下典型 WordPress 管理请求所运行的代码，并理解它与前端请求的不同之处。

什么是管理请求？

与典型的前端请求不同，根据所使用的功能，会执行不同的 PHP 文件。此外，仪表盘中不使用固定链接，而是使用查询字符串将数据传递到这些位置。

例如，管理仪表盘的默认 URL 是 https://example.com/wp-admin/

这将加载 wp-admin 目录中的 index.php 文件。

但是，如果您想查看网站中的文章，URL 是 https://example.com/wp-admin/edit.php。

这将加载 wp-admin 目录中的 edit.php 文件。

如果您点击“编辑文章”按钮，请求的 URL 是 https://example.com/wp-admin/post.php?post=1&action=edit。

这将加载 wp-admin 目录中的 post.php 文件，并向其传递 edit 操作和 post ID 为 1。然后使用这些查询字符串变量来决定显示什么内容。

然而，这些不同的管理文件在运行方式上有很多共同点。

  1. 包含 wp-admin/admin.php 文件，该文件设置 WordPress 环境
    1. 此文件设置任何管理特定的常量，然后包含前端使用的同一个 wp-load.php 文件，该文件进而包含 wp-config.php 以包含 WordPress 安装的所有配置设置，以及设置 WordPress 环境的 wp-settings.php。
  2. 然后，该文件将加载任何特定的内部功能，但仅针对管理界面的这一特定部分。
    1. 对于仪表盘，它将包含位于 wp-admin/includes/dashboard.php 的 WordPress 仪表盘 API
    2. 然后，它将设置仪表盘功能所需的任何特定内容和变量
  3. 接下来，它将包含 wp-admin/admin-header.php 文件，该文件执行诸如设置和渲染管理界面的头部区域以及渲染管理菜单等操作。
  4. 之后，它将生成并渲染特定管理页面的内容
  5. 最后，它将包含 wp-admin/admin-footer.php 文件，该文件设置并渲染管理界面的页脚