跳至主要内容
Deno 2 终于来了 🎉️
了解更多
Deno dinosaur drawing a fansastic line

新鲜的 WordPress 主题介绍

WordPress 是最成功的內容管理系統 (CMS),在 2022 年為 65.2% 的基於 CMS 的網站和 43.2% 的所有網站(在互聯網上)提供支持,並且仍在不斷增長。

但在 WordPress 上構建會遇到一些挑戰。您可以修改基於舊技術(例如 jQuery)的可用主題,或者花時間設置WordPress 的 REST API(“無頭”模式)與現代 Web 框架(如 React 或 Vue)一起使用。我們認為還有更好的方法。

Fresh 是一個現代 Web 框架,它通過服務器端渲染和島嶼架構來擁抱漸進增強(默認情況下它不向客戶端發送任何 JavaScript)。在無頭 WordPress 上使用 Fresh 主題不僅允許更有效率的開發(原生 TypeScript 支持,無構建步驟),而且為訪問者提供更快的網站體驗.

我們已經開源了兩個基於 Fresh 的 WordPress 主題,向您展示入門有多容易。

上圖顯示了建議的網站開發工作流程。開發人員在 Fresh 中開發前端,而網站所有者/內容作者在 WordPress 控制面板中創建和管理內容。請注意,無需額外開發 WordPress 控制面板,因為它對訪問者不可見。

Fresh 作为无头 WordPress 的前端

我们在 6 月发布了 Fresh 的稳定版本,并在 9 月发布了v1.1,其中包含许多改进。

Fresh 非常适合作为无头 WordPress 的前端,原因如下:

  1. Fresh 不需要构建步骤。
  2. 开箱即用地提供 TypeScript 支持。
  3. 您可以快速轻松地访问现代前端工具/库。

无需构建步骤

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 展示页面.

Fresh WordPress 主题

我们已经开源了两个基于 Fresh 的 WordPress 主题,由无头 WordPress 提供支持。这些主题允许您开始使用 Fresh 和 WordPress 开发网站。

源代码:https://github.com/denoland/fresh-wordpress-themes

博客现场演示:https://wp-blog-example.deno.dev/

Screenshot of a Blog Fresh WordPress Theme


商店现场演示:https://wp-sweets-co.deno.dev/

Screenshot of a E-commerce Fresh WordPress Theme

您可以按照以下步骤在自己的机器上尝试这些主题

博客

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/。您可以通过 https://127.0.0.1/wp-admin(用户名:user,密码:password)上的 WordPress 控制面板来管理其内容。

商店

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/。您可以通过 https://127.0.0.1/wp-admin(用户名:user,密码:password)上的 WordPress 控制面板来管理其内容。

请注意,BlogShop 主题使用 WordPress 服务器的不同设置。确保在正确的目录中运行 deno task docker 命令。

WordPress 托管选项

在互联网上有很多托管 WordPress 的选择。许多云提供商拥有专门指南模板专门用于 WordPress。还有一些专门用于 WordPress 的托管服务,例如 BluehostDreamHostSiteGround 等。您可以从这些选项中选择最适合您需求的选项。

在互联网上也有很多关于如何扩展您的 WordPress 实例的资源。

下一步

我们计划基于此架构开发更多主题,这些主题涵盖更广泛的网站,例如电子商务、预订平台等。

如果您有兴趣使用 Fresh + WordPress 构建,请尝试Fresh WordPress 主题,并在GitHub 问题DiscordTwitter 上给我们任何反馈。