如何在WordPress中添加图片WhatsApp分享、下载及复制到剪贴板功能

有两种适配不同技术基础的实现路径，按需选择即可：

方案一：插件快速实现（无代码基础适用） #

• 安装WordPress区块编辑器拓展类插件，给默认图片区块新增自定义操作按钮组配置项
• 下载功能：搭配文件下载管理类插件，给每张图片绑定独立下载链接，设置点击后直接触发浏览器下载，避免跳转打开图片
• WhatsApp分享功能：配置按钮跳转协议为whatsapp://send?text=分享内容+图片链接，点击后可直接唤起设备本地WhatsApp应用
• 剪贴板复制功能：安装轻量剪贴板插件，给复制按钮绑定预设要复制的文案/链接，点击后自动触发复制并弹出成功提示

方案二：自定义代码实现（有开发能力适用，性能更高、自定义度更强） #

• 先给WordPress图片附件扩展自定义字段，上传图片时自动生成对应下载直链、预设分享文案等参数
• 前端渲染图片时，在img标签下方插入三个按钮的DOM结构，样式可自行适配站点主题
• 剪贴板功能引入轻量无依赖的clipboard.js库实现，示例代码如下：

// 初始化剪贴板实例
const clipboard = new ClipboardJS('.copy-btn');
// 复制成功回调
clipboard.on('success', function(e) {
    alert('内容已复制到剪贴板');
    e.clearSelection();
});

• 下载按钮直接给a标签加download原生属性即可触发浏览器下载：<a href="图片直链" class="download-btn" download>下载图片</a>
• WhatsApp分享按钮构造固定协议链接即可，移动端自动唤起APP，PC端跳转网页版：<a href="https://api.whatsapp.com/send?text=预设分享文案+图片链接" target="_blank" rel="nofollow noreferrer" class="whatsapp-btn">WhatsApp分享</a>
• 可以将整套功能封装为WordPress短代码，后续发内容时只需插入短代码即可自动生成带三个按钮的图片模块，无需重复配置

批量改造历史文章需求可以用the_content钩子，匹配文章内容里的所有img标签，自动在每个图片后追加按钮组HTML，无需逐篇修改历史内容

内容的提问来源于stack exchange，提问作者Gyan