我用 AI 做了两个 WordPress 插件 —— 好物/应用分享页

作为小白，我一直很羡慕各位大佬制作的好物分享页面。之前我也有尝试使用 WordPress 的古腾堡编辑器手搓好物页和应用页，但添加新的内容会变得十分麻烦，以至于我几乎没有更新过页面。于是，我用 AI 制作了两个 WordPress 插件，实现了好物和应用分享页面的搭建，并且操作非常简单，适合小白用户。

目录
  1. 效果展示
  2. 项目地址
  3. 使用方法
  4. 注意事项
  5. AI 对话记录

效果展示

https://veryjack.com/goods
https://veryjack.com/apps

项目地址

好物分享页 WordPress 插件

https://github.com/very-jack/wp_goods_exhibition

应用分享页 WordPress 插件

https://github.com/very-jack/wp_apps_exhibition

使用方法

两个插件的使用方法相似，均是先在 github releases 页面下载 zip 文件，在 WordPress 中安装插件，最后在后台页面添加信息即可，以好物分享页为例，具体步骤如下：

  1. 下载插件；
  2. 在 WordPress 后台 – 插件 – 添加插件 – 选择下载的 zip 文件进行安装；
  3. 在 WordPress 后台 – 好物页面 选项 – 添加新产品 – 填入产品名称、产品描述、跳转链接（可不填）、产品图片即可；
  4. 创建一个页面或者新的文章，在文中输入段代码即可调用该分享页面。

注意事项

如果需要调整颜色等样式，需要自行下载插件后解压，修改 .css 文件。

AI 对话记录

应网友的建议，在此补充对 AI 提问的部分内容，或许能帮助同样想让 AI 制作小工具的朋友们：

我想制作一个 wordpress 插件，能够在页面中优雅地展示产品，如上传图所示，具体要求如下：
**设计方面**：
1. 效果要如上传图那样简洁美观，有点苹果地设计风格；
2. 每一行只展示两个产品，每个产品包含图片、名称和描述；
3. 对于更新日期不超过1个月的产品，会有一个 new 的标签；
4. 设计上一定要保持对齐，图片大小一致等符合基本设计要求
5. 需要完美适配电脑和手机；

**使用方面**：
1. 通过短链接 [goods_exhibition_page] 来调用该页面；
2. 在后台有添加和管理产品的页面，能够上传图片、填写名称、描述等信息；
3. 插件名为“好物页面插件”
如图，这是目前的效果，有几个需要调整的地方：
1. 产品卡片太大了，请缩小一些，请参考第二张图片的效果；
2. 因为我上传的图片都是没有背景的，所以我想图片显示区域的背景和文字部分背景的颜色一致，这样更加简洁，风格更加统一
还需要做调整：
1. 页面没有居中显示：
2. 卡片还是太大了，特别是宽度，请更窄一些
3. 添加一个点击开片跳转到指定网页的功能，这个跳转的网址也是在后台处填写，如果没填写网址，则不会跳转。
1. 当一个产品有超链接时，在该卡片上会有一个跳转的图标，但该图标和 new 标签重叠了，请做调整;
2. 当鼠标指向没有超链接的卡片时，鼠标样式也会发生变化，这很不合理，请做调整；
链接图标和new标签重叠的问题依然存在，现在的情况是：当鼠标不指向该卡片时，链接图标和new标签重叠；当鼠标指向该卡片时，new标签会向左移动一点，和链接图标错开位置。
请帮我调整为：
1. 将链接图标移至卡片最右下角的地方；
2. 鼠标指向该卡片时，new标签不要移动。

......

以上是最初几段对话，此后就是关于样式细节的微调，参考价值不大了，就省去了。

全程使用 Claude 3.7 和 Gemini 2.5 Pro 实现。

支持
标签

相关文章

25 评论

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注