WordPress弹窗插件

最后更新：2025-12-13

插件简介

插件名称：wordpress弹窗插件（Aurora Popup）

主要功能：提供一个可视化配置的前端弹窗组件，支持自定义图片、标题、内容、按钮、颜色风格、显示范围以及触发条件，可用于 Cookie 提示、公告弹窗、营销弹窗等。

显示方式：前端通过 JS 在页面底部的 <div id="aurora-popup-root"> 容器中渲染弹窗。

核心特点

  • 可视化后台配置：所有内容和样式在后台界面配置，无需写代码。
  • 多布局样式：支持居中模态、右侧滑入、底部弹出三种布局。
  • 多触发方式：支持页面加载后延迟触发、滚动到指定百分比时触发等。
  • 自定义按钮：除“接受/拒绝”外，可添加任意数量的自定义按钮和链接。
  • 配色灵活：支持背景、标题、内容、按钮、关闭按钮等多处颜色单独设置。
  • 频率控制：支持 Cookie 存储与有效期控制，避免重复打扰用户。

安装与启用

安装方式

方式一：后台上传安装包

  1. 在 WordPress 后台进入 插件 > 安装插件。
  2. 点击页面顶部 上传插件 按钮。
  3. 选择wordpress弹窗插件 ZIP 包，上传并完成安装。
  4. 在 已安装插件 中启用 Aurora Popup。

方式二：FTP/文件管理器上传

  1. 将插件文件夹 aurora-popup 上传到 wp-content/plugins/ 目录。
  2. 进入后台 插件 > 已安装插件，找到 Aurora Popup 并点击 启用。

后台入口位置

  • 启用后，在后台左侧菜单中进入：设置 > Aurora 弹窗
  • 在插件列表中，Aurora Popup 行内也会出现一个快捷的 设置 链接。

总览：后台设置页面结构

顶部操作区

  • 测试弹窗：点击后在后台直接预览当前配置效果。
  • 重置设置：恢复为插件默认配置（请谨慎使用）。
  • 保存设置：保存当前所有配置项。

配置面板选项卡

主配置区域分为四个选项卡：

  • 内容设置：配置弹窗标题、内容、图片和按钮。
  • 显示设置：控制弹窗宽度、布局、显示范围和配色。
  • 触发条件：设置何时显示弹窗，例如加载延迟、滚动触发等。
  • 高级设置：配置关闭逻辑、Cookie 记忆等高级行为。

内容设置

头部图片

  • 头部图片：可粘贴图片 URL 或通过“选择”按钮从媒体库选择图片。
  • 留空时，插件会尝试自动使用媒体库中最新的一张图片作为默认图片。
  • 显示为弹窗顶部横幅，可用于展示产品图、LOGO 或活动图。

标题与内容

  • 弹窗标题：显示在弹窗顶部的大标题，默认为 “我们使用 Cookies” 或欢迎文案。
  • 弹窗内容：
    • 正文说明文本，支持 HTML，可以插入链接、加粗、换行甚至图片等。
    • 可用于放置 Cookie 政策说明、优惠活动文案等。

接受/拒绝按钮

  • 接受按钮文本：例如 “接受”“同意并继续”等。
  • 显示接受按钮开关：可单独控制是否显示接受按钮。
  • 拒绝按钮文本：例如 “拒绝”“暂不接受”等。
  • 显示拒绝按钮开关：可单独控制是否显示拒绝按钮。

自定义按钮

  • 可以添加任意数量的额外按钮，每个按钮包含：
    • 按钮文本：按钮显示文字。
    • 按钮链接：可填写完整 URL（如 https://...）或站内路径（如 /about）。
  • 适用场景：跳转到“隐私政策”“了解更多”“立即购买”等页面。
  • 留空文本的按钮不会保存。
  • 支持删除已有按钮和新增新按钮。

显示设置

范围与布局

弹窗宽度

  • 弹窗宽度：例如 400px 或 80%，用于控制弹窗整体宽度。

布局类型

  • 居中模态（Modal）：弹窗居中显示，背景半透明遮罩，适合重要通知或 Cookie 提示。
  • 右侧滑入（Drawer）：从右侧滑动进入的抽屉式弹窗，适合工具栏、功能引导等。
  • 底部弹出（Bottom Sheet）：自底部弹出的条状弹窗，适合短提示或 Cookie 条。

显示范围

  • 全部：在全站所有页面显示。
  • 首页：仅在网站首页显示。
  • 页面：仅在独立页面（Page）中显示。
  • 文章：仅在文章（Post）中显示。
  • 列表页：归档、分类、标签等列表页面显示。
  • 指定URL：只在特定 URL 或路径中显示。

指定 URL 配置

  • 当“显示范围”选择 指定URL 时，可在文本框中配置：
  • 每行一个 URL 或路径： 
    /about
/zhihu
https://example.com/post/123
  • 支持完整 URL 或路径关键词（可含中文）。前端会根据当前访问地址匹配是否需要显示弹窗。

配色与样式

  • 背景颜色：弹窗背景色。
  • 标题颜色：弹窗标题文字颜色。
  • 内容颜色：正文内容文字颜色。
  • 接受按钮颜色 / 文字颜色：接受按钮背景与文字颜色。
  • 拒绝按钮颜色 / 文字颜色：拒绝按钮背景与文字颜色。
  • 关闭按钮颜色：右上角关闭按钮的颜色。

颜色预设

  • 提供多个预设按钮（预设1~4），一键切换为不同风格（如经典、深色、浅色、暖色）。
  • 可先选择预设，再做细节微调，提高配置效率。

触发条件

页面加载后显示

  • 页面加载后显示：勾选后，页面加载完成后会自动显示弹窗。
  • 延迟显示（秒）：可设置延迟秒数，如 2 秒后再弹出，避免页面刚打开就打扰用户。

滚动触发

  • 滚动触发：勾选后，当用户滚动页面达到一定百分比时再显示弹窗。
  • 滚动百分比：例如填 50，表示用户滚动到页面高度的 50% 时触发。
  • 可结合“延迟显示”与“滚动触发”灵活使用，也可以只开其中一种。

高级设置

关闭行为

  • 显示关闭按钮：控制弹窗右上角“×”关闭按钮是否显示。
  • 禁用背景点击关闭：
    • 开启后，点击弹窗外部灰色背景 不会 关闭弹窗。
    • 适用于必须强制用户阅读并选择的提示（例如必须同意隐私条款）。

Cookie 与频率控制

  • 启用 Cookie：勾选后，会记住用户的操作（如接受/拒绝），避免多次重复显示。
  • Cookie 有效期（天）：设置记忆时长，例如 30 天内不再弹出。
  • 配合前端 storage、frequency 等选项，可灵活控制展示频率及存储方式（localStorage/Cookie）。

预览与测试

后台实时预览

  • 右侧为“实时预览”区域，会根据你的输入实时更新。
  • 可快速查看标题、内容、按钮文本、配色、布局等效果。

测试弹窗按钮

  • 点击顶部的 “测试弹窗” 按钮，可在后台模拟实际弹窗效果。
  • 建议每次调整完毕后点击测试，确认在不同布局与触发条件下的体验。

建议

Cookie / 隐私政策提示

  • 使用居中模态或底部弹出布局。
  • 在 “内容设置” 中写清楚 Cookie 使用说明。
  • 开启“页面加载后显示”，配置 1~3 秒的延迟。
  • 开启 Cookie 记忆，并设置 30 天或更长有效期。

活动/优惠弹窗

  • 可使用右侧滑入布局，头部图片放置活动海报。
  • 添加“了解更多”“立即购买”等自定义按钮，跳转至活动页。
  • 可使用滚动触发，在用户浏览到一定内容后再弹出。

引导/公告弹窗

  • 适合在首页或特定页面展示新功能说明、站内公告等。
  • 通过“显示范围”选择首页或指定 URL，避免影响全站所有页面。

常见问题

1. 为什么前台没有弹窗？

  • 确认插件已启用。
  • 检查“显示范围”是否包含当前访问页面。
  • 检查触发条件：是否设置了过长的延迟或滚动百分比。
  • 如启用了 Cookie，可能之前已经“记住”了用户操作，可清除浏览器 Cookie / 本地存储后再测试。

2. 为什么按钮或颜色修改后效果没变？

  • 修改后务必点击 “保存设置”。
  • 清理浏览器缓存或强制刷新页面后再次查看。
  • 检查是否有其它主题/插件的 CSS 覆盖了样式。

3. 如何只在某几个页面显示弹窗？

  • 在“显示设置 > 显示范围”中选择 “指定URL”。
  • 在下面的文本框中按行写入 URL 或路径关键词（支持中文）。
  • 保存设置后，仅匹配到这些 URL 的访问会显示弹窗。

4. 如何关闭拒绝按钮？

  • 在“内容设置”中，将“拒绝按钮”的开关关闭即可，只保留接受按钮。