子比主题推广小工具：功能解析与使用指南

在 WordPress 生态中，主题推广往往需要简洁高效的展示工具。今天为大家介绍一款专为子比主题设计的推广插件 ——「子比主题推广小工具」，该插件支持多图幻灯片展示、设备精准控制，能帮助站长快速搭建主题推广模块，提升转化效率。

展示效果图：

后台：

1. 灵活的后台设置面板

（1）基础配置：定义推广核心信息

• 标题与副标题：设置推广模块的主标题（默认 “子比主题”）和副标题（默认 “一款优雅的主题”），用于突出主题名称和定位；
• 标题图标：支持配置 FontAwesome 图标类名（默认 “fa-free-code-camp”），图标将显示在标题旁，增强视觉吸引力（可参考FontAwesome 图标库选择图标）。

（2）幻灯片设置：打造动态图片展示

• 启用幻灯片模式：默认关闭，开启后可将多张图片以幻灯片形式轮播展示；
• 自动播放控制：开启幻灯片后可选择是否自动播放（默认开启），并设置播放间隔（2-6 秒可选）；
• 图片管理：支持上传多张幻灯片图片（默认提供 3 张子比主题示例图），可通过 “添加”“移除” 按钮灵活管理图片列表，适配不同推广场景（如主题截图、功能展示等）。

（3）特性设置：突出主题核心优势

• 特性 1：图标 “fa-check-square-o”，文本 “安装 wordpress 及主题服务一次”；
• 特性 2：图标 “fa-check-square-o”，文本 “一次购买终身免费提供主题更新服务”；
• 特性 3：图标 “fa-check-square-o”，文本 “强大的人工服务，为你解决主题问题”。

（4）价格与按钮：引导转化动作

• 价格信息：可设置当前价格（默认 “559”）、原价（默认 “799”）和特惠标签（默认 “特别特惠”），通过价格对比突出优惠力度；
• 转化按钮：自定义按钮文字（默认 “立即购买”）和跳转链接（默认子比主题购买页），直接引导用户完成购买动作。

2. 智能设备显示控制

• 勾选后，小工具仅在手机、平板等移动设备上展示，PC 端自动隐藏；
• 未勾选时，全设备可见。

3. 多场景小工具调用

1. 进入 WordPress 后台 “外观→小工具”；
2. 找到 “子比主题推广小工具”，添加到目标区域（如 “侧边栏”“移动端专用区域”）；
3. 按需勾选 “只在手机端显示”，保存即可生效。

4. 自适应幻灯片交互

• 自动轮播：开启自动播放后，图片将按设置间隔自动切换，鼠标悬停时暂停，离开后恢复；
• 手动控制：支持通过左右箭头按钮切换图片，或点击底部圆点直接跳转到指定图片；
• 响应式适配：自动根据容器宽度调整图片高度，确保在不同设备上显示比例协调；
• 平滑过渡：图片切换时使用 0.5 秒平滑动画，提升视觉体验。

技术实现亮点

1. 资源加载优化：前端 CSS 仅在小工具渲染时加载（通过wp_enqueue_style），避免全局加载占用资源；JavaScript 仅在启用幻灯片时加载，且通过唯一 ID 避免重复加载，提升页面性能。
2. 安全机制：使用esc_attr()、esc_url()、esc_html()等函数对用户输入和输出内容进行过滤，防止 XSS 攻击；通过defined( 'ABSPATH' )阻止直接访问插件文件，增强安全性。
3. 兼容性设计：基于 WordPress 标准钩子（如wp_enqueue_scripts、widgets_init）开发，兼容多数主题和插件；依赖 CSF 框架构建后台，界面风格统一且适配 WordPress 后台操作逻辑。
4. 动态适配：通过 JavaScript 监听窗口大小变化，自动调整幻灯片容器高度，确保图片显示比例协调，适配从手机到 PC 的各种屏幕尺寸。

使用流程示例

1. 安装插件：插件-添加插件-上传安装-启用
2. 配置推广信息：进入后台 “子比推广设置”，依次设置标题、幻灯片图片、特性介绍、价格与按钮链接；
3. 添加小工具：在 “外观→小工具” 中，将 “子比主题推广小工具” 添加到目标区域，按需勾选 “只在手机端显示”；
4. 前端预览：访问网站前端，查看推广模块展示效果，根据需要调整配置细节。

总结