# 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+)。