分类： WordPress的编程语言

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 响应式网页设计课程