子比主题 - 侧边广告卡片小工具

一、核心功能：高度自定义的广告配置

1. 视觉元素自定义：可上传或填写广告图片地址，支持自定义图片下方标题，适配不同广告内容的视觉表达；
2. 交互与跳转配置：设置广告点击后的跳转链接（默认值为#），支持外部链接与站内链接，适配推广、引流等场景；
3. 标签与标识管理：通过 “逗号分隔” 输入多组标签（如 “AD, 腾讯云”），自动生成标签栏，方便用户快速识别广告属性；
4. 联系信息嵌入：支持填写 QQ 号，结合前端 “复制 QQ” 功能，为广告添加即时沟通入口，提升转化效率。

二、关键优化：摆脱默认限制，提升展示效果

• 移除默认外层容器：通过清空$args['before_widget']和$args['after_widget']，删除 WordPress 小工具默认的zib-widget widget_zb_side_ad_widget外层 div，避免主题默认样式冲突，让广告卡片更贴合侧边栏布局；
• 样式增强与适配：前端渲染时加入 inline CSS 优化，如图片 “最大宽度 100%+ 高度自适应” 确保不溢出，标题 “自动换行 + 行高 1.4” 提升可读性，标签栏 “横向滚动” 避免多标签换行混乱；
• 细节差异化设计：对 “AD” 标签单独设置渐变背景（#ff5473 到 #fb6bea），与普通标签区分，强化广告标识的视觉辨识度；
• 容错与默认值处理：后台设置时为所有参数（图片、链接、标题等）配置默认值，避免因未填写导致的前端展示异常，同时通过esc_attr sanitize_text_field等函数保障数据安全。

三、使用亮点：兼顾体验与实用性

1. QQ 快速复制功能：通过data-clipboard-text属性实现 QQ 号一键复制，搭配 tooltip 提示 “复制 QQ”，减少用户手动输入成本，提升联系效率；
2. 自适应布局：从图片容器 “width:100%” 到标签栏 “overflow-x:auto”，全模块适配不同屏幕宽度的侧边栏，在移动端与 PC 端均能保持整洁展示。

四、实现代码