🎯 WP弹窗广告插件

一款功能强大、易于使用的WordPress弹窗广告插件，支持多种内容类型、智能触发条件和完整的样式自定义。

📋 相关截图：

✨ 功能特性

🎨 多种广告类型支持

• 文字广告 – 支持富文本格式，可添加链接和基本样式
• 图片广告 – 集成WordPress媒体库，支持任意尺寸图片
• 视频广告 – 支持MP4、WebM等主流视频格式
• HTML广告 – 完全自定义HTML/CSS代码，无限可能

⚡ 智能触发机制

• 页面加载触发 – 访客进入页面时立即显示
• 滚动百分比触发 – 精确控制滚动位置（0-100%）
• 时间延迟触发 – 毫秒级时间控制（支持1秒-300秒）
• 元素点击触发 – 支持任意CSS选择器
• 滚动到元素触发 – 当指定元素进入视窗时触发
• 退出意图检测 – 智能识别用户离开意图

🎛️ 完整样式控制

• 颜色系统
• 背景颜色选择器
• 文字颜色自定义
• 边框颜色设置
• 支持16进制和RGB格式
• 透明度控制
• 遮罩层透明度（0-1.0精确控制）
• 弹窗背景透明度（独立设置）
• 移动端特殊优化处理
• 实时预览效果
• 尺寸参数
• 弹窗宽度（像素/百分比）
• 最大高度设置
• 边框宽度调整
• 圆角半径控制
• 字体设置
• 字体大小调节（12px-24px）
• 文字对齐方式
• 行高设置

📱 设备兼容性

• 全平台支持
• Windows/macOS/Linux桌面端
• iOS Safari/Android Chrome移动端
• 微信内置浏览器兼容
• 各种平板设备适配
• 响应式设计
• 自适应屏幕尺寸
• 移动端专门优化
• 触摸友好交互
• 横竖屏自动适配

🛡️ 安全与性能

• 安全防护
• XSS攻击防护
• SQL注入防护
• CSRF验证机制
• 数据输入验证和清理
• 性能优化
• 轻量级代码设计（< 500KB）
• 按需加载静态资源
• 数据库查询优化
• 前端缓存支持

📦 安装方法

方式一：WordPress后台安装

1. 下载插件ZIP文件
2. 登录WordPress后台
3. 进入”插件” → “安装插件”
4. 点击”上传插件”
5. 选择ZIP文件并安装
6. 激活插件

方式二：FTP上传安装

1. 解压插件文件
2. 通过FTP上传到 /wp-content/plugins/ 目录
3. 在WordPress后台激活插件

方式三：命令行安装

cd /path/to/wordpress/wp-content/plugins/
wget [plugin-download-url]
unzip wp-popup-ads-plugin.zip

🎯 使用指南

第一步：创建弹窗广告

1. 在WordPress后台找到”弹窗广告”菜单
2. 点击”添加新广告”
3. 填写广告名称和描述
4. 选择广告类型（文字/图片/视频/HTML）
5. 输入相应的内容

第二步：配置触发条件

1. 在”触发设置”区域选择触发条件
2. 根据选择的条件配置具体参数：

• 滚动百分比：设置0-100的百分比值
• 时间延迟：设置1-300秒的延迟时间
• 点击元素：输入CSS选择器（如 .button, #banner）
• 滚动元素：输入目标元素的CSS选择器

第三步：设置显示参数

1. 选择设备类型（全部/桌面/移动）
2. 设置显示顺序（数字越小优先级越高）
3. 选择是否激活该弹窗

第四步：自定义样式

1. 在”样式设置”标签页中调整外观：

• 基础样式：颜色、字体、尺寸
• 透明度设置：遮罩和背景透明度
• 高级设置：边框、圆角、阴影等

1. 使用实时预览功能查看效果
2. 满意后保存设置

第五步：测试与发布

1. 使用预览功能测试弹窗效果
2. 检查在不同设备上的显示效果
3. 确认无误后激活弹窗
4. 监控弹窗的显示效果和用户反馈

⚙️ 技术规格

系统要求

• WordPress版本：5.0 或更高
• PHP版本：7.4 或更高
• MySQL版本：5.6 或更高
• 内存要求：建议128MB以上
• 磁盘空间：< 2MB

浏览器兼容性

浏览器	最低版本	状态
Chrome	60+	✅ 完全支持
Firefox	60+	✅ 完全支持
Safari	12+	✅ 完全支持
Edge	79+	✅ 完全支持
IE	11	⚠️ 基础支持

移动端支持

平台	版本	状态
iOS Safari	12+	✅ 完全支持
Android Chrome	60+	✅ 完全支持
微信浏览器	最新版	✅ 完全支持
UC浏览器	最新版	✅ 基础支持

📁 文件结构

wp-popup-ads-plugin/
├── wp-popup-ads.php              # 主插件文件
├── includes/                     # 核心功能文件
│   ├── class-wp-popup-ads.php   # 主类文件
│   ├── admin-menu.php           # 后台菜单
│   ├── admin-list.php           # 广告列表页面
│   ├── admin-add.php            # 添加/编辑页面
│   ├── admin-settings.php       # 设置页面
│   ├── admin-stats.php          # 统计页面
│   └── database.php             # 数据库操作
├── assets/                       # 静态资源文件
│   ├── css/
│   │   ├── frontend.css         # 前端样式
│   │   └── admin.css            # 后台样式
│   └── js/
│       ├── frontend.js          # 前端JavaScript
│       └── admin.js             # 后台JavaScript
├── languages/                    # 语言文件
│   ├── wp-popup-ads-zh_CN.po
│   └── wp-popup-ads-zh_CN.mo
├── README.md                     # 英文说明文档
├── README-CHINESE.md             # 中文说明文档
└── changelog.txt                 # 更新日志

🏗️ 开发历程

问题发现与解决

移动端透明度问题

问题描述：PC端透明度效果正常，但手机端不显示透明度效果

解决方案：

• 在 assets/js/frontend.js 中添加移动设备检测
• 实施移动端特殊处理逻辑
• 使用 -webkit-background-color 和 -moz-background-color 确保跨浏览器兼容
• 在 assets/css/frontend.css 中添加移动端透明度特殊支持CSS规则

技术实现：

function isMobile() {
    return /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 
           || window.innerWidth <= 768;
}

// 移动端透明度特殊处理
if (isMobile()) {
    $overlay.attr('data-mobile-transparency', 'true');
    $popup.attr('data-mobile-transparency', 'true');

    // 使用多种CSS属性确保兼容性
    $overlay.css({
        '-webkit-background-color': overlayStyle,
        '-moz-background-color': overlayStyle,
        'background-color': overlayStyle
    });
}

后台页面布局统一问题

问题描述：后台设置页面有版权信息和美观布局，但其他页面样式不统一

解决方案：

• 统一所有后台页面的设计元素
• 添加渐变背景：linear-gradient(135deg, #667eea 0%, #764ba2 100%)
• 整合版本、作者、官网信息显示
• 添加实时统计功能：总弹窗数、已激活数、插件状态

影响文件：

• includes/admin-list.php – 添加统一头部设计和完整CSS样式系统
• includes/admin-add.php – 添加统一头部设计和导航按钮
• includes/admin-stats.php – 完全重构页面结构，美化统计卡片样式

样式设置显示遮挡问题

问题描述：后台插件功能设置里的添加广告处样式设置功能显示不全，有遮挡问题

解决方案：

1. CSS层面修复：

• 修复WordPress postbox容器限制：overflow: visible !important
• 优化样式标签页系统：标签切换、层级结构
• 增强透明度设置专区：开关按钮、滑块、实时预览
• 实现响应式设计支持

1. JavaScript功能增强：

• 添加强制性内联CSS使用 !important 覆盖WordPress默认限制
• 实现透明度滑块实时更新功能
• 添加样式设置标签页系统
• 优化实时预览功能

技术实现：

/* 修复WordPress postbox容器的限制 */
.postbox .inside {
    overflow: visible !important;
    max-height: none !important;
    padding: 15px;
}

/* 透明度组优化 */
.transparency-group {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    overflow: visible;
    position: relative;
    z-index: 6;
}

技术创新点

1. 移动端透明度优化算法

开发了专门的移动端透明度处理机制，确保在各种移动设备和浏览器中都能正确显示透明效果。

2. 智能设备检测系统

实现了多维度的设备检测：

• User-Agent字符串解析
• 屏幕宽度检测
• 触摸事件支持检测

3. 实时预览系统

设计了安全的实时预览机制：

• 使用iframe沙箱技术处理HTML内容
• 实时样式计算和渲染
• 跨浏览器兼容的透明度预览

4. 响应式管理界面

创建了完全响应式的后台管理界面：

• 移动端友好的触摸交互
• 自适应网格布局
• 渐进式功能展示

📄 版权信息

作者信息

• 开发者：狐狸
• 官方网站：https://www.foxden.cn
• 联系邮箱：1816259450@qq.com
• 开发年份：2025

许可证

本插件基于 GPL v2+ 许可证发布。

致谢

感谢所有测试用户的反馈和建议，特别是在移动端兼容性方面的问题报告。

技术支持

• 🌐 官方网站：https://www.foxden.cn
• 📧 技术支持：1816259450@qq.com
• 📚 文档中心：提供详细的使用文档和API参考
• 🔄 更新维护：持续的功能改进和安全更新

---

🎉 总结

WP弹窗广告插件经过精心设计和反复测试，已经成为一个功能完整、性能优秀的WordPress弹窗解决方案。它不仅解决了移动端兼容性问题，还提供了美观统一的管理界面和强大的自定义功能。

核心优势：

• ✅ 移动端完美兼容
• ✅ 统一美观的管理界面
• ✅ 强大的样式自定义功能
• ✅ 智能的触发机制
• ✅ 优秀的安全性和性能
• ✅ 详细的技术文档

适用场景：

• 📧 邮箱订阅收集
• 🎁 优惠券和促销推广
• 📢 重要通知发布
• 🎬 产品演示展示
• 💬 用户反馈收集

立即下载使用，让您的WordPress网站拥有专业级的弹窗功能！

---

🌟 如果这款插件对您有帮助，请给我们一个Star，您的支持是我们持续改进的动力！