如何在 iPad 上进行 WordPress 主题开发

我最近开始上大学，在购买 MacBook Air（顺便说一句，M1 芯片很棒）之前，我不得不使用 iPad Pro 上课。但是，作为一名计算机科学专业的学生，我必须找到一种方法来用它进行编程。因此，我开始了寻找在 iPad 上进行编程的最佳方法的旅程。

我找到的第一个选项还不错，但算不上很好，因为由于缺乏命令行或 root 访问权限，我无法运行任何我想要的代码或程序。我本可以使用 Coder、Gitpod、GitHub Codespaces 甚至 Replit 等平台，但它们都不是我想要的。

但后来，我找到了完美的程序。它是免费的、开源的，并且可以自行托管。它也是 Coder 的基础，Coder 是我在搜索过程中找到的一个平台。它被称为 code-server，它基本上是一个托管的 VS Code，可以完全访问服务器的文件系统。

最初，我的用例是 Java 编程（这是我们在课堂上学习的语言），但很快我意识到我也可以将其用于其他编程任务，即 WordPress 主题开发！

需求

您需要两样东西才能开始

• 具有 root 访问权限的 Linux 服务器。我个人使用来自 OVH 的 VPS。Raspberry Pi 可以工作，但 步骤更复杂，并且超出了本文的范围。
• iPad 或任何其他通常无法用于编程的设备（例如 Chromebook）。

我假设您正在与您的 WordPress 网站相同的服务器上工作。另外，需要注意的是，本指南是使用 Ubuntu 20.04.2 LTS 编写的。

安装

我们首先需要 SSH 进入我们的服务器。如果您使用的是 iPad，我建议使用 Termius，因为它非常适合我们的需求。登录到服务器后，我们将安装 code-server，这需要 root/sudo 访问权限。

安装非常简单；事实上，它只是一个终端命令。升级时也是相同的命令

curl -fsSL https://code-server.dev/install.sh | sh

配置

安装 code-server 后，我们可以通过几种方式进行配置。我们可以简单地运行 code-server，它就可以工作——但它也会缺少 HTTPS 并且只提供基本的身份验证。我总是希望启用 HTTPS，而且，我的域名无论如何都需要它。

要启用 HTTPS，同样有几种方法。在 code-server 的文档 中的第一种方法是使用 Let's Encrypt 和反向代理，例如 NGINX 或 Caddy。虽然这非常有效，但它需要更多的手动配置，我不想为此烦恼。但是，code-server 还提供了另一个选项，--link，尽管它处于测试阶段，但效果很好。此标志会设置 TLS 证书、GitHub 身份验证和专用的 cdr.co URL！无需任何配置即可！这有多酷‽ 要设置它，请运行以下命令（此命令不需要 root/sudo 访问权限，任何普通用户都可以使用）

code-server --link

这会为我们创建一个 URL 以登录到您的 GitHub 帐户，以便它知道要授权哪个帐户。完成后，我们将获得一个专用的 URL，然后就可以开始了！每个用户都有自己的配置和 GitHub 帐户，因此我认为从技术上讲，可以同时为多人运行多个实例。但是，我没有测试过。

配置 GitHub 帐户后，我们将按 Ctrl+C 停止该过程。

设置 WordPress 主题依赖项

有很多方法可以进行 WordPress 主题开发，但我真的很喜欢 Automattic 的 underscores (_s) 的方式，所以我们将以此为起点。

要开始使用 _s，让我们安装 Composer。由于我假设您与您的 WordPress 网站位于同一服务器上，因此 PHP 已安装。虽然我可以在此处列出步骤，但 Composer 的网站已经更好地列出了它们，比我可能列出的要好。

安装 Composer 后，我们需要通过在终端中运行以下命令来安装 Node.js

cd ~
curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install nodejs
node -v

这些命令添加了更新的 Node PPA——因为 Ubuntu 自带的 PPA 非常过时（Node 10！）——然后安装 Node 并获取其版本。

最后一个命令应该返回了类似 v16.6.1 的内容，这意味着我们已经准备好了！

设置主题

要设置 _s 主题，我们运行 npx degit automattic/_s my-cool-theme。这会将 _s 代码下载到名为 my-cool-theme 的文件夹中。如果您希望主题直接位于 WordPress 主题目录中，您可以移动该文件夹、创建指向它的符号链接，或者在前面的命令中提供文件夹的完整路径。我个人更喜欢通过运行 npm run bundle 压缩我的文件，然后在我的 themes 文件夹中手动解压缩它们。

完成所有操作后，让我们运行 code-server --link，打开浏览器并导航到我们的 URL！

在我们的 VS Code 实例中，我们可以打开包含我们主题的文件夹，并按照 _s 的快速入门步骤，正确命名我们的主题。然后，在集成终端中，我们运行 composer install 和 npm install。这将安装主题所需的所有软件包。我不会解释 WordPress 主题的工作原理，因为许多更有经验的人已经这样做了。

就这样！我们的服务器现在拥有了我们使用 iPad 或任何其他具有浏览器和键盘的设备开发一些酷炫的 WordPress 主题所需的一切。一旦他们的 新浏览器 发布，我们甚至可以使用 Xbox。

开发过程

理论上来说，我们讨论的所有内容听起来都很棒，对吧？但是，您可能想知道，使用这种配置在 iPad 上进行开发实际体验如何。我录制了以下视频来展示我的开发体验。视频时长几分钟，但我认为它很好地反映了 WordPress 开发中出现的一些问题。

关于此设置的一些说明

由于 code-server 使用的是开源的 VS Code（而非微软版本），因此缺少一些功能。它也没有使用微软的扩展市场来获取扩展，这意味着并非所有扩展都可用。我们无法登录我们的微软或 GitHub 账户来同步设置，但我们也可以使用Settings Sync 扩展，尽管我个人在使用它同步扩展时遇到了问题。每个 Linux 用户都有自己的设置和扩展，保存在此文件夹中：~/.local/share/code-server。它与常规 VS Code 安装的文件夹结构类似。

还有一些方法可以将 code-server 作为服务运行，而不是直接在 SSH 会话中运行，这样它就会一直运行，但我更喜欢在需要时打开它。

一些 iPad 特定技巧

如果你像我一样计划使用 iPad，这里有一些技巧可以使你的体验更愉快！

• 在 Termius 中激活位置跟踪功能，因为它使 SSH 连接保持活动状态，即使应用程序在后台运行。
• 使用 Safari 打开网站，然后打开共享表单将其添加到主屏幕！PWA 万岁
• Safari 非常积极地缓存内容，清除缓存非常烦人。我找到的唯一方法基本上是清除浏览器的历史记录，这并不理想。它不像其他任何桌面浏览器那样有“强制刷新”功能。不过 Chrome 可能处理得更好。
• 给自己买一个蓝牙键盘，甚至是一个保护套（Brydge 是一个不错的选择），因为它让它感觉更像笔记本电脑而不是平板电脑。物理键盘的使用体验比屏幕键盘好 1000 倍！
• iPad 有时会“失去焦点”，尤其是在应用程序之间切换时，这使得无法输入。我通常通过点击侧边栏，然后在编辑器中修复它。