WPC-Products Promotion Card

一款轻量级 WordPress 插件，帮助作者在文章/页面中快速插入商品推广卡片，适用于博客带货、产品推荐、 affiliate 推广等场景。

A lightweight WordPress plugin for inserting product promotion cards into posts and pages — ideal for blog commerce, product recommendations, and affiliate content.

功能特性 | Features

• 可视化插入：在文章编辑器中点击「添加商品卡片」，通过弹窗填写信息并一键插入
• 块编辑器 & 经典编辑器：同时支持 Gutenberg 与 Classic Editor
• 短代码渲染：使用 [product_card] 短代码在前台展示卡片
• 响应式布局：自适应手机、平板、桌面；宽屏下自动切换为左图右文
• 安全合规：AJAX 请求含 nonce 校验与权限检查
• 国际化就绪：文案已包裹翻译函数，支持 .mo 语言包

环境要求 | Requirements

演示图

安装 | Installation

方式一：上传 ZIP

1. 将本仓库打包为 ZIP（根目录需包含 wp-product-card.php）
2. 进入 WordPress 后台 → 插件 → 安装插件 → 上传插件
3. 选择 ZIP 并安装，然后启用

方式二：手动部署

1. 克隆或下载本仓库
2. 将整个文件夹复制到 wp-content/plugins/ 目录
3. 在后台 插件 页面启用 WPC-Products Promotion Card

方式三：Git 克隆

git clone https://github.com/zimiyu/WPC-wordpress-products-promotion-card-plugin.git
cd WPC-wordpress-products-promotion-card-plugin
# 复制到 WordPress plugins 目录后启用

使用方法 | Usage

在编辑器中插入

1. 新建或编辑文章/页面
2. 点击编辑器工具栏中的 「添加商品卡片」 按钮
3. 在弹窗中填写：
   • 图片：从媒体库选择
   • 标题：商品名称
   • 商品描述：支持多行文字
   • 价格：如 ¥99 或 $19.99
   • 购买链接：跳转 URL
4. 点击 「插入卡片」，短代码会自动写入编辑器
5. 发布后即可在前台查看

短代码手动编写

[product_card image="https://example.com/product.jpg" title="商品名称" description="商品简介" price="¥99" buy_link="https://example.com/buy"]

通过后台弹窗插入时，换行会自动编码，无需手动处理。

项目结构 | Structure

WPC-wordpress-products-promotion-card-plugin/
├── wp-product-card.php    # 主插件文件
├── css/
│   ├── admin-style.css    # 后台弹窗样式
│   └── wpc-style.css      # 前台卡片样式
├── js/
│   └── wpc-admin-script.js # 后台编辑器交互
├── readme.txt             # WordPress 插件目录格式说明
├── CHANGELOG.md           # 更新日志
├── LICENSE                # GPL-2.0 许可证
└── README.md

开发 | Development

本地调试

1. 将插件目录 symlink 或复制到 WordPress 的 wp-content/plugins/
2. 启用插件
3. 修改 CSS/JS 后刷新页面（静态资源使用 filemtime 作为版本号，开发时自动清缓存）

代码规范

• 输出使用 esc_url()、esc_attr()、esc_html() 转义
• 用户输入使用 sanitize_text_field() / sanitize_textarea_field()
• AJAX 必须校验 nonce 与用户权限

更新日志 | Changelog

详见 CHANGELOG.md。

作者 | Author

• Baadin — http://www.baad.in

许可证 | License

本插件基于 GPL-2.0-or-later 发布，与 WordPress 相同。