
右侧悬浮导航使用教程 饺子美化
这是一个功能丰富的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) 查找更多图标
本站资源大多来自网络,如有侵犯权益请联系管理员,我们会第一时间审核删除。站内资源仅供学习测试,未经许可禁止商用,请在24小时内删除。
遇到付费内容?升级终身VIP即可全站免费畅享所有资源,可以联系我的QQ或者邮箱进行开通。
优源库博客QQ 群:901280286



















暂无评论内容