126 lines
3.0 KiB
Markdown
126 lines
3.0 KiB
Markdown
# CyyWordpress
|
||
|
||
一个基于 **Bulma 1.x** + **Underscores (_s)** 的现代 WordPress 主题，专为中文博客场景设计。
|
||
|
||
---
|
||
|
||
## 环境要求
|
||
|
||
| 依赖 | 最低版本 |
|
||
|------|---------|
|
||
| PHP | 8.1 |
|
||
| WordPress | 6.0 |
|
||
| Node.js | 20（见 `.nvmrc`）|
|
||
| npm | 10+ |
|
||
|
||
---
|
||
|
||
## 本地开发环境配置
|
||
|
||
```bash
|
||
# 1. 安装正确的 Node.js 版本（推荐使用 nvm）
|
||
nvm use # 读取 .nvmrc 自动切换到 Node 20
|
||
|
||
# 2. 安装前端依赖
|
||
npm install
|
||
|
||
# 3. 启动 Vite 开发服务器（HMR）
|
||
npm run dev
|
||
|
||
# 4. 生产构建（含 contenthash 文件指纹）
|
||
npm run build
|
||
|
||
# 5. 生成 RTL 样式
|
||
npm run build:rtl
|
||
```
|
||
|
||
> **注意：** 开发时，将 WordPress 的 `WP_HOME` 指向 `http://localhost:3000`，
|
||
> Vite 会代理所有请求到本地 WordPress 实例并启用热更新。
|
||
|
||
---
|
||
|
||
## 构建流程说明
|
||
|
||
| 命令 | 说明 |
|
||
|------|------|
|
||
| `npm run dev` | 启动 Vite 开发服务器（端口 3000，支持 HMR）|
|
||
| `npm run build` | 生产构建，输出到 `assets/`（含 contenthash）|
|
||
| `npm run build:rtl` | 生成 `assets/css/main-rtl.css` |
|
||
| `npm run lint` | 运行 ESLint + StyleLint |
|
||
| `npm run type-check` | TypeScript 类型检查（不生成文件）|
|
||
|
||
构建产物由 `inc/class-cyywordpress-assets.php` 读取 `assets/.vite/manifest.json`
|
||
自动解析带 hash 的文件名注入到 `wp_enqueue_*`。
|
||
|
||
---
|
||
|
||
## SCSS 变量覆盖（子主题）
|
||
|
||
在子主题的入口 SCSS 文件中，在 `@use 'cyywordpress/scss/abstracts/variables'` **之前**
|
||
重新声明你希望覆盖的 CSS 自定义属性：
|
||
|
||
```scss
|
||
:root {
|
||
--color-primary: #6366f1; /* 换成紫色主题 */
|
||
--color-primary-dark: #4f46e5;
|
||
}
|
||
```
|
||
|
||
所有组件均使用 `var(--color-primary)` 引用，覆盖后全局生效，无需修改源文件。
|
||
|
||
---
|
||
|
||
## Customizer 可配置项
|
||
|
||
后台路径：**外观 → 自定义 → 首页横幅**
|
||
|
||
| 选项 | 说明 | 默认值 |
|
||
|------|------|--------|
|
||
| 欢迎横幅文字 | 首页/文章列表顶部的通知文字 | `欢迎来到这！Hello everyone.` |
|
||
| 显示欢迎横幅 | 是否在首页显示横幅 | 勾选 |
|
||
|
||
---
|
||
|
||
## 导航菜单位置
|
||
|
||
| 位置标识 | 显示位置 |
|
||
|---------|---------|
|
||
| `menu-1` | 顶部主导航 |
|
||
| `menu-2` | 页脚导航 |
|
||
| `social` | 页脚社交媒体图标链接 |
|
||
|
||
---
|
||
|
||
## Widget 区域
|
||
|
||
| 区域 ID | 位置 |
|
||
|---------|------|
|
||
| `sidebar-1` | 文章/页面侧边栏 |
|
||
| `sidebar-footer-1` | 页脚左列 |
|
||
| `sidebar-footer-2` | 页脚中列 |
|
||
| `sidebar-footer-3` | 页脚右列 |
|
||
| `sidebar-header` | 导航栏右侧 |
|
||
|
||
---
|
||
|
||
## 块模式 (Block Patterns)
|
||
|
||
注册在 `patterns/` 目录，可在编辑器 **插入块 → 模式 → CyyWordpress** 中使用：
|
||
|
||
- **Hero 横幅** — 全宽渐变横幅 + CTA 按钮
|
||
- **文章卡片网格** — 三列响应式卡片布局
|
||
- **行动号召区域** — 居中标题 + 双按钮
|
||
|
||
---
|
||
|
||
## PHP 代码规范检查
|
||
|
||
```bash
|
||
composer install
|
||
./vendor/bin/phpcs
|
||
./vendor/bin/phpcbf # 自动修复
|
||
```
|
||
|
||
规范基于 WordPress Coding Standards + PHPCompatibility（PHP 8.1+）。
|
||
|