# moe-wordpress-theme

**Repository Path**: pigfei/moe-wordpress-theme

## Basic Information

- **Project Name**: moe-wordpress-theme
- **Description**: 一个二次元风格的 WordPress 主题，支持响应式设计、多级导航菜单、标准评论系统。
- **Primary Language**: PHP
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://imotao.com/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-01
- **Last Updated**: 2025-11-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: WordPress, wordpress-theme

## README

# MOE - WordPress 主题

![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)
![WordPress](https://img.shields.io/badge/WordPress-5.0%2B-blue.svg)
![PHP](https://img.shields.io/badge/PHP-7.4%2B-purple.svg)
![License](https://img.shields.io/badge/license-GPL%20v2%2B-green.svg)

一个精致优雅的二次元萌系 WordPress 主题，专为个人博客和内容创作者设计。

[演示站点](https://imotao.com) | [下载](https://github.com/motao123/moe-wordpress-theme/releases) | [问题反馈](https://github.com/motao123/moe-wordpress-theme/issues)

---

## ✨ 主要特性

### 🎨 精美设计
- **二次元萌系风格** - 可爱粉色系配色，温柔治愈
- **完全响应式** - 完美适配 PC、平板、手机等所有设备
- **暗色模式** - 一键切换，支持系统主题检测，快捷键 Ctrl/Cmd+Shift+D
- **自定义配色** - 可视化调整主题色、渐变色、边框色等

### 🚀 强大功能
- ❤️ **文章点赞** - Ajax 无刷新点赞，支持 IP/Cookie 追踪
- 📜 **Ajax 加载更多** - 无需翻页，流畅浏览体验
- 📑 **文章目录（TOC）** - 自动生成，快速定位，带滚动高亮
- 📊 **阅读进度条** - 实时显示阅读进度
- 🔗 **相关文章推荐** - 智能推荐，增加浏览量
- 🔄 **社交分享** - 支持微博、QQ、豆瓣等平台
- 🖼️ **图片灯箱** - 优雅的图片查看体验
- 📋 **代码一键复制** - 便捷的代码复制功能
- 🍞 **面包屑导航** - SEO 友好的导航路径
- 🔍 **搜索优化** - 关键词高亮+相关标签显示
- ⏱️ **字数统计** - 自动计算阅读时间
- 🔠 **字体调节** - A- A A+ 三档字体大小
- 📅 **归档时间轴** - 美化的时间轴视图
- 💬 **回到评论区按钮** - 快速跳转到评论
- ©️ **版权声明增强** - CC 协议支持
- ❌ **404 页面优化** - 推荐内容+搜索功能
- 🔗 **友链检测** - 自动检测失效链接
- 🔐 **SEO 增强** - Open Graph、Schema.org、自动描述

### 🎯 WordPress 功能
- ✅ 多级导航菜单（支持无限层级）
- ✅ 自定义 Logo
- ✅ 文章特色图片
- ✅ 小工具系统（10+ 自定义小工具）
- ✅ 主题自定义器（Customizer）
- ✅ 文章浏览量统计
- ✅ 评论系统完整支持
- ✅ 翻译就绪

---

## 📦 安装

### 方法一：后台安装（推荐）

1. 下载主题压缩包 `moe-v1.0.0.zip`
2. 登录 WordPress 后台
3. 进入 **外观** → **主题**
4. 点击 **添加** → **上传主题**
5. 选择压缩包，点击 **现在安装**
6. 安装完成后，点击 **启用**

### 方法二：FTP 安装

1. 解压主题压缩包
2. 通过 FTP 将 `moe` 文件夹上传到 `/wp-content/themes/` 目录
3. 登录 WordPress 后台
4. 进入 **外观** → **主题**
5. 找到 MOE 主题，点击 **启用**

---

## ⚙️ 配置指南

### 1. 基础设置

#### 网站标识
**外观** → **自定义** → **网站标识**
- 上传网站 Logo
- 设置网站标题和副标题
- 上传网站图标（Favicon）

#### 导航菜单
**外观** → **菜单**
1. 创建新菜单
2. 添加页面、分类、自定义链接
3. 拖拽调整顺序，向右缩进创建子菜单
4. 分配到 **主导航菜单** 位置

---

### 2. 颜色主题

**外观** → **自定义** → **颜色主题**

| 选项 | 默认值 | 说明 |
|------|--------|------|
| 主题色 | `#24a5db` | 主色调（按钮、链接悬停等） |
| 链接颜色 | `#000000` | 文章内链接颜色 |
| 页眉渐变起始色 | `#FFF5F7` | 归档/搜索页眉背景渐变起始 |
| 页眉渐变结束色 | `#FFE8ED` | 归档/搜索页眉背景渐变结束 |
| 页眉边框颜色 | `#FFB6C1` | 归档/搜索页眉边框 |
| 页眉标题颜色 | `#E91E63` | 归档/搜索页眉标题 |

---

### 3. 背景设置

#### 个人信息区域背景
**外观** → **自定义** → **个人信息区域**
- 上传背景图片（推荐尺寸：1920x600px）
- 调整显示模式、位置、重复、固定
- 设置背景遮罩透明度

#### 网站背景图片
**外观** → **自定义** → **网站背景图片**
- 上传整体背景图（推荐尺寸：1920x1080px）
- 调整显示模式、位置、重复、固定
- 设置背景透明度

---

### 4. 社交链接

**外观** → **自定义** → **社交链接**
- 微博链接
- QQ 链接
- GitHub 链接

---

### 5. 底部设置

**外观** → **自定义** → **页脚设置**
- ICP 备案号
- 公安备案号
- 自定义版权文字
- 友情链接设置

---

### 6. 小工具配置

**外观** → **小工具**

推荐布局：
```
主侧边栏
├─ MOE - 博主信息
├─ 搜索
├─ MOE - 热门文章
├─ MOE - 最新文章
├─ MOE - 随机文章
├─ 最新评论
├─ MOE - 分类目录
├─ MOE - 标签云
├─ 归档
└─ MOE - 友情链接
```

#### 可用小工具
- **MOE - 博主信息** - 显示博主头像、名称、描述
- **MOE - 分类目录** - 带文章数的分类列表
- **MOE - 标签云** - 动态大小的标签云
- **MOE - 热门文章** - 根据浏览量排序
- **MOE - 最新文章** - 最新发布的文章
- **MOE - 随机文章** - 随机推荐文章
- **MOE - 最新评论** - 最新评论列表
- **MOE - 友情链接** - 友情链接列表
- **MOE - 归档** - 月度归档
- **MOE - 自定义文本** - 自定义HTML内容

---

## 🎨 自定义CSS

**外观** → **自定义** → **额外 CSS**

### 示例：修改主题色为红色
```css
:root {
    --moe-primary-color: #ff6b6b;
}

.nav > li > a:hover,
.nav > li.current_page_item > a {
    color: #ff6b6b;
}

a:hover {
    color: #ee5a5a;
}
```

---

## 🛠️ 系统要求

| 项目 | 最低要求 | 推荐 |
|------|---------|------|
| **WordPress** | 5.0+ | 最新版 |
| **PHP** | 7.4+ | 8.0+ |
| **MySQL** | 5.6+ | 5.7+ |

---

## 📝 常见问题

### 1. 如何添加友情链接？

**方法一：使用菜单**
1. 创建新菜单（如"友情链接"）
2. 添加自定义链接
3. 在 **外观** → **自定义** → **页脚设置** 中选择该菜单

**方法二：使用 Link Manager 插件**
1. 安装并启用 **Link Manager** 插件
2. 进入 **链接** → **添加** 添加友情链接
3. 在小工具中启用 **MOE - 友情链接**

---

### 2. 如何切换到暗色模式？

**三种方式**：
1. 点击页面顶部的月亮图标
2. 使用快捷键 `Ctrl/Cmd + Shift + D`
3. 主题会自动检测系统主题偏好

---

### 3. 如何显示文章浏览量？

浏览量会自动统计，无需额外配置。数据存储在文章的 `post_views_count` 元数据中。

---

### 4. 如何自定义头部背景图？

**外观** → **自定义** → **个人信息区域** → **背景图片**
- 上传图片（推荐：1920x600px）
- 调整显示效果
- 发布保存

默认使用 `images/default.jpg`，您可以替换或上传新图片。

---

### 5. 代码高亮支持吗？

主题支持基础代码显示和一键复制功能。如需语法高亮，推荐安装：
- **Highlighting Code Block** 插件
- **SyntaxHighlighter Evolved** 插件

---

## 🔧 性能优化建议

### 1. 启用缓存
推荐插件：
- **WP Super Cache**
- **W3 Total Cache**
- **LiteSpeed Cache**（如果使用 LiteSpeed 服务器）

### 2. 图片优化
推荐插件：
- **Smush** - 图片压缩
- **WebP Express** - 转换为 WebP 格式
- **Lazy Load** - 延迟加载（主题已内置基础支持）

### 3. CDN 加速
- 使用 CDN 加速静态资源
- 推荐：阿里云 CDN、腾讯云 CDN、Cloudflare

---

## 🤝 参与贡献

欢迎提交 Issue 和 Pull Request！

### 开发环境设置

1. **Clone 仓库**
```bash
git clone https://github.com/motao123/moe-wordpress-theme.git
cd moe-wordpress-theme
```

2. **开发模式**
修改 `functions.php` 中的开发模式：
```php
define( 'MOE_DEV_MODE', true );
```

3. **文件结构**
```
moe/
├── css/               # 样式文件
├── js/                # JavaScript 文件
├── inc/               # 功能模块
│   ├── widgets.php           # 小工具
│   ├── customizer.php        # 自定义器
│   ├── dark-mode.php         # 暗色模式
│   ├── post-likes.php        # 文章点赞
│   ├── ajax-load-more.php    # Ajax 加载
│   └── ...                   # 其他功能
├── images/            # 图片资源
├── fonts/             # 字体文件
├── languages/         # 翻译文件
└── *.php              # 模板文件
```

---

## 📄 许可证

本主题采用 [GPL v2](http://www.gnu.org/licenses/gpl-2.0.html) 或更高版本许可。

---

## 🎉 鸣谢

- Font Awesome 图标库
- WordPress 社区

---

## 📮 联系作者

- **作者**：陌涛
- **网站**：[https://imotao.com](https://imotao.com)
- **GitHub**：[https://github.com/motao123](https://github.com/motao123)

---

## 📊 更新日志

查看完整的更新日志：[CHANGELOG.md](CHANGELOG.md)

### v1.0.0 (2025-11-01)
- 🎉 首次正式发布
- ✨ 完整的 WordPress 主题功能
- 🎨 二次元萌系设计风格
- 🌙 暗色模式支持
- 📱 完全响应式设计
- ⚡ 18+ 增强功能
- 🔐 SEO 优化
- 🎯 性能优化
- 🛡️ 安全增强

---

**如果您喜欢这个主题，欢迎给个 ⭐ Star！**