前言
之前写了一个html的 由于本站的主题采用pjax加载的方式,会导致部分css失效。抽空改成了插件
核心功能
- 设备管理:添加、编辑、删除和排序设备信息
- 分类功能:为设备分配不同类别,便于组织和筛选
- 响应式设计:完美适配桌面端和移动端设备
- 图片管理:支持从媒体库选择图片或使用外部图片URL
- 自定义按钮:可为每个设备设置不同的按钮文本和链接
- 简码支持:使用 simple_product_showcase 简码在任何页面或文章中嵌入设备展示
演示图
后台

前台

没啥好介绍的 安装插件 新建页面 输入简码即可。
文件结构
奶狗设备展示/
├── index.php # 主插件文件,包含核心功能和wordpress钩子
├── assets/ # 资源文件目录
│ ├── css/ # CSS样式文件
│ │ ├── admin.css # 管理后台样式
│ │ └── frontend.css # 前端展示样式
│ └── js/ # JavaScript脚本文件
│ ├── admin.js # 管理后台交互脚本
│ └── frontend.js # 前端交互脚本
安装方法
- 下载插件压缩包
- 登录WordPress管理后台
- 进入"插件" > "安装插件"页面
- 点击"上传插件"按钮
- 选择下载的插件压缩包并上传
- 安装完成后,激活插件
使用方法
添加设备
- 在WordPress管理后台,点击左侧菜单中的"设备展示"
- 填写设备信息表单,包括名称、描述、分类、图片等
- 点击"保存设备"按钮
在页面中显示设备列表
在任何页面或文章中插入以下简码:
simple_product_showcase
管理设备
- 在WordPress管理后台,点击左侧菜单中的"设备展示"
- 在设备列表中,可以编辑、删除或拖动排序设备
- 点击"编辑"按钮修改设备信息
- 点击"删除"按钮移除设备
技术特点
- 使用WordPress自定义表存储设备数据
- 集成WordPress媒体上传器进行图片管理
- 使用jQuery实现前端交互和后台管理功能
- 响应式设计确保在各种设备上的良好显示效果
- 安全性措施包括nonce验证和数据清理
自定义与扩展
开发者可以通过以下方式自定义插件:
- 修改CSS文件以调整前端和后台样式
- 扩展JavaScript文件以添加新的交互功能
- 在主题中使用过滤器钩子自定义输出
兼容性
- WordPress 5.0+
- PHP 7.0+
- 兼容大多数现代浏览器
下载地址

关注 镇平萤火珠宝 回复 id1273 获取密码