搜索
首页web前端css教程如何将iPad用于WordPress主题开发

How to Use an iPad for WordPress Theme Development

大学开学后,在入手MacBook Air(顺便说一句,M1芯片真棒)之前,我不得不使用iPad Pro来上课。然而,作为一名计算机科学专业的学生,我必须找到一种方法来用它进行编程。因此,我开始寻找在iPad上编程的最佳方法。

起初我找到了一些不错的选择,但并不完美,因为由于缺乏命令行或root权限,我无法运行任何我想要的代码或程序。我本可以使用Coder、Gitpod、GitHub Codespaces甚至Replit等平台,但它们并非我想要的。

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

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

先决条件

你需要两样东西才能开始:

  • 具有root访问权限的Linux服务器。 我个人使用的是OVH的VPS。树莓派也可以,但步骤更复杂,不在本文讨论范围之内。
  • 一台iPad或任何其他通常无法用于编程的设备(例如Chromebook)。

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

安装

首先,我们需要通过SSH连接到我们的服务器。如果你使用的是iPad,我建议使用Termius,因为它非常适合我们的需求。一旦我们登录到服务器,我们将安装code-server,这需要root/sudo权限。

安装非常简单;事实上,只需要一个终端命令。升级时也是相同的命令:

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

配置

安装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>code-server --link</code>

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

配置GitHub帐户后,我们将按Ctrl C停止进程。

运行<code>code-server --link</code>会提供一个登录URL。

在Termius中点击URL可以在Safari中打开它。

登录后,GitHub会授权你的帐户。

授权应用程序后,它应该会直接把你带到一个熟悉的界面!

回到我们的SSH会话,我们可以看到永久URL现在可用!请记住,只有在code-server运行时它才能工作。

设置WordPress主题依赖项

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

要开始使用_s,让我们安装Composer。因为我假设你与你的WordPress网站在同一服务器上,所以PHP已经安装了。虽然我可以在此处列出步骤,但Composer的网站已经比我可能做得更好。

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

<code>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</code>

这些命令添加了更新的Node PPA——因为Ubuntu包含的那个已经过时了(Node 10!)——然后安装Node,并获取其版本。

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

设置主题

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

完成所有这些后,让我们运行<code>code-server --link</code>,打开我们的浏览器并导航到我们的URL!

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

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

开发过程

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

关于此设置的一些说明

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

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

一些iPad专用提示

如果你计划像我一样使用iPad,以下是一些技巧,可以使你的体验更愉快!

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

以上是如何将iPad用于WordPress主题开发的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
有点提醒您伪元素是孩子,有点。有点提醒您伪元素是孩子,有点。Apr 19, 2025 am 11:39 AM

这里有一个带子元素的容器:

菜单具有'动态命中区域”菜单具有'动态命中区域”Apr 19, 2025 am 11:37 AM

飞翔的菜单!您需要在第二个菜单中实现悬停事件以显示更多菜单项的菜单,即您在棘手的领域中。一方面,他们应该

通过Webvtt改善视频可访问性通过Webvtt改善视频可访问性Apr 19, 2025 am 11:27 AM

“网络的力量在于其普遍性。每个人的访问无论残疾是一个重要方面。” - 蒂姆·伯纳斯 - 李

每周平台新闻:CSS :: Marker伪元素,预先渲染的Web组件,向您的网站添加Webmention每周平台新闻:CSS :: Marker伪元素,预先渲染的Web组件,向您的网站添加WebmentionApr 19, 2025 am 11:25 AM

在本周的综述中:datepickers正在让键盘用户头痛,一个新的Web组件编译器,有助于与Fouc进行战斗,我们终于获得了造型列表项目标记,以及在您的网站上获得网络攻击的四个步骤。

使宽度和灵活的物品一起玩得很好使宽度和灵活的物品一起玩得很好Apr 19, 2025 am 11:23 AM

简短的答案:您可能要寻找的是弹性折射和弹性基础。

位置粘性和桌子标头位置粘性和桌子标头Apr 19, 2025 am 11:21 AM

您可以位置:粘性;一个

每周平台新闻:HTML在搜索控制台,全局脚本范围中的HTML检查,Babel Envs添加默认查询查询每周平台新闻:HTML在搜索控制台,全局脚本范围中的HTML检查,Babel Envs添加默认查询查询Apr 19, 2025 am 11:18 AM

在本周的Web平台新闻世界中,Google搜索控制台可以更轻松地查看爬行的标记,我们了解到自定义属性

Indieweb和网络企业Indieweb和网络企业Apr 19, 2025 am 11:16 AM

Indieweb是一回事!他们将举行会议和一切。纽约客甚至在写这件事:

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。