右侧悬浮导航使用教程 饺子美化

这是一个功能丰富的WordPress右侧悬浮导航栏,提供快捷的页面操作和营销推广功能。

### ✨ 主要特性

– 🎯 固定在页面右侧,不随页面滚动消失

– 🎨 精美的渐变设计和动画效果

– ⚙️ 管理员可自定义各项参数

– 💾 设置自动保存到浏览器本地存储

– 📱 已移除手机端显示(桌面端专用)

—

## 安装使用

### 方法一: 直接集成到WordPress主题

1. **打开主题文件**

   – 找到主题的 `footer.php` 文件

   – 在 `</body>` 标签之前插入代码

导航按钮功能

### 1️⃣ 管理员设置按钮 🛠️

**位置**: 最上方(橙色按钮)  

**功能**: 打开设置弹窗,自定义导航栏各项参数  

**显示条件**:

– 仅管理员可见

– 仅在文章页和页面页显示

– 需要 `current_user_can(‘manage_options’)` 权限

**图标**: `fa-cog` (齿轮图标)

—

### 2️⃣ VIP会员按钮 💎

**位置**: 第二个(蓝色渐变按钮)  

**功能**: 展示VIP会员信息和购买入口  

**特效**:

– 脉冲动画效果(三个同心圆扩散)

– 悬停显示VIP信息面板

**面板内容**:

– VIP价格: ¥118 (原价 ¥298)

– 会员权益:

  – 微信QQ客服一对一

  – 源码永久免费升级

  – 大量专属精品源码

  – 免费下载全站资源

– 购买按钮跳转链接

**可自定义项**:

– 图标样式

– VIP价格

– 原价

– 开通链接

—

### 3️⃣ 每日签到按钮 📅

**位置**: 第三个(白色按钮)  

**功能**: 用户每日签到获取积分  

**交互**: 点击触发签到功能  

**可自定义项**:

– 图标样式

– 签到链接

– 提示文字

—

### 4️⃣ 在线客服按钮 💬

**位置**: 第四个(白色按钮)  

**功能**: 打开在线客服对话窗口  

**特效**: 右上角显示”在线”状态徽章(绿色脉冲动画)  

**可自定义项**:

– 图标样式

– 状态文字(在线/离线)

– 提示文字

—

### 5️⃣ 打赏按钮 🎁

**位置**: 第五个(白色按钮)  

**功能**: 跳转到打赏页面  

**交互**: 点击在新窗口打开打赏页面  

**可自定义项**:

– 图标样式

– 打赏页面链接

– 提示文字

—

### 6️⃣ 公众号二维码 📱

**位置**: 第六个(白色按钮)  

**功能**: 展示公众号二维码  

**交互**: 鼠标悬停显示二维码面板  

**可自定义项**:

– 图标样式

– 二维码图片URL

– 标题文字

– 描述文字

– 提示文字

—

### 7️⃣ 全屏按钮 🔳

**位置**: 第七个(白色按钮)  

**功能**: 切换浏览器全屏模式  

**交互**:

– 点击进入/退出全屏

– 图标动态切换(展开/压缩)

– 提示文字动态更新

**自动检测**:

– 进入全屏: 图标变为 `fa-compress`,提示”退出全屏”

– 退出全屏: 图标变为 `fa-expand`,提示”展开全屏”

—

### 8️⃣ 返回顶部 ⬆️

**位置**: 最下方(蓝色渐变按钮)  

**功能**: 平滑滚动到页面顶部  

**显示逻辑**:

– 页面滚动超过300px时显示

– 页面在顶部时自动隐藏

**动画效果**: 淡入淡出 + 平滑滚动

—

## 设置弹窗教程

### 打开设置弹窗

1. 以管理员身份登录WordPress

2. 访问任意文章页或页面

3. 点击右侧导航最上方的橙色”页面设置”按钮

### 设置界面说明

#### 📅 签到按钮设置

“`

┌─────────────────────────────────┐

│ 图标类名: fa-calendar-check-o   │

│ 链接地址: javascript:;          │

│ 提示文字: 每日签到              │

└─────────────────────────────────┘

“`

#### 💬 在线客服设置

“`

┌─────────────────────────────────┐

│ 图标类名: fa-comments-o         │

│ 状态文字: 在线                  │

│ 提示文字: 在线客服              │

└─────────────────────────────────┘

“`

#### 🎁 打赏按钮设置

“`

┌─────────────────────────────────┐

│ 图标类名: fa-gift               │

│ 链接地址: /dashang              │

│ 提示文字: 打赏我们              │

└─────────────────────────────────┘

“`

#### 📱 二维码设置

“`

┌─────────────────────────────────┐

│ 图标类名: fa-qrcode             │

│ 二维码图片URL: [图片地址]       │

│ 二维码标题: 扫码关注公众号      │

│ 二维码描述: 获取更多最新源码    │

│ 提示文字: 公众号二维码          │

└─────────────────────────────────┘

“`

#### 💎 VIP按钮设置

“`

┌─────────────────────────────────┐

│ 图标类名: fa-diamond            │

│ VIP价格: ¥118                   │

│ 原价: ¥298                      │

│ 开通链接: /vip-2                │

└─────────────────────────────────┘

“`

### 保存设置

1. 修改完参数后,点击右上角”保存设置”按钮

2. 系统会自动:

   – 更新页面显示

   – 保存到浏览器 localStorage

   – 显示”设置保存成功”提示

### 取消设置

– 点击”取消”按钮或弹窗外部区域

– 按 `ESC` 键关闭弹窗

– 关闭后不保存任何修改

—

## 常用图标类名参考

### Font Awesome 图标库

导航使用 Font Awesome 图标,常用图标类名:

| 图标 | 类名 | 说明 |

|——|——|——|

| 🏠 | `fa-home` | 首页 |

| 💎 | `fa-diamond` | VIP/钻石 |

| 📅 | `fa-calendar` | 日历 |

| ✅ | `fa-check-circle` | 签到 |

| 💬 | `fa-comments` | 评论/客服 |

| 🎁 | `fa-gift` | 礼物/打赏 |

| 📱 | `fa-qrcode` | 二维码 |

| ⚙️ | `fa-cog` | 设置 |

| ⬆️ | `fa-arrow-up` | 返回顶部 |

| 🔳 | `fa-expand` | 全屏展开 |

| 🔲 | `fa-compress` | 全屏退出 |

| 🎨 | `fa-paint-brush` | 主题 |

| 👤 | `fa-user` | 用户 |

| ❤️ | `fa-heart` | 收藏 |

| ⭐ | `fa-star` | 星标 |

| 📧 | `fa-envelope` | 邮件 |

| 📞 | `fa-phone` | 电话 |

查找更多图标

访问 [Font Awesome 官网](https://fontawesome.com/icons) 查找更多图标