文章
649
标签
2112
分类
180
开发
大前端
人工智能
小程序
桌面应用
游戏开发
服务器&网络
服务器
网络
归档
标签
友链
联系我们
仰观苍穹思环宇
开发
大前端
人工智能
小程序
桌面应用
游戏开发
服务器&网络
服务器
网络
归档
标签
友链
联系我们
打造可自定义排序的WordPress社交图标插件:支持图标、二维码弹窗与动态添加功能(两个版本)
发表于
2025-06-04
|
更新于
2026-09-12
|
大前端
您好, 这里需要密码.
WordPress社交图标插件
动态添加社交媒体链接
拖拽排序功能
二维码弹窗功能
拖动排序
sort
上一篇
打造现代感十足的响应式信息展示卡片组件:适配桌面与移动端的网页布局设计(左图右文布局,左图右文+描述布局)
下一篇
现代网页设计中方格布局(格子布局grid)的玻璃态鼠标悬浮效果实现:从视觉美学到交互体验的全面解析
鸢尾花序
文章
649
标签
2112
分类
180
联系我们
目录
1.
引言：
2.
✅ HTML 代码
3.
🎨 CSS 代码
4.
💡小技巧（可选增强）：
4.1.
✅ 更新需求实现内容：
4.2.
✅ 更新后的 HTML + CSS 代码：
4.3.
📝 说明：
4.4.
✅ 改进重点：
5.
🧩 新版 HTML + CSS 代码
6.
📝 提示与建议：
7.
🔥 版本特性：
8.
✅ HTML + CSS
9.
✅ 说明与后续建议：
10.
🧩 目标：
11.
✅ 一、点击弹出浮层版本（HTML + JS）
11.1.
✅ HTML 示例结构（用于 WordPress 输出）：
11.2.
✅ CSS 样式补充：
11.3.
✅ JavaScript (建议放入页面底部)：
12.
✅ 二、WordPress Shortcode 函数（可放入 functions.php）
13.
✅ 使用方法：
14.
✅ 还需要我帮你：
15.
🧩 插件功能概述
16.
📁 插件文件结构
17.
📄 主插件文件：baggio-social-icons.php
18.
🧩 短代码功能：includes/shortcode.php
19.
⚙️ 后台设置页面：admin/settings-page.php
20.
🎨 样式文件：assets/css/style.css
21.
🧠 脚本文件：assets/js/script.js
21.1.
✅ 完整内容：assets/js/script.js
21.2.
✨ 可选添加动画效果（在 CSS 中）
21.3.
🔄 自动清除二维码内容（可选优化）
21.4.
✅ 修改后的完整 assets/js/script.js 文件如下：
21.5.
✅ 解决方案：改为 type="text" 并手动验证（或允许空链接）
21.6.
🧩 修改字段设置部分（在 baggio-social-media.php 里）
21.7.
✨ 添加自定义 sanitize 回调（防止非法注入）
21.8.
✅ 这样可以实现：
22.
✅ 一、后台填写方式（示例说明）
23.
✅ 二、修改插件代码（后端保存与渲染部分）
23.1.
1. 将图标字段允许输入完整 HTML 字符串
23.2.
2. 链接字段放宽限制，支持 #
23.3.
3. 前台渲染部分（shortcode callback）
24.
✅ 三、最终效果支持
25.
✅ 第一部分：完善 admin/settings-page.php 后台设置美化及图片预览
26.
✅ 第二部分：调整 includes/shortcode.php（支持自定义 icon HTML）
27.
✅ 第三部分：修改链接字段规则（允许 #）
28.
✅ 第四部分（可选）：后台样式美化
29.
✅ 最终前台输出结构预览（和你一致）：
30.
✅ 下一步建议（可选）
31.
✅ 插件结构（压缩包结构）
32.
✅ 下载方式
32.1.
步骤 1：创建目录
32.2.
步骤 2：将我整理好的完整文件内容复制粘贴进去：
32.3.
🔹 文件 baggio-social-icons.php
32.4.
🔹 文件 includes/shortcode.php
32.5.
🔹 文件 admin/settings-page.php
32.6.
🔹 文件 admin/settings-page.php
32.7.
🔹 文件 admin/css/admin-style.css
32.8.
🔹 文件 assets/css/style.css
32.9.
🔹 文件 assets/js/script.js
33.
🧰 最后步骤
34.
1. 主文件 baggio-social-icons.php
35.
2. includes/shortcode.php （读取顺序输出）
36.
3. admin/settings-page.php
37.
4. assets/css/style.css
38.
5. assets/js/script.js
39.
6. 注意点：
39.1.
✅ 请将你的 assets/js/script.js 更新为如下内容：
39.2.
✅ 解决步骤
39.2.1.
✅ 1. 检查所有 PHP 文件开头和结尾
39.2.2.
🔍 文件检查重点：
39.3.
✅ 2. 检查是否有调试信息或 echo、var_dump()
39.4.
✅ 3. 清除缓存并重新上传
39.5.
✅ 4. 开发技巧建议
39.6.
🧰 如果你方便，可以把你当前的 baggio-social-icons.php 的完整内容贴出来，我可以逐行排查是否有异常输出。
39.7.
📁 assets/js/admin-script.js
39.8.
📁 assets/css/admin-style.css
39.9.
📁 includes/shortcode.php
39.10.
✅ 注意事项：
40.
✅ 改进目标：
41.
✏️ 修改方式（补充内容）
41.1.
🔧 1. 设置页面结构：增加排序容器
41.2.
🎯 2. JavaScript 拖拽逻辑整合进原有 JS (assets/js/script.js)
41.3.
💡 3. 样式增强（可选）
42.
✅ 总结功能：
42.1.
✅ 第一步：baggio-social-icons.php
42.2.
✅ admin/settings-page.php
42.3.
assets/js/admin-script.js
42.4.
说明：
43.
1. admin/css/admin-style.css
44.
2. admin/settings-page.php
44.1.
你可以检查：
44.2.
如果你需要，我可以帮你完整把这个短代码文件重新写一遍，包含弹窗 HTML，JS 触发用法，和安全的输出方法，方便你直接替换。
44.3.
说明
44.4.
你的 shortcode.php 代码里是这样写的：
44.5.
解决方案步骤：
44.6.
额外给你一个确认用的前端调试建议：
44.7.
总结：
44.8.
可能导致微信二维码点击无效的原因分析：
44.9.
具体建议及修改代码：
44.9.1.
1. 在 includes/shortcode.php 里为带二维码的按钮，强制添加 type="button" 和 cursor:pointer，避免无点击响应
44.9.2.
2. 改写 assets/js/script.js，改为事件代理绑定，确保动态或任何情况下点击事件都能触发
44.9.3.
3. 确认 CSS 里 .baggio-modal-overlay 样式没问题（可以增加基础样式，确保模态框可见且覆盖全屏）
44.10.
总结
44.11.
说明
最新文章
Hexo静态博客添加联系表单:用Google Apps Script实现邮件直达
2026-09-17
白手起家没有资源的人如何通过资源整合一步步突破认知并打通合作路径的完整分析
2026-09-15
独立站定位四步法服务谁、解决什么、凭什么是你、怎么赚钱——WordPress独立站从模糊定位到清晰战略的完整框架
2026-09-15
Duplicator全量迁移WordPress后HTTPS挂了正确做法是只换wp-content并在duplicator部署网站的时候1Panel里把数据库host填成mysql而不是localhost
2026-09-15
多设备Hexo安装Butterfly主题里面博客search.xml过大导致GitHub推送失败的完整解决方案(含交互式清理脚本)
2026-09-14
告别逐个转换用md2pdf一键批量把Markdown变成PDF
2026-09-14
Hexo+Butterfly主题search.xml过大导致GitHub推送失败之完整排查与解决SOP
2026-09-14
用Python批量给Hexo文章自动补齐TDK：DeepSeek驱动、严格YAML、动态备份的完整实践
2026-09-12
