WordPress装备页面 插件版带后台

前言

之前写了一个html的 由于本站的主题采用pjax加载的方式，会导致部分css失效。抽空改成了插件

给你的网站添加一个我的设备页面

给你的网站添加一个我的设备页面

演示图这是我参考张洪大佬的博客里的我的设备（https://blog.zhheo.com/equipment/）进行二次修改的一个小代码，分享出来给各位做个参考。代码Html代码CSS代码

• 2024 年 6 月 3 日

核心功能

• 设备管理：添加、编辑、删除和排序设备信息
• 分类功能：为设备分配不同类别，便于组织和筛选
• 响应式设计：完美适配桌面端和移动端设备
• 图片管理：支持从媒体库选择图片或使用外部图片URL
• 自定义按钮：可为每个设备设置不同的按钮文本和链接
• 简码支持：使用 simple_product_showcase 简码在任何页面或文章中嵌入设备展示

演示图

后台

前台

没啥好介绍的 安装插件 新建页面 输入简码即可。

文件结构

奶狗设备展示/
├── index.php              # 主插件文件，包含核心功能和wordpress钩子
├── assets/                # 资源文件目录
│   ├── css/              # CSS样式文件
│   │   ├── admin.css     # 管理后台样式
│   │   └── frontend.css  # 前端展示样式
│   └── js/               # JavaScript脚本文件
│       ├── admin.js      # 管理后台交互脚本
│       └── frontend.js   # 前端交互脚本

安装方法

1. 下载插件压缩包
2. 登录WordPress管理后台
3. 进入"插件" > "安装插件"页面
4. 点击"上传插件"按钮
5. 选择下载的插件压缩包并上传
6. 安装完成后，激活插件

使用方法

添加设备

1. 在WordPress管理后台，点击左侧菜单中的"设备展示"
2. 填写设备信息表单，包括名称、描述、分类、图片等
3. 点击"保存设备"按钮

在页面中显示设备列表

在任何页面或文章中插入以下简码：

simple_product_showcase

管理设备

1. 在WordPress管理后台，点击左侧菜单中的"设备展示"
2. 在设备列表中，可以编辑、删除或拖动排序设备
3. 点击"编辑"按钮修改设备信息
4. 点击"删除"按钮移除设备

技术特点

• 使用WordPress自定义表存储设备数据
• 集成WordPress媒体上传器进行图片管理
• 使用jQuery实现前端交互和后台管理功能
• 响应式设计确保在各种设备上的良好显示效果
• 安全性措施包括nonce验证和数据清理

自定义与扩展

开发者可以通过以下方式自定义插件：

1. 修改CSS文件以调整前端和后台样式
2. 扩展JavaScript文件以添加新的交互功能
3. 在主题中使用过滤器钩子自定义输出

兼容性

• WordPress 5.0+
• PHP 7.0+
• 兼容大多数现代浏览器