README

Proof of Concept (PoC) WordPress 主题，集成了 ViteJS。灵感来源于 wp-theme-vite-tailwind。

要求

• PHP 版本 >= 8.2
• NodeJS 版本 >= 18

开发模式下的简要设置

• 您有一个运行在 wp server 或任何其他开发工具（如 Laragon 或 Valet）上的 WordPress 项目。如果您使用 wp server，则 URL 将显示为 https://:8080；如果您使用 Laragon 或 Valet，则 URL 将显示为 your-wp-project.test。
• 转到 wp-content/themes 目录。然后使用以下命令下载 wp-vite-theme 项目。

composer create-project kresnasatya/wp-vite-theme <your-theme-name> && cd <your-theme-name>

• 运行 composer install。
• 运行 pnpm install 或 npm install。
• 运行 pnpm run dev 或 npm run dev。
• 在 .env 文件中将 VITE_SERVER 的值更改为 Vite URL。

如果您打开 Vite URL，它将包含空文件，因为它作为您资产（如 CSS 和 JavaScript）的运行者。

尝试编辑 index.php 或任何扩展名为 .php 的文件，然后保存它！Vite 将触发全重载事件，因此浏览器将自动重新加载页面。感谢 Vite 的 handleHotUpdate 钩子。

速查表.

如何在 WordPress + Vite 环境中处理 CSS 和 JS 中的静态资产？

在生产模式下，静态资产（如图像、字体）运行良好，但在开发模式下则不行！

为了使其正常工作，您需要从源文件夹设置一个符号链接或符号链接到目标文件夹。以下是一个示例。

# I store my images file in public directory on wp-vite-theme.
# I make a WordPress project called wpground.
# I make a WordPress theme called wp-vite-theme.
# The ~ is a tilde symbol mean a "home" symbol in macOS.

# Images
ln -s ~/wpground/wp-content/wp-vite-theme/public/images ~/wpground/images

# Fonts
ln -s ~/wpground/wp-content/wp-vite-theme/public/fonts ~/wpground/fonts

生产模式下的简要设置

• 停止 wp server 和 pnpm run dev 或 npm run dev。
• 在 .env 文件中将 VITE_ENV 的值从 development 更改为 production。
• 运行命令 pnpm run build 或 npm run build。
• 再次运行 wp server。

致谢

• 图片由 Tom Delanoue 在 Unsplash 提供
• 图片由 mono-log 在 Unsplash 提供