# sUx WordPress 主题

## 主题概述

sUx 是一个专为外贸企业设计的WordPress主题，具有现代商务专业风格，色彩鲜明极具特色。该主题完美支持商品展示功能，并且完全响应式，兼容各种主流浏览器。

### 主要特点

- ✅ **商务专业设计** - 现代化的设计风格，适合外贸企业使用
- ✅ **色彩鲜明** - 极具视觉冲击力的配色方案
- ✅ **响应式布局** - 完美适配桌面、平板、手机等设备
- ✅ **商品展示功能** - 强大的产品展示和管理系统
- ✅ **跨浏览器兼容** - 支持所有主流浏览器
- ✅ **代码简洁** - 高效、清晰的代码结构
- ✅ **SEO友好** - 优化的HTML结构和元数据
- ✅ **多语言支持** - 支持WordPress多语言插件

### 浏览器兼容性

| 浏览器 | 版本 | 状态 | 备注 |
|--------|------|------|------|
| Chrome | 60+ | ✅ 完全支持 | 推荐浏览器 |
| Firefox | 55+ | ✅ 完全支持 | 完全兼容 |
| Safari | 11+ | ✅ 完全支持 | Mac 和 iOS |
| Edge | 79+ | ✅ 完全支持 | 基于 Chromium |
| Internet Explorer | 11 | ✅ 基本支持 | 功能降级 |

### 功能特性

#### 1. 产品管理系统
- 自定义产品文章类型
- 产品分类和标签支持
- 产品价格、SKU、库存管理
- 产品图片轮播
- 产品详情页面

#### 2. 页面模板
- 首页模板 (front-page.php)
- 全宽页面模板 (page-full-width.php)
- 产品详情模板 (single-product.php)
- 产品归档模板 (archive-product.php)

#### 3. 响应式设计
- 移动优先的设计理念
- 弹性网格布局
- 触摸友好的导航
- 优化的加载性能

#### 4. 可访问性支持
- WCAG 2.1 AA 标准
- 键盘导航支持
- 屏幕阅读器优化
- 高对比度模式支持

## 安装说明

### 系统要求

- WordPress 5.0 或更高版本
- PHP 7.4 或更高版本
- MySQL 5.6 或更高版本

### 安装步骤

1. **下载主题文件**
   ```bash
   # 将主题文件夹复制到WordPress主题目录
   cp -r /path/to/sUx /wp-content/themes/
   ```

2. **激活主题**
   - 登录WordPress管理后台
   - 进入 "外观" → "主题"
   - 找到 "sUx" 主题并点击激活

3. **配置主题设置**
   - 进入 "外观" → "自定义"
   - 配置主题颜色、联系信息等选项

### 必需插件

推荐安装以下插件以获得最佳体验：

- **Contact Form 7** - 联系表单功能
- **Yoast SEO** - 搜索引擎优化
- **WPML** (可选) - 多语言支持

## 使用指南

### 产品管理

#### 添加产品

1. 在WordPress后台，进入 "产品" → "添加新产品"
2. 填写产品信息：
   - 产品标题和描述
   - 产品图片
   - 产品价格和SKU
   - 产品分类和标签
3. 在 "产品信息" 框中填写：
   - 产品价格
   - 库存状态
   - 特色产品标记
   - 产品链接
4. 点击 "发布"

#### 产品分类

1. 进入 "产品" → "分类"
2. 添加分类名称和描述
3. 设置分类层级结构
4. 保存分类

#### 产品标签

1. 进入 "产品" → "标签"
2. 添加产品标签
3. 在编辑产品时添加相关标签

### 主题自定义

#### 颜色设置

进入 "外观" → "自定义" → "主题颜色"：

- **主色调** - 网站主要颜色（默认：#0066cc）
- **次要色调** - 强调和按钮颜色（默认：#ff6600）

#### 联系信息

进入 "外观" → "自定义" → "联系信息"：

- **公司邮箱** - 显示在顶部栏
- **公司电话** - 显示在顶部栏
- **公司地址** - 显示在页脚

#### 社交媒体链接

在主题自定义器中设置：

- Facebook 链接
- Twitter 链接
- LinkedIn 链接
- YouTube 链接

### 页面模板使用

#### 全宽页面

创建新页面时，在 "页面属性" 中选择 "全宽页面" 模板。

适用于：关于我们、联系方式、服务介绍等需要全宽显示的页面。

#### 产品页面

产品使用专门的产品文章类型，具有以下特点：

- 产品图片轮播
- 产品规格表格
- 相关产品推荐
- 询价表单

### 自定义CSS

如果需要自定义样式，可以：

1. 使用主题自定义器的 "额外CSS" 选项
2. 创建子主题并添加自定义样式文件

#### 示例自定义CSS

```css
/* 修改主色调 */
:root {
    --sux-primary-color: #your-color;
    --sux-secondary-color: #your-accent-color;
}

/* 自定义按钮样式 */
.btn-hero {
    border-radius: 25px;
    text-transform: uppercase;
}

/* 修改字体 */
body {
    font-family: 'Your Custom Font', sans-serif;
}
```

## 代码结构

### 文件组织

```
sUx/
├── assets/
│   ├── css/
│   │   ├── responsive.css    # 响应式样式
│   │   └── custom.css        # 自定义样式
│   ├── js/
│   │   ├── theme.js          # 主题主要JS
│   │   └── navigation.js     # 导航JS
│   └── images/              # 图片资源
├── inc/
│   └── post-types.php       # 自定义文章类型
├── template-parts/          # 模板部件
├── functions.php            # 主题函数
├── style.css              # 主样式文件
├── index.php              # 首页模板
├── header.php             # 头部模板
├── footer.php             # 页脚模板
├── sidebar.php            # 侧边栏模板
├── front-page.php         # 首页专用模板
├── page-full-width.php    # 全宽页面模板
├── single-product.php     # 产品详情模板
├── archive-product.php    # 产品归档模板
└── README.md             # 说明文档
```

### 主要功能函数

#### 主题设置函数
- `sux_setup()` - 主题初始化设置
- `sux_scripts()` - 脚本和样式加载
- `sux_widgets_init()` - 小工具区域注册

#### 自定义文章类型
- `sux_register_product_post_type()` - 产品文章类型
- `sux_register_testimonial_post_type()` - 客户评价文章类型

#### 辅助函数
- `sux_breadcrumb()` - 面包屑导航
- `sux_get_product_info()` - 获取产品信息
- `sux_custom_css()` - 输出自定义CSS

## 性能优化

### 已实施的优化措施

1. **图片优化**
- 支持WebP格式
- 延迟加载功能
- 响应式图片

2. **CSS优化**
- 压缩和合并CSS文件
- 关键CSS内联
- 媒体查询优化

3. **JavaScript优化**
- 异步加载脚本
- 最小化DOM操作
- 事件委托优化

4. **缓存支持**
- 浏览器缓存策略
- 静态资源缓存
- 数据库查询缓存

### 性能测试指标

- **首次内容绘制 (FCP)**: < 1.5秒
- **最大内容绘制 (LCP)**: < 2.5秒
- **累积布局偏移 (CLS)**: < 0.1
- **首次输入延迟 (FID)**: < 100毫秒

## 安全性

### 安全措施

1. **数据验证**
- 所有用户输入经过严格验证
- XSS攻击防护
- SQL注入防护

2. **文件安全**
- 防止直接访问核心文件
- 文件权限检查
- 上传文件类型限制

3. **权限控制**
- 基于角色的访问控制
- Nonce验证机制
- 操作日志记录

### 安全最佳实践

- 定期更新WordPress核心和插件
- 使用强密码
- 启用HTTPS
- 定期备份网站

## 更新日志

### v1.0.0 (2024-12-01)
- ✅ 初始版本发布
- ✅ 基础功能实现
- ✅ 产品管理系统
- ✅ 响应式设计
- ✅ 浏览器兼容性

### 计划功能 (v1.1.0)
- 🔄 WooCommerce集成
- 🔄 更多页面模板
- 🔄 高级定制选项
- 🔄 性能进一步优化

## 技术支持

### 获取帮助

如果在使用过程中遇到问题，可以通过以下方式获取帮助：

1. **文档查看** - 阅读完整的主题文档
2. **社区支持** - 在WordPress社区论坛提问
3. **技术支持** - 联系主题开发者

### 常见问题

#### Q: 主题不显示正确的样式？
A: 请检查是否正确激活了主题，并清除了浏览器缓存。

#### Q: 产品图片不显示？
A: 请确保服务器支持GD库，并检查文件权限。

#### Q: 自定义CSS不生效？
A: 请检查CSS语法是否正确，并考虑使用子主题。

### 主题开发团队

- **主题名称**: sUx
- **版本**: 1.0.0
- **许可证**: GNU General Public License v2 or later
- **作者**: Your Name
- **官方网站**: https://yourwebsite.com

---

*感谢您选择sUx主题！如有任何问题或建议，请随时联系我们。*