开始使用WordPress Playground

简介

大家好,我是 Adam,我将向大家展示如何使用 WordPress Playground。当你访问 playground.wordpress.net 时,你会得到一个完全在浏览器中运行的完整 WordPress 网站。利用它来尝试插件、主题,构建你自己的主题和完整网站。

安装插件

我们先安装几个插件。我将前往 WordPress 插件目录,下载 Gutenberg 插件、Create block theme 插件和 Skatepark 主题。拿到这些文件后,我们进入“插件”->“安装插件”,开始安装。你可能首先会注意到一条错误消息,提示无法联系 WordPress 插件目录,这是因为 Playground 无法访问互联网。这有助于保护你的隐私,但意味着我们无法获取插件列表。

好吧,我们上传它们。我找到硬盘上的 Gutenberg 插件 zip 文件,直接拖放到这里。然后安装并激活它。用同样的方法处理 Create block theme 插件,再次拖放 zip 文件并安装激活。现在安装 Skatepark 主题,和插件一样,我把它拖放到这里。然后激活主题。瞧,我们刚刚建立了一个新站点,安装了几个插件,激活了一个主题,整个过程大约只花了一分钟,还不错。

自动安装插件和主题

如你所见,Gutenberg 编辑器已经就位,正确的主题也已应用,一切正常。不过,刚才的过程有点繁琐。让我们看看如何自动化插件安装流程。我将刷新整个站点,重新开始。这是一个没有应用任何更改的新 Playground。在地址栏中,我输入 theme=skatepark,然后输入 plugin=gutenberg&plugin=create-block-theme。这样它会自动下载并安装所有这些插件和主题。现在我们得到了和之前完全相同的配置,但几乎不需要手动操作,只花了几秒钟,我们就拥有了想要的插件和主题的站点。

构建主题

我们还能用 WordPress Playground 做什么?既然安装了 Create block theme,我们可以在 WordPress Playground 中构建一个完整的主题。为此,进入“外观”->“编辑器”打开站点编辑器。在站点编辑器中,我们开始自定义。我会更改主题的背景颜色,调整一些行高和字体,让我们加快一点速度。在这里,你可以完全自由地按自己的喜好自定义主题。现在完成了,这就是我们的自定义主题。我们可以通过“选项”->“Create block theme”导出它,向下滚动一点,会看到一个“导出”按钮。点击它,就会下载一个包含自定义主题的 zip 文件,可以安装到任何 WordPress 站点上。

让我们启动一个新的 Playground,进入“管理”->“外观”->“主题”,安装我们新的自定义主题。我使用刚刚导出的那个文件上传它。安装并激活后,新的 Playground 就拥有了和我刚刚构建的一模一样的主题。我可以把这个主题带到世界上任何 WordPress 站点并安装它,就这么简单。你也可以访问 playground.wordpress.net,构建你自己的 WordPress 主题。

构建站点

我们不要止步于此,来构建一个完整的站点。这是 WordPress Playground 文档。让我们用新的自定义主题重新创建它。复制内容总是一个好的起点,所以我将复制整个部分,粘贴到一个模板中。找一个最有用的模板,这个有列,看起来很不错。我把内容粘贴到这里,在右侧列添加一个 YouTube 视频,自定义网站的顶部区域和页脚。调整一些样式,移除社交链接,再做一些小修改。瞧,这就是我们模仿 WordPress Playground 文档的全新站点。

导出站点

现在,这个站点只存在于我的浏览器中。让我们把它保存到磁盘上。在 WordPress Playground 网站上,点击这个小下载图标,它会下载一个包含整个 WordPress 站点的 zip 文件。我解压它,看看里面有什么。这个 WordPress 目录包含所有 WordPress 核心文件。深入查看,我甚至能找到 SQLite 数据库文件,里面存储了所有页面、文章和 WordPress 配置。这个 zip 文件包含了一个完整的 WordPress 网站。我可以直接把它托管到某个地方,也可以导入到另一个 WordPress Playground 实例中。为此,我使用这里的小上传图标,选择 wordpress-playground.zip,点击“导入”。瞧,我的 WordPress 站点现在在这里了。我不再需要给朋友和客户发送截图或视频,我可以直接发送一个真实的 WordPress 网站,让他们在浏览器中交互式地操作。

兼容性测试

让我们来看看 WordPress Playground 的另一个功能,即对我们网站的插件和主题进行兼容性测试。Playground 允许你在不同的 PHP 和 WordPress 版本之间切换。我们选择 6.0 版本,然后安装本教程前面创建的主题,在网站上可以看到它确实能正常工作,这很棒。

不过,我们不要止步于此。我们也在 WordPress 5.9 上测试一下。所以我只是选择了另一个版本。现在我们有了一个 WordPress 5.9 的网站。让我们再次尝试安装同一个主题。选择正确的压缩包。这里出现了一个错误:该主题需要 WordPress 6.0 或更高版本。要发现这一点,我们只需访问 playground@wordpress.net 并点击几个按钮即可。我们不需要创建 20 个不同的 WordPress 网站,只需要点击几下,花几分钟时间。

希望你能像我一样喜欢 WordPress Playground,我迫不及待地想看看你会用它构建什么。

WordPress用户为何需要运行本地站点

简介

在本课中,我们将探讨为什么应该运行本地站点。本地环境对于安全高效地构建、测试和实验您的网站至关重要。在本课中,我们将定义本地测试环境,识别使用本地环境的好处,并探讨设置开发站点的三种选择。但什么是本地测试环境?本地测试环境是您计算机上的一种设置,它镜像您的在线网站,但完全离线运行。它充当您的在线站点和您正在进行的更改之间的缓冲区。它允许您创建、测试和完善网站,而无需在线托管服务或危及您的主网站。它就像一个测试区,您可以自由工作并进行更改,而无需任何成本或风险。

好处

使用本地环境有什么好处?第一,它不花一分钱;您可以免费使用。其次,您可以用它进行实验。您可以在安全的环境中构建网站,然后再上传到网络主机,或者测试更改而不影响您的在线网站。第三,它允许您有一个备份计划。如果您的在线站点遇到问题,拥有本地副本意味着您可以快速恢复到以前的稳定版本,从而最大限度地减少停机时间。第四,它可以是一个学习空间。您可以在无风险的环境中练习您的 WordPress 技能。

工具

设置本地 WordPress 站点可以通过使用诸如 DevKinsta、WordPress Studio 和 WordPress Playground 等工具来简化。您还可以探索其他选项,例如 XAMPP、Docker 或 MAMP。

Studio

我们要看的第一个本地环境是 Studio,一个快速、轻量且可共享的 WordPress 开发环境。下载并安装 Studio 后,您可以设置一个新站点。要创建新站点,请点击左下角的“添加站点”,为其适当命名,并为其文件选择一个目录路径。然后点击“添加站点”。在“自定义”下方,您可以轻松访问站点编辑器、模式、导航和其他区域。所以我会继续打开站点编辑器,现在我将能够实现与 Local 相同的结果。我可以测试我的技能,探索新功能,将站点导入到我的测试站点,或者将我的测试站点导出到生产站点。

WordPress Playground

最后一个选项是使用 WordPress Playground 的不同方法。WordPress Playground 是一个基于浏览器的工具,允许您直接在网络浏览器中运行 WordPress,无需安装软件。它是一个平台,让您无需主机即可在任何设备上立即运行 WordPress。它创建临时环境,使用后即被丢弃。它是一个构建、实验和测试的地方。您可以通过在浏览器中导航到 playground.wordpress.net 立即开始使用 Playground。或者,您可以通过在 URL 中使用查询 API 来自定义您的设置,方法是在“.net”之后添加“?networking=yes”。这将允许您安装和激活插件和主题。

您可以决定从头开始构建您的站点,然后,当您选择汉堡菜单时,您可以将站点下载为 zip 文件并将其导出到您的生产站点。或者,如果您想导入站点,请点击“从 zip 恢复”,这将允许您用之前导出的站点替换当前的 WordPress Playground 站点。您还可以调整 URL 以自动在您的站点上安装特定的插件或主题。

例如,要自动安装和激活一个插件,您添加“?plugin=”后跟插件别名。让我们继续安装 WooCommerce 插件。插件别名是插件 WordPress.org URL 的最后一部分。让我们访问 WooCommerce 并仔细检查我们是否使用了正确的别名。然后,我们可以返回 Playground,当我们按 Enter 键时,插件将自动安装和激活。现在您可以测试和探索使用该插件。要自动安装和激活一个主题,我们写“?theme=”后跟主题别名。在这种情况下,是“twentytwentythree”。然后,它将在几秒钟内准备好使用。您还可以通过在别名之间添加“&”符号来同时安装多个插件和主题。所以,在这个例子中,您会注意到我添加了 Twenty Twenty-Three 主题、WooCommerce 插件和 Contact Form 7 插件。

默认情况下,在 Playground 中所做的更改是临时的,一旦您关闭标签页就会丢失。要使更改持久化,请使用 Playground 界面中的设置按钮启用浏览器存储。这允许您的更改即使在刷新页面后也能保存。正如我们将看到的,将您的站点本地存储在设备上的功能仍处于测试阶段。最后,还值得一提的是,您可以通过 URL 快速将语言包加载到 WordPress Playground。只需输入“?language=”后跟 WordPress 语言环境代码——例如,西班牙的西班牙语是 es_ES。然后,测试网站将以您选择的语言加载。

DevKinsta

最后一个值得探索的选项是 DevKinsta。当您点击“更多信息”时,您会找到安装说明。请注意,您需要安装 Docker 作为安装过程的一部分。

结论

使用本地测试环境对于各种 WordPress 任务至关重要,例如在托管前搭建网站、尝试新主题和插件、排查问题或磨练您的 WordPress 技能。