介绍全新的 WordPress 主题
WordPress 是最成功的内容管理系统 (CMS),在 2022 年,为 65.2% 的基于 CMS 的网站和 43.2% 的所有网站(互联网上的)提供支持——并且持续增长。
但是基于 WordPress 构建网站会带来一些挑战。你可以修改基于旧技术(例如 jQuery
)的现有主题,或者花费时间设置WordPress 的 REST API(“无头”模式),并结合 React 或 Vue 等现代 Web 框架。我们相信有一种更好的方法。
Fresh 是一个现代 Web 框架,它通过服务器端渲染和岛屿架构拥抱渐进增强(默认情况下,它不会向客户端发送任何 JavaScript)。在无头 WordPress 上使用 Fresh 主题不仅可以提高开发效率(原生 TypeScript 支持,无需构建步骤),而且还为访问者提供更快的网站体验。
我们已经开源了两个基于 Fresh 构建的 WordPress 主题,向你展示入门有多么容易。

上图显示了建议的网站开发工作流程。开发者在 Fresh 中开发前端,而网站所有者/内容作者在 WordPress 仪表板中创建和管理内容。请注意,无需额外开发 WordPress 仪表板,因为它不会对访问者可见。
Fresh 作为无头 WordPress 的前端
我们在 6 月发布了Fresh的稳定版本,并在 9 月发布了v1.1,其中包含许多改进。
Fresh 非常适合作为无头 WordPress 的前端,原因如下:
- Fresh 不需要构建步骤。
- 开箱即用地支持 TypeScript。
- 你可以快速轻松地访问现代前端工具/库。
无需构建步骤
Fresh 没有构建步骤。对于每个请求,Fresh 都会编译所有内容并及时将其发送到浏览器。也没有单独的 install
步骤 - 所有依赖项都会在首次运行时安装并缓存。
另一方面,大多数基于 Node.js 的框架(例如 Next.js、Nuxt、Remix 等)都要求你首先安装应用程序的依赖项,然后在部署之前构建资产。
Fresh 和 PHP/WordPress 之间开发站点的所需心智模型非常相似,因此现有的 PHP/WordPress 开发人员可以快速适应 Fresh 开发环境。
TypeScript 支持
TypeScript 对于高效地开发应用程序非常重要,因为它可以在运行任何代码之前捕获大量错误。但是,当使用其他 JavaScript 框架时,设置和配置 TypeScript 可能很繁琐。
由于 Fresh 基于 Deno,因此 Fresh 开箱即用地支持 TypeScript。它允许你快速开始使用 TypeScript,而无需任何配置。特别是凭借我们强大的VS Code支持,你可以立即开始编写 TypeScript。
轻松访问现代工具
Fresh 集成了 Preact,它是 React 的轻量级版本。你可以用响应式风格编写网页的交互。Fresh 还有官方的 twind 插件,它允许你在代码中编写 Tailwind 类来进行样式设置。
你还可以通过 CDN(例如 https://esm.sh/)导入 npm 模块以进行前端开发。由于 X-TypeScript-Types 自定义 HTTP 标头,这些模块默认带有类型注解。有关哪些模块可以与 Fresh 一起使用的示例,请查看我们的Fresh Showcase 页面。
Fresh WordPress 主题
我们已经开源了两个基于 Fresh 构建的 WordPress 主题,它们由无头 WordPress 驱动。这些主题使你可以开始使用 Fresh 和 WordPress 开发网站。
源代码:https://github.com/denoland/fresh-wordpress-themes
博客在线演示:https://wp-blog-example.deno.dev/
商店在线演示:https://wp-sweets-co.deno.dev/
你可以按照以下步骤在自己的机器上试用这些主题:
博客
git clone https://github.com/denoland/fresh-wordpress-themes.git
cd fresh-wordpress-themes/blog
deno task docker
然后在同一目录中打开另一个终端
deno task start
然后访问 https://127.0.0.1:8000/。你可以通过 WordPress 仪表板在 https://127.0.0.1/wp-admin 管理其内容(用户名:user
,密码:password
)。
商店
git clone https://github.com/denoland/fresh-wordpress-themes.git
cd fresh-wordpress-themes/corporate
deno task docker
然后在同一目录中打开另一个终端
deno task start
然后访问 https://127.0.0.1:8000/。你可以通过 WordPress 仪表板在 https://127.0.0.1/wp-admin 管理其内容(用户名:user
,密码:password
)。
请注意,博客
和商店
主题对 WordPress 服务器使用了不同的设置。请确保你在正确的目录中运行 deno task docker
命令。
WordPress 托管选项
在互联网上托管 WordPress 有很多选择。许多云提供商提供 专门的 指南 和 模板 专门用于 WordPress。还有专门用于 WordPress 的托管服务,例如 Bluehost、DreamHost、SiteGround 等。你可以从这些选项中选择最适合你需求的。
互联网上也有许多关于如何扩展 WordPress 实例的资源。
下一步是什么
我们计划基于此架构开发更多主题,涵盖更广泛的网站类型,例如电子商务、预订平台等。
如果你有兴趣使用 Fresh + WordPress 进行构建,请尝试Fresh WordPress 主题,并在 GitHub issues、Discord 或 Twitter 上向我们提供任何反馈。