分类： WordPress开发

如何使用GitHub进行WordPress开发
在本教程中，我们将向您介绍GitHub并解释它为何如此受开发人员欢迎的工具。然后，我们将向您介绍如何使用它来进行WordPress开发。

如果您花了很多时间阅读WordPress，那么您很有可能听说过GitHub。它是开发人员托管项目并与他人协作的最受欢迎的平台之一。也许您甚至考虑过自己尝试一下，但不知道从哪里开始。

是时候熟悉这个宝贵的WordPress资源了。GitHub是一个用于跟踪、管理和协作开发项目的优秀平台，因此非常值得学习如何使用。它使您能够在线托管项目并使用Git强大的版本控制来跟踪每一个更改。

GitHub简介

如果你是一个新手，GitHub可能看起来复杂，但它的核心实际上非常简单。本质上，GitHub是一个专门为开发者设计的免费托管服务。它的主要用途是托管用于共享和协作的项目，使这些项目可用，以便其他用户可以贡献和下载它们。

顾名思义，GitHub是围绕Git的功能构建的。这是一个版本控制系统，用于跟踪对项目所做的所有更改。这个系统如此强大的原因在于它的全面性。由于Git会跟踪项目中的每个文件和更改，因此它使您能够快速恢复到任何以前的版本。

Git还允许开发人员创建“分支”，即当您创建项目的副本时，您就可以独立处理它。这使您有机会进行和测试更改，而不会影响整个项目。然后，您可以根据需要将更改“合并”到主分支中，或者干脆丢弃它们。

这些功能是理解为什么Git和GitHub对开发人员如此宝贵的关键。例如，您不必担心会对项目造成无法修复的损坏，因为您始终可以创建分支并回滚所有修订。此外，在一个潜在无限数量的用户的项目上进行协作很容易。事实上，这正是当今WordPress本身的开发方式。

GitHub入门

在开始使用GitHub之前，您需要一个可以同时使用Git和GitHub的系统。首先，您需要在本地计算机上下载并安装Git。您将使用它来执行重要的GitHub相关任务，例如在您的计算机和GitHub存储库之间传输文件。

GitHub只是项目的宿主，因此所有实际开发都在您的本地机器上进行。Git然后使用“存储库”来存储每个项目。

从理论上讲，这听起来可能令人困惑，因此让我们看一下典型的工作流程：
1. 您有一个项目托管在GitHub上的存储库中。
2. 您创建一个本地存储库，并使用Git从GitHub中“拉取”最新版本的项目。
3. 您现在可以在本地计算机上处理该项目。进行更改后，您可以将它们“推送”回GitHub存储库。
您决定如何构建您的特定工作流程取决于您的偏好和项目要求。重要的是您的流程对您、您的项目和您的合作者来说顺利进行。

最后，为了充分利用Git，您需要使用命令行。Git最常通过具有命令行界面的Secure Shell (SSH)使用。

如何使用GitHub进行WordPress开发

现在，是您亲自尝试GitHub开发的时候了！在此示例中，您将创建一个用于开发WordPress主题的GitHub项目。在向您展示如何在它们之间来回传输主题之前，我们将向您展示如何创建一个GitHub帐户和两个存储库。

1. 创建本地WordPress环境

当您为WordPress进行开发时，始终使用暂存环境很重要。这使您可以自由地尝试新事物，而不必担心它们会如何影响您的实时站点。

在这种情况下，您将通过在计算机上安装WordPress来创建本地暂存环境。您可以通过几种不同的方式执行此操作，但我们建议使用DesktopServer（你也可以选择自己喜欢的本地搭建WordPress环境的方式），它使您能够免费快速创建本地版本的WordPress：

首先选择DesktopServer的免费版本，注册一个帐户，然后下载并运行安装程序。

安装程序需要一些时间才能工作。完成后，您可以按照我们提供的教程创建和配置新的本地WordPress站点。

2. 在本地机器上安装Git

现在是安装Git的时候了。如果您运行的是最新版本的Mac OS，您可能会发现Git已经在您的机器上。您可以通过打开命令行界面（例如Terminal）并输入以下命令来检查这一点：

git –version

git –version
```
git --version
```
如果安装了 Git，此函数将返回其版本号。如果没有，系统会询问您是否要立即安装它。您还可以下载安装程序并为Mac、Linux 和 Windows计算机手动运行它。

如果您对命令行界面不满意，您可能需要考虑下载Git GUI应用程序。但是，对于此示例，我们将使用标准命令行方法。无论哪种方式，一旦安装了Git，您就可以创建本地存储库了。

3. 为您的项目创建本地存储库

您现在可以为您的项目创建本地Git存储库。在此示例中，我们将使用默认的二〇一七主题，该主题应该已包含在您的本地WordPress安装中。

首先，您需要使用以下命令访问主题的文件夹：

cd /Users/you/Documents/Websites/website/wp-content/themes/twentyseventeen

cd /Users/you/Documents/Websites/website/wp-content/themes/twentyseventeen
```
cd /Users/you/Documents/Websites/website/wp-content/themes/twentyseventeen
```
通过使用正确的文件夹名称替换您和网站，确保更改此文件路径，使其指向正确的目录。您现在可以使用以下命令将此目录初始化为存储库：

git init

git init
```
git init
```
接下来，您需要将文件添加到索引中。这会告诉Git自上次执行提交（换句话说，保存更改）以来您添加或编辑了哪些文件。由于这是第一次提交，您可以使用以下命令添加文件夹中的每个文件：

git add

git add
```
git add
```
您现在可以提交更改。以下命令将提交索引中的所有文件，并包含一条消息以帮助您保持版本井井有条：

git commit -m “The first commit”

git commit -m “The first commit”
```
git commit -m "The first commit"
```
您现在已经完成了本地存储库的配置。这意味着是时候将我们的注意力转向GitHub。

4.注册一个GitHub账号

此时，您需要创建一个GitHub帐户。首先访问GitHub主页并填写注册表。

当您继续下一步时，系统会询问您要使用什么计划。您应该在此处选择Unlimited public repositories for free选项，然后选择Continue。

最后一步涉及根据您以前的经验水平自定义您的帐户。您可以在此处选择适用于您的选项，然后单击提交以创建您的帐户。

您的帐户现在已准备就绪。您可以选择通读介绍性指南，或立即创建一个新项目。

如果您想了解更多关于使用GitHub的基础知识，我们建议您花一些时间阅读上述指南。但是，现在，请单击Start a project。在此阶段，您可能会被要求验证您的电子邮件地址。

您应该已经收到一封来自GitHub的电子邮件，因此请检查您的收件箱并点击验证电子邮件地址链接。完成后，您将被带到一个页面，您可以在其中创建新项目。

5. 在GitHub上创建一个存储库

您终于准备好为您的项目创建GitHub存储库。这是一个相当简单的过程，只需要您配置一些设置。让我们从顶部开始。

首先，您可以选择存储库的所有者，该所有者实际上是存储库的管理员。这应该已经设置为你自己，所以你可以保持原样。接下来，您需要为您的存储库提供一个描述性且简洁的名称。您可能希望以您将要处理的插件、主题或其他项目命名。之后，您可以输入项目的描述。同样，这应该是描述性的，以便其他开发人员和用户可以理解您正在创建的内容。

由于您注册了一个免费帐户，因此您将只能创建一个公共存储库（尽管您现在只需要这些）。您还可以选择使用README文件立即将存储库克隆到您的计算机。由于您已经有一个本地存储库，因此您现在不应选择此选项。但是，它可以成为未来项目的便捷工具。

最后，您将在此屏幕底部看到两个下拉菜单，提供其他选项。如果您希望Git忽略某些被跟踪的文件，第一个使您可以选择gitignore选项。

第二个选项允许您为存储库选择许可证。在创建真正的项目时，仔细考虑要使用的许可证很重要。WordPress对许可证有非常具体的规则，如果您计划为该平台进行开发，则需要注意这些规则。

现在，您只需从该菜单中选择“None”，然后单击“Create repository”即可完成设置。

这将带您进入您的新项目，这意味着是时候添加您的主题了。

6. 将你的项目提交到GitHub

您现在可以将您的主题推送到 GitHub。在Git中输入以下命令，确保将URL替换为指向您刚刚设置的存储库的链接：

git remote add origin https://github.com/yourusername/my-git-theme.gitgit push -u origin master

git remote add origin https://github.com/yourusername/my-git-theme.gitgit push -u origin master
```
git remote add origin https://github.com/yourusername/my-git-theme.gitgit push -u origin master
```
然后系统会提示您输入GitHub用户名和密码。完成此操作后，您提交到本地存储库的所有文件都将推送到您的GitHub项目。

如果您返回到您的GitHub存储库，您将看到所有文件都已添加到其中。

7. 从GitHub获取更新到您的本地存储库

您现在已经设置了两个存储库，并且您知道如何将更改从本地机器推送到GitHub项目。最后一步是翻转这个过程并学习如何将数据从GitHub提取到本地安装。如果你是一个人在一个项目上工作，你很少需要担心这样做。但是，如果其他开发人员也将他们的更改推送到外部存储库，则这变得必要。

您可以通过使用很容易做到这一点的读取命令。只需将此命令输Git，将URL替换为GitHub项目的正确URL：

git fetch https://github.com/yourusername/my-git-theme.git

git fetch https://github.com/yourusername/my-git-theme.git
```
git fetch https://github.com/yourusername/my-git-theme.git
```
这将从GitHub拉取所有更改，并将它们复制过来。您的本地存储库现在将与您的GitHub存储库同步。

完成后，您已成功为WordPress主题创建了一个新的 GitHub 项目！此时，您可以继续尝试使用这些工具，看看您能完成什么。

小结

使用GitHub进行WordPress开发赋予您对项目各个方面的绝对权力。通过使用Git强大的版本控制功能，您可以访问每个更改，从而轻松恢复到文件的早期版本。Git和GitHub还使多个开发人员可以轻松地在同一个项目上进行协作。
2023年1月13日
WordPress主题开发入门基础教程
在本教程中，我们将讨论如何开始主题开发。然后，我们将带您逐步完成创建全新自定义主题的过程。

如果你想把某件事做对，你可能必须自己做。虽然有很多WordPress主题可用，但要找到一个具有您需要的外观和功能的主题可能很困难。事实上，您可能会尝试创建自己的主题。然而，主题开发的入门似乎势不可挡——尤其是对于初学者而言。

幸运的是，为WordPress创建自定义主题是一个相对简单的过程。它也不需要太多的技术知识或Web开发经验。此外，构建您自己的主题非常值得付出努力，因为您可以让您的网站看起来和运行得恰到好处。

WordPress主题开发简介

您希望您的网站看起来很棒并拥有您需要的所有功能，因此您可以查看WordPress主题目录或者我们提供的WordPress原创主题。不幸的是，您看到的任何东西都不能满足您的所有要求，而且您不想在您的愿景上妥协。也许您想要一些独特的东西来让您的网站脱颖而出，或者您只是不想将钱花在高级主题上。

此时，您可能会开始考虑创建自己的主题。幸运的是，为WordPress开发主题并不是您想象的那么复杂。由于该平台固有的用户友好性和众多可用工具，几乎任何人都可以创建自定义主题。

我们将带您完成创建第一个主题的过程。要开始，您需要做两件事：
- 您自己的WordPress 网站
- 一个优质的服务器
您还将受益于拥有本地临时环境的经验，因为您将使用一个环境来创建您的主题。对CSS和PHP有一些了解也会有所帮助（如果没有必要）。

最后，您需要拥有一个重要的工具，它可以使创建主题的过程变得更加容易：入门主题。

什么是入门主题

入门主题是一个基本的WordPress主题，您可以使用它来创建自己的主题。使用starter使您能够建立在一个可靠的框架上，而不必担心从头开始编写主题所涉及的复杂性。它还将通过向您展示主题的基本结构及其所有部分如何协同工作，帮助您了解WordPress的工作原理。

有很多优秀的入门主题在那里，其中包括下划线，UnderStrap和Bones（仅举几例）。

我们将在下面的示例中使用下划线。对于初学者来说，这是一个不错的选择，因为它只包含基础知识。另外，这个入门主题是由Automattic开发的，从长远来看，这使得它更有可能是安全的、兼容的并且得到很好的支持。

如何开发您的第一个WordPress主题

随着准备工作的进行，您终于可以开始创建您的第一个主题了。正如我们提到的，我们将在本演练中使用入门主题。

但是，如果您想尝试在没有模板的情况下自己创建所有内容，您应该随意这样做。请记住，这将需要更多的编码能力和对Web开发的理解。

Step 1：设置本地环境

您需要做的第一件事是创建本地开发环境。这实际上是您安装在计算机上的服务器，您可以使用它来开发和管理本地WordPress站点。本地站点是开发主题的安全方式，而不会以任何方式影响您的实时站点。

有很多方法可以创建本地环境，但本次示例我们将使用DesktopServer。这是一种免费安装本地版本WordPress的快速、简单的方法，并且与Mac和Windows兼容。要开始使用，请选择DesktopServer的免费版本，完成注册过程，然后下载安装程序。

下载安装程序后，您可以运行它。

安装完成后，您可以打开该程序，系统会要求您配置新的本地环境。这是一个简单的过程，您将在几分钟内准备好您的本地WordPress站点。安装后，您的新网站的外观和工作方式将与实时WordPress网站完全相同。

Step 2：下载并安装您的入门主题

与大多数入门主题一样，Underscores非常容易上手。事实上，您需要做的就是访问网站并命名您的主题。

如果需要，您还可以单击Advanced Options以进一步自定义基本主题。在这里您可以填写更多信息，例如作者姓名，并提供主题描述。

还有_sassify！选项，这会将Syntactically Awesome StyleSheets (SASS)文件添加到您的主题。SASS是一种CSS预处理语言，它使您能够使用变量、嵌套、数学运算符等。

当您做出选择后，您可以单击Generate，这将下载一个包含您的入门主题的.zip文件。这是您将围绕它开发自己的主题的核心，因此请将其安装在您的本地站点上。安装主题后，您可以预览站点以查看其外观。注：这只是一套最最最基础的主题，还需要您对其深加工！

Step 3：了解WordPress在幕后的工作原理

在自定义主题之前，您需要了解其组件的用途以及它们如何组合在一起。首先，让我们讨论模板文件，它们是 WordPress 主题的主要构建块。这些文件决定了您网站上内容的布局和外观。例如，header.php用于创建标题，而comments.php允许您显示评论。

WordPress通过浏览模板层次结构来确定在每个页面上使用哪些模板文件。这是每次加载您网站上的页面时WordPress查找匹配模板文件的顺序。例如，如果您访问URL地址http://example.com/post/this-post，WordPress将按以下顺序查找以下模板文件：
1. 与slug匹配的文件，例如this-post。
2. 与文章ID匹配的文件。
3. 通用的单个文章文件，例如single.php。
4. 存档文件，例如archive.php。
5. index.php文件。
由于所有主题都需要index.php文件，因此如果找不到其他文件，则默认使用该文件。Underscores已经包含了最常见的模板文件，它们开箱即用。但是，如果您想了解它们如何协同工作，您可以尝试编辑它们。

您需要掌握的另一个重要元素是Loop。这是WordPress用来显示内容的代码，因此在许多方面，它是您网站的跳动心脏。它出现在所有显示文章内容的模板文件中，例如index.php或sidebar.php。

循环是一个复杂的主题，如果您想更好地掌握WordPress如何显示文章内容，我们建议您阅读更多相关内容。幸运的是，由于Underscores，Loop已经集成到您的主题中，因此现在无需担心。

Step 4：配置您的主题

很容易认为主题纯粹是为了装饰目的，但它们实际上对您网站的功能产生了巨大的影响。让我们看看如何进行一些基本的自定义。

使用“钩子”添加功能

钩子是插入到模板文件中的代码片段，它使您能够在站点的不同区域运行PHP操作、插入样式并显示其他信息。大多数钩子直接在WordPress核心中实现，但有些钩子对主题开发人员也很有用。

让我们来看看一些最常见的钩子以及它们的用途：
- wp_head() — 添加到header.php中的<head>元素，并启用网站加载后立即运行的样式、脚本和其他信息。
- wp_footer() — 在</body>标签之前添加到footer.php。这通常用于插入Google Analytics代码。
- wp_meta() — 这通常出现在sidebar.php中，以包含其他脚本（例如标签云）。
- comment_form() — 在文件结束 </div>标签之前直接添加到comments.php 以显示评论数据。
这些将已包含在您的Underscores主题中。但是，我们仍然建议您访问Hooks数据库以查看所有可用的钩子并了解有关它们的更多信息。

使用CSS添加样式

层叠样式表 (CSS)定义了您网站上所有内容的外观。在WordPress中，这是使用style.css文件完成的。您已经将这个文件包含在您的主题中，但目前它只包含基本的默认样式。

如果您想快速了解CSS的工作原理，可以在此处编辑任何样式并保存文件以查看效果。例如，您可以找到以下代码（通常在第 485 行）：

a {color: royalblue;}

a {color: royalblue;}
```
a {color: royalblue;}
```
这控制未访问的超链接的颜色，默认情况下显示为宝蓝色：

让我们看看如果我们尝试通过用以下代码替换它来改变它会发生什么：

a {color: red;}

a {color: red;}
```
a {color: red;}
```
保存文件，然后立即查看您的本地站点。正如您所料，所有未访问的链接现在将显示为鲜红色：

您可能会注意到顶部的访问链接没有改变颜色。那是因为它实际上由样式表中的下一部分控制：

a:visited {color: purple;}

a:visited {color: purple;}
```
a:visited {color: purple;}
```
这是一个非常基本的示例，说明编辑style.css将如何影响您网站的外观。CSS 是一个庞大的主题，如果您想了解有关创建网页设计的更多信息，我们建议您进一步探索。有很多关于CSS主题的资源供初学者使用。

Step 5：导出主题并将其上传到您的网站

当您完成对主题的修改后，是时候确保它正常工作了。您可以通过测试主题来确保这一点。为了快速确保您的主题在大多数情况下都能正常运行，您可以使用Theme Unit Test数据。这是一组您可以上传到您的网站的虚拟数据，其中包含许多不同的样式和内容变体。它将使您能够了解您的主题如何处理不可预测的数据。

当您彻底测试了您的主题并确信它符合要求的标准时，现在剩下的就是导出它。最简单的方法就是找到网站在本地计算机上的安装位置，最有可能在默认文档目录中名为网站的文件夹中。打开网站的文件夹并访问/wp-content/themes/，您将在其中找到您的主题。

您现在可以使用压缩工具（例如WinRAR）来创建基于文件夹的.zip文件。只需右键单击文件夹，然后选择可以压缩它的选项，例如压缩“文件夹”。

当文件夹被压缩后，它就可以上传并安装在任何WordPress站点上，就像您在开始时安装Underscores主题一样。如果您对结果感到特别满意，您甚至可以将您的主题提交到WordPress主题目录。

小结

从头开始创建自定义WordPress主题是一项不小的壮举。然而，这个过程可能并不像您之前想象的那么困难。通过将过程分解为多个阶段并使用Codex文档站点上的信息，几乎任何人都可以创建新主题。

当然，上述的主题开发教程只是一个基础、入门教程，要开发一个功能完善、前端交互一流的WordPress主题，并不是一蹴而就的事情。你可能需要对PHP、WordPress、CSS、JavaScript等代码知识有非常深入的了解和学习。
2023年1月13日
WordPress插件开发入门基础教程
在本基础教程中，我们将了解如何开始插件开发，带您完成创建第一个插件的过程。

插件是WordPress如此多功能且用户友好的平台的重要原因。它们使任何用户都可以通过单击按钮快速向其站点添加新代码和功能。但是，如果您不想满足于现有插件，而是自己制作插件怎么办？

创建插件并不是您可能担心的复杂过程。只需一点时间和精力，几乎任何用户都可以从头开始创建插件。只要您了解插件如何连接到WordPress的核心（我们将对此进行解释），构建您自己的插件就会是一个有趣且具有挑战性的项目。

为什么开发WordPress插件

简单来说，插件是为您的WordPress网站添加新功能的软件。他们“挂钩”到 WordPress 平台的核心，并以数千种不同的方式对其进行扩展。

使用插件可为您提供几乎无限的自定义可能性。如果您想将某个功能添加到您的站点，您可以搜索包含数千个选项的插件目录。

如果您找不到可以满足您需求的插件，或者您觉得现有选项不太适合您的网站，您可能需要考虑创建自己的插件。为此，您首先需要了解插件如何与WordPress交互。

插件如何工作：钩子、动作和过滤器

开始插件开发最困难的部分是学习所有相关术语。出于这个原因，我们现在将解释一些最重要和最常用的术语。

您将遇到的最重要的概念之一是钩子。挂钩是连接点，您可以在其中将插件附加到WordPress核心代码。基本上，钩子决定了插件将在站点上何时何地使用。

一个基本的例子是wp_loaded钩子，它在整个WordPress站点加载时触发。如果插件具有仅在达到该状态时才需要运行的功能，您可能希望将其连接到此钩子。

钩子有两种变体——动作和过滤器。两者的基本区别可以归纳如下：
- 操作添加新功能。
- 过滤器修改现有功能。
当然，还有更多。如果您想完全理解它们，我们建议您阅读操作和过滤器的工作原理。

创建插件之前要考虑的事项

WordPress提供了创建插件时要遵循的最佳实践列表。

在开始创建插件之前，您需要查看WordPress推荐的最佳实践。遵守这些准则将帮助您为插件打下坚实的基础。它还将确保与其他插件和主题的兼容性，如果您想共享插件，则更容易。

首先，您应该考虑如何命名插件、变量和函数。这很重要，因为您希望避免创建与其他插件使用的名称相匹配的名称。最好的策略是为您定义的每个变量和函数添加一个唯一的前缀。

接下来，您需要确保您的插件是安全的。这是一个很大但很重要的话题。我们建议您通读插件手册以获取有关如何确保代码安全的更多信息。未正确保护的插件在任何站点上都可能带来巨大风险，因此请不要忽视这一方面。

您还需要考虑如何构建插件。它应该包含多少个文件，您想将其保存在一个文件夹中还是将其分散到多个文件夹中？提前考虑这一点将为您提供一个可靠的框架来使用，并使其他开发人员更容易理解您的插件是如何工作的。

最后，遵守WordPress的编码标准很重要。这些是由 WordPress 社区创建的，将帮助您避免常见的编码错误。它们还将使您的代码易于其他 WordPress 用户和开发人员理解。

如何创建WordPress插件

到现在为止，您应该已经做好了将脚趾浸入插件开发领域的准备。因此，事不宜迟，让我们开始吧！这些步骤将引导您完成创建第一个插件的过程。

Step 1：设置临时站点

首先，如果您还没有临时站点，则需要创建一个临时站点。临时站点，也称为开发环境，是不向公众开放且仅用于开发目的的网站。

临时站点使您能够开发插件并对其进行测试，而不会影响您的实时站点。您永远不应该使用实时站点进行开发，因为您可能会破坏站点或使其易受攻击。您的登台环境可以是您自己机器上的本地 WordPress 安装，也可以是私人 WordPress 站点。

我们已经编写了有关搭建本地环境创建临时站点的教程，因此我们不会在此处再次展开详细介绍。

Step 2：新建插件文件

准备好临时站点后，就可以开始工作了。您需要做的第一件事是创建您的插件所在的文件夹。所有插件都添加到同一位置，即名为/wp-content/plugins/ 的目录。

现在导航到此位置，然后创建一个新文件夹，为其指定一个与您的插件匹配的名称。例如，如果您的插件将被称为“我的第一个插件”，则将文件夹命名为my-first-plugin是有意义的。

然后，您应该将一个新的PHP文件添加到该文件夹中，并具有相同的名称（例如：my-first-plugin.php）。您可以使用任何文本编辑软件（例如TextEdit或记事本）来执行此操作。在文件仍然打开的情况下，输入以下信息：

<?php

/**

* Plugin Name: My First Plugin

* Plugin URI: https://www.mywebsite.com/

* Description: The first plugin I have created.

* Version: 1.0

* Author: Your Name

* Author URI: http://yourwebsite.com/

**/

<?php
/**
* Plugin Name: My First Plugin
* Plugin URI: https://www.mywebsite.com/
* Description: The first plugin I have created.
* Version: 1.0
* Author: Your Name
* Author URI: http://yourwebsite.com/
**/
```
<?php
/**
* Plugin Name: My First Plugin
* Plugin URI: https://www.mywebsite.com/
* Description: The first plugin I have created.
* Version: 1.0
* Author: Your Name
* Author URI: http://yourwebsite.com/
**/
```
正如您可能知道的那样，这是WordPress将与您的插件一起显示的元信息。用正确的详细信息替换占位符并保存文件。

此时，您可以打开站点的管理区域并单击Plugins。您会注意到您的新插件已添加到列表中。

显然，您尚未添加任何功能，因此该插件实际上不会执行任何操作。但是，您仍然可以启用它。

您还应该添加一个自述文件到您的插件。如果您打算与其他人共享文件，您将需要它，因为它决定了目录中插件页面的内容。您的文件符合WordPress 标准也很重要。

和以前一样，只要使用文件名readme.txt保存它，就可以使用任何文本编辑器来执行此操作。您还可以使用插件自述文件生成器快速创建此文件。当您使用任一方法创建自述文件时，请将其保存到您的插件文件夹中。

Step 3：添加您的代码

是时候为您的插件添加功能了；这就是你的创造力大放异彩的地方！除了您的想象力和编码能力之外，此时您可以做的事情真的没有限制。

现在，让我们创建一个包含单个函数的简单插件。

我们的插件将更改用户在您的网站上尝试登录失败时显示的默认错误消息。默认情况下，此消息会告诉用户尝试被拒绝的原因。

您的插件将包含一个用通用内容替换此消息的函数。在您选择的编辑器中打开my-first-plugin.php文件，并在标题信息后添加以下代码：

function wb_no_wordpress_errors(){

return ‘Something went wrong!’;

}

add_filter( ‘login_errors’, ‘wb_no_wordpress_erors’ );

function wb_no_wordpress_errors(){
return ‘Something went wrong!’;
}
add_filter( ‘login_errors’, ‘wb_no_wordpress_erors’ );
```
function wb_no_wordpress_errors(){
return 'Something went wrong!';
}
add_filter( 'login_errors', 'wb_no_wordpress_erors' );
```
这是一个非常简单的例子，但让我们分解它。

首先，我们定义了一个名为wb_no_wordpress_errors的新函数——带有“wb”前缀（对于WBOLT）以确保名称是唯一的。这个函数只做一件事情，那就是返回一个指定的字符串。该字符串是我们想要显示的内容，而不是错误消息。我们已将其设置为“Something went wrong!” 但请随意将其更改为您喜欢的任何内容。

之后，我们使用了一个连接到名为login_errors的钩子的过滤器。当这个特定的钩子触发时——即，当发生登录错误时——过滤器将运行no_wordpress_errors函数。

粘贴代码后，您可以保存文件，插件就可以运行了。正如我们提到的，这只是一个基本的例子。随意创建一些全新的东西，甚至扩展我们的功能。

Step 4：测试插件

在向插件添加一些代码后，您需要对其进行测试以确保其正常工作。这通常很容易做到，尽管测试方法将取决于您添加的功能。

让我们继续上面的例子。注销WordPress管理区域并访问临时站点的/wp-login/页面。然后，尝试使用一些故意不正确的凭据登录。如果您的插件成功，您将看到您指定的消息。

但是，如果您使用我们提供的代码并且没有做任何改动，您会发现该插件没有工作。事实上，您很可能会看到根本没有出现任何错误消息。

这是因为我们实际上在代码中犯了一个故意错误，您必须在插件工作之前更正这些错误（抱歉，但我们希望您也体验测试插件）。

返回到您的my-first-plugin.php文件。您可能已经在这里发现了错误。在最后一行中，最后一个函数名拼写错误。您可以改用此版本的行来解决此问题：

add_filter( ‘login_errors’, ‘wb_no_wordpress_errors’ );

add_filter( ‘login_errors’, ‘wb_no_wordpress_errors’ );
```
add_filter( 'login_errors', 'wb_no_wordpress_errors' );
```
您现在可以保存文件并重试。这一次，当您尝试使用不正确的凭据登录时，您应该会看到自定义消息。

现在，您确定您的插件工作正常！

Step 5：分享插件

此时，您的插件已准备好在任何 WordPress 站点上安装和激活。最简单的方法是将my-first-plugin文件夹压缩为zip文件。然后，您可以使用此zip文件在您的实时站点上安装插件。

您可能还希望在外部托管插件，以便其他人下载、测试和使用它。最常见的主机是 WordPress 插件目录。如果你想在那里添加你的插件，你需要提交它。请记住，您的插件必须遵守某些限制。

另一种选择是将您的插件上传到不同的主机上，例如GitHub。这需要您为插件创建一个存储库，然后您可以上传它。更多使用GitHub的信息可以参考官方文档。

小结

通过创建自己的插件，您可以对自己的WordPress网站进行前所未有的控制。插件可用于自定义您想要的任何特性或功能。如果您花时间学习基础知识，那么制作您的第一个插件应该不会那么困难——对于业余爱好者和崭露头角的专业人士来说都是如此。

虽然功夫不负有心人，但还是要说的是，无论是开发主题还是插件，你都需要熟练地掌握后端和前端开发知识。
2023年1月13日
什么是及如何使用WordPress CLI
在本教程中，我们将向您介绍WordPress CLI及展示如何在您的WordPress网站上安装它并说明如何使用它。

随着您对WordPress的开发越来越熟悉，您将需要一些工具来帮助您快速有效地完成任务。WordPress管理仪表盘直观且全面，但导航也很耗时。

如果您想通过几个简单的命令更直接地管理您的站点怎么办？

这就是WordPress命令行界面 (WP-CLI)派上用场的地方。WP-CLI是一种工具，可让您通过在基于文本的界面中使用命令直接与WordPress站点进行交互。它也非常全面，具有各种各样的潜在命令。几乎任何您可以在站点后端执行的操作，都可以使用 WP-CLI 更快地完成。

WordPress命令行界面 (WP-CLI) 简介

像大多数WordPress用户一样，您可能非常熟悉WordPress管理区域。它运行良好，但不是管理站点的唯一选择。事实上，这甚至不是最直接或最有效的方式。对于某些用户来说，拥有可以导航的图形界面当然更可取。但是，这确实意味着您将花费大量时间浏览菜单或等待页面加载。

进入WordPress命令行界面 (WP-CLI)。

顾名思义，此工具使您能够使用命令行在WordPress站点上执行管理任务。通过这种方法，完成一项任务只需要输入一行代码并按Enter所需的时间。

WP-CLI的美妙之处在于它如何让您直接控制您的网站。您可以在 WordPress 管理仪表板中执行的任何操作，您都可以使用WP-CLI来执行。它并不像您担心的那么复杂，如果您想了解更多信息，可以使用大量资源。

要使用WP-CLI，您需要在WordPress站点上安装它。现在让我们更详细地看看这个过程。

如何在WordPress网站上安装WP-CLI

您首先需要确保您的环境兼容，这意味着它符合以下规范：
- 类UNIX环境（OS X、Linux、FreeBSD、Cygwin）
- PHP 5.3.29或更高版本
- WordPress3.7或更高版本
对于某些用户来说，第一点可能是个问题。WP-CLI是为类UNIX环境设计的，对Windows的支持有限。仍然可以在Windows上安装它，但要注意它可能需要一些额外的修补。

要在上述列表中的一种环境中安装WP-CLI，您需要使用Secure Shell (SSH)来下载和配置必要的文件。因此，您需要确保它已启动并正在运行。首先，您需要使用以下命令将wp-cli.phar文件下载到您的根目录：

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
```
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
```
然后，您应该使用另一个命令检查以确保文件正常工作：

php wp-cli.phar –info

php wp-cli.phar –info
```
php wp-cli.phar --info
```
接下来，您需要使文件可执行，这将使您能够使用 wp 命令。您还需要将其移动到另一个目录。最后一条命令将执行两项任务：

chmod +x wp-cli.phar

sudo mv wp-cli.phar /usr/local/bin/wp

chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp
```
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp
```
有了这个，现在应该成功安装了WP-CLI。您可以通过运行命令wp –info来测试它。如果一切正常，您将看到有关显示的WP-CLI版本的信息。

就是这样！您现在已准备好使用此工具更有效地管理您的网站。然而，在我们继续之前，让我们先看看一些替代的安装方法。

安装WP-CLI的其他方法

正如我们之前提到的，实际上有几种安装WP-CLI的方法。我们不会在本文中详细介绍所有这些。但是，我们将简要列出它们并链接到每个的更多信息，因此您可以选择最适合您需求的技术。

您可以使用以下工具在您的站点上安装WP-CLI：
您可能还对安装WP-CLI的‘nightly’ 版本（其最新的预发布版本）感兴趣。Nightly在开发环境中使用应该或多或少是稳定的，但您应该知道它尚未正式发布。最后，如果您想自己参与WP-CLI的开发，可以通过使用Git进行设置来实现。

使用WP-CLI管理WordPress网站的5种方法

WP-CLI 提供对您网站的完全访问——就在您的指尖。有几十个命令，你可以用它来管理几乎每一个方面，而这还没有考虑到自定义命令。

我们现在将只看一些您可以使用的标准命令。这是为了让您在深入挖掘可能性的兔子洞之前，先了解如何使用WP-CLI来管理您的站点。

1.安装和更新WordPress

您可以使用 WP-CLI 完成的最基本任务是在您的站点上下载并安装 WordPress。WordPress的下载命令很简单：

wp core download

wp core download
```
wp core download
```
这将在当前目录中下载并解压WordPress。您还可以添加其他参数以进一步优化下载。例如，locale参数确定将使用哪个WordPress翻译。此命令将下载巴西葡萄牙语版本的WordPress：

wp core download –locale=pt_BR

wp core download –locale=pt_BR
```
wp core download --locale=pt_BR
```
下载后，您可以使用安装WordPress的安装命令。此命令包含许多用于配置设置的参数。我们来看一个例子：

wp core install –url=example.com –title=Example –admin_user=supervisor –admin_password=strongpassword –admin_email=info@example.com

wp core install –url=example.com –title=Example –admin_user=supervisor –admin_password=strongpassword –admin_email=info@example.com
```
wp core install --url=example.com --title=Example --admin_user=supervisor --admin_password=strongpassword --admin_email=info@example.com
```
如您所见，这一切都是不言自明的。只需用您自己的值替换每个参数中的示例数据。为确保一切按预期运行，您可以使用以下命令来测试安装：

wp core version

wp core version
```
wp core version
```
这将返回您安装的版本号，证明WordPress已成功安装！现在您只需要知道如何确保它已更新，您可以使用以下命令执行此操作：

wp core update

wp core update
```
wp core update
```
如果有更新版本的WordPress可用，当您运行此命令时，它将自动下载并安装。

2. 管理主题和插件

您可以通过多种方式使用WP-CLI管理主题和插件，所以现在让我们看看一些基本选项。首先，您可以使用list命令查看您的主题或插件列表。这可以使用参数过滤以仅显示具有特定状态（例如非活动）的项目或以特定输出格式返回结果。

例如，如果要将所有非活动主题列为CSV列表，可以使用以下命令：

wp theme list –status=inactive –format=csv

wp theme list –status=inactive –format=csv
```
wp theme list --status=inactive --format=csv
```
您还可以通过在插件目录中指定插件、提供本地文件的路径或输入外部文件的URL来安装插件。在这个例子中，我们还将同时激活插件：

wp plugin install ../my-plugin.zip –activate

wp plugin install ../my-plugin.zip –activate
```
wp plugin install ../my-plugin.zip --activate
```
更改插件或主题的状态也很容易。此命令可用于启用主题，在本例中为二〇一七：

wp theme enable twentyseventeen

wp theme enable twentyseventeen
```
wp theme enable twentyseventeen
```
还有一个用于停用插件的命令，我们在这里使用它来禁用Hello Dolly插件。在本例中，该命令还配置为卸载插件：

wp plugin deactivate hello –uninstall

wp plugin deactivate hello –uninstall
```
wp plugin deactivate hello --uninstall
```
最后，您可以搜索相应的目录以查找特定的插件或主题。例如，让我们搜索包含字符串“photo”的主题。我们还将它设置为返回三个结果而不是默认的十个：

wp theme search photo –per-page=3

wp theme search photo –per-page=3
```
wp theme search photo --per-page=3
```
这将显示下表：

+———————-+———————-+——–+

| name | slug | rating |

+———————-+———————-+——–+

| Photos | photos | 100 |

| Infinite Photography | infinite-photography | 100 |

| PhotoBook | photobook | 100 |

+———————-+———————-+——–+

+———————-+———————-+——–+
| name | slug | rating |
+———————-+———————-+——–+
| Photos | photos | 100 |
| Infinite Photography | infinite-photography | 100 |
| PhotoBook | photobook | 100 |
+———————-+———————-+——–+
```
+----------------------+----------------------+--------+
| name                 | slug                 | rating |
+----------------------+----------------------+--------+
| Photos               | photos               | 100    |
| Infinite Photography | infinite-photography | 100    |
| PhotoBook            | photobook            | 100    |
+----------------------+----------------------+--------+
```
正如我们提到的，这只是您如何使用WP-CLI管理主题和插件的一小部分。希望您对这个工具的用处有所了解。

3. 创建一个子主题

通过使用脚手架命令，就可以生成一个子主题包含的functions.php和style.css的文件。如果您想对现有主题进行更改，我们建议您执行此操作。

您需要做的就是为新的子主题以及您用作“父主题”的主题指定slug。在这个例子中，我们正在创建一个基于二〇一七主题的孩子，我们给它一个slug别名-twentyseventeen-child：

wp scaffold child-theme twentyseventeen-child –parent_theme=twentyseventeen

wp scaffold child-theme twentyseventeen-child –parent_theme=twentyseventeen
```
wp scaffold child-theme twentyseventeen-child --parent_theme=twentyseventeen
```
如果该过程成功，您将看到一条消息，表明已创建子主题，以及其目录的路径：

Success: Created ‘/var/www/example.com/public_html/wp-content/themes/twentyseventeen-theme’.

Success: Created ‘/var/www/example.com/public_html/wp-content/themes/twentyseventeen-theme’.
```
Success: Created '/var/www/example.com/public_html/wp-content/themes/twentyseventeen-theme'.
```
您现在将在指定的模板中找到子主题，可以进行编辑了！

4. 审核评论

在WP-CLI中审核和管理评论变得更加容易，这使您能够快速创建、删除和编辑它们。有许多注释子命令可用，但让我们看看一些最基本的选项。

首先，您可以添加新评论。以下命令将向ID为20的文章添加评论，并指定内容和作者：

wp comment create –comment_post_ID=20 –comment_content=“This is my comment” –comment_author=“author-name”

wp comment create –comment_post_ID=20 –comment_content=”This is my comment” –comment_author=”author-name”
```
wp comment create --comment_post_ID=20 --comment_content="This is my comment" --comment_author="author-name"
```
在管理现有评论之前，获取当前列表会很有帮助。您可以使用list命令执行此操作，并且可以通过多种方式过滤结果。例如，使用此命令将返回一个表，其中包含ID为3的文章的所有已批准评论的评论ID和作者姓名：

wp comment list –number=3 –status=approve –fields=ID,comment_author

wp comment list –number=3 –status=approve –fields=ID,comment_author
```
wp comment list --number=3 --status=approve --fields=ID,comment_author
```
这是结果表的样子：

+————+—————-+

| comment_ID | comment_author |

+————+—————-+

| 5 | Unknown Author |

| 22 | Jane Doe |

| 64 | John Doe |

+————+—————-+

+————+—————-+
| comment_ID | comment_author |
+————+—————-+
| 5 | Unknown Author |
| 22 | Jane Doe |
| 64 | John Doe |
+————+—————-+
```
+------------+----------------+
| comment_ID | comment_author |
+------------+----------------+
| 5          | Unknown Author |
| 22         | Jane Doe       |
| 64         | John Doe       |
+------------+----------------+
```
如果要删除评论，可以通过单独指定评论ID来实现，如下所示：

wp comment delete 64

wp comment delete 64
```
wp comment delete 64
```
您还可以通过用空格分隔每个ID来删除多个评论。在这个例子中，我们还使用了force参数，它会永久删除评论而不是将它们添加到垃圾箱：

wp comment delete 5 22 64 64 –force

wp comment delete 5 22 64 64 –force
```
wp comment delete 5 22 64 64 --force
```
通过一些练习，您可以使用WP-CLI命令非常快速地处理站点的评论。

5. 更新WP-CLI

与WordPress的各个方面一样，您应该始终确保WP-CLI是最新的。幸运的是，这非常简单。您需要做的就是运行以下命令：

wp cli update

wp cli update
```
wp cli update
```
如果您的版本是可用的最新版本，您将收到一条消息确认这一点。但是，如果可以下载新版本，系统会提示您接受安装。如果您选择是，WP-CLI将被更新，您将看到一条确认消息：

Success: Updated WP-CLI to 0.23.1

Success: Updated WP-CLI to 0.23.1
```
Success: Updated WP-CLI to 0.23.1
```
这样，您就更新了WP-CLI的安装。

到现在为止，您已经开始看到使用这个简单的界面可以完成什么。还有更多东西要学，但你应该为你走出第一步而感到自豪！

小结

速度、可访问性和效率都是任何聪明的开发人员在他们的工具中寻找的特征。WP-CLI提供所有这些以及更多功能，同时使您能够远程管理您的WordPress站点。使用WP-CLI，您可以在WordPress管理员中执行任何您可以执行的操作 — 速度更快（一旦您进行了一些练习）。
2023年1月13日
利用Query Monitor插件调试WordPress并提高网站性能
想象一下这种情况：您正在处理WordPress开发项目并安装了十几个或更多插件。但是，您的网站并没有像您希望的那样嗡嗡作响。您已经排除了所有常见的疑点：托管已经足够，没有明显的JavaScript或PHP错误，也没有其他明显的错误。您怀疑您安装的一个或多个插件是罪魁祸首，但您如何确定是哪个插件导致了问题？

识别麻烦插件的常用方法是逐个停用插件，直到您尝试解决的行为停止。但是，安装正确的插件后，您可以更快、更准确地查明和调试WordPress问题。这是Query Monitor旨在解决的那种场景。
什么是Query Monitor？

Query Monitor是一个免费的WordPress调试和开发插件。您可以使用它来识别和调试缓慢的数据库查询、AJAX调用、REST API请求等等。此外，该插件还会报告网站详细信息，例如脚本依赖项和依赖项、在页面生成期间触发的WordPress钩子、托管环境详细信息、当前页面满足的条件查询标签等等。

WordPress插件-Query Monitor

该插件由John Blackbourn开发，他是WordPress的核心提交者，目前是Human Made的一名开发人员，之前受雇于WordPress.com VIP — 换句话说，他是真正了解WordPress的人。Query Monitor于2013年被添加到WordPress插件目录中，目前拥有超过10,000次活动安装——对于开发插件来说，这是一个令人印象深刻的总数。该插件的用户评分为五颗星，这有助于解释它在开发人员中的受欢迎程度。

Query Monitor有什么作用？

很多。

我们不会花时间列出Query Monitor提供的每个功能，但如果您想深入了解细节，请查看GitHub上的Query Monitor。在高层次上，Query Monitor所做的是在生成WordPress网页的同时监视服务器上或服务器与访问者浏览器之间发生的每个WordPress事务。然后，它将报告附加到网页的页脚，详细说明它收集的所有信息。它适用于每个页面，包括 /wp-admin/ 页面，因此您可以使用它调试任何前端或后端页面。

该插件以核心功能命名：数据库查询监控。每个查询都受到监控、计时，并绑定到生成它的函数。因此，您可以根据查询的处理时间对查询进行排序，并查明有问题、加载缓慢的查询。

Query Monitor还跟踪并列出生成页面的WordPress钩子和条件标签应用程序。作为开发人员，您可以使用此信息来确定添加新插件或主题功能时要使用的正确挂钩或条件标签。

Query Monitor提供了很多附加信息。处理Query Monitor生成的所有内容的最佳方法是将其安装在测试站点上并查看报告。

如何使用Query Monitor

使用您喜欢的方法安装Query Monitor：它位于GitHub上，也可从WordPress插件目录获得。安装插件后，您会注意到的第一件事是管理栏中添加了一个新菜单项：

Query Monitor管理栏

新项目上的标签显示了一些指标：
- 页面生成时间，
- PHP内存使用高峰，
- 数据库查询时间，以及
- 进行的数据库查询总数。
将鼠标悬停在管理栏上，将出现一个下拉菜单。Query Monitor生成的所有数据都包含在添加到页面底部并分为多个部分的单个报告中。单击下拉菜单中的任何项目以转到查询监视器报告的相应部分。例如，下面是页面上运行的整体“queries”的屏幕截图。

Query Monitor查询

如果发生任何PHP错误，或者任何查询花费的时间过长，其他项目将添加到下拉菜单中，突出显示这些问题。单击它们以查看更多详细信息。

您可能会注意到列表中的最后几项从一页更改为下一页。这些以绿色显示的项目是当前页面满足的条件查询标签。

滚动整个报告以查看Query Monitor生成的大量数据。花点时间尝试可用于过滤报告中包含的数据的下拉菜单以及包含“+”符号的框，可用于查看有关许多报告详细信息的更多数据。

如果您想从Query Monitor中获取更多数据，请查看第三方Query Monitor附加组件，以查看是否存在可生成所需调试信息的插件。

如何以注销用户的身份查看查询监控数据

当您以管理员身份登录时查看WordPress网站时，该网站包含一个管理栏和其他脚本，注销的访问者看不到这些。Query Monitor可以在注销时查看站点并且仍然可以访问调试信息。但是，第一次使用此功能可能会有些棘手。

要以注销的访问者身份查看Query Monitor数据，请执行以下步骤：
- 以管理员身份登录时转到WordPress管理区域，然后单击管理栏中的查询监视器项。
- 滚动报告数据的最底部并查找显示Set authentication cookie的链接。请注意，您必须在管理区域才能看到链接。如果您在前端页面上查找链接，您将找不到它。
- 单击该链接会将身份验证cookie添加到您的浏览器。这样，即使您未登录，Query Monitor也会知道显示测试结果。
- 设置身份验证cookie后，退出站点或使用User Switching等插件切换到非管理员用户配置文件。
- 导航到要查看调试信息的页面并滚动到页面底部。在那里，您将看到Query Monitor报告的精简版本。单击任何项目以展开报告。
小结

作为WordPress开发人员，拥有合适的工具可以让您的工作更轻松。Query Monitor是一款免费工具，有可能为您节省大量时间。您可以将其用于：
- 查明慢查询和触发它们的函数，
- 生成WordPress生成页面时遇到的WordPress钩子列表，
- 确认哪些条件标签适用于当前页面或帖子，
- 识别JavaScript资源之间的关系，
- 查看服务器配置详细信息，以及
- 更多。
如果您尝试使用Query Monitor，它很有可能会立即成为您的WordPress开发环境的永久补充。
2023年1月13日
WordPress Salts是什么及如何使用它们
从深层次上讲，WordPress Salts是一种通过帮助安全地存储和验证站点用户密码来确保WordPress站点安全的方法。

在本文中，您将了解到：
什么是WordPress Salts？

WordPress Salts及其配套的安全密钥是一种加密工具，可帮助保护您的WordPress站点登录。

具体来说，Salts和安全密钥可以保护WordPress用于登录的cookie中的信息。

看，一旦您登录WordPress，您就可以选择保持登录状态，这样您就无需每次都输入用户名和密码。为此，WordPress将您的登录信息保存在cookie中，而不是使用PHP会话。

这对用户来说非常方便，但如果有人能够劫持您浏览器的cookie ，它也会带来安全问题的可能性。

为避免这种情况，WordPress使用Salts和安全密钥来保护您的登录信息，以便恶意主体无法对其进行任何操作。把它们想象成你网站的“额外”密码，恶意行为者几乎不可能猜到。

由于它们的重要性，您永远不应该与任何人分享您的 WordPress 盐和安全密钥。

WordPress Salts位于何处？

默认情况下，WordPress带有自己的Salts和安全密钥。它们位于您站点的wp-config.php文件中。您应该总共看到八个键：
- 前四个条目是您的安全密钥。
- 最后四个条目是您的WordPress Salts。
wp-config.php文件中的Salts示例

WordPress Salts是如何工作的？

假设您的WordPress网站的密码是“mypassword”（这是一个可怕的密码，但它符合我们的目的）。

要登录，请输入您的用户名和密码。然后，WordPress将该信息存储在两个浏览器cookie中，以便您保持登录状态（此信息也存储在您站点的数据库中）。

但是，如果WordPress像这样存储您的密码 – “mypassword” – 那么它就在那里，恶意行为者可以看到。这称为以明文形式存储密码，在安全性方面这是一个很大的禁忌。

安全密钥和盐通过共同合作将明文密码加密地转换为随机混乱的字符来避免这个问题，如果没有访问您的密钥和Salts某人就不可能进行逆向工程。

因此，即使您输入“mypassword”进行登录，WordPress 也会将您的密码转换为“hsd78q34%7832$4jkhkjsfd78782^^429nsdf”之类的内容进行存储。

除非有人可以访问您的Salts和安全密钥，否则他们不可能将随机的混乱字符转换为您的实际密码。

您需要更改WordPress Salts和安全密钥吗？

默认情况下，新的 WordPress 安装带有自己的一组密钥和Salts，因此您的WordPress站点已经是安全的，而无需您执行任何操作。

但是，有一些理由需要考虑定期更改Salts和密钥。

基本概念是，通过定期更改您的密钥和Salts，您可以使恶意行为者更难获得您的盐。

此外，更改您的盐将自动注销您站点上所有已登录的用户并强制他们重新登录，这是另一个潜在的好处。例如，如果您不小心登录了公共计算机并忘记退出，这将允许您强制退出该帐户以确保没有人可以访问。

如何更改WordPress Salts（两种方法）

如果您想更改WordPress中的Salts，您有两个主要选择：
- 通过编辑wp-config.php文件
- 使用免费插件进行更改
以下是使用这两种方法的方法：

如何手动更改WordPress Salts

要手动更改站点的Salts，您需要通过 FTP 连接到站点的服务器并编辑wp-config.php文件。

连接后，前往官方WordPress.org提供的Salts生成器。该页面会为您随机生成Salts和安全密钥，就像您在上面看到的那样。它应该生成四个安全密钥和四个Salts（总共八个）：

WordPress.org可以帮助您生成新的密钥和Salts

然后，删除wp-config.php文件中的现有密钥，并通过粘贴来自 WordPress.org的Salts生成器的密钥来替换它们：

如何在wp-config.php中更改Salts

完成后，它看起来应该和以前完全一样——只是随机字符串会有所不同。

确保保存您的更改并在需要时重新上传您的wp-config.php文件。

如何使用插件更改WordPress Salts

作为上述手动方法的替代方法，您还可以使用插件来更改站点的盐。

Salt Shaker插件是一个优势手动方法流行的自由选择：

您可以将其设置为按照您定义的时间表自动更改Salts。或者，您也可以仅使用它来手动更改Salts。

安装并激活插件后，转到Tools → Salt Shaker。

如果您想立即手动更改Salts，只需单击“Change Now”按钮。

或者，您也可以使用Scheduled Change功能按照以下计划之一自动更改Salts：
- 日常的
- 每周
- 每月
- 每季度（每三个月）
- 每半年（每六个月）
如何使用Salt Shaker插件

一些WordPress安全插件，特别是iThemes Security，还包括可以轻松更改WordPress Salts的功能。

小结

WordPress Salts和安全密钥有助于保护您网站的登录过程和WordPress用于验证用户身份的cookie。

默认情况下，您的站点带有自己的一组Salts和键，因此您无需设置任何内容即可从Salts中受益。

但是，定期更改您的Salts分使恶意行为者更难访问它们具有安全优势。

要更改Salts，您可以使用WordPress.org的Salts生成器并手动编辑您的wp-config.php文件，或者您可以使用免费插件，如 Salt Shaker。
2023年1月13日
40个最常用的Linux命令行大全
在撰写本文时，Linux在台式机上的全球市场份额为2.68%，但超过90%的云基础设施和托管服务都在该操作系统中运行。仅出于这个原因，熟悉流行的Linux命令就至关重要。

根据2020年StackOverflow调查，Linux是专业开发人员使用最多的操作系统，拥有令人印象深刻的55.9%的市场份额。这不仅仅是巧合。Linux是免费的、开源的，比竞争对手具有更好的安全性，并且拥有强大的命令行，使开发人员和高级用户更加高效。

无论您是经验丰富的系统管理员还是Linux新手，都可以利用本指南。
什么是Linux命令？

Linux命令是在命令行上运行的程序或实用程序。命令行是一个界面，它接受文本行并将其处理为计算机的指令。

任何图形用户界面（GUI）都只是命令行程序的抽象。例如，当您通过单击“X”关闭窗口时，该操作后面会运行一个命令。

标志（flag）是我们可以向您运行的命令传递选项的一种方式。大多数Linux命令都有一个帮助页面，我们可以使用-h标记调用该页面。大多数情况下，标志是可选的。

argument或parameter是我们给命令的输入，以便它可以正常运行。在大多数情况下，参数是一个文件路径，但它可以是您在终端中键入的任何内容。

可以使用连字符 (-) 和双连字符 (--)调用标志，而参数的执行取决于将它们传递给函数的顺序。

最常用的Linux命令

在开始使用最常用的Linux命令之前，请确保启动终端（terminal）。在大多数Linux发行版中，您可以使用Ctrl + Alt + T来执行此操作。如果这不起作用，请在应用程序面板中搜索“terminal”

Linux终端模拟器。

现在，让我们一起来了解40个最常用的Linux命令。其中许多选项可以串到它们，所以请务必查看命令手册.

1. ls命令

ls可能是每个Linux用户在其终端中键入的第一个命令。它允许您列出您想要的目录的内容（默认情况下是当前目录），包括文件和其他嵌套目录。

ls

ls
```
ls
```
它有很多选择，所以最好使用 --help 来获得一些帮助。此标志返回所有可以与 ls一起使用的flags参数。

例如，要着色 ls 命令的输出，您可以使用以下命令：

ls –color=auto

ls –color=auto
```
ls --color=auto
```
ls着色命令

现在 ls 命令输出已着色，您可以欣赏目录和文件之间的区别。

但是，用彩色标志打字是低效的：这就是我们使用命令 lsalias 的原因。

2.alias命令

alias命令允许您在shell会话中定义临时别名。创建别名时，您指示shell用一系列命令替换单词。

例如，要设置 ls 为颜色而不每次键入标志 --color，您将使用：

alias ls=“ls –color=auto”

alias ls=”ls –color=auto”
```
alias ls="ls --color=auto"
```
正如你所看到的，alias命令需要一个关键值对参数：alias NAME="VALUE" .请注意，该值必须是使用引号。

如果你想列出你的shell会话中所有的别名，你可不使用argument运行命令alias。

alias

alias
```
alias
```
alias命令。

3.unalias命令

顾名思义，unalias命令旨在从已定义的别名中删除alias。要删除以前的ls别名，可以使用：

unalias ls

unalias ls
```
unalias ls
```
4. pwd命令

pwd命令代表“打印工作目录”，它输出您所在目录的绝对路径。例如，如果您的用户名是“john”，并且您位于文档目录中，则其绝对路径将是 /home/john/Documents.

要使用它，只需在终端中键入pwd：

pwd

# My result: /home/wbolt/Documents/linux-commands

pwd
# My result: /home/wbolt/Documents/linux-commands
```
pwd
# My result: /home/wbolt/Documents/linux-commands
```
5. cd命令

cd命令与ls都非常流行。它指的是“更改目录”，顾名思义，它会将您切换到您试图访问的目录。

例如，如果您在Documents目录中，并且试图访问其名为Videos的子文件夹之一，则可以通过键入以下内容来输入：

cd Videos

cd Videos
```
cd Videos
```
您还可以提供文件夹的绝对路径：

cd /home/wbolt/Documents/Videos

cd /home/wbolt/Documents/Videos
```
cd /home/wbolt/Documents/Videos
```
在使用cd命令时，有一些技巧可以为您节省大量时间：

1. 进入home文件夹

cd

cd
```
cd
```
2. 向上移动一个级别

cd ..

cd ..
```
cd ..
```
3. 返回上一个目录

cd –

cd –
```
cd -
```
6. cp 命令

直接在Linux终端上复制文件和文件夹非常容易，有时它可以取代传统的文件管理器。

要使用cp命令，只需将其与源文件和目标文件一起键入即可：

cp file_to_copy.txt new_file.txt

cp file_to_copy.txt new_file.txt
```
cp file_to_copy.txt new_file.txt
```
还可以使用递归标志复制整个目录：

cp -r dir_to_copy/ new_copy_dir/

cp -r dir_to_copy/ new_copy_dir/
```
cp -r dir_to_copy/ new_copy_dir/
```
请记住，在Linux中，文件夹以正斜杠 (/)结尾。

7. rm命令

既然您已经知道了如何复制文件，那么了解如何删除它们将很有帮助。

您可以使用rm命令删除文件和目录。但在使用时要小心，因为用这种方法恢复删除的文件非常困难（但并非不可能）。

要删除常规文件，请键入：

rm file_to_copy.txt

rm file_to_copy.txt
```
rm file_to_copy.txt
```
如果要删除空目录，可以使用递归（-r）标志：

rm -r dir_to_remove/

rm -r dir_to_remove/
```
rm -r dir_to_remove/
```
另一方面，要删除包含内容的目录，需要使用force（-f）和recursive标志：

rm -rf dir_with_content_to_remove/

rm -rf dir_with_content_to_remove/
```
rm -rf dir_with_content_to_remove/
```
警告：误用这两个标志，你可能会抹掉一整天的工作！

8. mv命令

您可以使用mv命令在文件系统中移动（或重命名）文件和目录。

若要使用此命令，请将其名称与源文件和目标文件一起键入：

mv source_file destination_folder/

mv command_list.txt commands/

mv source_file destination_folder/
mv command_list.txt commands/
```
mv source_file destination_folder/
mv command_list.txt commands/
```
要使用绝对路径，请使用：

mv /home/wbolt/BestMoviesOfAllTime ./

mv /home/wbolt/BestMoviesOfAllTime ./
```
mv /home/wbolt/BestMoviesOfAllTime ./
```
…where ./是您当前所在的目录。

您还可以使用mv重命名文件，同时将其保留在同一目录中：

mv old_file.txt new_named_file.txt

mv old_file.txt new_named_file.txt
```
mv old_file.txt new_named_file.txt
```
9.mkdir命令

要在shell中创建文件夹，可以使用mkdir命令。只需指定新文件夹的名称，确保它不存在，然后就可以开始了。

例如，要创建一个保存所有图像的目录，只需键入：

mkdir images/

mkdir images/
```
mkdir images/
```
要使用简单命令创建子目录，请使用parent（-p）标志：

mkdir -p movies/2004/

mkdir -p movies/2004/
```
mkdir -p movies/2004/
```
10.man命令

另一个重要的Linux命令是man。它显示任何其他命令的手册页面（只要有）。

要查看mkdir命令的手册页，请键入：

man mkdir

man mkdir
```
man mkdir
```
您甚至可以查看 man 命令手册页面：

man man

man man
```
man man
```
man命令手册页面。

11.touch命令

touch命令允许您更新指定文件的访问和修改时间。

例如，我有一个旧文件，上次修改是在4月12日：

旧日期。

要将其修改日期更改为当前时间，我们需要使用-m标志：

touch -m old_file

touch -m old_file
```
touch -m old_file
```
现在日期与今天的日期相符（开始编写本文时的日期为8月8日）。

新日期

尽管如此，大多数情况下，您不会使用touch来修改文件日期，而是创建新的空文件：

touch new_file_name

touch new_file_name
```
touch new_file_name
```
12. chmod 命令

chmod命令允许您快速更改文件的模式（权限）。它有很多可用的选项。

文件的基本权限包括：
- r (只读)
- w (写入)
- x (执行)
chmod最常见的用例之一是使文件可由用户执行。为此，请键入chmod和标志
2023年1月13日

跨版本PHP代码转换终极教程

跨版本PHP代码转换的终极指南

在理想情况下，我们应该为我们的所有网站使用PHP8.0（撰写本文时的最新版本），并在新版本发布后立即进行更新。但是，开发人员通常需要使用以前的PHP版本，例如为WordPress创建公共插件或使用妨碍升级Web服务器环境的遗留代码时。

在这种情况下，我们可能会放弃使用最新PHP代码的希望。但是还有一个更好的选择：我们仍然可以使用PHP8.0编写源代码，并将其转换到以前的PHP版本，甚至是PHP7.1。

在本指南中，我们将教您有关转换PHP代码的所有知识。

什么是Transpiling？
Transpiling PHP的优势
PHP转换器（PHP Transpilers）
转换到哪一个PHP版本
Transpiling vs Backporting
Transpiled PHP示例
转换PHP的利弊
如何转换PHP
优化转换过程
转换代码时要避免的坑
转换和连续集成
测试转换代码

什么是Transpiling？

Transpiling将源代码从编程语言转换为相同或不同编程语言的等效源代码。

Transpiling并不是Web开发中的一个新概念：客户端开发人员很可能熟悉Babel，JavaScript代码的转换器。

Babel将现代ECMAScript 2015+版本中的JavaScript代码转换为与旧浏览器兼容的旧版本。例如，给定ES2015箭头函数：

[2, 4, 6].map((n) => n * 2);

[2, 4, 6].map((n) => n * 2);

…Babel将其转换为ES5版本：

[2, 4, 6].map(function(n) {

return n * 2;

});

[2, 4, 6].map(function(n) {
return n * 2;
});

[2, 4, 6].map(function(n) {
  return n * 2;
});

什么是Transpiling PHP？

Web开发中潜在的新功能是转换服务器端代码的可能性，特别是PHP。

转换PHP的工作方式与转换JavaScript的工作方式相同：现代PHP版本的源代码转换为旧PHP版本的等效代码。

下面是与前面相同的示例，PHP 7.4中的箭头函数：

$nums = array_map(fn($n) => $n * 2, [2, 4, 6]);

$nums = array_map(fn($n) => $n * 2, [2, 4, 6]);

…可以转换为其等效的PHP 7.3版本：

$nums = array_map(

function ($n) {

return $n * 2;

[2, 4, 6]

);

$nums = array_map(
function ($n) {
return $n * 2;
},
[2, 4, 6]
);

$nums = array_map(
  function ($n) {
    return $n * 2;  
  },
  [2, 4, 6]
);

可以转换箭头函数，因为它们是语法糖，即生成现有行为的新语法。这是低垂的果实。

然而，也有一些新特性创建了一种新的行为，因此，对于以前版本的PHP不会有等效的代码。PHP 8.0中引入的联合类型就是这样：

function someFunction(float|int $param): string|float|int|null

{

// …

}

function someFunction(float|int $param): string|float|int|null
{
// …
}

function someFunction(float|int $param): string|float|int|null
{
  // ...
}

在这些情况下，只要开发需要新特性，而不是生产需要新特性，就仍然可以进行转换。然后，我们可以简单地从转换的代码中完全删除该特性，而不会产生严重后果。

联合类型就是这样一个例子。此功能用于检查输入类型与其提供的值之间是否不匹配，这有助于防止错误。如果与类型发生冲突，那么开发中就会出现错误，我们应该在代码到达生产环境之前捕获并修复它。

因此，我们可以从生产代码中删除该功能：

function someFunction($param)

{

// …

}

function someFunction($param)
{
// …
}

function someFunction($param)
{
  // ...
}

如果错误仍然发生在生产中，抛出的错误消息将不如使用联合类型时准确。然而，这一潜在的缺点被能够首先使用联合类型所抵消。

Transpiling PHP的优势

Transpiling使您能够使用最新版本的PHP编写应用程序，并生成一个在运行旧版本PHP的环境中也能工作的版本。

这对于为旧式内容管理系统（CMS）创建产品的开发人员特别有用。例如，WordPress仍然官方支持PHP5.6（尽管它推荐PHP7.4+）。运行PHP版本5.6到7.2的WordPress站点的百分比为34.8%，而运行PHP版本（8.0除外）的站点的百分比高达99.5%：

WordPress使用情况统计（按版本）

WordPress使用情况统计（按版本）图像来源：WordPress

因此，面向全球受众的WordPress主题和插件很可能使用旧版本的PHP进行编码，以增加其可能的影响范围。多亏了transpiling，这些代码可以使用PHP8.0进行编码，并且仍然可以针对较旧的PHP版本发布，从而尽可能多地面向用户。

事实上，任何需要支持除最新版本以外的任何PHP版本（即使在当前支持的PHP版本范围内）的应用程序都可以从中受益。

Drupal就是这样，它需要PHP7.3。由于transpiling，开发人员可以使用PHP8.0创建公开可用的Drupal模块，并使用PHP7.3发布它们。

另一个例子是为由于某种原因而无法在其环境中运行PHP8.0的客户机创建自定义代码时。尽管如此，多亏了transpiling，开发人员仍然可以使用PHP8.0编写可交付成果，并在这些遗留环境中运行它们。

何时需要转换PHP（Transpile PHP）

PHP代码始终可以转换，除非它包含一些在之前的PHP版本中没有对等的PHP功能。

情况可能就是这样属性，在PHP 8.0中介绍：

#[SomeAttr]

function someFunc() {}

#[AnotherAttr]

class SomeClass {}

#[SomeAttr]
function someFunc() {}

#[AnotherAttr]
class SomeClass {}

#[SomeAttr]
function someFunc() {}

#[AnotherAttr]
class SomeClass {}

在前面使用箭头函数的示例中，可以转换代码，因为箭头函数是语法糖。相反，属性创建了全新的行为。PHP7.4及以下版本也可以复制这种行为，但只能通过手动编码，即不自动基于工具或流程（AI可以提供解决方案，但我们还没有）。

用于开发的属性，如#[Deprecated]，可以用删除联合类型的相同方式删除。但是，不能删除在生产中修改应用程序行为的属性，也不能直接转换这些属性。

到目前为止，没有一个transpiler能够接受具有PHP8.0属性的代码并自动生成其等效PHP7.4代码。因此，如果您的PHP代码需要使用属性，那么转换它将是困难的或不可行的。

可转换PHP功能

这些是PHP7.1及以上版本的特性，目前可以转换。如果您的代码只使用这些特性，那么您可以确信您的转换应用程序将正常工作。否则，您将需要评估转换的代码是否会产生故障。

PHP 版本	特征
7.1	所有都可以
7.2	– `object` type – parameter type widening – `PREG_UNMATCHED_AS_NULL` flag in `preg_match`
7.3	– Reference assignments in `list()` / array destructuring (Except inside `foreach` — #4376) – Flexible Heredoc and Nowdoc syntax – Trailing commas in functions calls – `set(raw)cookie` accepts $option argument
7.4	– Typed properties – Arrow functions – Null coalescing assignment operator – Unpacking inside arrays – Numeric literal separator – `strip_tags()` with array of tag names – covariant return types and contravariant param types
8.0	`–` Union types `–` `mixed` pseudo type `–` `static` return type `–` `::class` magic constant on objects `–` `match` expressions `–` `catch` exceptions only by type `–` Null-safe operator `–` Class constructor property promotion `–` Trailing commas in parameter lists and closure `use` lists

PHP转换器（PHP Transpilers）

目前，有一个用于转换PHP代码的工具：Rector。

Rector是一个PHP重构工具，它根据可编程规则转换PHP代码。我们输入源代码和要运行的规则集，Rector将转换代码。

Rector通过命令行操作，通过Composer安装在项目中。执行时，Rector将在转换前后输出代码的“diff”（添加为绿色，删除为红色）：

来自Rector的“diff”输出

转换到哪一个PHP版本

要跨PHP版本转换代码，必须创建相应的规则。

今天，Rector库包含PHP8.0到7.1范围内的大多数代码转换规则。因此，我们可以可靠地将PHP代码转换到7.1版。

也有从PHP7.1到7.0以及从7.0到5.6的转换规则，但这些规则并不详尽。完成这些代码的工作正在进行中，因此我们可能最终会将PHP代码转换到5.6版。

Transpiling vs Backporting

Backporting与Transpiling类似，但更简单。Backporting代码不一定依赖于语言的新特性。相反，只需从新版本的语言复制/粘贴/改编相应的代码，就可以为旧版本的语言提供相同的功能。

例如，PHP 8.0中引入了str_contains函数。PHP 7.4及以下版本的相同功能可以像这样轻松实现：

if (!defined(‘PHP_VERSION_ID’) || (defined(‘PHP_VERSION_ID’) && PHP_VERSION_ID < 80000)) {

if (!function_exists(‘str_contains’)) {

/**

* Checks if a string contains another

* @param string $haystack The string to search in

* @param string $needle The string to search

* @return boolean Returns TRUE if the needle was found in haystack, FALSE otherwise.

function str_contains(string $haystack, string $needle): bool

{

return strpos($haystack, $needle) !== false;

}

if (!defined(‘PHP_VERSION_ID’) || (defined(‘PHP_VERSION_ID’) && PHP_VERSION_ID < 80000)) {
if (!function_exists(‘str_contains’)) {
/**
* Checks if a string contains another
*
* @param string $haystack The string to search in
* @param string $needle The string to search
* @return boolean Returns TRUE if the needle was found in haystack, FALSE otherwise.
*/
function str_contains(string $haystack, string $needle): bool
{
return strpos($haystack, $needle) !== false;
}
}
}

if (!defined('PHP_VERSION_ID') || (defined('PHP_VERSION_ID') && PHP_VERSION_ID < 80000)) {
  if (!function_exists('str_contains')) {
    /**
     * Checks if a string contains another
     *
     * @param string $haystack The string to search in
     * @param string $needle The string to search
     * @return boolean Returns TRUE if the needle was found in haystack, FALSE otherwise.
     */
    function str_contains(string $haystack, string $needle): bool
    {
      return strpos($haystack, $needle) !== false;
    }
  }
}

因为Backporting比Transpiling更简单，所以无论何时进行Backporting，我们都应该选择这种解决方案。

关于PHP8.0到7.1之间的范围，我们可以使用Symfony的polyfill库：

Polyfill PHP 7.1
Polyfill PHP 7.2
Polyfill PHP 7.3
Polyfill PHP 7.4
Polyfill PHP 8.0

这些库支持以下函数、类、常量和接口：

PHP 版本	特征
7.2	功能： `spl_object_id` `utf8_encode` `utf8_decode` 函数： `PHP_FLOAT_*` `PHP_OS_FAMILY`
7.3	功能： `array_key_first` `array_key_last` `hrtime` `is_countable` 异常处理： `JsonException`
7.4	功能： `get_mangled_object_vars` `mb_str_split` `password_algos`
8.0	接口： `Stringable` 类： `ValueError` `UnhandledMatchError` 函数： `FILTER_VALIDATE_BOOL` 功能： `fdiv` `get_debug_type` `preg_last_error_msg` `str_contains` `str_starts_with` `str_ends_with` `get_resource_id`

Transpiled PHP示例

让我们一起来看看几个转换PHP代码的示例，以及几个正在完全转换的包。

PHP代码

match 表达式是在PHP8.0中引入的。此源代码：

function getFieldValue(string $fieldName): ?string

{

return match($fieldName) {

‘foo’ => ‘foofoo’,

‘bar’ => ‘barbar’,

‘baz’ => ‘bazbaz’,

default => null,

};

}

function getFieldValue(string $fieldName): ?string
{
return match($fieldName) {
‘foo’ => ‘foofoo’,
‘bar’ => ‘barbar’,
‘baz’ => ‘bazbaz’,
default => null,
};
}

2023年1月13日

在JavaScript中使用媒体查询的教程
大多数现代网站使用响应性网页设计技术，以确保其外观良好、可读性好，并在任何屏幕大小的设备上保持可用性，如手机、平板电脑、笔记本电脑、台式电脑显示器、电视、投影仪等。

使用这些技术的站点有一个模板，该模板根据屏幕尺寸修改布局：

较小的屏幕通常显示线性、单列视图，其中通过单击（汉堡）图标激活菜单等UI控件。

更大的屏幕显示更多信息，可能带有水平对齐的侧栏。UI控件（如菜单项）可能始终可见，以便于访问。

响应式web设计的一个重要部分是实现CSS或JavaScript媒体查询，以检测设备大小并自动提供适合该大小的设计。我们将讨论为什么这些查询很重要以及如何使用它们，但首先，让我们讨论一般的响应式设计。
为什么响应式设计很重要？

不可能只提供一个页面布局，而期望它在任何地方都能工作。

当手机在21世纪初首次获得基本的web访问时，网站所有者通常会创建两到三个单独的页面模板，松散地基于手机和桌面视图。随着设备种类呈指数级增长，这种做法变得越来越不切实际。

今天，有许多屏幕尺寸，从微型手表显示器到巨大的8K显示器甚至更大。即使你只考虑手机，最近的设备可以比许多低端笔记本电脑具有更高的分辨率。

移动设备的使用量也超过了台式电脑。除非你的网站有一组特定的用户，否则你可以期望大多数人通过智能手机访问它。尽管大多数网页设计师、开发人员和客户继续使用标准PC机，但小屏幕设备已不再是后知后觉，应该从一开始就加以考虑。

谷歌已经认识到移动设备的重要性。当网站在智能手机上可用且表现良好时，在谷歌搜索中排名会更好。好的内容仍然至关重要，但加载速度慢、无法适应用户群屏幕尺寸的网站可能会损害您的业务。

最后，考虑可访问性。一个适合所有人的网站，无论他们使用什么设备，都会吸引更多的观众。可访问性是许多国家的法律要求，但即使不是你所在的地方，也要考虑到更多的观众会带来更多的转换和更高的盈利能力。

响应式设计如何工作？

响应式设计的基础是媒体查询：一种CSS技术，可以根据输出类型（屏幕、打印机甚至语音）、屏幕尺寸、显示纵横比、设备方向、颜色深度和指针精度等指标应用样式。媒体查询还可以考虑用户偏好，包括减少动画、明暗模式和更高对比度。

我们展示的示例演示了仅使用屏幕宽度的媒体查询，但是站点可以更加灵活。有关详细信息，请参阅MDN上的全套选项。

媒体查询支持非常出色，已经在浏览器中使用了十多年。只有IE8及以下版本没有支持。它们忽略了媒体查询应用的样式，但这有时会带来好处（请参阅下面的最佳实践部分）。

使用媒体查询应用样式有三种标准方法。第一个加载HTML代码中的特定样式表。例如，当设备的屏幕宽度至少为800像素时，以下标记将加载wide.css样式表：

<link rel=“stylesheet” media=“screen and (min-width: 800px)” href=“wide.css” />

<link rel=”stylesheet” media=”screen and (min-width: 800px)” href=”wide.css” />
```
<link rel="stylesheet" media="screen and (min-width: 800px)" href="wide.css" />
```
其次，样式表可以使用@import规则有条件地加载到CSS文件中：

/* main.css */

@import url(‘wide.css’) screen and (min-width: 800px);

/* main.css */
@import url(‘wide.css’) screen and (min-width: 800px);
```
/* main.css */
@import url('wide.css') screen and (min-width: 800px);
```
请注意，应避免使用@import，因为每个导入的CSS文件都是渲染块。HTML的<link>标记是并行下载的，而@import则是串行下载文件。

更典型的是，您将使用@media CSS规则块在样式表中应用媒体查询，该规则块修改特定的样式。例如：

/* default styles */

main {

width: 400px;

}

/* styles applied when screen has a width of at least 800px */

@media screen and (min-width: 800px) {

main {

width: 760px;

}

}

/* default styles */
main {
width: 400px;
}

/* styles applied when screen has a width of at least 800px */
@media screen and (min-width: 800px) {
main {
width: 760px;
}
}
```
/* default styles */
main {
  width: 400px;
}

/* styles applied when screen has a width of at least 800px */
@media screen and (min-width: 800px) {
  main {
    width: 760px;
  }
}
```
开发人员可以应用任何必要的媒体查询规则来调整站点的布局。

媒体查询最佳实践

最初设计媒体查询时，许多网站选择了一套固定的布局。这在概念上更易于设计和编码，因为它有效地复制了一组有限的页面模板。例如：
1. 小于600px的屏幕宽度使用400px宽的移动式布局。
2. 600px和999px之间的屏幕宽度使用600px宽的平板电脑布局。
3. 大于1000px的屏幕宽度使用1000px宽的桌面式布局。
这项技术有缺陷。在非常小和非常大的屏幕上的结果可能看起来很差，并且随着设备和屏幕尺寸的变化，可能需要CSS维护。

一个更好的选择是使用带有断点的“移动第一流体”设计，该断点可以在特定大小下调整布局。本质上，默认布局使用最简单的小屏幕样式，将元素定位在线性垂直块中。

例如，<article>和<aside>在<main>容器内：

/* default small-screen device */

main {

width: 100%;

}

article, aside {

width: 100%;

padding: 2em;

}

/* default small-screen device */
main {
width: 100%;
}

article, aside {
width: 100%;
padding: 2em;
}
```
/* default small-screen device */
main {
  width: 100%;
}

article, aside {
  width: 100%;
  padding: 2em;
}
```
以下是所有浏览器的结果-即使是不支持媒体查询的非常旧的浏览器：

不支持媒体查询的示例屏幕截图。

当支持媒体查询且屏幕超过特定宽度（例如500px）时，<article>和<aside>元素可以水平放置。本例使用CSS网格，其中主要内容使用大约三分之二的宽度，次要内容使用剩余的三分之一：

/* larger device */

@media (min-width: 500px) {

main {

display: grid;

grid-template-columns: 2fr 1fr;

gap: 2em;

}

article, aside {

width: auto;

padding: 0;

}

}

/* larger device */
@media (min-width: 500px) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2em;
}

article, aside {
width: auto;
padding: 0;
}
}
```
/* larger device */
@media (min-width: 500px) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2em;
  }

  article, aside {
    width: auto;
    padding: 0;
  }
}
```
以下是大屏幕上的结果：

支持媒体查询的示例屏幕截图

媒体查询替代方案

响应性设计也可以在现代CSS中使用更新的属性实现，这些属性本质上适应布局，而无需检查视口尺寸。选择包括：
- calc, min-width, max-width, min-height, max-height和较新的clamp属性都可以定义尺寸标注，根据已知限制和可用空间调整图元的大小。
- 视口单位vw, vh, vmin 和 vmax 可以根据屏幕尺寸分数调整元素的大小。
- 文本可以显示在CSS列中，在空间允许的情况下显示或消失。
- 可以使用min-content, fit-content 和 max-content 维度，根据元素的子元素大小调整元素的大小。
- CSS flexbox可以在元素开始超出可用空间时进行换行或不换行。
- CSS网格元素可以使用比例分数 fr 单位调整大小。repeat CSS函数可以与minmax, auto-fit 和 auto-fill结合使用，以分配可用空间。
- 新的和（当前）实验性的CSS容器查询可以对布局中组件可用的部分空间作出反应。
这些选项超出了本文的范围，但它们通常比只能响应屏幕尺寸的粗糙媒体查询更实用。如果您可以在没有媒体查询的情况下实现布局，那么随着时间的推移，它可能会使用更少的代码，更高效，并且需要更少的维护。

也就是说，在某些情况下，媒体查询仍然是唯一可行的布局选项。当你需要考虑其他屏幕因素时，它们仍然是必不可少的，比如纵横比、设备方向、颜色深度、指针精度，或者用户偏好，比如动画和光/暗模式。

您是否需要JavaScript中的媒体查询？

到目前为止，我们主要讨论CSS。这是因为大多数布局问题都可以而且应该单独用CSS来解决。

但是，在某些情况下，使用JavaScript媒体查询而不是CSS是可行的，例如：
- 诸如菜单之类的组件在小屏幕和大屏幕上具有不同的功能。
- 切换纵向/横向会影响web应用程序的功能。
- 基于触摸的游戏必须更改<canvas>布局或调整控制按钮。
- web应用程序遵循用户偏好，如暗/光模式、减少动画、触摸粗糙度等。
以下部分演示了在JavaScript中使用媒体查询或类似于媒体查询的选项的三种方法。所有示例都返回一个状态字符串，其中：
- 小视图=宽度小于400像素的屏幕；
- 中视图=宽度在400到799像素之间的屏幕；
- 大视图=宽度为800像素或更多的屏幕。
选项 1：监视视场维度

在媒体查询实施之前的黑暗日子里，这是唯一的选择。JavaScript将侦听浏览器“调整大小”事件，使用window.innerWidth和window.innerHeight（或旧IE中的document.body.clientWidth和document.body.clientHeight）分析视口尺寸，并做出相应的反应。

此代码将计算出的小、中或大字符串输出到控制台：

const

screen = {

small: 0,

medium: 400,

large: 800

};

// observe window resize

window.addEventListener(‘resize’, resizeHandler);

// initial call

resizeHandler();

// calculate size

function resizeHandler() {

// get window width

const iw = window.innerWidth;

// determine named size

let size = null;

for (let s in screen) {

if (iw >= screen[s]) size = s;

}

console.log(size);

}

const
screen = {
small: 0,
medium: 400,
large: 800
};

// observe window resize
window.addEventListener(‘resize’, resizeHandler);

// initial call
resizeHandler();

// calculate size
function resizeHandler() {

// get window width
const iw = window.innerWidth;

// determine named size
let size = null;
for (let s in screen) {
if (iw >= screen[s]) size = s;
}

console.log(size);
}
```
const
  screen = {
    small: 0,
    medium: 400,
    large: 800
  };

// observe window resize
window.addEventListener('resize', resizeHandler);

// initial call
resizeHandler();

// calculate size
function resizeHandler() {

  // get window width
  const iw = window.innerWidth;
 
  // determine named size
  let size = null;
  for (let s in screen) {
    if (iw >= screen[s]) size = s;
  }

  console.log(size);
}
```
您可以在此处查看工作演示。（如果使用桌面浏览器，请在新窗口中打开此链接，以便于调整大小。移动用户可以旋转设备。）

上面的示例在调整浏览器大小时检查视口大小；确定它是小型、中型还是大型；并将其设置为body元素上的类，从而更改背景颜色。

这种方法的优点包括：
- 它可以在每一个可以运行JavaScript的浏览器中运行——甚至是古老的应用程序。
- 您正在捕获准确的尺寸，并可以做出相应的反应。
缺点是：
- 这是一种需要大量代码的老技术。
- 是不是太精确了？你真的需要知道宽度是966px还是967px吗？
- 您可能需要手动将维度匹配到相应的CSS媒体查询。
- 用户可以快速调整浏览器大小，使处理程序功能每次都再次运行。这会通过限制事件来重载较旧和较慢的浏览器。它只能每500毫秒触发一次。
总之，除非有非常具体和复杂的大小调整要求，否则不要监视视口尺寸。

选项 2：定义和监视CSS自定义属性（可变）

这是一种稍微不寻常的技术，它在触发媒体查询时更改CSS中自定义属性字符串的值。所有现代浏览器（但不是IE）都支持自定义属性。

在下面的示例中，@media代码块内的--screen custom property设置为“small”、“medium”或“large”：

body {

–screen: “small”;

background-color: #cff;

text-align: center;

}

@media (min-width: 400px) {

body {

–screen: “medium”;

background-color: #fcf;

}

}

@media (min-width: 800px) {

body {

–screen: “large”;

background-color: #ffc;

}

}

body {
–screen: “small”;
background-color: #cff;
text-align: center;
}

@media (min-width: 400px) {

body {
–screen: “medium”;
background-color: #fcf;
}

}

@media (min-width: 800px) {

body {
–screen: “large”;
background-color: #ffc;
}

}
```
body {
  --screen: "small";
  background-color: #cff;
  text-align: center;
}

@media (min-width: 400px) {
 
  body {
    --screen: "medium";
    background-color: #fcf;
  }
 
}

@media (min-width: 800px) {
 
  body {
    --screen: "large";
    background-color: #ffc;
  }
 
}
```
可以使用伪元素单独在CSS中输出该值（但请注意，它必须包含在单引号或双引号中）：

p::before {

content: var(–screen2023年1月13日
如何使用Vue创建无头WordPress网站
WordPress一直是开发者和非开发者快速构建和创建惊人网站的内容管理系统。

使用内容管理后端与前端分离的微服务体系结构，可以最大限度地控制两个“端”。这种分离问题正是无头内容管理系统（包括无头WordPress解决方案）试图解决的问题。

通过无头方法，企业可以对内容管理后端进行更精细的控制。他们还可以自由使用自己选择的任何前端，包括React、Vue、Angular等。

本指南将详细探讨无头WordPress，以及它的全部内容、何时以及为什么应该考虑使用它。最后，我们将探索创建无头WordPress环境，使用Vue.js构建前端，并部署无头WordPress。
什么是无头WordPress

WordPress是一个整体式应用程序，后端和前端部分紧密地缠绕在一起。后端是进行管理的地方，在这里您可以创建、编辑、添加和删除内容，包括更改外观配置。相反，前端负责向用户显示内容。

无头WordPress是用来描述解耦WordPress的术语。后台（管理）部分与WordPress CMS的前端部分是分开的。您可以使用您选择的任何前端框架作为独立应用程序开发和管理前端。

无头WordPress的利弊

接下来，我们将探讨无头WordPress的优缺点，让您更好地理解这个概念。

优点

（1）超高速性能-在这个应用程序运行速度极快的时代，您的网站加载时间不应超过几秒钟，以免失去访问者。由于前端与WordPress分离，并且可以使用现代前端工具开发高性能和可扩展性，因此采用无头WordPress方法对网站的整体用户体验非常有益。

（2）粒度控制-选择无头架构可以让您更好地控制设计布局、内容展示以及用户与应用程序前端的交互方式。它还允许从中心位置保护和访问后端内容。

（3）增强的可扩展性-扩展WordPress有时可能会很复杂，因为您无法完全控制驱动WordPress的所有组件和代码，主要是在您不是开发人员的情况下。但是通过WordPress的解耦，可以轻松地单独缩放每个部分，并且您可以轻松地检测出需要缩放的部分。

（4）更严密的安全-我们无法充分强调无头WordPress的安全优势，因为解耦WordPress在抵御黑客和DDoS攻击方面具有很高的安全优势。无头WordPress方法使得黑客很难访问您的敏感后端数据，因为它与您的前端（面向用户的网站）是分开的。

（5）轻量化设计-您将可以更好地控制前端设计的结构和布局。此外，您还可以在前端进行更自由的定制设计；由于RESTAPI调用，您将能够利用现代web工具并在前端部署它们。

（6）多渠道内容发布-由于无头WordPress使用基于API的系统将您的内容传送到前端，因此您可以在任何位置和任何平台上显示您的内容，包括桌面、网站、移动应用程序和触摸屏信息亭。还可以充分利用增强现实、虚拟现实和物联网设备来显示和呈现来自基于API的系统的内容。

缺点

我们将更深入地探讨无头的缺点，但其主要缺点是：
1. 在管理不同的网站实例时，分离后端和前端会给您带来额外的负载。
2. 由于它需要团队中的额外成员和运行不同实例的额外资金，因此实施起来可能会很昂贵。
3. 如果内容在所有平台上呈现不一致，则在不同平台上提供内容可能会导致用户体验不一致。
何时无头WordPress可能不是最好的选择

由于无头WordPress是一项具有巨大优势的难以置信的创新，因此在决定是否使用它时，您需要记住一些事情。
- 无头WordPress的维护费用非常昂贵。从基础设施到多个开发人员，您将维护一个网站的两个不同实例。
- 无头WordPress不支持WordPress的所有功能。例如，WordPress的强大功能，如所见即所得编辑器和live preview，在使用单独的前端时无法工作。
- 设置无头WordPress的成本更高。因此，始终牢记其增加的成本。
谁应该使用无头WordPress

以下是您可能需要无头WordPress的最佳情况：
1. 如果你的网站的安全性是你最关心的，也是对你的公司最重要的，那么你应该使用无头WordPress。
2. 接下来，如果您的网站不需要定期升级和更新，这将是一个很好的迹象，表明您需要使用无头设置。
3. 接下来，如果你想有一个WordPress主题不容易实现的定制设计，你需要用一个独特的设计来增加网站前端的趣味。那么，无头WordPress是你的下一个选择。
4. 最后，如果你正在为演示和教程建立一个寿命很短的网站或演示网站，那么你可以尝试无头方法。
谁应该避免使用无头WordPress

以下几种情况下，使用无头WordPress不是一个好的选择：
1. 当你的网站仅仅依赖于特定的插件和功能来控制应用程序的前端并与之协同工作时，你应该坚持使用WordPress，除非插件提供基于API的选项来使用数据。
2. 假设您对编写网站代码不感兴趣，或者您的网站需要日常维护，并且由于预算较低，您没有雇佣专业人员进行日常维护。在这种情况下，WordPress是一个适合您的选项。
3. 如果你不是一个经验丰富的开发人员，想单独创建和管理你的网站，你应该使用WordPress。
如何搭建无头WordPress（构建应用程序）

本节将探讨如何构建和开发一个新闻博客，其后端为无头WordPress，前端为Vue 3。

使用Devkinsta设置无头WordPress

我们将使用DevKinsta开发无头WordPress，DevKinsta是一个流行的WordPress本地开发环境，用于设计、开发和部署WordPress站点，使您的本地机器舒适。

DevKinsta是永远免费的，它为您开发和构建WordPress提供了巨大的好处和舒适。

您可以从官方网站下载并安装DevKinsta，并按照文档中的说明开始。

由于我们已经安装了DevKinsta，我们将打开它并按照下面的步骤设置我们的第一个无头WordPress。

在DevKinsta仪表板上，使用Nginx、MySQL和任何可用的WordPress版本创建一个新的WordPress站点。此外，您还可以从仪表板导入现有WordPress实例或创建自定义WordPress实例。

接下来，为新创建的WordPress实例提供一个名称、管理员用户名和密码，然后单击Create并复制详细信息，同时DevKinsta在本地计算机中创建一个新的WordPress实例。

接下来，单击“Open Site”，在默认浏览器上打开新创建的WordPress实例。

最后，您可以通过访问 http://headless-wordpress-news-blog.local/wp-admin 链接并键入创建新实例时输入的管理员登录凭据。

注意，我们已经在本地主机 http://news-blog.local使用URL http://headless-wordpress-news-blog.local 设置了无头WordPress，我们将在整个教程中使用它。

配置我们的无头WordPress

接下来，在成功登录到WordPress仪表板之后，您可以继续安装您选择的任何插件和配置。

我们将在本教程中完全禁用该主题，通过安装简单的网站重定向插件并进行设置，仅通过基于WordPress REST API的端点访问内容。

转到Plugins > 安装插件并搜索Simple Website Redirect，安装并启用：

WordPress插件安装

接下来，单击插件Settings并输入基于前端的URL (e.g. http://news-blog.local),，单击Advanced setting options并将以下路径 — /wp-admin, /wp-login.php和/wp-json 添加到Exclude Paths。

最后，通过在Redirect Status下拉列表中选择Enabled 来启用插件：

Simple Website Redirect插件设置

此外，如果在默认情况下访问 http://headless-wordpress-news-blog.local/wp-json 时未启用JSON API，您可以通过在WordPress设置下打开固定链接并选择文章名Post Name或您选择的任何其他选项来启用该功能（但朴素Plain除外）：

WordPress固定链接

现在当你访问你的http://headless-wordpress-news-blog.local/wp-json，它应该向您提供JSON数据，如下所示：

{

“name”: “Headless WordPress News Blog”,

“description”: “Just another WordPress site”,

“url”: “http://headless-wordpress-news-blog.local”,

“home”: “http://headless-wordpress-news-blog.local”,

“gmt_offset”: “0”,

“timezone_string”: “”,

“namespaces”: [

“oembed/1.0”,

“wp/v2”,

“wp-site-health/v1”

],

“authentication”: [

],

“routes”: {

“/”: {

“namespace”: “”,

“methods”: [

“GET”

],

“endpoints”: [

{

“methods”: [

“GET”

],

“args”: {

“context”: {

“default”: “view”,

“required”: false

}

}

}

],

…

{
“name”: “Headless WordPress News Blog”,
“description”: “Just another WordPress site”,
“url”: “http://headless-wordpress-news-blog.local”,
“home”: “http://headless-wordpress-news-blog.local”,
“gmt_offset”: “0”,
“timezone_string”: “”,
“namespaces”: [
“oembed/1.0”,
“wp/v2”,
“wp-site-health/v1”
],
“authentication”: [

],
“routes”: {
“/”: {
“namespace”: “”,
“methods”: [
“GET”
],
“endpoints”: [
{
“methods”: [
“GET”
],
“args”: {
“context”: {
“default”: “view”,
“required”: false
}
}
}
],
…
```
{
  "name": "Headless WordPress News Blog",
  "description": "Just another WordPress site",
  "url": "http://headless-wordpress-news-blog.local",
  "home": "http://headless-wordpress-news-blog.local",
  "gmt_offset": "0",
  "timezone_string": "",
  "namespaces": [
    "oembed/1.0",
    "wp/v2",
    "wp-site-health/v1"
  ],
  "authentication": [
    
  ],
  "routes": {
    "/": {
      "namespace": "",
      "methods": [
        "GET"
      ],
      "endpoints": [
        {
          "methods": [
            "GET"
          ],
          "args": {
            "context": {
              "default": "view",
              "required": false
            }
          }
        }
      ],
...
```
设置Vue.js（前端）

我们将使用Vite web开发工具创建Vue 3应用程序，以连接无头WordPress。您可以阅读有关Vue 3和Vite开发工具的更多信息。

在本文中，我们将构建一个新闻博客。该项目的所有后端内容管理都将使用Devkinsta由我们的无头WordPress开发和托管。

键入以下简单命令：

npm init @vitejs/app news-blog

cd news-blog

npm install

npm run dev

npm init @vitejs/app news-blog
cd news-blog
npm install
npm run dev
```
npm init @vitejs/app news-blog
cd news-blog
npm install
npm run dev
```
如果您的用户名中存在空格问题，请尝试使用：

npx create-vite-app news-blog

npx create-vite-app news-blog
```
npx create-vite-app news-blog
```
最后，使用您选择的任何代码编辑器打开Vue 3代码库。我们将使用VSCode，下面让我们继续努力码字。

使用WordPress API

我们已经着手开发Vue应用程序的其余部分，以节省您的阅读时间，但您可以继续从我的GitHub克隆存储库。

显示文章列表组成部分

下面的代码片段显示了我们如何使用Vue实例实现WordPress REST API，以显示来自无头WordPress的所有文章：

<template>

<section>

<div class=“padding-top”>

<div class=“container inner-padding-top”>

<div class=“row”>

<div class=“col-md-12 col-sm-12-col-xs-12 text-center”>

<h2 class=“lead-title text-uppercase”>

Latest Backend Dev. Articles

</h2>

<h3 class=“article-subtitle”>

Latest Backend Dev. Articles curated daily by the community.

</h3>

</div>

</div>

<div class=“row mb-1 mt-5”>

<post v-for=“(post, i) in posts” :key=“i” :post=“post” />

</div>

</div>

</div>

<div class=“col-md-12 col-sm-12-col-xs-12 text-center mb-5”>

<Button link=“/posts” class=“col p-3”>More Articles</Button>

</div>

</section>

</template>

<script>

import { mapState } from ‘vuex’

export default {

computed: {

…mapState({

posts: (state) => {

return […state.post.posts].slice(0, 22)

},

}),

},

}

</script>

<template>
<section>
<div class=”padding-top”>
<div class=”container inner-padding-top”>
<div class=”row”>
<div class=”col-md-12 col-sm-12-col-xs-12 text-center”>
<h2 class=”lead-title text-uppercase”>
Latest Backend Dev. Articles
</h2>
<h3 class=”article-subtitle”>
Latest Backend Dev. Articles curated daily by the community.
</h3>
</div>
</div>
<div class=”row mb-1 mt-5″>
<post v-for=”(post, i) in posts” :key=”i” :post=”post” />
</div>
</div>
</div>
<div class=”col-md-12 col-sm-12-col-xs-12 text-center mb-5″>
<Button link=”/posts” class=”col p-3″>More Articles</Button>
</div>
</section>
</template>

<script>
import { mapState } from ‘vuex’
export default {
computed: {
…mapState({
posts: (state) => {
return […state.post.posts].slice(0, 22)
},
}),
},
}
</script>

2023年1月13日

分类： WordPress开发

GitHub简介

GitHub入门

如何使用GitHub进行WordPress开发

1. 创建本地WordPress环境

2. 在本地机器上安装Git

3. 为您的项目创建本地存储库

4.注册一个GitHub账号

5. 在GitHub上创建一个存储库

6. 将你的项目提交到GitHub

7. 从GitHub获取更新到您的本地存储库

小结

WordPress主题开发简介

什么是入门主题

如何开发您的第一个WordPress主题

Step 1：设置本地环境

Step 2：下载并安装您的入门主题

Step 3：了解WordPress在幕后的工作原理

Step 4：配置您的主题

Step 5：导出主题并将其上传到您的网站

小结

为什么开发WordPress插件

插件如何工作：钩子、动作和过滤器

创建插件之前要考虑的事项

如何创建WordPress插件

Step 1：设置临时站点

Step 2：新建插件文件

Step 3：添加您的代码

Step 4：测试插件

Step 5：分享插件

小结

WordPress命令行界面 (WP-CLI) 简介

如何在WordPress网站上安装WP-CLI

安装WP-CLI的其他方法

使用WP-CLI管理WordPress网站的5种方法

1.安装和更新WordPress

2. 管理主题和插件

3. 创建一个子主题

4. 审核评论

5. 更新WP-CLI

小结

什么是Query Monitor？

Query Monitor有什么作用？

如何使用Query Monitor

如何以注销用户的身份查看查询监控数据

小结

什么是WordPress Salts？

WordPress Salts位于何处？

WordPress Salts是如何工作的？

您需要更改WordPress Salts和安全密钥吗？

如何更改WordPress Salts（两种方法）

如何手动更改WordPress Salts

如何使用插件更改WordPress Salts

小结

什么是Linux命令？

最常用的Linux命令

1. ls命令

2.alias命令

3.unalias命令

4. pwd命令

5. cd命令

6. cp 命令

7. rm命令

8. mv命令

9.mkdir命令

10.man命令

11.touch命令

12. chmod 命令

什么是Transpiling？

什么是Transpiling PHP？

Transpiling PHP的优势

何时需要转换PHP（Transpile PHP）

可转换PHP功能

PHP转换器（PHP Transpilers）

转换到哪一个PHP版本

Transpiling vs Backporting

Transpiled PHP示例

PHP代码

为什么响应式设计很重要？

响应式设计如何工作？

1. `ls`命令

2.`alias`命令

3.`unalias`命令

4. `pwd`命令

5. `cd`命令

6. `cp` 命令

7. `rm`命令

8. `mv`命令

9.`mkdir`命令

10.`man`命令

11.`touch`命令

12. `chmod` 命令