WordPress装备页面 插件版带后台

前言

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

核心功能

  • 设备管理:添加、编辑、删除和排序设备信息
  • 分类功能:为设备分配不同类别,便于组织和筛选
  • 响应式设计:完美适配桌面端和移动端设备
  • 图片管理:支持从媒体库选择图片或使用外部图片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+
  • 兼容大多数现代浏览器

下载地址

镇平萤火珠宝 公众号二维码
关注 镇平萤火珠宝 回复 id1273 获取密码
文章导航
  • 关于微信公众号账号迁移说明
  • 下一篇关于微信公众号账号迁移说明